/* De paginatitel komt van het thema en staat buiten onze eigen HTML. Op de
   landingspagina's is die 30 pixels met 16 eronder; op een gewone pagina valt
   hij terug op 45 zonder marge. Deze regels trekken dat gelijk, gericht op
   pagina's met de marktshortcode.

   Het kruimelpad hoort boven de titel, maar onze shortcode staat eronder in de
   HTML. Titel, kruimelpad en inhoud zijn broers binnen dezelfde wrapper, dus
   een kolomrichting plus een order van min een zet het kruimelpad bovenaan
   zonder dat er iets in de DOM verplaatst hoeft te worden. Geen sprong bij het
   laden, en zonder JavaScript werkt het net zo goed. */
/* Dezelfde zijruimte als de rest van de site. De Bricks-container geeft
   overal 20 pixels links en rechts (geen mediaquery, dus ook op een telefoon);
   de wrapper van een gewone pagina heeft die niet, waardoor de inhoud tegen de
   schermrand plakte. De kruimelbalk blijft over de volle breedte lopen: de
   content-box blijft symmetrisch gecentreerd, dus de berekening klopt nog. */
body.frp-markt-pagina :has(> .frp-markt-kruimel) {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}
body.frp-markt-pagina .frp-markt-kruimel { order: -1; }

body.frp-markt-pagina h1 {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 16px;
}

body.frp-markt-pagina .frp-markt-kruimel { margin: 0 0 34px; }

/* Komt het kruimelpad uit de Bricks-sectie, dan draagt die sectie zijn eigen
   binnenruimte en achtergrond. De balk trekken we over de volle schermbreedte,
   net als op de landingspagina's, met een in JavaScript gemeten breedte. Zonder
   die variabele blijft hij netjes binnen de kolom, dus er gaat niets stuk als
   het scriptje niet draait. */
body.frp-markt-pagina .frp-markt-kruimel.is-bricks {
    width: var(--frp-vw, 100%);
    max-width: var(--frp-vw, 100%);
    margin-left: calc(50% - var(--frp-vw, 100%) / 2);
    margin-right: calc(50% - var(--frp-vw, 100%) / 2);
    margin-bottom: 24px;
}

.frp-markt-kruimel .frp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@media (max-width: 620px) {
    body.frp-markt-pagina h1 { font-size: 26px; }
    body.frp-markt-pagina .frp-markt-kruimel { margin-bottom: 22px; }
}

/*
 * Marktstatistiek - opmaak van de pagina en de grafieken.
 *
 * Palet: de drie reekskleuren zijn getoetst met de dataviz-validator tegen de
 * cremekleurige ondergrond van de site (#f9f5f1) en tegen de donkere variant
 * (#2a1f13). Lichtheidsband, chroma, kleurenblindheidsafstand, normale afstand
 * en contrast staan alle vijf op geslaagd, in beide standen.
 *
 * De donkere stappen zijn gekozen voor de donkere ondergrond, niet automatisch
 * omgedraaid.
 */

.frp-markt {
    /* Ondergrond en inkt */
    --frp-vlak:      #f9f5f1;
    --frp-inkt:      #2a1f13;
    --frp-inkt-2:    #5a422a;
    --frp-inkt-3:    #8a7862;
    --frp-raster:    #e7ded4;
    --frp-rand:      #e0d5c8;
    --frp-tegel:     #ffffff;

    /* Reekskleuren (lichte stand) */
    --frp-serie-1:   #a32c00;
    --frp-serie-2:   #2681d0;
    --frp-serie-3:   #12855f;
    --frp-stil:      #cfc2b3;

    /* Ordinale ramp: prijsklassen hebben een volgorde, dus die hoor je in de
       kleur terug te zien. Een hue, oplopende donkerte, lichtste stap ruim
       boven de contrastvloer tegen de ondergrond. */
    --frp-ordinaal-1: #e2916a;
    --frp-ordinaal-2: #cc6b3a;
    --frp-ordinaal-3: #b04618;
    --frp-ordinaal-4: #872300;

    --frp-goed:      #0ca30c;
    --frp-slecht:    #d03b3b;
    --frp-invoer-vlak: #fff;

    /* Sterkere curves dan de ingebouwde: die missen de tik die een beweging
       bedoeld laat lijken. Nooit ease-in op iets dat binnenkomt, want dat
       begint traag precies op het moment dat de bezoeker kijkt. */
    --frp-uit:    cubic-bezier(.23, 1, .32, 1);
    --frp-heenweer: cubic-bezier(.77, 0, .175, 1);

    color-scheme: light;
    font-size: 16px;
    line-height: 1.55;
    color: var(--frp-inkt);

    /* Meetpunt voor de containerbreekpunten verderop. Het blok staat op de ene
       plek in een smalle kolom en op de andere over de volle pagina; de
       vensterbreedte zegt daar niets over. */
    container-type: inline-size;
    container-name: frp-markt;
}

/* Donkere modus alleen als het thema er expliciet om vraagt. Bewust NIET op
   prefers-color-scheme: deze site rendert altijd op een cremekleurige
   ondergrond, dus de systeemvoorkeur van de bezoeker zegt hier niets. Wie de
   donkere stand wil, zet data-theme="dark" op de html of de klasse
   is-donker op de wrapper. */
:root[data-theme="dark"] .frp-markt,
.frp-markt.is-donker {
    --frp-vlak:    #2a1f13;
    --frp-inkt:    #f7f1ea;
    --frp-inkt-2:  #d9cbba;
    --frp-inkt-3:  #a89684;
    --frp-raster:  #40331f;
    --frp-rand:    #4a3c27;
    --frp-tegel:   #38291a;

    --frp-serie-1: #d95926;
    --frp-serie-2: #3987e5;
    --frp-serie-3: #199e70;
    --frp-stil:    #6b5942;
    --frp-invoer-vlak: #3a2c1c;

    --frp-ordinaal-1: #8f3a14;
    --frp-ordinaal-2: #b5501f;
    --frp-ordinaal-3: #d4713d;
    --frp-ordinaal-4: #eb9c6e;

    color-scheme: dark;
}

/* ------------------------------------------------------------------ Secties */

.frp-markt-sectie { margin: 0 0 3em; }
.frp-markt-kop    { font-size: 1.45em; margin: 0 0 .3em; letter-spacing: -.01em; }
.frp-markt-subkop { font-size: 1em; margin: 1.4em 0 .5em; color: var(--frp-inkt-2); }
.frp-markt-duiding{ margin: 0 0 1.2em; color: var(--frp-inkt-2); max-width: 62ch; }
.frp-markt-datum  { font-size: .82em; color: var(--frp-inkt-3); margin: .8em 0 0; }

/* ------------------------------------------------------- Hero en kerncijfers */

.frp-hero {
    padding: 0 0 .5em;
    margin-bottom: 2.75em;
}

.frp-hero-stempel {
    display: inline-flex;
    align-items: baseline;
    gap: .5em;
    margin: 0 0 1em;
    padding: .4em .9em .4em .75em;
    border: 1px solid var(--frp-rand);
    border-radius: 999px;
    background: var(--frp-vlak);
    font-size: .78em;
    letter-spacing: .01em;
    color: var(--frp-inkt-3);
}

.frp-hero-stip {
    width: 7px;
    height: 7px;
    transform: translateY(-1px);
    border-radius: 50%;
    background: var(--frp-goed);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--frp-goed) 20%, transparent);
    flex: 0 0 auto;
}

/* Duidelijk kleiner dan de H1 erboven: die draagt de pagina, deze zet de
   sectie op. */
.frp-hero-kop {
    font-size: 1.25em;
    line-height: 1.3;
    letter-spacing: -.01em;
    font-weight: 600;
    margin: 0 0 .85em;
    color: var(--frp-inkt);
    max-width: 26ch;
}

/* Het bedrag en de uitleg staan op een lijn op een breed scherm, en onder
   elkaar zodra dat knelt. Het getal is de kop van dit blok, de zin eronder
   vertelt wat het betekent. */
.frp-hero-antwoord {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35em 1.1em;
    max-width: 58ch;
}

.frp-hero-getal {
    font-size: clamp(1.75em, 5.5vw, 2em);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--frp-serie-1);
    white-space: nowrap;
}

.frp-hero-tekst {
    font-size: .98em;
    line-height: 1.5;
    color: var(--frp-inkt-2);
    flex: 1 1 20ch;
}
.frp-hero-tekst strong { color: var(--frp-inkt); font-weight: 600; }

/* Naast elkaar houdt de zin op een telefoon nog geen dertig tekens per regel
   over, en dan valt hij in vier smalle stroken naast het bedrag. Onder elkaar
   krijgt allebei de volle breedte. */
@media (max-width: 480px) {
    .frp-hero-antwoord {
        flex-direction: column;
        align-items: flex-start;
        gap: .5em;
    }
    .frp-hero-tekst { flex: 1 1 auto; }
}

/* GEMETEN 01-09-2026 op de woningpagina van Vastgoedhulp: de rij stond als
   flexbox met een gap van 1 pixel in de stijl, maar het thema zet zijn eigen
   gap van 16 pixels op elke flexcontainer. De scheidingslijnen van een pixel
   vielen daardoor niet in de voeg maar zweefden los in de ruimte, en de vijf
   tegels lazen als losse stroken in plaats van een geheel.

   Vandaar de omkering: geen omhulsel met haarlijnen meer, maar echte tegels met
   een eigen rand en een gap die we zelf zetten. Het aantal tegels komt als
   modifier mee uit PHP, zodat de laatste rij gesloten kan worden zonder te
   gokken op de beschikbare breedte. */
.frp-markt-cijfers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 1.75em 0 0;
}

/* De tegel is lichter dan zijn ondergrond in plaats van donkerder. --frp-tegel
   staat los van --frp-vlak: het compacte blok heeft zelf een crèmekleurige
   ondergrond, en een tegel in diezelfde crème verdwijnt daarin.

   De selector loopt bewust via .frp-markt-cijfers. Verderop stond een regel voor
   het compacte blok die de binnenruimte op nul zette, en die won met twee
   klassen van deze ene. Die regel is weg, maar de tegel blijft langs zijn
   container geadresseerd zodat een losse overschrijving niet opnieuw wint. */
.frp-markt .frp-markt-cijfers > .frp-markt-cijfer {
    min-width: 0;
    padding: 14px 16px;
    background: var(--frp-tegel);
    border: 1px solid var(--frp-rand);
    border-radius: 10px;
}

/* Vijf tegels, de enige telling die de twee aanroepen gebruiken. Twee kolommen
   met de laatste over de volle breedte, daarboven drie plus twee via een raster
   van zes kolommen, en pas op een echt brede kolom alle vijf naast elkaar. In
   alle drie de gevallen is de laatste rij gesloten.

   Het meetpunt is de breedte van de CONTAINER, niet van het venster. Het blok
   staat op de woningpagina in een kolom van 590 pixels terwijl het venster
   1265 breed is: een vensterbreekpunt zette daar vijf tegels naast elkaar en
   een bedrag van zeven cijfers paste er dan niet meer in. */
.frp-markt-cijfers--5 > .frp-markt-cijfer:last-child { grid-column: span 2; }

@container frp-markt (min-width: 520px) {
    .frp-markt-cijfers--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .frp-markt-cijfers--5 > .frp-markt-cijfer { grid-column: span 2; }
    .frp-markt-cijfers--5 > .frp-markt-cijfer:nth-child(4),
    .frp-markt-cijfers--5 > .frp-markt-cijfer:nth-child(5) { grid-column: span 3; }
}

@container frp-markt (min-width: 860px) {
    .frp-markt-cijfers--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .frp-markt-cijfers--5 > .frp-markt-cijfer,
    .frp-markt-cijfers--5 > .frp-markt-cijfer:nth-child(4),
    .frp-markt-cijfers--5 > .frp-markt-cijfer:nth-child(5) { grid-column: span 1; }
}

/* Zonder containerondersteuning blijft de tweekoloms basis staan. Dat is nooit
   lelijk, alleen wat hoger, dus er is geen tweede stel breekpunten nodig. */

/* Een bedrag hoort op een regel. "€ 1.895.000" brak op een telefoon af achter
   het euroteken, waardoor er een losse € boven het getal stond. De tegel groeit
   nu mee met wat erin staat, en het lettertype zakt een stap op heel smalle
   toestellen zodat een bedrag van zeven cijfers er ook op 320 pixels in past. */
.frp-markt-waarde {
    display: block;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--frp-inkt);
    white-space: nowrap;
}

@media (max-width: 400px) {
    .frp-markt-waarde { font-size: 1.15em; }
    .frp-markt .frp-markt-cijfers > .frp-markt-cijfer { padding: 12px 13px; }
}

.frp-markt-label {
    display: block;
    font-size: .78em;
    line-height: 1.35;
    color: var(--frp-inkt-3);
    margin-top: .3em;
}

/* --------------------------------------------------------------- Grafieken */

/* Grafiek plus tabelknop horen bij elkaar: samen een blok, zodat een raster
   ze als een geheel plaatst. */
.frp-c-blok { min-width: 0; }

/* GEMETEN op de woningpagina: beide blokken hadden marge nul, waardoor de
   lijngrafiek meteen onder de knop "Als tabel weergeven" begon en die knop bij
   de verkeerde grafiek leek te horen. Twee grafieken onder elkaar horen uit
   elkaar te staan; naast elkaar in een raster regelt de gap het al. */
.frp-c-blok + .frp-c-blok { margin-top: 2.25em; }
.frp-markt-duo .frp-c-blok + .frp-c-blok { margin-top: 0; }

.frp-c-fig { margin: 0; position: relative; }
.frp-c-fig figcaption {
    font-size: .85em;
    color: var(--frp-inkt-3);
    margin-top: .5em;
    max-width: 62ch;
    /* Het thema centreert elk bijschrift; hier hoort de tekst links te staan,
       op een lijn met de as van de grafiek erboven. */
    text-align: left;
}

.frp-c { width: 100%; height: auto; display: block; overflow: visible; }

.frp-c-raster { stroke: var(--frp-raster); stroke-width: 1; }

.frp-c-as { font-size: 12px; fill: var(--frp-inkt-3); }
.frp-c-eindlabel { font-size: 12px; fill: var(--frp-inkt-2); font-variant-numeric: tabular-nums; }

.frp-c-punt { fill: transparent; cursor: crosshair; }
.frp-c-punt:focus-visible { outline: none; fill: color-mix(in srgb, var(--frp-inkt-3) 18%, transparent); }

.frp-c-pad  { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.frp-c-vlak { stroke: none; opacity: .10; }
.frp-c-eind { stroke: var(--frp-vlak); stroke-width: 2; }

.frp-serie-1.frp-c-pad  { stroke: var(--frp-serie-1); }
.frp-serie-1.frp-c-vlak,
.frp-serie-1.frp-c-eind { fill: var(--frp-serie-1); }
.frp-serie-2.frp-c-pad  { stroke: var(--frp-serie-2); }
.frp-serie-2.frp-c-vlak,
.frp-serie-2.frp-c-eind { fill: var(--frp-serie-2); }
.frp-serie-3.frp-c-pad  { stroke: var(--frp-serie-3); }
.frp-serie-3.frp-c-vlak,
.frp-serie-3.frp-c-eind { fill: var(--frp-serie-3); }

/* --------------------------------------------------- Staafdiagram (in HTML) */

.frp-bars {
    list-style: none;
    margin: .5em 0 0;
    padding: 0;
    display: grid;
    row-gap: 8px;
}

.frp-bar-rij {
    display: grid;
    grid-template-columns: var(--frp-bar-cat, 9.5em) 1fr var(--frp-bar-reserve, 5em);
    align-items: center;
    column-gap: .8em;
    outline: none;
}

.frp-bar-cat a { color: inherit; text-decoration: none; transition: color 160ms var(--frp-uit); }
@media (hover: hover) and (pointer: fine) {
    .frp-bar-cat a:hover { color: var(--frp-serie-1); }
}

.frp-bar-cat {
    font-size: .92em;
    line-height: 1.25;
    color: var(--frp-inkt-3);
    text-align: right;
}

/* De basislijn is één doorlopende haarlijn: elke rij tekent haar eigen stukje,
   met de helft van de rijafstand aan weerszijden, zodat er geen gaatjes vallen. */
.frp-bar-baan {
    position: relative;
    height: 13px;
    grid-column: 2;
}
.frp-bar-baan::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--frp-rand);
}

.frp-bar-vul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--w, 0%);
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--frp-serie-1);
    transition: filter .12s ease;
}
.frp-bars.frp-serie-2 .frp-bar-vul { background: var(--frp-serie-2); }
.frp-bars.frp-serie-3 .frp-bar-vul { background: var(--frp-serie-3); }

.frp-bar-val {
    position: absolute;
    left: var(--w, 0%);
    top: 50%;
    transform: translateY(-50%);
    margin-left: .6em;
    white-space: nowrap;
    font-size: .88em;
    color: var(--frp-inkt-2);
    font-variant-numeric: tabular-nums;
}

.frp-bar-rij:hover  .frp-bar-vul,
.frp-bar-rij:focus-visible .frp-bar-vul { filter: brightness(1.14); }
.frp-bar-rij:focus-visible .frp-bar-val { color: var(--frp-inkt); }
.frp-bar-rij:focus-visible { border-radius: 4px; box-shadow: 0 0 0 2px var(--frp-inkt-3); }

.frp-c-kruis {
    stroke: var(--frp-inkt-3);
    stroke-width: 1;
    opacity: 0;
    pointer-events: none;
}
.frp-c-fig.is-actief .frp-c-kruis { opacity: .45; }

/* Tooltip: waarde voorop, naam eronder. */
.frp-c-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -115%);
    background: var(--frp-vlak);
    color: var(--frp-inkt);
    border: 1px solid var(--frp-rand);
    border-radius: 8px;
    padding: .45em .6em;
    box-shadow: 0 6px 20px rgba(42, 31, 19, .12);
    font-size: .82em;
    line-height: 1.35;
    white-space: nowrap;
    transition: opacity .1s linear;
}
.frp-c-fig.is-actief .frp-c-tip { opacity: 1; }
.frp-c-tip b { display: block; font-size: 1em; font-weight: 650; }
.frp-c-tip span,
.frp-c-tip em { display: block; }
.frp-c-tip span { color: var(--frp-inkt-3); }
.frp-c-tip em { font-style: normal; color: var(--frp-inkt-2); margin-top: .15em; }
.frp-c-tip em:empty,
.frp-c-tip span:empty { display: none; }

/* Grafieken naast elkaar waar de ruimte het toelaat. */
.frp-markt-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2.25em 2.5em;
    /* Elk vak precies zo hoog als zijn eigen inhoud. Zonder dit rekken beide
       vakken mee met de hoogste, en dan zakt de tabelknop van de ene grafiek
       omlaag zodra je de tabel van de andere openklapt. */
    align-items: start;
}


/* ------------------------------------------------------------- Ringdiagram */

.frp-donut-wrap {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    align-items: center;
    gap: 1.5em 2em;
    margin: .5em 0 0;
}

.frp-donut { position: relative; }
.frp-donut svg {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(-90deg);
}

.frp-donut-spoor { stroke: var(--frp-raster); }
.frp-donut-deel  { transition: opacity .12s ease; cursor: default; }
.frp-donut:hover .frp-donut-deel { opacity: .45; }
.frp-donut .frp-donut-deel:hover { opacity: 1; }

.frp-ordinaal-1 { stroke: var(--frp-ordinaal-1); }
.frp-ordinaal-2 { stroke: var(--frp-ordinaal-2); }
.frp-ordinaal-3 { stroke: var(--frp-ordinaal-3); }
.frp-ordinaal-4 { stroke: var(--frp-ordinaal-4); }

.frp-donut-midden {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.frp-donut-getal { font-size: 1.75em; font-weight: 650; line-height: 1.1; color: var(--frp-inkt); }
.frp-donut-label { font-size: .8em; color: var(--frp-inkt-3); margin-top: .15em; }

.frp-donut-legenda { list-style: none; margin: 0; padding: 0; display: grid; row-gap: .5em; }
.frp-donut-legenda li {
    display: grid;
    grid-template-columns: 14px 1fr max-content;
    align-items: center;
    column-gap: .7em;
    font-size: .9em;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--frp-rand);
}
.frp-donut-legenda li:last-child { border-bottom: 0; padding-bottom: 0; }
.frp-donut-vlek { width: 14px; height: 14px; border-radius: 4px; display: block; }
.frp-ordinaal-1.frp-donut-vlek { background: var(--frp-ordinaal-1); }
.frp-ordinaal-2.frp-donut-vlek { background: var(--frp-ordinaal-2); }
.frp-ordinaal-3.frp-donut-vlek { background: var(--frp-ordinaal-3); }
.frp-ordinaal-4.frp-donut-vlek { background: var(--frp-ordinaal-4); }
.frp-donut-naam { color: var(--frp-inkt-2); }
.frp-donut-waarde { color: var(--frp-inkt); font-variant-numeric: tabular-nums; font-weight: 600; }
.frp-donut-waarde em { font-style: normal; font-weight: 400; color: var(--frp-inkt-3); }

@media (max-width: 620px) {
    .frp-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
    .frp-donut { max-width: 220px; }
    .frp-donut-legenda { width: 100%; }
}

/* --------------------------------------------------------- Budgetkiezer */

.frp-kiezer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    margin: 0 0 1.5em;
    padding: 0 0 1.25em;
    border-bottom: 1px solid var(--frp-rand);
}
.frp-kiezer-kop {
    font-size: .85em;
    color: var(--frp-inkt-3);
    margin-right: .3em;
    flex: 0 0 100%;
}
.frp-kiezer button {
    font: inherit;
    font-size: .9em;
    padding: .45em .9em;
    border: 1px solid var(--frp-rand);
    border-radius: 999px;
    background: transparent;
    color: var(--frp-inkt-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.frp-kiezer button:hover { border-color: var(--frp-inkt-3); color: var(--frp-inkt); }
.frp-kiezer button[aria-pressed="true"] {
    background: var(--frp-serie-1);
    border-color: var(--frp-serie-1);
    color: #fff;
    font-weight: 600;
}
.frp-kiezer button:focus-visible { outline: 2px solid var(--frp-inkt); outline-offset: 2px; }

.frp-uitkomst {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4em .8em;
    margin: 0 0 1.25em;
}
.frp-uitkomst-getal {
    font-size: 2.25em;
    font-weight: 650;
    line-height: 1;
    color: var(--frp-serie-1);
}
.frp-uitkomst-tekst { color: var(--frp-inkt-2); }

.frp-markt-cta {
    margin: 1.25em 0 0;
    padding: 1em 1.2em;
    border: 1px solid var(--frp-rand);
    border-radius: 12px;
    background: color-mix(in srgb, var(--frp-raster) 30%, transparent);
}
.frp-markt-cta p { margin: 0; color: var(--frp-inkt-2); }


/* ------------------------------------------------------------ Regiokaarten */

.frp-kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    margin: .5em 0 0;
}

.frp-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.15em 1.25em 1.25em;
    border: 1px solid var(--frp-rand);
    border-radius: 14px;
    background: var(--frp-vlak);
    text-decoration: none;
    color: inherit;
    transition: transform 200ms var(--frp-uit), border-color 200ms var(--frp-uit), box-shadow 200ms var(--frp-uit);
}

a.frp-kaart { cursor: pointer; }

@media (hover: hover) and (pointer: fine) {
    /* Geen transform: een kaart komt bij hover niet omhoog. */
    a.frp-kaart:hover {
        border-color: var(--frp-serie-1);
        box-shadow: 0 8px 24px rgba(42, 31, 19, .09);
    }
    a.frp-kaart:hover .frp-kaart-actie { color: var(--frp-serie-1); }
    a.frp-kaart:hover .frp-kaart-actie::after { transform: translateX(3px); }
}

a.frp-kaart:active { transform: scale(.985); }
a.frp-kaart:focus-visible { outline: 2px solid var(--frp-serie-1); outline-offset: 3px; }

.frp-kaart-naam {
    font-size: .82em;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--frp-inkt-3);
    margin-bottom: .5em;
}

.frp-kaart-hoofd {
    white-space: nowrap;
    font-size: 1.6em;
    font-weight: 650;
    line-height: 1;
    color: var(--frp-inkt);
    letter-spacing: -.01em;
}

.frp-kaart-sub {
    font-size: .78em;
    color: var(--frp-inkt-3);
    margin-top: .25em;
}

.frp-kaart-meter {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--frp-raster);
    margin: .9em 0 .95em;
    overflow: hidden;
}
.frp-kaart-vul {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: 3px;
    background: var(--frp-serie-1);
}

.frp-kaart-regels {
    display: grid;
    row-gap: .3em;
    font-size: .85em;
    color: var(--frp-inkt-3);
}
.frp-kaart-regels em { font-style: normal; font-weight: 600; color: var(--frp-inkt-2); }

.frp-kaart-actie {
    margin-top: .9em;
    font-size: .82em;
    font-weight: 600;
    color: var(--frp-inkt-3);
    transition: color 200ms var(--frp-uit);
}
.frp-kaart-actie::after {
    content: "\2192";
    display: inline-block;
    margin-left: .35em;
    transition: transform 200ms var(--frp-uit);
}

/* Twaalf kaarten van tweehonderdvijftig pixels hoog is op een telefoon drie
   schermen scrollen voordat je bij de volgende sectie bent. Op smal scherm
   klapt de kaart daarom in tot een compacte rij: naam en bedrag op een lijn,
   de cijfers eronder achter elkaar. */
@media (max-width: 620px) {
    .frp-kaarten { grid-template-columns: 1fr; gap: 10px; }

    .frp-kaart {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        column-gap: 1em;
        padding: .95em 1.1em 1em;
    }

    .frp-kaart-naam { grid-column: 1; min-width: 0; margin-bottom: 0; align-self: center; }
    /* Het bedrag blijft heel: de naam ernaast mag omslaan, het bedrag niet. */
    .frp-kaart-hoofd { grid-column: 2; grid-row: 1; font-size: 1.25em; white-space: nowrap; }
    .frp-kaart-sub { display: none; }

    .frp-kaart-meter { grid-column: 1 / -1; margin: .7em 0 .6em; }

    .frp-kaart-regels {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: .15em .8em;
        font-size: .82em;
    }
    /* Zonder dit breekt een cijfer los van zijn label, of belandt de
       scheidingspunt in zijn eentje op de volgende regel. */
    .frp-kaart-regels span { white-space: nowrap; }
    /* De punt hangt achter de span waar hij bij hoort, niet ervoor. Anders
       belandt hij bij een omslag als eerste teken op de nieuwe regel. */
    .frp-kaart-regels span:not(:last-child)::after {
        content: "\00b7";
        margin-left: .8em;
        color: var(--frp-inkt-3);
        opacity: .5;
    }

    .frp-kaart-actie { grid-column: 1 / -1; margin-top: .55em; font-size: .8em; }
}

/* ------------------------------------------------------------- Ranglijsten */

.frp-rang {
    list-style: none;
    margin: .5em 0 0;
    padding: 0;
    counter-reset: rang;
}

.frp-rang li {
    position: relative;
    display: grid;
    grid-template-columns: 1.6em 1fr max-content;
    align-items: baseline;
    column-gap: .7em;
    padding: .7em .85em;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
}

/* Het balkje zit achter de rij, niet ernaast. Zo blijft de naam volledig
   leesbaar en zie je de verhouding toch. */
.frp-rang li::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    background: var(--frp-serie-1);
    border-radius: 0 8px 8px 0;
    opacity: .085;
    z-index: -1;
}
.frp-rang.is-tweede li::before { background: var(--frp-serie-2); }

.frp-rang li + li { margin-top: 3px; }

.frp-rang-nr {
    font-size: .78em;
    font-weight: 600;
    color: var(--frp-inkt-3);
    font-variant-numeric: tabular-nums;
}

.frp-rang-naam {
    font-weight: 500;
    color: var(--frp-inkt);
    line-height: 1.3;
}
/* De hele rij is de knop, niet alleen de naam. De link blijft een gewone link
   met de plaatsnaam als tekst, maar strekt zich met een pseudo-element over de
   hele rij uit. Zo is het trefvlak ruim, blijft de HTML eenvoudig, en werkt
   kopieren van de tekst gewoon. Geen onderstreping: de rij reageert al met
   achtergrond en kleur, en dat leest rustiger. */
.frp-rang li.is-link { position: relative; }

.frp-rang-naam a {
    color: inherit;
    text-decoration: none;
}
.frp-rang-naam a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    z-index: 1;
}

.frp-rang li { transition: background 160ms var(--frp-uit); }
.frp-rang li.is-link .frp-rang-naam,
.frp-rang li.is-link .frp-rang-getal { transition: color 160ms var(--frp-uit); }

@media (hover: hover) and (pointer: fine) {
    .frp-rang li.is-link:hover { background: color-mix(in srgb, var(--frp-raster) 55%, transparent); }
    .frp-rang li.is-link:hover .frp-rang-naam,
    .frp-rang li.is-link:hover .frp-rang-getal { color: var(--frp-serie-1); }
}

.frp-rang li.is-link:active { background: color-mix(in srgb, var(--frp-raster) 75%, transparent); }

/* De focusring hoort om de hele rij, want dat is wat je aanklikt. */
.frp-rang-naam a:focus-visible { outline: none; }
.frp-rang li.is-link:has(a:focus-visible) {
    outline: 2px solid var(--frp-serie-1);
    outline-offset: 2px;
}

.frp-rang-getal {
    font-weight: 650;
    color: var(--frp-inkt);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.frp-rang-sub {
    grid-column: 2 / -1;
    font-size: .8em;
    color: var(--frp-inkt-3);
    margin-top: .15em;
}

/* ---------------------------------------------------------------- Tabellen */

.frp-markt-tabelwrap { overflow-x: auto; }

.frp-markt-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .92em;
    font-variant-numeric: tabular-nums;
}
.frp-markt-tabel th,
.frp-markt-tabel td {
    padding: .5em .6em;
    border-bottom: 1px solid var(--frp-rand);
    text-align: right;
    white-space: nowrap;
}
.frp-markt-tabel th[scope="row"] {
    text-align: left;
    font-weight: 500;
    white-space: normal;
    font-variant-numeric: normal;
}
.frp-markt-tabel thead th {
    text-align: right;
    font-size: .74em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--frp-inkt-3);
    font-weight: 600;
    border-bottom-color: var(--frp-rand);
}
.frp-markt-tabel thead th:first-child { text-align: left; }
.frp-markt-tabel tbody tr:hover { background: color-mix(in srgb, var(--frp-raster) 45%, transparent); }
.frp-markt-daling { color: var(--frp-slecht); font-weight: 600; }

/* Tabelweergave naast elke grafiek. */
.frp-c-tabel { margin: 1.1em 0 0; text-align: left; }

.frp-c-tabel > summary {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    cursor: pointer;
    font-size: .84em;
    font-weight: 500;
    color: var(--frp-inkt-2);
    padding: .45em 1em .45em .85em;
    border: 1px solid var(--frp-rand);
    border-radius: 999px;
    background: var(--frp-invoer-vlak, var(--frp-vlak));
    list-style: none;
    transition: border-color 160ms var(--frp-uit), color 160ms var(--frp-uit), transform 160ms var(--frp-uit);
}
.frp-c-tabel > summary::-webkit-details-marker { display: none; }
.frp-c-tabel > summary::marker { content: ""; }

/* Het pijltje draait als de tabel opengaat. Geen tekstteken maar een echte
   vorm, zodat hij netjes meedraait in plaats van te verspringen. */
.frp-c-tabel > summary::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg) translate(-1px, -1px);
    transition: transform 200ms var(--frp-uit);
    opacity: .65;
}
.frp-c-tabel[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }

@media (hover: hover) and (pointer: fine) {
    .frp-c-tabel > summary:hover { border-color: var(--frp-inkt-3); color: var(--frp-inkt); }
}
.frp-c-tabel > summary:active { transform: scale(.97); }
.frp-c-tabel > summary:focus-visible { outline: 2px solid var(--frp-serie-1); outline-offset: 2px; }

.frp-c-tabel[open] > summary { margin-bottom: .9em; }

.frp-markt-kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
}

/* De uitlegregel onder een grafiek. Kleiner dan de lopende tekst en in de
   zachte inkt: het is een onderschrift, geen alinea die om aandacht vraagt. */
.frp-c-uitleg {
    margin: .5em 0 0;
    font-size: .86em;
    line-height: 1.5;
    color: var(--frp-inkt-2);
}

/* -------------------------------------------------------------- Regioblok */

/* Geen marge, wel binnenruimte (afspraak Martijn 02-09-2026). Het blok wordt in
   Bricks in een eigen sectie gezet en die sectie bepaalt de ruimte eromheen; met
   een eigen marge van 2,5em erbij stond er twee keer lucht. De binnenruimte is
   iets anders: die hoort bij het kader zelf, want zonder plakt de tekst tegen de
   rand. De eerste kop en het laatste element halen hun eigen marge weg, zodat de
   ruimte binnen het kader alleen van de padding komt en niet nog eens van een
   kopmarge erbovenop. */
.frp-markt-blok {
    border: 1px solid var(--frp-rand);
    border-radius: 14px;
    padding: 1.4em 1.5em;
    margin: 0;
    background: var(--frp-vlak);
}
.frp-markt-blok .frp-markt-kop { font-size: 1.2em; }
.frp-markt-blok > :first-child { margin-top: 0; }
.frp-markt-blok > :last-child  { margin-bottom: 0; }
/* Deze twee regels haalden in het compacte blok de rand en de binnenruimte weer
   weg. Dat hoorde bij het oude ontwerp, waarin de cijferrij een omhulsel met
   haarlijnen was en het blok die lijnen niet wilde herhalen. Sinds de tegels
   losse blokjes zijn, maakte "padding: 0" de tekst tegen de rand plakken; het
   was mijn eigen regel die won op specificiteit, niet die van het thema. */
/* Afsluiting van het compacte blok: de weg naar de marktpagina. Staat los van
   de cijfers met een scheidingslijn, zodat het als een uitnodiging leest en niet
   als een voetnoot onder de laatste grafiek. */
.frp-markt-meer {
    margin: 2em 0 0;
    padding-top: 1.4em;
    border-top: 1px solid var(--frp-rand);
}

.frp-markt-meer__tekst {
    margin: 0 0 1em;
    color: var(--frp-inkt-2);
    max-width: 62ch;
}

.frp-markt-meer__acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em 1.25em;
}

.frp-markt-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7em 1.35em;
    border-radius: 999px;
    background: var(--frp-serie-1);
    color: #fff;
    font-size: .92em;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    transition: filter 150ms var(--frp-uit), transform 120ms var(--frp-uit);
}

.frp-markt-knop:hover,
.frp-markt-knop:focus-visible { color: #fff; text-decoration: none; filter: brightness(.92); }
.frp-markt-knop:active { transform: scale(.98); }
.frp-markt-knop:focus-visible { outline: 2px solid var(--frp-serie-1); outline-offset: 2px; }

.frp-markt-link {
    font-size: .92em;
    color: var(--frp-inkt-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.frp-markt-link:hover,
.frp-markt-link:focus-visible { color: var(--frp-inkt); }

/* Op een smal scherm staan de twee onder elkaar en vult de knop de breedte. */
@media (max-width: 420px) {
    .frp-markt-meer__acties { flex-direction: column; align-items: stretch; }
    .frp-markt-link { text-align: center; }
}

/* Het aanmeldformulier is een landingspunt: vanaf de knop in het compacte blok
   en vanuit de voorkeurenlink in elke mail. Deze marge houdt het vrij van de
   vaste kop van het thema, zodat de kop van het formulier in beeld staat en
   niet er half achter. */
#frp-voorkeuren { scroll-margin-top: 110px; }

.frp-markt-wacht {
    color: var(--frp-inkt-3);
    border: 1px dashed var(--frp-rand);
    border-radius: 10px;
    padding: 1em 1.1em;
    margin: 0;
}

/* Beheerdersmelding: dezelfde vorm als de wachtmelding, maar in amber zodat
   duidelijk is dat dit een aanwijzing voor de beheerder is en geen paginatekst.
   Alleen zichtbaar voor wie de pagina mag bewerken. */
.frp-markt-wacht--beheer {
    border-style: solid;
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

.frp-markt-uitleg p { color: var(--frp-inkt-2); max-width: 68ch; }

@media (max-width: 620px) {
    /* Op een telefoon staat de naam boven de staaf. Het waardelabel gaat mee
       in de rij in plaats van absoluut op de punt van de staaf: bij een staaf
       van bijna honderd procent viel het anders buiten het scherm. */
    .frp-bar-rij {
        grid-template-columns: 1fr;
        row-gap: 3px;
    }
    .frp-bar-cat { text-align: left; }

    .frp-bar-baan {
        position: static;
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: .55em;
        height: auto;
    }
    .frp-bar-baan::before { display: none; }

    .frp-bar-vul {
        position: static;
        flex: 0 1 var(--w, 0%);
        height: 13px;
        border-radius: 4px;
        min-width: 4px;
    }

    .frp-bar-val {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        margin: 0;
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .frp-c-tip { transition: none; }
}

/* --------------------------------------------------- Aanmeldformulier */

.frp-alert {
    border: 1px solid var(--frp-rand);
    border-radius: 16px;
    padding: 2em 2em 1.75em;
    margin: 3em 0;
    background: var(--frp-vlak);
}

.frp-alert-kop { margin-bottom: 1.75em; }
.frp-alert-kop .frp-markt-kop { margin-bottom: .35em; }
.frp-alert-kop .frp-markt-duiding { margin: 0; }

/* Elke stap is een blok met een genummerde kop. Dat geeft rust: de bezoeker
   ziet in een oogopslag hoeveel er van hem gevraagd wordt. */
.frp-stap {
    padding: 1.5em 0;
    border-top: 1px solid var(--frp-rand);
}
.frp-stap:first-of-type { border-top: 0; padding-top: 0; }

.frp-stap-kop {
    display: flex;
    align-items: center;
    gap: .7em;
    margin-bottom: 1em;
}
.frp-stap-kop h3 {
    margin: 0;
    font-size: 1.02em;
    font-weight: 600;
    color: var(--frp-inkt);
}
.frp-stap-nr {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--frp-serie-1);
    color: #fff;
    font-size: .78em;
    font-weight: 700;
}

.frp-stap-hulp {
    margin: -.5em 0 1em;
    font-size: .88em;
    color: var(--frp-inkt-3);
    max-width: 60ch;
}

.frp-stap-uitkomst {
    margin: 1em 0 0;
    font-size: .88em;
    color: var(--frp-inkt-2);
    min-height: 1.4em;
}

/* ----------------------------------------------------------- Schakelaars */

.frp-schakelaars { display: grid; row-gap: 2px; }

.frp-schakelaar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25em;
    padding: .85em 1em;
    border-radius: 12px;
    cursor: pointer;
    transition: background 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .frp-schakelaar:hover { background: color-mix(in srgb, var(--frp-raster) 45%, transparent); }
}

/* De checkbox blijft een echte checkbox, alleen onzichtbaar. Toetsenbord en
   schermlezer werken daardoor gewoon; het schuifje is puur opmaak. */
.frp-schakelaar input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.frp-schakelaar-titel {
    display: block;
    font-weight: 600;
    color: var(--frp-inkt);
    font-size: .96em;
}
.frp-schakelaar-uitleg {
    display: block;
    font-size: .85em;
    color: var(--frp-inkt-3);
    margin-top: .12em;
    line-height: 1.45;
}

.frp-schuif {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 27px;
    border-radius: 999px;
    background: var(--frp-raster);
    box-shadow: inset 0 0 0 1px var(--frp-rand);
    transition: background 200ms var(--frp-uit), box-shadow 200ms var(--frp-uit);
}
.frp-schuif::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(42, 31, 19, .3);
    transition: transform 200ms var(--frp-uit);
}

.frp-schakelaar input:checked ~ .frp-schuif {
    background: var(--frp-serie-1);
    box-shadow: inset 0 0 0 1px var(--frp-serie-1);
}
.frp-schakelaar input:checked ~ .frp-schuif::after { transform: translateX(19px); }
.frp-schakelaar input:focus-visible ~ .frp-schuif { outline: 2px solid var(--frp-inkt); outline-offset: 2px; }
.frp-schakelaar:active .frp-schuif::after { transform: scale(.94); }
.frp-schakelaar input:checked ~ .frp-schuif:active::after { transform: translateX(19px) scale(.94); }

/* ----------------------------------------------------------------- Chips */

.frp-costas,
.frp-chips-klein {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.frp-chip {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    padding: .55em 1em;
    border: 1px solid var(--frp-rand);
    border-radius: 999px;
    background: var(--frp-invoer-vlak);
    cursor: pointer;
    font-size: .92em;
    color: var(--frp-inkt-2);
    transition: border-color 160ms var(--frp-uit), background 160ms var(--frp-uit), color 160ms var(--frp-uit), transform 160ms var(--frp-uit);
}
.frp-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .frp-chip:hover { border-color: var(--frp-inkt-3); color: var(--frp-inkt); }
}
.frp-chip:active { transform: scale(.97); }

.frp-chip-naam { font-weight: 500; }
.frp-chip-aantal { font-size: .82em; color: var(--frp-inkt-3); font-variant-numeric: tabular-nums; }

.frp-chip.is-aan .frp-chip-naam,
.frp-chip:has(input:checked) .frp-chip-naam { color: #fff; }

.frp-chip.is-aan,
.frp-chip:has(input:checked) {
    background: var(--frp-serie-1);
    border-color: var(--frp-serie-1);
    color: #fff;
}
.frp-chip.is-aan .frp-chip-aantal,
.frp-chip:has(input:checked) .frp-chip-aantal { color: rgba(255,255,255,.75); }
.frp-chip:has(input:focus-visible) { outline: 2px solid var(--frp-inkt); outline-offset: 2px; }

.frp-chip.is-klein { font-size: .85em; padding: .42em .8em; }

/* Plaatsen verschijnen pas als hun costa is aangeklikt. */
.frp-plaatsen-blokken:not(:empty) { margin-top: 1em; }

.frp-plaatsen {
    padding: 1em 1.1em;
    border: 1px solid var(--frp-rand);
    border-radius: 12px;
    background: color-mix(in srgb, var(--frp-raster) 30%, transparent);
    margin-top: .6em;
}
.frp-plaatsen[hidden] { display: none; }

.frp-plaatsen-kop {
    display: block;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--frp-inkt-3);
    margin-bottom: .7em;
}

/* --------------------------------------------------------- Keuzebalk */

.frp-segmenten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .5em;
}

.frp-segment {
    position: relative;
    display: block;
    padding: .85em 1em;
    border: 1px solid var(--frp-rand);
    border-radius: 12px;
    background: var(--frp-invoer-vlak);
    cursor: pointer;
    transition: border-color 160ms var(--frp-uit), background 160ms var(--frp-uit), transform 160ms var(--frp-uit);
}
.frp-segment input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .frp-segment:hover { border-color: var(--frp-inkt-3); }
}
.frp-segment:active { transform: scale(.985); }

.frp-segment-titel {
    display: block;
    font-weight: 600;
    font-size: .95em;
    color: var(--frp-inkt);
}
.frp-segment-uitleg {
    display: block;
    font-size: .82em;
    color: var(--frp-inkt-3);
    margin-top: .1em;
}

.frp-segment.is-aan,
.frp-segment:has(input:checked) {
    border-color: var(--frp-serie-1);
    background: color-mix(in srgb, var(--frp-serie-1) 8%, var(--frp-invoer-vlak));
    box-shadow: inset 0 0 0 1px var(--frp-serie-1);
}
.frp-segment.is-aan .frp-segment-titel,
.frp-segment:has(input:checked) .frp-segment-titel { color: var(--frp-serie-1); }
.frp-segment:has(input:focus-visible) { outline: 2px solid var(--frp-inkt); outline-offset: 2px; }

/* ------------------------------------------------------------ Invoervelden */

.frp-veld-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1em;
}
.frp-veldje { display: block; }

.frp-label {
    display: block;
    font-size: .84em;
    font-weight: 500;
    color: var(--frp-inkt-2);
    margin-bottom: .35em;
}

/* Invoervelden zijn wit, ook op de cremekleurige ondergrond. Een veld dat
   dezelfde kleur heeft als de achtergrond leest niet als iets waar je in kunt
   typen, en dan wordt het overgeslagen. */
.frp-invoer {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: .95em;
    padding: .7em .85em;
    border: 1px solid var(--frp-rand);
    border-radius: 10px;
    background: var(--frp-invoer-vlak);
    color: var(--frp-inkt);
    transition: border-color 160ms var(--frp-uit), box-shadow 160ms var(--frp-uit);
}
.frp-invoer::placeholder { color: var(--frp-inkt-3); opacity: .75; }
.frp-invoer:hover { border-color: var(--frp-inkt-3); }
.frp-invoer:focus {
    outline: none;
    border-color: var(--frp-serie-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--frp-serie-1) 18%, transparent);
}

select.frp-invoer {
    appearance: none;
    padding-right: 2.4em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a7862' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9em center;
}

.frp-hint { font-size: .84em; color: var(--frp-inkt-3); margin: 1em 0 0; }

.frp-akkoord {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .65em;
    align-items: start;
    margin-top: 1.25em;
    padding: .9em 1em;
    border-radius: 10px;
    background: color-mix(in srgb, var(--frp-raster) 35%, transparent);
    font-size: .88em;
    line-height: 1.5;
    color: var(--frp-inkt-2);
    cursor: pointer;
}
.frp-akkoord input { margin: .2em 0 0; width: 1.05em; height: 1.05em; accent-color: var(--frp-serie-1); }
.frp-akkoord a { color: var(--frp-serie-1); }

.frp-val {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.frp-alert-actie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
    margin-top: 1.75em;
    padding-top: 1.5em;
    border-top: 1px solid var(--frp-rand);
}

.frp-knop {
    font: inherit;
    font-weight: 600;
    font-size: .98em;
    padding: .8em 1.7em;
    border: 0;
    border-radius: 999px;
    background: var(--frp-serie-1);
    color: #fff;
    cursor: pointer;
    transition: transform 160ms var(--frp-uit), filter 160ms var(--frp-uit);
}
@media (hover: hover) and (pointer: fine) {
    .frp-knop:hover:not(:disabled) { filter: brightness(1.1); }
}
.frp-knop:active:not(:disabled) { transform: scale(.97); }
.frp-knop:disabled { opacity: .45; cursor: default; }
.frp-knop:focus-visible { outline: 2px solid var(--frp-inkt); outline-offset: 3px; }

/* Melding onder het formulier. Losse gekleurde tekst leest als een voetnoot,
   terwijl dit juist het antwoord op de handeling is. Vandaar een echt blok met
   een dikke gekleurde linkerrand en een ring, conform de huisnorm. Leeg blijft
   hij onzichtbaar, anders staat er een lege doos onder de knop. */
.frp-alert-melding { font-size: .9em; color: var(--frp-inkt-3); }
.frp-alert-melding:empty { display: none; }
.frp-alert-melding.is-goed,
.frp-alert-melding.is-fout,
.frp-alert-melding.is-wacht {
    display: block;
    margin-top: .9em;
    padding: .85em 1.1em;
    border-radius: 10px;
    border-left: 4px solid currentColor;
    line-height: 1.5;
    font-weight: 500;
}
.frp-alert-melding.is-goed {
    color: var(--frp-serie-3);
    background: color-mix(in srgb, var(--frp-serie-3) 9%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--frp-serie-3) 22%, transparent);
}
.frp-alert-melding.is-fout {
    color: var(--frp-slecht);
    background: color-mix(in srgb, var(--frp-slecht) 9%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--frp-slecht) 22%, transparent);
}
/* Amber: een aanwijzing, geen fout en geen voldongen feit. Sinds 1.68.3 wacht
   er niets meer op een klik in de mail, dus deze variant staat op dit moment
   ongebruikt. Hij blijft staan omdat de huisnorm hem voorschrijft voor "let
   hier even op" en de eerstvolgende melding van die soort hem meteen kan
   gebruiken. */
.frp-alert-melding.is-wacht {
    color: var(--frp-accent, #b26a00);
    background: color-mix(in srgb, var(--frp-accent, #b26a00) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--frp-accent, #b26a00) 24%, transparent);
}

/* Terugval voor browsers zonder color-mix: dan blijft het een leesbaar blok. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .frp-alert-melding.is-goed  { background: #eef7f2; }
    .frp-alert-melding.is-fout  { background: #fdf0f0; }
    .frp-alert-melding.is-wacht { background: #fdf6ec; }
}

.frp-alert.is-klaar .frp-stap,
.frp-alert.is-klaar .frp-alert-actie .frp-knop { opacity: .45; pointer-events: none; }

@media (max-width: 560px) {
    .frp-alert { padding: 1.4em 1.25em; border-radius: 12px; }
    .frp-schakelaar { padding: .8em .6em; }
}

@media (prefers-reduced-motion: reduce) {
    .frp-chip,
    .frp-segment,
    .frp-knop,
    .frp-kaart,
    .frp-schuif,
    .frp-schuif::after { transition-duration: 0ms; }
}