/* ==================================================================
   Sfeer — zachte, wazige vlekken als achtergrond

   Eén bestand voor álle publieke pagina's: de welkomstpagina, de
   marktplaats, de kennisbank en over-ons. Zo zien ze eruit als één site
   in plaats van als vijf losse pagina's die toevallig dezelfde kleuren
   gebruiken.

   ------------------------------------------------------------------
   Twee soorten sfeer, en waarom

   1. `.sfeer-pagina` — zachte kleurverlopen op <body>. Voor pagina's die
      vroeger op een egale kleur stonden: welkom, de marktplaats, de
      catalogus en de app. Er is daar geen hero om vormen in te zetten,
      en een verloop over de bovenkant kost geen extra tekenwerk.

   2. `.hero-blobs` — échte SVG-vormen met een scherpe rand, binnen een
      hero. Voor de kennisbank en over-ons.

   > Hier stond ooit dat kleurverlopen SVG-vormen konden vervangen, omdat
   > "een wazige vlek per definitie geen scherpe rand heeft". Die
   > redenering klopte niet: de vormen die vervangen werden wáren niet
   > wazig. Het waren bezier-vlakken met een harde rand, en het verschil
   > viel meteen op. De vormen zijn daarom teruggezet. Vervang ze niet
   > opnieuw door een verloop — dat is geprobeerd en het was zichtbaar
   > minder.

   Elk artikel heeft zijn eigen vormset, zodat de pagina's niet allemaal
   hetzelfde beeld tonen. De drie taalversies van één artikel delen die
   set: dat is dezelfde pagina.

   ------------------------------------------------------------------
   Hoe je het per pagina anders kleurt

   Elk kennisbank-artikel heeft zijn eigen accentkleur. Bij de SVG-vormen
   staat die kleur als `fill` op het pad zelf; bij `.sfeer-pagina` als
   variabele op het element:

       <svg class="hero-blobs" viewBox="0 0 1000 400" ...>
           <path fill="rgba(217,164,65,.30)" d="M..."></path>
       </svg>

   Geef een rgba() mee, geen hex: de doorzichtigheid hoort bij de kleur.
   Een volle kleur maakt hier een vlek van een vlek een vlak.
   ================================================================== */

/* ------------------------------------------------------------------
   Beweging — één set tijden voor de hele site

   Gekozen op 16 augustus 2026: "rustig". Traag genoeg om kalm te ogen,
   kort genoeg om niet in de weg te lopen.

   Gebruik altijd deze variabelen, nooit een los getal. Anders kiest elke
   pagina haar eigen snelheid en voelt de site ongelijk aan.

     --snel    hover, focus, kleur
     --rustig  kaarten, panelen, meldingen
     --traag   secties die tijdens het scrollen verschijnen
     --veer    zacht landen: begint vlot, remt af aan het eind.
               Schiet bewust níét door — doorschieten is de speelse
               variant, en die is op 16 augustus afgewezen.

   Dit bestand wordt door alle 33 publieke pagina's geladen, dus hier
   horen ze thuis. Ze staan óók in Style.css, want dat bestand wordt
   alleen door index.html geladen (de app) en die ziet sfeer.css niet.
   Wijzig je hier een waarde, wijzig ze dáár mee.

   Let op: welkom.html zet in haar eigen <style>-blok een `:root` met
   kleuren. Dat botst niet — andere namen — en sfeer.css wordt ná dat
   blok geladen, dus deze waarden komen sowieso door.
   ------------------------------------------------------------------ */
:root {
    --snel: 160ms;
    --rustig: 320ms;
    --traag: 680ms;
    --veer: cubic-bezier(.22, 1, .36, 1);
}

/* ------------------------------------------------------------------
   Secties komen omhoog wanneer je ze bereikt

   Het verbergen hangt aan `.js-beweging` op <html>, en die klasse zet
   JavaScript zelf — niet dit bestand. Draait het script niet (JavaScript
   uit, oude browser, of een AI-crawler die geen scripts uitvoert), dan
   staat gewoon alles er.

   Zou het verbergen hier vastliggen, dan was de halve pagina onzichtbaar
   voor Google en voor de AI-crawlers, en dat merk je pas veel te laat.
   Verbergen mag dus nooit de begintoestand van de HTML zijn.

   `transform` op een sectie maakt die sectie het referentiekader voor
   alles wat er absoluut of vast in staat. Nagekeken op 16 augustus 2026:
   de enige `position: fixed` op de publieke pagina's is de knop "terug
   naar boven", en die staat buiten elke sectie. Zet je hier later iets
   vasts binnen een sectie, kijk dit dan opnieuw na.
   ------------------------------------------------------------------ */
/* Twee soorten, en het verschil is belangrijk.

   1. `data-verschijn` — het element zelf komt omhoog. Voor losse dingen:
      een kaartje in een rooster, een vraag in een lijstje.

   2. `data-verschijn="kinderen"` — de inhoud komt na elkaar omhoog, het
      element zelf blijft staan. Voor een sectie.

   Waarom die tweede vorm er is: op 16 augustus 2026 kregen alle secties
   vorm 1, en de gebruiker zei terecht dat de pagina nog steeds statisch
   aanvoelde. Dat klopte. Een sectie is vaak hoger dan het scherm, dus ze
   staat al voor je neus wanneer ze "verschijnt" — je kijkt er al naar en
   ziet dus niets gebeuren. De kop, de tekst en de kaartjes één voor één
   zien binnenkomen lees je wél: de pagina bouwt zich op terwijl je leest.
   ------------------------------------------------------------------ */
.js-beweging [data-verschijn] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--traag, 680ms) ease,
        transform var(--traag, 680ms) var(--veer, ease-out);
}

.js-beweging [data-verschijn].gezien {
    opacity: 1;
    transform: none;
}

/* Vorm 2. Staat ná vorm 1, want beide wegen even zwaar: de volgorde
   beslist. De sectie zelf blijft dus gewoon staan. */
.js-beweging [data-verschijn="kinderen"] {
    opacity: 1;
    transform: none;
}

.js-beweging [data-verschijn="kinderen"] > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--traag, 680ms) ease,
        transform var(--traag, 680ms) var(--veer, ease-out);
}

.js-beweging [data-verschijn="kinderen"].gezien > * {
    opacity: 1;
    transform: none;
}

/* De trap. Acht is ruim genoeg voor elke sectie op de site; wat daarna
   komt, komt gewoon mee met de achtste in plaats van almaar later — een
   twintigste alinea die anderhalve seconde staat te wachten voelt traag,
   niet rustig. */
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(2) { transition-delay:  80ms; }
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(3) { transition-delay: 160ms; }
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(4) { transition-delay: 240ms; }
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(5) { transition-delay: 320ms; }
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(6) { transition-delay: 400ms; }
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(7) { transition-delay: 480ms; }
.js-beweging [data-verschijn="kinderen"].gezien > *:nth-child(n+8) { transition-delay: 560ms; }

/* Wie minder beweging vroeg, krijgt de secties meteen te zien. Niet
   vervagen, niet schuiven — er valt niets te missen. */
@media (prefers-reduced-motion: reduce) {

    .js-beweging [data-verschijn],
    .js-beweging [data-verschijn="kinderen"] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.sfeer-pagina {
    /* perzik, saliegroen, koraal — de drie tinten uit het merk */
    --sfeer-1: rgba(240, 185, 143, .55);
    --sfeer-2: rgba(124, 152, 133, .35);
    --sfeer-3: rgba(217, 113, 74, .18);
}

/* De vlekken-stapel. Enkel voor .sfeer-pagina — de pagina's die vroeger op
   een egale kleur stonden (welkom, marktplaats, catalogus) en de app.

   .hero-blobs staat hier bewust NIET meer bij. Dat is sinds de herstelling
   een echte <svg> met bezier-vormen en een scherpe rand, geen kleurverloop.
   Stond het er nog bij, dan kwam er een wazige stapel áchter die vormen te
   staan en was het verschil weer weg. */
.sfeer-pagina {
    background-image:
        radial-gradient(46% 62% at 14% 22%, var(--sfeer-1) 0%, transparent 70%),
        radial-gradient(38% 54% at 78% 12%, var(--sfeer-2) 0%, transparent 72%),
        radial-gradient(32% 46% at 56% 92%, var(--sfeer-3) 0%, transparent 74%),
        radial-gradient(24% 38% at 96% 72%, var(--sfeer-1) 0%, transparent 76%);
    background-repeat: no-repeat;
}

/* Binnen een hero. De pagina's zetten zelf position/inset/z-index op
   .hero-blobs in hun eigen <style>; dat blijft ongemoeid.

   pointer-events staat uit omdat deze laag over de volle breedte van de
   hero ligt. Zonder die regel vangt een decoratieve laag kliks op knoppen
   op zodra iemand later de stapeling wijzigt — en dat is een fout die je
   pas merkt als een bezoeker niet op "Start gratis" kan klikken. */
.hero-blobs,
.sfeer-band-vlek,
.foto-vlek {
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Een kleurveld achter één hoofdstuk

   Waarvoor: op een lange pagina lopen de hoofdstukken in elkaar over. Een
   zacht veld achter het ene hoofdstuk en niets achter het volgende laat je
   zien wáár je bent, zonder een lijn te trekken. Om de beurt, niet overal —
   kleur overal leest als behang.

   Waarom een band over de volle breedte en niet gewoon een achtergrond op
   de sectie: de sectie zit in .wrap, en die is maximaal 1080 breed met 24
   binnenmarge. Een kaartje van volle breedte laat daar vierentwintig pixels
   over, en van een vorm van driehonderd pixels zie je dan een streepje.
   Precies dat ging één keer live en het zag eruit als een blok achter de
   schermbeelden. Van schermrand tot schermrand zie je de vorm zelf.

   overflow: hidden knipt af bij de rand van de band. Zonder dat wordt de
   laag op een smal venster breder dan het scherm en krijg je er een
   horizontale schuifbalk bij.

   De negatieve marge heft de opvulling weer op: de band krijgt ruimte boven
   en onder om de vormen te tonen, zonder dat de pagina langer wordt.
   ------------------------------------------------------------------ */
.sfeer-band {
    position: relative;
    overflow: hidden;
    padding: 30px 0 40px;
    margin: -30px 0 -40px;
}

.sfeer-band-vlek {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Zonder deze regel ligt de svg over de tekst heen. Een element met
   position en z-index wordt getekend ná gewone blokken, hoe vroeg het ook
   in de HTML staat. */
.sfeer-band > .wrap {
    position: relative;
    z-index: 1;
}

/* De vormen ademen.

   Heel traag: zesentwintig seconden voor een paar procent beweging. Je ziet
   het niet gebeuren, je merkt alleen dat de pagina niet stilstaat. Sneller
   maken werkt averechts — dan wordt het een bewegend behang waar je overheen
   probeert te lezen.

   transform-box: fill-box laat de percentages slaan op de vorm zelf in
   plaats van op het hele svg-vlak; zonder die regel schiet een vorm bij de
   eerste stap een heel eind opzij. */
.hero-blobs path,
.sfeer-band-vlek path,
.foto-vlek path {
    transform-box: fill-box;
    transform-origin: center;
    animation: vlekAdem 26s ease-in-out infinite alternate;
}

/* Elke vorm zijn eigen tempo en startpunt. Lopen ze gelijk, dan zie je één
   blok bewegen in plaats van losse vormen. De negatieve vertraging zet ze
   meteen midden in hun beweging, zodat ze niet allemaal vanaf nul beginnen. */
.hero-blobs path:nth-child(2),
.sfeer-band-vlek path:nth-child(2),
.foto-vlek path:nth-child(2) {
    animation-duration: 34s;
    animation-delay: -9s;
}

.sfeer-band-vlek path:nth-child(3),
.foto-vlek path:nth-child(3) {
    animation-duration: 30s;
    animation-delay: -17s;
}

.sfeer-band-vlek path:nth-child(4) {
    animation-duration: 39s;
    animation-delay: -23s;
}

@keyframes vlekAdem {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(2.5%, -2%) scale(1.06); }
}

/* Over de bovenkant van een hele pagina, op <body>. Bewust een
   achtergrondafbeelding op body en géén ::before met position/z-index:
   een achtergrond kan de indeling niet verschuiven en kan geen kliks
   opvangen, wat er ook nog aan die pagina verandert.

   De hoogte is vast in pixels, niet in vh: bij het scrollen op een
   telefoon verandert de vensterhoogte (de adresbalk klapt in) en dan
   zou de achtergrond met een vh-maat meeschuiven en zichtbaar springen. */
.sfeer-pagina {
    background-size: 100% 860px;
    background-position: top center;
    background-attachment: scroll;
}

/* Een gedempte versie voor de app zelf.

   Op een publieke pagina staan de vlekken achter foto's en witruimte. In de
   app staan ze achter een tabel van dertig kolommen met bedragen erin, en daar
   is een kleurvlek achter een cijfer geen sfeer maar hinder. Dezelfde vormen,
   ongeveer een derde van de kracht, en lager op de pagina zodat de balk met
   knoppen bovenaan ongemoeid blijft.

   Zet deze klasse ná .sfeer-pagina op <body>: de kleuren zijn variabelen, dus
   deze regel hoeft de achtergrond zelf niet over te doen. */
.sfeer-zacht {
    --sfeer-1: rgba(240, 185, 143, .20);
    --sfeer-2: rgba(124, 152, 133, .13);
    --sfeer-3: rgba(217, 113, 74, .07);
    background-size: 100% 620px;
}

/* Een lange pagina heeft meer nodig dan één scherm kleur.
   ------------------------------------------------------------------
   .sfeer-pagina wast de bovenste 860 pixels. Op welkom klopt dat: daar begint
   onder die hoogte het gekleurde werk zelf. Op over-ons en in de kennisbank
   loopt de tekst nog duizenden pixels door, en daar houdt de kleur dus veel te
   vroeg op — precies wat "het komt plain over" betekent.

   > Hier stond eerst `background-size: 100% 1400px` met repeat-y: hetzelfde
   > kleurverloop, maar herhaald. Dat gaf een streep dwars over de pagina op
   > 1400 en op 2800 pixels. De reden is niet het herhalen zelf. De vlekken
   > van .sfeer-pagina staan met opzet halverwege over de rand van hun vel
   > heen (de bovenste zit op 12% hoogte en reikt ver boven nul), en wat over
   > de rand steekt wordt afgeknipt. Bij elke herhaling knipt hij op dezelfde
   > plek, en dat lees je als een liniaal.

   Daarom geen verloop meer maar drie échte vormen — dezelfde taal als de
   vormen in de hero, met een scherpe rand in plaats van een wazige vlek. Elke
   vorm staat in een eigen bestand op een vel met flink lege ruimte eromheen,
   zodat hij de rand van zijn vel nergens raakt en er dus niets af te knippen
   valt. Zie vlek-perzik.svg.

   Drie dingen houden het onregelmatig:

     1. De vellen zijn ongelijk hoog (1240, 1570, 1910). Ze komen daardoor pas
        na tienduizenden pixels weer samen op dezelfde plek — verder dan de
        langste pagina lang is. Even hoge vellen zouden behang opleveren.
     2. Elke vorm staat op een andere hoogte in zijn vel, dus ook op een andere
        hoogte in de pagina.
     3. Twee van de drie hangen half buiten beeld (links en rechts een negatieve
        marge). Een vorm die je maar half ziet leest als een vlak, een vorm die
        je helemaal ziet als een figuurtje.

   De breedte schaalt mee met het venster, de hoogte niet. Dat is bewust: de
   hoogte bepaalt de herhaling, en die mag niet veranderen als de adresbalk op
   een telefoon in- of uitklapt. preserveAspectRatio="none" in de bestanden
   laat de vorm die breedte volgen; een vlek mag uitrekken, een vlek is geen
   pictogram.

   Zet deze klasse ná .sfeer-pagina op <body>. */
.sfeer-lang {
    background-image:
        url("vlek-perzik.svg"),
        url("vlek-salie.svg"),
        url("vlek-koraal.svg");
    background-position:
        left -110px top 240px,
        right -90px top 700px,
        left 38% top 1240px;
    /* De hoogtes volgen de vellen zelf (zie tools/vlekvormen.js). Ze zijn
       hoog én onderling ondeelbaar: een pagina van vierduizend pixels ziet
       elk vel dus hooguit één keer, en de drie lagen komen nooit samen
       terug. Eerder stond hier 1240/1570/1910 met één vorm per vel, en dan
       zie je dezelfde silhouet vier keer op één pagina. */
    background-size:
        clamp(300px, 40vw, 620px) 3400px,
        clamp(260px, 34vw, 520px) 3900px,
        clamp(240px, 30vw, 460px) 4400px;
    background-repeat: repeat-y;
}

/* Wie meer contrast vraagt, vraagt om minder decoratie. */
/* Wie minder beweging vroeg, krijgt vormen die stilstaan. De algemene
   vangregel zet de duur al bijna op nul, maar dat laat ze eindigen op de
   laatste keyframe — dus net iets verschoven. Hier gaat de animatie echt uit. */
@media (prefers-reduced-motion: reduce) {

    .hero-blobs path,
    .sfeer-band-vlek path,
    .foto-vlek path {
        animation: none;
    }
}

@media (prefers-contrast: more) {

    .sfeer-pagina {
        background-image: none;
    }

    /* De vormen zijn nu echte SVG-elementen; background-image: none doet daar
       niets. Ze moeten dus verborgen worden in plaats van leeggemaakt. */
    .hero-blobs,
    .sfeer-band-vlek,
    .foto-vlek {
        display: none;
    }
}

/* Op papier kost dit alleen inkt: de tekst wordt er niet leesbaarder van
   en een grijze vlek achter een kop wel slechter. */
@media print {

    .sfeer-pagina {
        background-image: none;
    }

    .hero-blobs,
    .sfeer-band-vlek,
    .foto-vlek {
        display: none;
    }
}

/* Knoppen die meebewegen als je erover gaat.
   ------------------------------------------------------------------
   Dezelfde regel als in Style.css, want die twee bestanden delen niets:
   Style.css kleedt de ingelogde app aan, dit bestand elke publieke
   pagina. Wie hier iets verandert, verandert het daar dus ook.

   Het effect komt van de knop "Vind je niet wat je zoekt?" op de
   marktplaats: 2 beeldpunten omhoog en een schaduw die meegroeit. De
   kanteling van 1 graad blijft voor de grote knoppen (.btn-lg) — op een
   klein knopje oogt scheef slordig in plaats van speels. */
.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.btn-lg:hover {
    transform: translateY(-2px) rotate(-1deg);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {

    /* Deze regel vangt álles, ook animaties die later worden toegevoegd
       zonder dat iemand aan deze instelling denkt. Dat is het punt: een
       vangnet dat je niet hoeft te onderhouden.

       Waarom 0.01ms en niet 0s: een animatie met duur nul wordt door
       sommige browsers behandeld alsof ze nooit begint, en dan vuurt
       `animationend` niet. Bijna-nul gedraagt zich wél normaal.

       De doelgroeplijst op welkom.html zet zichzelf al netjes stil bij
       deze instelling (`animation: none` plus terug naar meerdere rijen).
       Dat blijft werken: `none` haalt de animatie helemaal weg, en dan
       valt er ook geen duur meer te overschrijven. */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn {
        transition: none;
    }

    .btn:hover,
    .btn-lg:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   Kennisbank: verwijzing naar een concrete plek in de app
   ------------------------------------------------------------------
   Een kennisbank-artikel dat zegt "Vintro Pro helpt daarbij" leest als
   reclame. Een artikel dat het pad noemt — tabblad, menu, veldnaam —
   leest als een feit dat je kunt nagaan. Dit blokje is dat pad.

   Bewust maar één keer per artikel: méér vermeldingen maken van een
   artikel een advertentie, en dan verliest het zijn waarde voor de
   lezer én voor Google.

   De kleurvariabelen staan in het <style>-blok van elk artikel zelf,
   niet hier. De reservewaarden vangen op wanneer dit blokje ooit op
   een pagina belandt die die variabelen niet zet. */
.in-app {
    margin: 18px 0 0;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--line, #d9e0e1);
    border-left: 4px solid var(--coral, #d9714a);
    border-radius: 12px;
    font-size: .95rem;
    line-height: 1.62;
}

.in-app strong {
    color: var(--navy-deep, #1f2d38);
}

/* Een schermnaam mag nooit halverwege afbreken: dan lijkt het twee
   dingen in plaats van één knop. */
.in-app .pad {
    white-space: nowrap;
    font-weight: 600;
}

/* De twee knoppen onder een artikel stonden hier ook even, met de namen
   .cta-knoppen en .btn-ghost. Die zijn weggehaald: sinds 15 aug 2026 komen
   .cta-knoppen, .knop-hoofd en .knop-neven uit het gedeelde blok tussen
   @vaste-navigatie-begin en -einde, dat élke publieke pagina woord voor woord
   draagt. Dit bestand laadt ná dat blok, dus een kopie hier zou het stilletjes
   overschrijven — precies wat die afspraak moet voorkomen.
   Knopstijl hoort daar, niet hier. */

/* ============================================================
   RONDE ICOONKNOPJES — delen en contact opnemen onder een stuk.
   Zie merkiconen.js voor het waarom: zeven brede emoji-knoppen namen meer
   plaats in dan het stuk zelf, en de emoji werden per toestel anders
   getekend (de WhatsApp-📱 kwam op Windows uit als een toetsenblokje).

   De merkkleur komt per knop mee als --icoonkleur, zodat één regel hier
   volstaat voor alle vijf. In rust zijn ze grijs: vijf merkkleuren naast
   elkaar trekken meer aandacht dan het stuk dat te koop staat.

   42 punten, niet 32: bij 125% vergroting op een laptop -- hoe deze site
   het vaakst bekeken wordt -- is kleiner niet meer raak te klikken.
   ============================================================ */
.icoonrij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: #fff;
    color: #495057;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.icoonknop:hover,
.icoonknop:focus-visible {
    color: var(--icoonkleur, #495057);
    border-color: var(--icoonkleur, #495057);
    background: rgba(0, 0, 0, .03);
}

/* De toetsenbordrand moet zichtbaar blijven, ook op een witte achtergrond. */
.icoonknop:focus-visible {
    outline: 2px solid var(--icoonkleur, #495057);
    outline-offset: 2px;
}

/* Een merkteken vóór een gewone tekstknop (bv. "Verstuur via WhatsApp" in de
   favorietenlijst). Daar blijft het woord staan -- het is een zin, geen merk
   om aan te klikken -- maar de emoji ervoor werd per toestel anders getekend. */
.icoon-in-knop {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 6px;
}
