/* ==========================================================================
   Homepage 2026 — hero "De aansluiting" (kolommenbalans) + roadmap
   Alleen geladen door templates/home/home.html, ná home.css en ná
   fenofin-2026.css. Dáár staan de tokens, de knop, het rubrieklabel en het
   Claude Desktop-venster; hier staat alleen wat van deze pagina alleen is:
   de hero-indeling, de saldibalans-namaak, de roadmap en de overrides op de
   componenten die home.css met negen andere templates deelt.
   ========================================================================== */


/* ---------- Het resultaat: de echte saldibalans, op volle breedte ----------
   Op volle breedte staat de schermafbeelding vrijwel 1:1 → scherp en leesbaar.
   Onder 760px komt via <picture> een ingezoomde uitsnede (twee rubrieken,
   ingekorte goot) die op een telefoon w&eacute;l te lezen is. */
.ff-resultaat {
    max-width: 1280px;
    margin: 3.25rem auto 0;
    /* 300ms, niet 800: op een scherm van 900-1100px staat 150-340px van deze
       figuur boven de vouw, en die stond dan bijna een seconde leeg. */
    animation: ff-fade-in var(--ff-dur-in) var(--ff-ease) 300ms both;
}

.ff-resultaat-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--ff-rule);
    padding-top: 0.7rem;
    margin-bottom: 1rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ff-ink-60);
}

/* Het voorbeeldlabel. Een publieke pagina met een compleet uitgewerkte
   administratie en AI-opmerkingen mag niet voor echte klantdata doorgaan. */
.ff-resultaat-voorbeeld {
    margin-left: 0.6rem;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--ff-rule);
    border-radius: var(--ff-r-1);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ff-ink-40);
}

/* Het opschrift naast een schakelaar is nu een <label for>, dus klikbaar. */
.ff-sb-setlabel {
    cursor: pointer;
}

.ff-resultaat-meta {
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--ff-ink-40);
}

/* ==========================================================================
   Namaak van de saldibalans uit /boekhouding — als demonstratie bedienbaar.
   Alle basiswaarden komen 1-op-1 uit static/css/boekhouden/boekhouden.css en
   static/css/boekhouden/dashboard_vergelijking.css, zodat de homepage laat
   zien wat de gebruiker in de applicatie werkelijk ziet. HTML in plaats van
   een schermafbeelding: vectorscherp op elk scherm en het herschikt zichzelf.

   Kolommen worden hier aan- en uitgezet, niet in JavaScript. De template
   rendert alle varianten (Debet/Credit, Saldo, Beginbalans); de tabs en de
   weergave-instellingen zetten alleen `data-tab` / `data-weergave` op .ff-sb.
   Daardoor hoeft het script nooit een bedrag te herschrijven en bestaat er
   maar één formatteerpad — dat van Python.
   ========================================================================== */
/* Rijkleuren als variabele, want de plakkende controle-kolom op mobiel moet
   exact dezelfde kleur krijgen als de rij eronder. Eén waarde overtypen en de
   kolom hangt er als los blok naast — precies wat er eerst gebeurde.
   `--sb-rij` is de ondoorzichtige versie van de lichtblauwe tint uit het
   dashboard (rgba(200,230,255,.1) over wit); doorzichtig kan niet, want dan
   scrollen de bedragen eronderdoor zichtbaar mee. */
.ff-sb {
    --sb-kop: #f8f9fa;
    --sb-rij: #fafdff;
    --sb-groep: #f1f3f5;
    --sb-sub: #fff;
    --sb-totaal: #f8f9fa;
    --sb-thread: #fffdf5;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.175);      /* Bootstrap .card */
    border-radius: 0.375rem;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;           /* base.html body */
    color: #000;
    text-align: left;
}

/* --- Kaartkop --- */
.ff-sb-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 1rem;                          /* .card-header */
    background: rgba(33, 37, 41, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.ff-sb-titel {
    margin: 0;
    font-size: 1.25rem;                            /* Bootstrap h5 */
    font-weight: 500;
    line-height: 1.2;
    color: #212529;
}

.ff-sb-titel small {
    font-size: 0.875em;
    font-weight: 400;
    color: rgba(33, 37, 41, 0.75);                 /* .text-muted */
}

.ff-sb-kop-rechts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* De basis van de vergelijking. De applicatie berekent deze zin wel maar toont
   hem niet; zonder die regel leest vier maanden tegen een heel jaar als een
   omzetinstorting. */
.ff-sb-vergelijking {
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #6c757d;
}

.ff-sb-knoppen {
    display: inline-flex;
}

.ff-sb-btn {                                       /* .btn-sm.btn-outline-success */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #198754;
    border: 1px solid #198754;
    background: transparent;
}

.ff-sb-btn:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
    border-right-width: 0;
}

.ff-sb-btn:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
}

/* --- Tabbalk --- */
.ff-sb-tabs {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 1rem 0;
    background: #fff;
}

.ff-sb-tab {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    color: #6c757d;
    background: none;
    border: 0;
    border-bottom: 2px solid #dee2e6;
    flex: 0 0 auto;
    cursor: pointer;
}

.ff-sb-tab--actief {
    color: #e84e7e;
    font-weight: 500;
    background: #fff;
    border: 1px solid #dee2e6;
    border-bottom: 2px solid #e84e7e;
    border-radius: 0.375rem 0.375rem 0 0;
}

.ff-sb-tab:focus-visible,
.ff-sb-note:focus-visible,
.ff-sb-instellingen:focus-visible,
.ff-sb-scroll:focus-visible {
    outline: 2px solid var(--ff-magenta);
    outline-offset: -2px;
}

/* --- Weergave-instellingen ---
   Een <details>, zodat het paneel ook zonder JavaScript open- en dichtklapt. */
.ff-sb-instellingen-wrap {
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    background: #fafbfc;
}

.ff-sb-instellingen {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: rgba(33, 37, 41, 0.75);
    cursor: pointer;
    list-style: none;
}

.ff-sb-instellingen::-webkit-details-marker {
    display: none;
}

.ff-sb-instellingen i {
    font-size: 0.8em;
}

.ff-sb-chevron {
    transition: transform var(--ff-dur-hover) var(--ff-ease);
}

.ff-sb-instellingen-wrap[open] .ff-sb-chevron {
    transform: rotate(90deg);
}

/* Het paneel zelf: één-op-één de opmaak van
   static/css/boekhouden/dashboard_vergelijking.css (settings-grid,
   toggle-switch, radio-pills). Die stylesheets laadt de publieke site niet, dus
   de waarden staan hier — met dezelfde grijzen (#f8f9fa/#e9ecef/#ced4da/
   #6c757d/#343a40), radius .25rem en de merkroze schakelaar #e84e7e. */
.ff-sb-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding: 0.25rem 1rem 0.85rem;
}

.ff-sb-setgroep {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}

.ff-sb-setkop {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ff-sb-setkop--sub {
    margin-top: 0.75rem;
    font-size: 0.72rem;
}

/* Wat aan "toon vorig boekjaar" hangt, dooft mee als die uit staat — zoals
   updateDependentControls() in de applicatie doet. De JS zet ook `disabled`,
   zodat het niet alleen visueel is. */
.ff-sb[data-vorig="uit"] [data-depends-on="ff-sb-vorig"] {
    opacity: 0.5;
}

.ff-sb-settoggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.ff-sb-setlabel {
    font-size: 0.875rem;
    color: #343a40;
}

.ff-sb-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
    flex-shrink: 0;
}

.ff-sb-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ff-sb-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #ced4da;
    transition: background-color 0.3s;
    border-radius: 22px;
}

.ff-sb-slider::before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: transform 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ff-sb-switch input:checked + .ff-sb-slider {
    background-color: #e84e7e;
}

.ff-sb-switch input:checked + .ff-sb-slider::before {
    transform: translateX(22px);
}

.ff-sb-switch input:disabled + .ff-sb-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.ff-sb-switch input:focus-visible + .ff-sb-slider {
    outline: 2px solid var(--ff-magenta);
    outline-offset: 2px;
}

.ff-sb-pillen {
    display: flex;
    gap: 0.25rem;
    background: #e9ecef;
    padding: 3px;
    border-radius: 0.25rem;
}

.ff-sb-pil {
    flex: 1;
    text-align: center;
}

.ff-sb-pil input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ff-sb-pil label {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    background: transparent;
    border-radius: calc(0.25rem - 2px);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.ff-sb-pil input:checked + label {
    background: #fff;
    color: #343a40;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ff-sb-pil input:focus-visible + label {
    outline: 2px solid var(--ff-magenta);
    outline-offset: 1px;
}

/* --- De tabel ---
   Horizontaal een eigen scrollvlak (acht kolommen passen niet op een telefoon),
   verticaal NOOIT. Tot 22-09-2026 was dit een scrollcontainer van 509px hoog met
   2.450px inhoud: een muiswiel boven de tabel scrolde eerst vier schermen tabel
   en pas daarna de pagina, en op een telefoon ving hij tweederde van het scherm.

   `overflow-y: hidden` staat er expliciet. Met alleen `overflow-x: auto`
   computeert `overflow-y` van `visible` naar `auto`, en dan is het element
   verticaal tóch een scrollcontainer (plus, bij subpixel-afronding, de oude
   spookbalk van één pixel). `hidden` vangt geen wiel en geen vinger: die gaan
   door naar de pagina.

   Zonder JavaScript staat de hele tabel er. Met JavaScript zet het script
   `data-hoogte="ingeklapt"` op de kaart: dan knipt `max-height` de tabel af en
   staat de knop "Toon de volledige saldibalans" eronder. `max-height` en niet
   `height`, zodat een tab met weinig regels geen leeg vlak achterlaat — de
   spookbalk waarvoor hier vroeger een vaste hoogte stond, kan zonder verticale
   scrollbalk niet meer ontstaan. */
.ff-sb-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
}

/* Ruim genoeg dat onder de open opmerking bij Machines en installaties nog een
   paar grootboekregels staan, anders lijkt de tabel uit één opmerking te bestaan. */
.ff-sb[data-hoogte="ingeklapt"] .ff-sb-scroll {
    max-height: min(64vh, 33rem);
}

/* De knop onder de tabel. Binnen de kaart, dus in de applicatielook: dezelfde
   kop-kleur en rand als de kolomkop, geen 2026-knop. */
.ff-sb-meer {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-top: 1px solid #dee2e6;
    background: var(--sb-kop);
    color: #495057;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

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

.ff-sb-meer:hover {
    color: #e84e7e;
}

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

.ff-sb-meer i {
    font-size: 0.7rem;
    transition: transform var(--ff-dur-hover) var(--ff-ease);
}

.ff-sb-meer[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* `separate` in plaats van `collapse`: bij `collapse` verliest een sticky
   <th> in Chrome en Safari zijn randen en zweeft de kop zonder onderlijn over
   de regels heen. De randen komen daarom uit box-shadow en van de cellen. */
.ff-sb-tabel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

.ff-sb-tabel th,
.ff-sb-tabel td {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    vertical-align: middle;
    background: transparent;
}

.ff-sb-tabel thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    color: #495057;
    background: var(--sb-kop);
    box-shadow: inset 0 -2px 0 #dee2e6;
}

.ff-sb-tabel td {
    color: #000;
}

/* De kop volgt de uitlijning van zijn kolom. Zonder deze twee wint de
   `text-align: left` van `thead th` (specificiteit 0,1,2) van `.ff-sb-end` en
   `.ff-sb-mid` (0,1,0), en staat elke kop links — ook boven een rechts
   uitgelijnde bedragkolom en boven de gecentreerde vinkjes. */
.ff-sb-tabel thead th.ff-sb-end {
    text-align: right;
}

.ff-sb-tabel thead th.ff-sb-mid {
    text-align: center;
}

/* De slack van de zeven verborgen kolommen hoort in Omschrijving, niet in de
   laatste kolom. Bij auto-layout krimpt al het andere naar zijn min-content en
   vult deze kolom de rest — zonder dit las de restbreedte als een lege witte
   kolom rechts naast Controle. */
.ff-sb-c-oms {
    width: 100%;
}

.ff-sb-end {
    text-align: right;
    white-space: nowrap;
}

.ff-sb-mid {
    text-align: center;
}

/* Datarij: de lichtblauwe balanstint uit het dashboard */
.ff-sb-rij td {
    background: var(--sb-rij);
    border-bottom: 1px solid #e9ecef;
}

.ff-sb-rij td:first-child {
    padding-left: 1.5rem;                          /* .in-hoofdgroep */
}

/* Groepsband */
.ff-sb-groep td {
    background: var(--sb-groep);
    font-weight: 600;
    color: #495057;
    border-top: 1px solid #dee2e6;
}

.ff-sb-groepnaam {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ff-sb-groepnaam > i {
    color: #6c757d;
    font-size: 0.75rem;
}

.ff-sb-badge {
    font-size: 0.7rem;
    font-weight: 500;
    background: #6c757d;
    color: #fff;
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    line-height: 1;
}

/* Subtotaalrij */
.ff-sb-sub td {
    border-top: 1px solid #dee2e6;
    font-weight: 500;
    font-style: italic;
    color: #000;
}

.ff-sb-sub td:first-child {
    padding-left: 1.5rem;
}

.ff-sb-nul em {
    color: rgba(33, 37, 41, 0.75);
}

/* Totaalregel — de eerste aansluiting die een boekhouder narekent. */
.ff-sb-totaal td {
    position: sticky;
    bottom: 0;
    background: var(--sb-totaal);
    font-weight: 600;
    box-shadow: inset 0 2px 0 #dee2e6;
}

.ff-sb-toelichting {
    font-weight: 400;
    color: rgba(33, 37, 41, 0.75);
}

/* --- Welke kolommen zichtbaar zijn ---------------------------------------
   De template rendert álle varianten: Debet/Credit, Saldo, dezelfde twee voor
   vorig jaar, de twee verschilkolommen en de beginbalans. Hier wordt bepaald
   welke er meedoen. Zo hoeft de JavaScript nooit een bedrag te verplaatsen.

   Iedere toon-regel draagt `:not([data-tab="begin"])`. Dat is geen sierletsel:
   de beginbalans-tab toont uitsluitend de beginstanden, en zonder die uitsluiting
   zou een specifiekere regel (vorig jaar heeft twee attributen) er dwars
   doorheen winnen. Zo blijft het bij één mechanisme in plaats van een
   specificiteitsgevecht — en zonder `!important`. */
.ff-sb-c-saldo,
.ff-sb-c-vdc,
.ff-sb-c-vsaldo,
.ff-sb-c-verschil,
.ff-sb-c-pct,
.ff-sb-c-bb {
    display: none;
}

/* Huidig jaar: Debet/Credit of Saldo. */
.ff-sb[data-weergave="saldo"] .ff-sb-c-dc {
    display: none;
}

.ff-sb:not([data-tab="begin"])[data-weergave="saldo"] .ff-sb-c-saldo {
    display: table-cell;
}

/* Vorig jaar, in dezelfde twee smaken. */
.ff-sb:not([data-tab="begin"])[data-vorig="aan"][data-weergave-vorig="dc"] .ff-sb-c-vdc,
.ff-sb:not([data-tab="begin"])[data-vorig="aan"][data-weergave-vorig="saldo"] .ff-sb-c-vsaldo {
    display: table-cell;
}

/* De verschilkolommen hangen aan het vergelijkingsjaar: zonder vorig jaar valt
   er niets te vergelijken. */
.ff-sb:not([data-tab="begin"])[data-vorig="aan"][data-verschil-bedrag="aan"] .ff-sb-c-verschil,
.ff-sb:not([data-tab="begin"])[data-vorig="aan"][data-verschil-pct="aan"] .ff-sb-c-pct {
    display: table-cell;
}

/* Beginbalans-tab: alleen de openingsstanden. */
.ff-sb[data-tab="begin"] .ff-sb-c-dc {
    display: none;
}

.ff-sb[data-tab="begin"] .ff-sb-c-bb {
    display: table-cell;
}

.ff-sb[data-controle="uit"] .ff-sb-c-controle {
    display: none;
}

/* Verschilkleuren, letterlijk uit dashboard_vergelijking.css:306-328. Alleen de
   verschilkolommen kleuren; saldo's blijven zwart. Let op dat het euroverschil
   tekenneutraal is en het percentage debet/credit-bewust — op een omzetregel
   kunnen die twee dus tegengesteld kleuren. Dat is bestaand gedrag van de
   applicatie en geen fout om glad te strijken. */
.verschil-positive {
    color: #198754;
    font-weight: 500;
}

.verschil-negative {
    color: #dc3545;
    font-weight: 500;
}

.verschil-neutral {
    color: #6c757d;
}

.verschil-info {
    color: #6c757d;
    font-style: italic;
}

/* --- Welke regels zichtbaar zijn ----------------------------------------- */
.ff-sb[data-tab="balans"] [data-blok="wv"],
.ff-sb[data-tab="begin"] [data-blok="wv"],
.ff-sb[data-tab="wv"] [data-blok="balans"] {
    display: none;
}

/* De twee groepsindelingen staan in dezelfde tbody; hier valt de helft weg die
   niet aan de beurt is. De datarijen ertussen zijn gedeeld. */
.ff-sb[data-groepering="jr"] [data-indeling="fiscaal"],
.ff-sb[data-groepering="fiscaal"] [data-indeling="jr"] {
    display: none;
}

.ff-sb[data-filter="notities"] tbody tr:not([data-notitie]) {
    display: none;
}

/* Met het filter aan slaat de tabel regels over, dus telt de totaalregel niet
   meer op met wat je ziet. Dan liever geen totaal dan een misleidend totaal. */
.ff-sb[data-filter="notities"] tfoot {
    display: none;
}

.ff-sb-totaal {
    display: none;
}

.ff-sb[data-tab="alle"] [data-totaal="alle"],
.ff-sb[data-tab="begin"] [data-totaal="alle"],
.ff-sb[data-tab="balans"] [data-totaal="balans"],
.ff-sb[data-tab="wv"] [data-totaal="wv"] {
    display: table-row;
}

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

/* --- De controle-kolom: hier schrijft de agent in de saldibalans ---------
   Vorm overgenomen uit templates/boekhouding/boekhouding_dashboard.html:
   een vinkje voor 'gecontroleerd' en een notitieknop met een telbadge. */
.ff-sb-c-controle {
    white-space: nowrap;
}

/* De colspan="12" van banden en threads dwingt een 13e kolom af: verborgen
   kolommen (display: none) tellen niet mee, dus de datarijen eindigen in
   kolom 6 terwijl deze lege controle-cel in kolom 13 belandt. Zonder padding
   is die fantoomkolom 0px breed en verft elke rij tot aan de tabelrand —
   mét padding was hij 24px en las hij als een lege witte kolom naast
   Controle. De cel zelf blijft bestaan voor de plakkende kolom op mobiel. */
.ff-sb-groep .ff-sb-c-controle,
.ff-sb-thread .ff-sb-c-controle {
    padding: 0;
}

/* Vaste celindeling: vinkje links, een vast slot voor de notitieknop rechts —
   óók op rijen zonder notitie. Voorheen centreerde de cel zijn variabele
   inhoud, waardoor de zes vinkjes met een notitieknop ~11px naar links
   schoven ten opzichte van de andere vierentwintig. */
.ff-sb-controlecel {
    display: inline-grid;
    grid-template-columns: auto 1.25rem;
    align-items: center;
    gap: 0.35rem;
}

.ff-sb-vraagfilter {
    padding: 0;
    margin-left: 0.25rem;
    border: 0;
    background: none;
    color: #6c757d;
    font-size: 0.85rem;
    cursor: pointer;
}

.ff-sb-vraagfilter[aria-pressed="true"] {
    color: var(--ff-magenta);
}

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

.ff-sb-vink {
    vertical-align: middle;
    accent-color: #198754;
    cursor: pointer;
}

.ff-sb-note {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    color: #0d6efd;
    font-size: 0.9rem;
    cursor: pointer;
}

.ff-sb-note--aan {
    color: var(--ff-tie);
}

.ff-sb-note--vraag {
    color: #b8860b;
}

.ff-sb-notebadge {
    position: absolute;
    top: -0.45em;
    right: -0.6em;
    min-width: 1.15em;
    padding: 0.1em 0.35em;
    border-radius: 1em;
    background: #0d6efd;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1.2;
}

.ff-sb-notebadge--vraag {
    background: #ffc107;
    color: #212529;
}

/* --- De toolregels als knop: de brug naar de saldibalans -----------------
   Elke tool die opmerkingen opleverde is aanklikbaar. De knop leeft in het
   donkere Claude-venster, dus de vormgeving is wit-op-donker; hij mag niet als
   knop schreeuwen, want de regel moet een toolregel blijven. */
[data-ff-demo] .ff-toolknop {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

[data-ff-demo] .ff-toolknop:hover,
[data-ff-demo] .ff-toolknop:focus-visible {
    color: #fff;
}

[data-ff-demo] .ff-toolknop:focus-visible {
    outline: 2px solid var(--ff-magenta);
    outline-offset: 3px;
    border-radius: 2px;
}

[data-ff-demo] .ff-toolknop.is-actief {
    color: #fff;
}

.ff-toolbadge {
    margin-left: 0.4rem;
    min-width: 1.3em;
    padding: 0.1em 0.4em;
    border-radius: 1em;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

.ff-toolbadge--vraag {
    background: #ffc107;
    color: #212529;
}

/* --- De berichtenthread onder de post ------------------------------------
   Een uitklaprij, geen dialoogvenster: geen focusval, juiste leesvolgorde, en
   het bericht staat in context bij de post waar het over gaat. */
.ff-sb-thread td {
    padding: 0;
    background: var(--sb-thread);
    border-bottom: 1px solid #e9ecef;
}

.ff-sb-bericht {
    padding: 0.7rem 1.5rem;
    border-left: 3px solid var(--ff-magenta);
}

.ff-sb-bericht-kop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
}

.ff-sb-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15em 0.45em;
    border-radius: 0.25rem;
    background: #212529;
    color: #fff;
    font-weight: 500;
}

.ff-sb-van {
    font-weight: 600;
    color: #212529;
}

.ff-sb-tijd {
    color: #6c757d;
}

.ff-sb-tool {
    font-family: var(--ff-mono);
    color: #6c757d;
}

.ff-sb-open {
    padding: 0.15em 0.45em;
    border-radius: 0.25rem;
    background: #ffc107;
    color: #212529;
    font-weight: 500;
}

.ff-sb-bericht-tekst {
    margin: 0;
    max-width: 68ch;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #212529;
}

/* --- De composer als verzendbalk ----------------------------------------
   De demo begint niet vanzelf: de bezoeker verstuurt de opdracht en wordt
   daarna meegenomen naar wat de agent schreef. Zonder JavaScript blijft de
   knop `hidden` en toont de balk zijn gewone placeholder.

   Het veld is een wrappende flexregel: de opdracht neemt de volle breedte, de
   knoppenrij en de actiegroep (microfoon + verzendknop) delen de regel eronder.
   Zo kan de knop de tekst niet meer overlappen — dat kon toen hij nog
   `position: absolute` in de rechterbovenhoek stond — en zakt de actiegroep op
   een smal scherm als geheel naar een eigen regel, in plaats van dat de
   microfoon er in zijn eentje onder valt. */
[data-ff-demo] .ff-composer-veld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.55rem;
}

[data-ff-demo] .ff-composer-plh {
    flex: 0 0 100%;
    margin-bottom: 0;
}

[data-ff-demo] .ff-composer-rij {
    flex: 1 1 auto;
    min-width: 0;
    /* Ook boven 600px: tussen 992 en ~1100px is de paneelkolom net zo krap als
       op een telefoon. */
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

/* `margin-left: auto` houdt de groep rechts — naast de knoppenrij én als hij
   alleen op een eigen regel staat. */
[data-ff-demo] .ff-composer-acties {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.ff-composer-plh.is-opdracht {
    color: rgba(255, 255, 255, 0.92);
}

.ff-verzend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 0;
    border-radius: var(--ff-r-1);
    background: var(--ff-magenta);
    color: #fff;
    font-family: var(--ff-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--ff-dur-hover) var(--ff-ease);
}

.ff-verzend:hover:not(:disabled) {
    background: var(--ff-magenta-ink);
}

.ff-verzend:disabled {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

.ff-verzend:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Het gesprek vóór het versturen. `display: none` en niet `visibility`, zodat
   het venster ook echt klein is: een ongestuurd gesprek in Claude Desktop is
   een lege balk met een composer, geen halfleeg zwart vlak. Bij het versturen
   groeit het venster in één keer mee — dat is precies wat een chat doet. */
html.ff-demo-anim [data-ff-demo] .ff-msg.is-weg {
    display: none;
}

/* --- Toegankelijkheid ----------------------------------------------------
   De notitieknoppen staan tijdens de sequentie op opacity 0 maar blijven in de
   tabvolgorde. Zonder deze regel verdwijnt de focusindicator volledig
   (WCAG 2.4.7). */
html.ff-demo-anim .ff-sb-note:focus-visible {
    opacity: 1;
    transform: none;
}

/* Bij beweging-uit bestaat `ff-demo-anim` niet, en daarmee ook de
   oplicht-markering niet. Een klik op een toolregel gaf dan geen enkele
   terugkoppeling; deze kleur staat daarom buiten die guard. */
.ff-sb-rij.is-raak td {
    background: #fff6d6;
}

/* --- Mobiel --------------------------------------------------------------
   Drie ingrepen, alle drie in de browser nagemeten op 558px breed. */
@media (max-width: 700px) {
    /* 1. De kolom die de boodschap draagt viel als eerste buiten beeld
          (rechterrand 575 tegen een vak van 528). Vastzetten aan de rechterrand
          werkt omdat de tabel `border-collapse: separate` gebruikt; met
          `collapse` verliest een sticky cel zijn randen. */
    .ff-sb-c-controle {
        position: sticky;
        right: 0;
        border-left: 1px solid #e9ecef;
        box-shadow: -4px 0 4px -4px rgba(0, 0, 0, 0.12);
    }

    /* Elke rijsoort geeft zijn eigen kleur door, uit dezelfde variabele als de
       rij zelf. Zo is de kolom geen los vlak maar het rechteruiteinde van de rij. */
    .ff-sb-tabel thead .ff-sb-c-controle {
        background: var(--sb-kop);
    }

    .ff-sb-rij .ff-sb-c-controle {
        background: var(--sb-rij);
    }

    .ff-sb-sub .ff-sb-c-controle {
        background: var(--sb-sub);
    }

    .ff-sb-totaal .ff-sb-c-controle {
        background: var(--sb-totaal);
    }

    .ff-sb-groep .ff-sb-c-controle {
        background: var(--sb-groep);
    }

    .ff-sb-thread .ff-sb-c-controle {
        background: var(--sb-thread);
    }

    /* 2. De threadcel spant de volle tabelbreedte, dus de belangrijkste tekst
          op de pagina liep 23px buiten beeld. Meeschuiven met de linkerrand. */
    .ff-sb-bericht {
        position: sticky;
        left: 0;
        width: min(100%, calc(100vw - 2.5rem));
        padding: 0.5rem 0.75rem;
    }

    .ff-sb-bericht-tekst {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .ff-sb-bericht-kop {
        font-size: 0.66rem;
        margin-bottom: 0.2rem;
    }

    /* 3. Met de compacte opmerking (183 -> 125px) en een hoger vak blijven er
          vier grootboekregels naast staan in plaats van twee. */
    .ff-sb[data-hoogte="ingeklapt"] .ff-sb-scroll {
        max-height: min(66svh, 28rem);
    }
}

/* Het instellingenpaneel volgt de applicatie
   (dashboard_vergelijking.css:391-418). */
@media (max-width: 992px) {
    .ff-sb-settings {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ff-sb-pillen {
        flex-direction: column;
    }

    .ff-sb-pil label {
        padding: 0.5rem;
    }
}

/* --- De afspeelsequentie -------------------------------------------------
   Alleen achter html.ff-demo-anim, dus alleen met JavaScript én zonder
   prefers-reduced-motion. Onthullen gebeurt met opacity, nooit met display of
   hidden: de opmaak en de toegankelijkheidsboom staan vanaf de eerste paint
   in de eindstand, en de animatie is daarmee letterlijk versiering.

   De zes toolregels van deze pagina krijgen hun vertraging uit --i. De
   nth-child-reeks in fenofin-2026.css dekt er maar drie en wordt gedeeld met
   de propositiepagina's; die blijft daarom ongemoeid. */
[data-ff-demo] .ff-msg--tools li {
    animation-delay: calc(330ms + var(--i, 0) * 120ms);
}

html.ff-demo-anim .ff-sb-note {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 260ms var(--ff-ease), transform 260ms var(--ff-ease);
}

html.ff-demo-anim .ff-sb-note.is-in {
    opacity: 1;
    transform: none;
}

html.ff-demo-anim .ff-sb-rij.is-raak td {
    transition: background 420ms var(--ff-ease);
}

/* --- Telefoon: kolom Grootboek valt weg, de controle-kolom blijft --------
   De controle-kolom is de boodschap; het grootboeknummer is dat niet. */
@media (max-width: 700px) {
    .ff-sb-col-nr {
        display: none;
    }
    .ff-sb-tabel th,
    .ff-sb-tabel td {
        padding: 0.45rem 0.55rem;
        font-size: 0.78rem;
    }
    .ff-sb-rij td:first-child,
    .ff-sb-sub td:first-child {
        padding-left: 0.9rem;
    }
    .ff-sb-titel {
        font-size: 1rem;
    }
    .ff-sb-titel small {
        display: block;
    }
    .ff-sb-tab {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    .ff-sb-instellingen {
        font-size: 0.78rem;
    }
    .ff-sb-settings {
        gap: 1rem;
    }
}

/* --- Het venster met de uitnodiging eronder ---------------------------------
   Venster en uitnodiging vormen samen één blok dat, net als in fenofin-2026.css,
   verticaal gecentreerd naast de tekst staat. Daarvoor wordt het paneel een
   kolom: `justify-content: center` centreert dan verticaal en `align-items:
   stretch` houdt het venster op volle breedte. Een tijdlang stonden venster en
   tekst bovenaan (zodat de tekst niet meeschoof als het venster bij het versturen
   groeit); op verzoek weer gecentreerd, zoals de hero altijd stond. */
[data-ff-demo] .ff-hero-paneel {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.ff-demo-uitnodiging {
    margin: 1rem 0 0;
    font-family: var(--ff-mono);
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--ff-ink-60);
}

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

.ff-demo-uitnodiging strong {
    font-weight: 500;
    color: var(--ff-ink);
}

/* Het venster zelf staat stil via fenofin-2026.css; hier alleen de twee
   animaties die van deze pagina zijn. */
@media (prefers-reduced-motion: reduce) {
    .ff-hero-tekst,
    .ff-resultaat {
        animation: none;
    }
}


/* De rubriekregel boven de twee dienstblokken nam de plaats in van een losse
   divider met een roze gradientstreepje; hij draagt ook het navbar-anker. */
.ff-rubriek--dienst {
    margin-bottom: 3rem;
}


/* ==========================================================================
   Werkt met — de AI-omgevingen onder de saldibalans
   Tot 22-09-2026 een lopende band (tool-marquee in home.css) met een eigen
   breedte van 1050px en een gradientmasker. Met vier namen past de rij stil
   naast elkaar; hij deelt de maat van de hero en de saldibalans erboven, zodat
   de linkerranden onder elkaar staan. De lijst komt uit home/ai_clients.py.
   ========================================================================== */
.ff-werkt-met {
    padding: 2.5rem 1.5rem 0.5rem;
}

/* `center`, niet `baseline`: het mono-label is kleiner dan de namen en stond op
   hun basislijn zichtbaar lager dan de logo's ernaast. */
.ff-werkt-met-rij {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem 2.5rem;
    border-top: 1px solid var(--ff-rule);
    padding-top: 0.75rem;
}

.ff-werkt-met-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--ff-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ff-ink-60);
    text-decoration: none;
    transition: color var(--ff-dur-hover) var(--ff-ease);
}

.ff-werkt-met-label i {
    font-size: 0.65rem;
    color: var(--ff-magenta);
}

.ff-werkt-met-label:hover {
    color: var(--ff-ink);
}

.ff-werkt-met-label:focus-visible {
    outline: 2px solid var(--ff-magenta);
    outline-offset: 2px;
}

.ff-werkt-met-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-werkt-met-lijst li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ff-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ff-ink);
    white-space: nowrap;
}

.ff-werkt-met-logo {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: currentColor;
}

@media (max-width: 576px) {
    .ff-werkt-met-lijst {
        gap: 0.6rem 1.5rem;
    }

    .ff-werkt-met-lijst li {
        font-size: 0.88rem;
    }
}

/* Merknaam in de sectiekop in het merkroze, net als de hero-kop.
   Zelfde afweging: op koptekstformaat geldt de AA-drempel van 3:1 en die haalt
   #E84E7E, dus hier mag het volle merkroze in plaats van de donkere variant. */
html:root .section-header h2 em {
    font-style: normal;
    color: var(--ff-magenta);
}


/* ==========================================================================
   Voor wie — drie ingangen direct onder de hero
   Tot 22-09-2026 kaarten met afgesneden schermafdrukken onderaan de
   dienstensectie. Nu drie kolommen tekst met een haarlijn als goot, zoals de
   hero: de doelgroepkeuze hoort vooraan en heeft geen plaatje nodig. Zelfde
   maat als de strook "Werkt met" erboven, zodat de linkerranden gelijk staan.
   ========================================================================== */
.ff-ingangen {
    padding: 3.5rem 1.5rem 1rem;
}

.ff-ingangen-binnen {
    max-width: 1280px;
    margin: 0 auto;
}

.ff-ingangen-lijst {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-ingangen-lijst > li {
    display: flex;
}

.ff-ingangen-lijst > li + li {
    border-left: 1px solid var(--ff-rule-soft);
}

.ff-ingang {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0;
    text-decoration: none;
    color: inherit;
}

.ff-ingangen-lijst > li + li .ff-ingang {
    padding-left: 2.25rem;
}

.ff-ingang-kop {
    font-family: var(--ff-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ff-ink);
    transition: color var(--ff-dur-hover) var(--ff-ease);
}

.ff-ingang-tekst {
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #3d434c;
}

/* De link staat onderaan elke kolom, zodat de drie op één lijn eindigen. */
.ff-ingang-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ff-magenta-ink);
}

.ff-ingang-link i {
    font-size: 0.75rem;
    transition: transform var(--ff-dur-hover) var(--ff-ease);
}

.ff-ingang:hover .ff-ingang-kop {
    color: var(--ff-magenta-ink);
}

.ff-ingang:hover .ff-ingang-link i {
    transform: translateX(3px);
}

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

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

    .ff-ingangen-lijst > li + li {
        border-left: none;
        border-top: 1px solid var(--ff-rule-soft);
    }

    .ff-ingang,
    .ff-ingangen-lijst > li + li .ff-ingang {
        padding: 1.25rem 0;
    }
}


/* ==========================================================================
   Wat de agent kan — de capability-index onder 'Waarom FenoFin'
   Een compact raster in plaats van een carrousel: per domein de naam, het
   aantal tools en één regel uitleg, plus een totaalvak dat sluit op de
   allowlist. Eerst een tabel met voorbeeld-toolnamen; die nam met tien rijen van
   drie regels te veel hoogte in (22-09-2026, op verzoek). Vakken met een
   haarlijn erboven, zoals de vertrouwensfeiten; de getallen in mono met gelijke
   cijferbreedte, zoals een kolom bedragen.
   ========================================================================== */
.ff-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
    row-gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-index-vak {
    border-top: 1px solid var(--ff-rule);
    padding-top: 0.7rem;
}

.ff-index-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.ff-index-naam {
    min-width: 0;
    font-family: var(--ff-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ff-ink);
}

.ff-index-aantal,
.ff-index-totaal {
    flex-shrink: 0;
    font-family: var(--ff-mono);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ff-ink);
}

.ff-index-oms {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-body, 'Poppins', sans-serif);
    font-size: 0.88rem;
    line-height: 1.5;
    color: #3d434c;
}

/* Het totaal: de telling sluit, dus een dubbele haarlijn erboven, zoals onder
   een optelling. Op drie kolommen staat het in de laatste kolom van de laatste
   rij, rechts onder de optelling. */
.ff-index-vak--totaal {
    grid-column: -2;
    border-top: 3px double var(--ff-rule);
}

.ff-index-vak--totaal .ff-index-naam {
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ff-ink-60);
}

.ff-index-totaal {
    font-weight: 600;
}

.ff-index-vak--totaal .ff-index-oms {
    font-family: var(--ff-mono);
    font-size: 0.74rem;
    color: var(--ff-ink-60);
}

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

/* Op een telefoon een lijst als in een grootboek: domein en aantal, zonder de
   uitlegregel. Met die regel was de index op 390px bijna 1000px hoog. */
@media (max-width: 575.98px) {
    .ff-index {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .ff-index-vak {
        border-top-color: var(--ff-rule-soft);
        padding: 0.7rem 0;
    }

    .ff-index-vak:not(.ff-index-vak--totaal) .ff-index-oms {
        display: none;
    }

    .ff-index-vak--totaal {
        grid-column: auto;
        border-top: 3px double var(--ff-rule);
    }
}


/* ==========================================================================
   Waarom FenoFin — de kop met het tool-raster eronder
   Hier stond tot 22-09-2026 een raster met zes vertrouwenskaartjes, en het
   tool-raster had een eigen blok erboven. Twee rasters kort na elkaar lazen
   eentonig; op verzoek staan de tools nu onder deze kop, direct vóór
   'Zo werkt de FenoFin Connector'.
   ========================================================================== */
.ff-waarom {
    padding: 4.5rem 0 4.5rem;
}

/* De dienstensectie erboven kreeg uit home.css een achtergrondverloop naar
   #f1f5f9 en 8rem onderruimte. Met "Waarom FenoFin" er direct onder gaf dat
   een zichtbare naad en een gat van ruim 200px; de taal kent geen gradients. */
html:root #services {
    background: none;
    padding: 4.5rem 0 1rem;
}


/* ==========================================================================
   Verdieping — hoe de connector werkt, met de uitleg in de kennisbank
   Eén blok in plaats van drie plekken met dezelfde links. Linkregels volgens het
   patroon uit de skill: de tekst in een <span> die mag krimpen, het icoon vast.
   ========================================================================== */
.ff-verdieping {
    padding: 1rem 0 2rem;
}

.ff-verdieping-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.ff-verdieping-grid--media {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
}

.ff-verdieping-titel {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ff-ink);
    margin: 0.5rem 0 1.25rem;
}

.ff-verdieping-titel em {
    font-style: normal;
    color: var(--ff-magenta);
}

.ff-verdieping-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ff-verdieping-regel {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--ff-rule-soft);
    text-decoration: none;
}

.ff-verdieping-lijst li:last-child .ff-verdieping-regel {
    border-bottom: 1px solid var(--ff-rule-soft);
}

.ff-verdieping-regel span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--ff-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ff-ink);
    transition: color var(--ff-dur-hover) var(--ff-ease);
}

.ff-verdieping-regel i {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--ff-magenta-ink);
}

.ff-verdieping-regel:hover span {
    color: var(--ff-magenta-ink);
}

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

.ff-verdieping-media {
    padding-top: 0.5rem;
}

.ff-verdieping-media .connector-showcase-video {
    border: 1px solid var(--ff-rule-soft);
}


/* ==========================================================================
   Eén goot voor de hele pagina
   De hero en de saldibalans staan op 1280px met de zijmarge van de hero
   (fenofin-2026.css: 1.5rem, onder 992px 1.25rem, onder 576px 0.75rem). De
   secties in een Bootstrap-.container stonden op 1296px, en tussen 576 en
   1400px op nog weer andere breedtes: per kant 8px of meer verschil, onder
   elkaar precies de twee linkerranden die rommelig lezen. Hier volgen alle
   secties de hero. Alleen binnen #main-content: navbar en footer houden hun
   eigen container.
   ========================================================================== */
#main-content .container {
    max-width: calc(1280px + 3rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 991px) {
    #main-content .container {
        max-width: none;
    }

    #main-content .container,
    .ff-werkt-met,
    .ff-ingangen {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    #main-content .container,
    .ff-werkt-met,
    .ff-ingangen {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

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