/*
 * core.css — Heart Workx
 * Gegenereerd door bundel_css.py
 * Bevat: tokens.css, base.css, knoppen.css, nav.css, footer.css, cookie.css, zweef.css
 */

/* ── tokens.css ──────────────────────────────────────── */
/* =============================================================
   TOKENS.CSS — Heart Workx design tokens
   Geladen op elke pagina, altijd als eerste.

   Kleuren komen uit config.json via head.php (:root inline).
   Hier staan alleen de vaste tokens die niet via het CMS
   worden beheerd — spacing, radius, schaduwen, animaties,
   breekpunten als custom properties.

   NOOIT hier aanpassen zonder ook head.php te controleren.
   ============================================================= */

:root {

    /* ── Kleurenpalet (waarden via head.php uit config/db) ──────
       --hoofdkleur    standaard #a32508  rood  — CTA, knoppen
       --accentkleur   standaard #E8C9A0  zand  — accenten donker
       --donker        standaard #2c4a52  blauwgroen — L5, nav
       --achtergrond   standaard #FAF7F2  crème — body
       --tekstkleur    standaard #2C2C2C  bijna-zwart
       --zacht         standaard #F5EDE4  warm zacht — L2
       --wit           standaard #FFFFFF
       ──────────────────────────────────────────────────────── */

    /* Afgeleide kleuren — niet via CMS, wel consistente tokens */
    --donker-diep:        #1e333a;   /* hover staat donker */
    --donker-licht:       #c8dde2;   /* subtiele lijn op donker */
    --tekst-zacht:        #9B9589;   /* secondaire tekst */
    --tekst-op-donker:    rgba(255, 255, 255, 0.85);
    --overlay-donker:     rgba(28, 40, 51, 0.62);  /* L1 foto overlay */
    --schaduw-kleur:      rgba(0, 0, 0, 0.08);

    /* ── Spacing schaal (mobile-first, 4px grid) ─────────────── */
    --ruimte-1:   4px;
    --ruimte-2:   8px;
    --ruimte-3:   12px;
    --ruimte-4:   16px;
    --ruimte-5:   24px;
    --ruimte-6:   32px;
    --ruimte-7:   48px;
    --ruimte-8:   64px;
    --ruimte-9:   80px;
    --ruimte-10:  100px;

    /* Sectie padding — mobiel basis, groeit via media queries */
    --sectie-v:      56px;   /* verticaal */
    --sectie-h:      20px;   /* horizontaal */
    --container-max: 1200px;

    /* ── Typografie ──────────────────────────────────────────── */
    /* --display-font en --body-font komen uit head.php          */
    --tekst-xs:   0.70rem;   /* label, meta */
    --tekst-sm:   0.85rem;   /* klein, microcopy */
    --tekst-base: 1rem;      /* lopende tekst */
    --tekst-md:   1.05rem;   /* iets groter intro */
    --tekst-lg:   1.2rem;    /* lead */

    --kop-h1: clamp(2rem,   5vw, 3.2rem);
    --kop-h2: clamp(1.6rem, 4vw, 2.4rem);
    --kop-h3: clamp(1.2rem, 3vw, 1.6rem);

    --regelafstand-kop:  1.2;
    --regelafstand-tekst: 1.75;

    --gewicht-normaal: 400;
    --gewicht-semi:    600;
    --gewicht-vet:     700;

    --spatie-label:  3px;    /* letter-spacing labels */
    --spatie-knop:   0.5px;

    /* ── Vormen ──────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-rond: 999px;

    /* ── Schaduwen ───────────────────────────────────────────── */
    --schaduw-xs:  0 1px  4px  var(--schaduw-kleur);
    --schaduw-sm:  0 4px  12px var(--schaduw-kleur);
    --schaduw-md:  0 8px  24px var(--schaduw-kleur);
    --schaduw-lg:  0 16px 48px var(--schaduw-kleur);

    /* ── Animaties ───────────────────────────────────────────── */
    --overgang-snel:    0.15s ease;
    --overgang-normaal: 0.25s ease;
    --overgang-traag:   0.4s  ease;

    /* Scroll-animatie voor entrance (Intersection Observer) */
    --scroll-duur:      0.55s;
    --scroll-vertraging: 0.08s;  /* stapeling per kind-element */
    --scroll-afstand:   28px;    /* opwaartse beweging bij inkomst */

    /* ── Z-lagen ─────────────────────────────────────────────── */
    --z-basis:   0;
    --z-laag:    10;
    --z-nav:     100;
    --z-zweef:   200;
    --z-overlay: 300;
    --z-modal:   400;

    /* ── Breekpunten als tokens (informatief — gebruik in comments)
       480px  grote telefoon / liggend
       768px  tablet / iPad staand
       1024px iPad liggend / laptop
       1280px desktop breed
       ──────────────────────────────────────────────────────── */
}

/* Sectie ruimte groeit mee met het scherm */
@media (min-width: 480px) {
    :root {
        --sectie-v: 64px;
        --sectie-h: 24px;
    }
}
@media (min-width: 768px) {
    :root {
        --sectie-v: 80px;
        --sectie-h: 32px;
    }
}
@media (min-width: 1024px) {
    :root {
        --sectie-v:  96px;
        --sectie-h:  48px;
    }
}
@media (min-width: 1280px) {
    :root {
        --sectie-v:  112px;
    }
}

/* ── base.css ────────────────────────────────────────── */
/* =============================================================
   BASE.CSS — Heart Workx basis
   Reset, typografie, links, afbeeldingen, containers,
   hulpklassen en scroll-entrance animaties.
   Geladen op elke pagina, na tokens.css.
   ============================================================= */

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--body-font), sans-serif;
    font-size:        var(--tekst-base);
    font-weight:      var(--gewicht-normaal);
    color:            var(--tekstkleur);
    background-color: var(--achtergrond);
    line-height:      var(--regelafstand-tekst);
    overflow-x:       hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Koppen ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family:  var(--display-font), serif;
    font-weight:  var(--gewicht-normaal);
    line-height:  var(--regelafstand-kop);
    color:        var(--tekstkleur);
}

h1 { font-size: var(--kop-h1); }
h2 { font-size: var(--kop-h2); }
h3 { font-size: var(--kop-h3); }

/* ── Tekst ────────────────────────────────────────────────── */
p {
    margin-bottom: 1em;
    max-width: 68ch;   /* leescomfort — nooit breder dan dit */
}
p:last-child { margin-bottom: 0; }

/* ── Links ────────────────────────────────────────────────── */
a {
    color: var(--hoofdkleur);
    text-decoration: none;
    transition: color var(--overgang-snel);
}
a:hover { text-decoration: underline; }

/* ── Afbeeldingen ─────────────────────────────────────────── */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img[loading="lazy"] { content-visibility: auto; }

/* ── Container ────────────────────────────────────────────── */
.hw-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sectie-h);
}

/* ── Sectie basis ─────────────────────────────────────────── */
.hw-sectie {
    padding: var(--sectie-v) 0;
}

/* ── Label (eyebrow tekst boven kop) ─────────────────────── */
.hw-label {
    display: block;
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
    color:          var(--hoofdkleur);
    margin-bottom:  var(--ruimte-4);
}

.hw-label--licht {
    color: var(--accentkleur);
}

/* ── Schermlezer hulptekst ────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Uitlijning hulpklassen ───────────────────────────────── */
.hw-centrum  { text-align: center; }
.hw-links    { text-align: left; }

/* ── Visuele scheidingslijn ───────────────────────────────── */
.hw-scheiding {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.07);
    margin: 0;
}

/* ── Kaart basis ──────────────────────────────────────────── */
.hw-kaart {
    background:    var(--wit);
    border-radius: var(--radius-lg);
    border:        1px solid rgba(193,127,90,0.12);
    padding:       var(--ruimte-6);
    box-shadow:    var(--schaduw-sm);
}

/* ── Pagina hero (innerlijke pagina's) ───────────────────── */
.hw-pagina-hero {
    background: linear-gradient(135deg, var(--donker) 0%, #2A3E47 100%);
    padding: var(--ruimte-9) var(--sectie-h) var(--ruimte-8);
    text-align: center;
    color: var(--wit);
}
.hw-pagina-hero h1 { color: var(--wit); }
.hw-pagina-hero p  {
    color: var(--tekst-op-donker);
    margin-top: var(--ruimte-3);
    font-size: var(--tekst-md);
}

/* =============================================================
   SCROLL-ENTRANCE ANIMATIES
   Werkt via Intersection Observer in main.js.
   Elk element met .hw-reveal start verborgen en
   schuift omhoog zodra het in beeld komt.
   ============================================================= */

@keyframes hw-inkomst {
    from {
        opacity: 0;
        transform: translateY(var(--scroll-afstand));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Standaard reveal — wordt door JS geactiveerd */
.hw-reveal {
    opacity: 0;
    transform: translateY(var(--scroll-afstand));
    transition:
        opacity  var(--scroll-duur) ease,
        transform var(--scroll-duur) ease;
    will-change: opacity, transform;
}

.hw-reveal.zichtbaar {
    opacity: 1;
    transform: translateY(0);
}

/* Gestapelde kinderen — elk iets later */
.hw-reveal-groep > * {
    opacity: 0;
    transform: translateY(var(--scroll-afstand));
    transition:
        opacity  var(--scroll-duur) ease,
        transform var(--scroll-duur) ease;
    will-change: opacity, transform;
}

.hw-reveal-groep.zichtbaar > *:nth-child(1) { transition-delay: calc(var(--scroll-vertraging) * 0); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(2) { transition-delay: calc(var(--scroll-vertraging) * 1); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(3) { transition-delay: calc(var(--scroll-vertraging) * 2); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(4) { transition-delay: calc(var(--scroll-vertraging) * 3); opacity: 1; transform: translateY(0); }
.hw-reveal-groep.zichtbaar > *:nth-child(5) { transition-delay: calc(var(--scroll-vertraging) * 4); opacity: 1; transform: translateY(0); }

/* Voorkeur voor minder beweging respecteren */
@media (prefers-reduced-motion: reduce) {
    .hw-reveal,
    .hw-reveal-groep > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =============================================================
   GLOBALE KLASSEN — compatibiliteit met bestaande pagina's
   Klassen die over.php, contact.php en andere innerlijke
   pagina's gebruiken vanuit het oude site.css / main.css.
   ============================================================= */

/* ── Container ───────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--sectie-h);
}

/* ── Sectie helpers ──────────────────────────────────────── */
.sectie-label {
    display:        block;
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: 3px;
    text-transform: uppercase;
    color:          var(--hoofdkleur);
    margin-bottom:  var(--ruimte-4);
}

.sectie-header {
    text-align:    center;
    max-width:     680px;
    margin:        0 auto var(--ruimte-8);
}

.sectie-intro {
    font-size:   var(--tekst-md);
    color:       #777;
    margin-top:  var(--ruimte-4);
    line-height: 1.8;
}

.achtergrond-zacht { background: var(--zacht); }
.achtergrond-donker { background: var(--donker); color: var(--wit); }

/* ── Kaart basis ──────────────────────────────────────────── */
.kaart {
    background:    var(--wit);
    border-radius: var(--radius-lg);
    border:        1px solid rgba(193,127,90,0.12);
    padding:       var(--ruimte-6);
    box-shadow:    var(--schaduw-sm);
}

/* ── Knoppen — oud systeem compatibiliteit ───────────────── */
.knop-primair,
.knop-secundair {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ruimte-2);
    padding:         12px 24px;
    border-radius:   var(--radius-md);
    font-family:     var(--body-font), sans-serif;
    font-size:       var(--tekst-base);
    font-weight:     var(--gewicht-semi);
    cursor:          pointer;
    text-decoration: none;
    border:          2px solid transparent;
    transition:      background var(--overgang-normaal), transform var(--overgang-snel), box-shadow var(--overgang-snel);
    min-height:      44px;
    -webkit-tap-highlight-color: transparent;
}

.knop-primair {
    background:   var(--hoofdkleur);
    color:        var(--wit);
    border-color: var(--hoofdkleur);
}

.knop-primair:hover {
    background:      var(--donker);
    border-color:    var(--donker);
    color:           var(--wit);
    transform:       translateY(-2px);
    box-shadow:      var(--schaduw-md);
    text-decoration: none;
}

.knop-secundair {
    background:   transparent;
    color:        var(--hoofdkleur);
    border-color: var(--hoofdkleur);
}

.knop-secundair:hover {
    background:      var(--hoofdkleur);
    color:           var(--wit);
    transform:       translateY(-2px);
    text-decoration: none;
}

/* ── Kolom helpers ───────────────────────────────────────── */
.kolom-beeld { width: 100%; }

.kolom-tekst h2 { margin-bottom: var(--ruimte-5); }
.kolom-tekst p  { color: #666; line-height: 1.85; margin-bottom: var(--ruimte-4); }

/* ── Contact info kolom ──────────────────────────────────── */
.contact-info h2    { margin-bottom: var(--ruimte-4); }
.contact-info p     { color: #777; line-height: 1.8; margin-bottom: var(--ruimte-5); }

/* ── Pagina hero (innerlijke pagina's) ───────────────────── */
.pagina-hero {
    background: linear-gradient(135deg, var(--donker) 0%, var(--donker-diep) 100%);
    padding:    var(--ruimte-9) var(--sectie-h) var(--ruimte-8);
    text-align: center;
    color:      var(--wit);
}

.pagina-hero h1 {
    color:         var(--wit);
    margin-bottom: var(--ruimte-3);
}

.pagina-hero p {
    color:     var(--tekst-op-donker);
    font-size: var(--tekst-md);
    max-width: 580px;
    margin:    0 auto;
}

/* ── Pagina sectie ───────────────────────────────────────── */
.pagina-sectie {
    padding: var(--sectie-v) var(--sectie-h);
}

/* ── knoppen.css ─────────────────────────────────────── */
/* =============================================================
   KNOPPEN.CSS — Heart Workx
   Alle knopvarianten op één plek.
   Geladen op elke pagina, na base.css.

   Naamgeving:
   .hw-knop              basis — altijd aanwezig
   .hw-knop-primair      rood, gevuld — hoofd CTA
   .hw-knop-outline      omtrek, rode rand
   .hw-knop-ghost        wit op donker — L5 winkelier
   .hw-knop-zacht        crème op donker — alternatief
   --groot               modifier voor hogere padding
   ============================================================= */

/* ── Basis knop — gedeelde eigenschappen ─────────────────── */
.hw-knop {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ruimte-2);
    padding:         14px 28px;
    border-radius:   var(--radius-md);
    font-family:     var(--body-font), sans-serif;
    font-size:       var(--tekst-sm);
    font-weight:     var(--gewicht-vet);
    letter-spacing:  var(--spatie-knop);
    line-height:     1;
    text-decoration: none;
    border:          2px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    min-height:      44px;   /* toegankelijkheid — minimale raakoppervlak */
    transition:
        background  var(--overgang-normaal),
        color       var(--overgang-normaal),
        border-color var(--overgang-normaal),
        transform   var(--overgang-snel),
        box-shadow  var(--overgang-snel);
}

.hw-knop:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.hw-knop:active {
    transform: translateY(0);
}

/* ── Gedeelde basis — ook zonder .hw-knop class ─────────────
   Elke variant erft de volledige basis zodat het volstaat
   om alleen bv. class="hw-knop-primair hw-knop--groot" te gebruiken.
   ──────────────────────────────────────────────────────────── */
.hw-knop-primair,
.hw-knop-outline,
.hw-knop-ghost,
.hw-knop-zacht {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ruimte-2);
    padding:         14px 28px;
    border-radius:   var(--radius-md);
    font-family:     var(--body-font), sans-serif;
    font-size:       var(--tekst-sm);
    font-weight:     var(--gewicht-vet);
    letter-spacing:  var(--spatie-knop);
    line-height:     1;
    text-decoration: none;
    border:          2px solid transparent;
    cursor:          pointer;
    white-space:     nowrap;
    min-height:      44px;
    -webkit-tap-highlight-color: transparent;
    transition:
        background   var(--overgang-normaal),
        color        var(--overgang-normaal),
        border-color var(--overgang-normaal),
        transform    var(--overgang-snel),
        box-shadow   var(--overgang-snel);
}

.hw-knop-primair:hover,
.hw-knop-outline:hover,
.hw-knop-ghost:hover,
.hw-knop-zacht:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.hw-knop-primair:active,
.hw-knop-outline:active,
.hw-knop-ghost:active,
.hw-knop-zacht:active {
    transform: translateY(0);
}

/* ── Primair — rood gevuld ────────────────────────────────── */
.hw-knop-primair {
    background:   var(--hoofdkleur);
    color:        var(--wit);
    border-color: var(--hoofdkleur);
}

.hw-knop-primair:hover {
    background:   var(--donker-diep);
    border-color: var(--donker-diep);
    color:        var(--wit);
    box-shadow:   var(--schaduw-md);
}

/* ── Outline — transparant met rode rand ──────────────────── */
.hw-knop-outline {
    background:   transparent;
    color:        var(--hoofdkleur);
    border-color: var(--hoofdkleur);
}

.hw-knop-outline:hover {
    background:   var(--hoofdkleur);
    color:        var(--wit);
    box-shadow:   var(--schaduw-sm);
}

/* ── Ghost — wit op donkere achtergrond (L5) ─────────────── */
.hw-knop-ghost {
    background:   transparent;
    color:        var(--wit);
    border-color: rgba(255, 255, 255, 0.5);
}

.hw-knop-ghost:hover {
    background:   rgba(255, 255, 255, 0.12);
    border-color: var(--wit);
    color:        var(--wit);
}

/* ── Zacht — crème op donkere achtergrond ────────────────── */
.hw-knop-zacht {
    background:   var(--accentkleur);
    color:        var(--donker);
    border-color: var(--accentkleur);
}

.hw-knop-zacht:hover {
    background:   var(--wit);
    border-color: var(--wit);
    color:        var(--donker);
    box-shadow:   var(--schaduw-sm);
}

/* ── Modifier: groot ──────────────────────────────────────── */
.hw-knop--groot {
    padding:    18px 40px;
    font-size:  var(--tekst-base);
    min-height: 54px;
}

/* ── Modifier: vol (100% breedte) ────────────────────────── */
.hw-knop--vol {
    width:          100%;
    justify-content: center;
}

/* ── Prijs hint onder knop ────────────────────────────────── */
.hw-knop-hint {
    display:    block;
    margin-top: var(--ruimte-3);
    font-size:  var(--tekst-xs);
    color:      var(--tekst-zacht);
    text-align: center;
}

/* Op donkere achtergrond */
.hw-knop-hint--licht {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Responsief ───────────────────────────────────────────── */
@media (min-width: 480px) {
    .hw-knop--groot {
        padding: 20px 48px;
    }
}

/* ── nav.css ─────────────────────────────────────────── */
/* =============================================================
   NAV.CSS — Heart Workx navigatie
   Mobile-first. Vijf breekpunten.

   Structuur (uit header.php):
   .mob-topbalk       sticky topbalk mobiel (logo + iconen)
   .mob-onderbalk     sticky onderbalk mobiel (5 menu-items)
   .site-header       desktop header ≥1024px
   .naar-top-knop     scroll-to-top knop

   Mobiel  <480px    topbalk + onderbalk zichtbaar
   Klein   480-767px topbalk + onderbalk zichtbaar
   Tablet  768-1023px topbalk + onderbalk zichtbaar
   Laptop  ≥1024px   site-header zichtbaar, mob-* verborgen
   ============================================================= */

/* ── Ruimte voor vaste balken ─────────────────────────────── */
/* Topbalk hoogte: 52px, onderbalk hoogte: 58px              */
body {
    padding-top:    52px;
    padding-bottom: 58px;
}

/* ── Mobiele topbalk ──────────────────────────────────────── */
.mob-topbalk {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--z-nav);
    height:     52px;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    padding:    0 var(--ruimte-4);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mob-logo { display: flex; align-items: center; }
.mob-logo-img { height: 30px; width: auto; }

.mob-topbalk-iconen {
    display:  flex;
    gap:      var(--ruimte-2);
    align-items: center;
}

.mob-icoon {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:   40px;
    height:  40px;
    color:   var(--donker);
    border-radius: var(--radius-md);
    transition: background var(--overgang-snel), color var(--overgang-snel);
}
.mob-icoon:hover {
    background: var(--zacht);
    text-decoration: none;
}

/* ── Mobiele onderbalk ────────────────────────────────────── */
.mob-onderbalk {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    var(--z-nav);
    height:     58px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.mob-nav-lijst {
    display:  flex;
    height:   100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mob-nav-item { flex: 1; }

.mob-nav-link {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    height:         100%;
    gap:            2px;
    color:          var(--tekst-zacht);
    text-decoration: none;
    transition: color var(--overgang-snel), background var(--overgang-snel);
    padding: 0 var(--ruimte-1);
}

.mob-nav-link:hover { text-decoration: none; }

.mob-nav-ico { display: flex; line-height: 1; }
.mob-nav-ico svg { width: 20px; height: 20px; }

.mob-nav-lbl {
    font-size:   9px;
    font-weight: var(--gewicht-semi);
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
}

.mob-nav-link.actief {
    color: var(--hoofdkleur);
}

/* ── Desktop header — verborgen op mobiel ────────────────── */
.site-header { display: none; }

/* ── Naar-top knop ───────────────────────────────────────── */
.naar-top-knop {
    position:   fixed;
    bottom:     74px;   /* boven de onderbalk */
    right:      var(--ruimte-4);
    z-index:    var(--z-zweef);
    width:      40px;
    height:     40px;
    border-radius: var(--radius-rond);
    background: var(--donker);
    color:      var(--wit);
    border:     none;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    pointer-events: none;
    transition:
        opacity   var(--overgang-normaal),
        transform var(--overgang-snel);
    box-shadow: var(--schaduw-md);
}

.naar-top-knop.zichtbaar {
    opacity: 1;
    pointer-events: auto;
}

.naar-top-knop:hover {
    background:  var(--hoofdkleur);
    transform:   translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   TABLET (768px+)
   Iets meer ruimte in de topbalk, labels groter
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .mob-topbalk { height: 56px; padding: 0 var(--ruimte-6); }
    .mob-logo-img { height: 34px; }
    body { padding-top: 56px; }

    .mob-onderbalk { height: 64px; }
    body { padding-bottom: 64px; }

    .mob-nav-ico svg { width: 22px; height: 22px; }
    .mob-nav-lbl { font-size: 10px; }

    .naar-top-knop {
        bottom: 80px;
        width:  44px;
        height: 44px;
    }
}

/* ══════════════════════════════════════════════════════════
   LAPTOP/DESKTOP (1024px+)
   Mobiele balken verdwijnen, desktop header verschijnt
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    body {
        padding-top:    0;
        padding-bottom: 0;
    }

    .mob-topbalk  { display: none; }
    .mob-onderbalk { display: none; }

    /* ── Desktop header ────────────────────────────────── */
    .site-header {
        display:   block;
        position:  sticky;
        top:       0;
        z-index:   var(--z-nav);
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .header-inner {
        max-width: var(--container-max);
        margin:    0 auto;
        padding:   0 var(--sectie-h);
        height:    64px;
        display:   flex;
        align-items: center;
        gap:       var(--ruimte-6);
    }

    .header-logo { display: flex; align-items: center; flex-shrink: 0; }
    .logo-img    { height: 40px; width: auto; }

    /* Navigatielijst */
    .hoofdnav { flex: 1; }

    .nav-lijst {
        display:    flex;
        gap:        var(--ruimte-1);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-link {
        display:      block;
        padding:      8px 14px;
        border-radius: var(--radius-sm);
        font-size:    var(--tekst-sm);
        font-weight:  var(--gewicht-semi);
        color:        var(--tekstkleur);
        transition:   background var(--overgang-snel), color var(--overgang-snel);
    }

    .nav-link:hover {
        background:     var(--zacht);
        color:          var(--donker);
        text-decoration: none;
    }

    .nav-link.actief {
        color:       var(--hoofdkleur);
        font-weight: var(--gewicht-vet);
    }

    /* Rechter zijde */
    .header-rechts {
        display:     flex;
        align-items: center;
        gap:         var(--ruimte-3);
        flex-shrink: 0;
    }

    .header-icoon {
        display:     flex;
        align-items: center;
        justify-content: center;
        width:   38px;
        height:  38px;
        color:   var(--donker);
        border-radius: var(--radius-sm);
        transition: background var(--overgang-snel);
    }
    .header-icoon:hover {
        background: var(--zacht);
        text-decoration: none;
    }

    .header-cta {
        display:      inline-flex;
        align-items:  center;
        padding:      9px 20px;
        background:   var(--hoofdkleur);
        color:        var(--wit);
        border-radius: var(--radius-md);
        font-size:    var(--tekst-sm);
        font-weight:  var(--gewicht-vet);
        transition:   background var(--overgang-snel), transform var(--overgang-snel);
    }
    .header-cta:hover {
        background:     var(--donker);
        color:          var(--wit);
        text-decoration: none;
        transform:      translateY(-1px);
    }

    /* Naar-top knop op desktop */
    .naar-top-knop {
        bottom: var(--ruimte-6);
        right:  var(--ruimte-6);
    }
}

/* ══════════════════════════════════════════════════════════
   BREED DESKTOP (1280px+)
   Meer lucht in de header
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    .header-inner { height: 70px; }
    .logo-img     { height: 44px; }

    .nav-link {
        font-size: var(--tekst-base);
        padding:   9px 16px;
    }
}

/* ── footer.css ──────────────────────────────────────── */
/* =============================================================
   FOOTER.CSS — Heart Workx
   Mobile-first. Vijf breekpunten.

   Structuur (uit footer.php):
   .site-footer
     .footer-inner
       .footer-top
         .footer-merk       (logo-tekst, tagline, social)
         .footer-kolommen   (navigatie, juridisch, contact)
       .footer-vertrouwen   (AI + toegankelijkheidskaarten)
       .footer-bottom       (copyright)
   ============================================================= */

/* ── Wrapper ──────────────────────────────────────────────── */
.site-footer {
    background: var(--donker);
    color:      var(--tekst-op-donker);
    margin-top: auto;
}

.footer-inner {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   var(--ruimte-8) var(--sectie-h) var(--ruimte-6);
}

/* ── Top: merk + kolommen ─────────────────────────────────── */
.footer-top {
    display:        flex;
    flex-direction: column;
    gap:            var(--ruimte-7);
    margin-bottom:  var(--ruimte-7);
}

/* ── Merk blok ────────────────────────────────────────────── */
.footer-logo-tekst {
    display:     inline-block;
    font-family: var(--display-font), serif;
    font-size:   1.4rem;
    color:       var(--wit);
    margin-bottom: var(--ruimte-3);
    text-decoration: none;
}
.footer-logo-tekst:hover { text-decoration: none; color: var(--accentkleur); }

.footer-tagline {
    font-size:   var(--tekst-sm);
    color:       rgba(255,255,255,0.6);
    margin-bottom: var(--ruimte-5);
    max-width: none;
}

/* Social links */
.footer-social {
    display: flex;
    gap:     var(--ruimte-3);
    flex-wrap: wrap;
}

.footer-social-link {
    display:      flex;
    align-items:  center;
    justify-content: center;
    width:        36px;
    height:       36px;
    border-radius: var(--radius-sm);
    color:        rgba(255,255,255,0.7);
    background:   rgba(255,255,255,0.08);
    transition:
        background var(--overgang-snel),
        color      var(--overgang-snel);
}
.footer-social-link:hover {
    background:     rgba(255,255,255,0.16);
    color:          var(--wit);
    text-decoration: none;
}

/* ── Kolommen ─────────────────────────────────────────────── */
.footer-kolommen {
    display:        flex;
    flex-direction: column;
    gap:            var(--ruimte-6);
}

.footer-kolom-titel {
    font-size:      var(--tekst-xs);
    font-weight:    var(--gewicht-vet);
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
    color:          var(--accentkleur);
    margin-bottom:  var(--ruimte-3);
}

.footer-link-rij {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--ruimte-2) var(--ruimte-3);
    align-items: center;
}

.footer-link {
    font-size:   var(--tekst-sm);
    color:       rgba(255,255,255,0.65);
    transition:  color var(--overgang-snel);
}
.footer-link:hover {
    color:           var(--wit);
    text-decoration: none;
}

.footer-link-tekst {
    font-size: var(--tekst-sm);
    color:     rgba(255,255,255,0.5);
}

.footer-sep {
    color:     rgba(255,255,255,0.2);
    font-size: var(--tekst-sm);
    user-select: none;
}

/* ── Vertrouwenskaarten ───────────────────────────────────── */
.footer-vertrouwen {
    display:        flex;
    flex-direction: column;
    gap:            var(--ruimte-3);
    padding:        var(--ruimte-6) 0;
    border-top:     1px solid rgba(255,255,255,0.08);
    border-bottom:  1px solid rgba(255,255,255,0.08);
    margin-bottom:  var(--ruimte-6);
}

.vertrouwen-kaart {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--ruimte-4);
    padding:       var(--ruimte-4);
    border-radius: var(--radius-md);
    background:    rgba(255,255,255,0.04);
    border:        1px solid rgba(255,255,255,0.08);
    transition:    background var(--overgang-snel);
    text-decoration: none;
}
.vertrouwen-kaart:hover {
    background:      rgba(255,255,255,0.08);
    text-decoration: none;
}

.vertrouwen-icoon {
    color:      var(--accentkleur);
    flex-shrink: 0;
    margin-top:  2px;
}

.vertrouwen-tekst {
    display:        flex;
    flex-direction: column;
    gap:            var(--ruimte-1);
}
.vertrouwen-tekst strong {
    font-size:   var(--tekst-sm);
    font-weight: var(--gewicht-semi);
    color:       var(--wit);
}
.vertrouwen-tekst span {
    font-size:   var(--tekst-xs);
    color:       rgba(255,255,255,0.55);
    line-height: 1.5;
    max-width: none;
}

/* ── Bottom ───────────────────────────────────────────────── */
.footer-bottom p {
    font-size:  var(--tekst-xs);
    color:      rgba(255,255,255,0.4);
    text-align: center;
    max-width: none;
}
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════════
   TABLET (768px+)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .footer-kolommen {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   var(--ruimte-6) var(--ruimte-8);
    }

    .footer-vertrouwen {
        flex-direction: row;
        gap:            var(--ruimte-4);
    }

    .vertrouwen-kaart { flex: 1; }
}

/* ══════════════════════════════════════════════════════════
   LAPTOP (1024px+)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .footer-top {
        flex-direction: row;
        gap:            var(--ruimte-10);
    }

    .footer-merk {
        flex:      0 0 220px;
        max-width: 220px;
    }

    .footer-tagline { max-width: 200px; }

    .footer-kolommen {
        flex:                  1;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════
   BREED (1280px+)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

    .footer-merk { flex: 0 0 260px; max-width: 260px; }
}

/* ── cookie.css ──────────────────────────────────────── */
/* =============================================================
   COOKIE.CSS — Cookie consent banner
   ============================================================= */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    right: 24px;
    max-width: 560px;
    z-index: 500;
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(193,127,90,0.15);
    box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 24px 28px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cookie-banner.zichtbaar {
    opacity: 1;
    transform: translateY(0);
}

.cookie-inhoud {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cookie-tekst strong {
    display: block;
    font-size: 0.92rem;
    color: var(--tekstkleur);
    margin-bottom: 6px;
}

.cookie-tekst p {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.6;
    margin: 0;
}

/* INSTELLINGEN PANEL */
.cookie-instellingen {
    border-top: 1px solid #F0EBE3;
    border-bottom: 1px solid #F0EBE3;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cookie-toggle-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cookie-toggle-info {
    flex: 1;
}

.cookie-toggle-info strong {
    display: block;
    font-size: 0.82rem;
    color: var(--tekstkleur);
    margin-bottom: 2px;
}

.cookie-toggle-info span {
    font-size: 0.72rem;
    color: #aaa;
    line-height: 1.5;
}

/* TOGGLE SWITCH */
.cookie-toggle {
    width: 44px;
    height: 24px;
    border-radius: 99px;
    background: #E0D8D0;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.cookie-toggle.actief {
    background: var(--hoofdkleur);
}

.cookie-toggle.vergrendeld {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--hoofdkleur);
}

.toggle-knop {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.25s ease;
    display: block;
}

.cookie-toggle.actief .toggle-knop {
    transform: translateX(20px);
}

/* KNOPPEN */
.cookie-knoppen {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cookie-opslaan {
    margin-top: -4px;
}

.cookie-knop {
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: var(--body-font);
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}

.cookie-instellingen-knop {
    background: var(--zacht);
    color: var(--tekstkleur);
    border: 1px solid rgba(193,127,90,0.2);
}

.cookie-instellingen-knop:hover { background: #EDE8E0; }

.cookie-weigeren {
    background: var(--zacht);
    color: var(--tekstkleur);
}

.cookie-weigeren:hover { background: #EDE8E0; }

.cookie-accepteren {
    background: var(--hoofdkleur);
    color: white;
}

.cookie-accepteren:hover {
    background: #A66B48;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .cookie-banner  { left: 16px; right: 16px; bottom: 16px; padding: 20px; }
    .cookie-knoppen { flex-direction: column; }
    .cookie-knop    { width: 100%; text-align: center; }
}

/* ── zweef.css ───────────────────────────────────────── */
/* =============================================================
   ZWEEF.CSS — WhatsApp knop + Social zweefbalk
   ============================================================= */

/* WHATSAPP KNOP */
.whatsapp-knop {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 200;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    animation: waPuls 3s ease-in-out infinite;
}

.whatsapp-knop:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,0.55), 0 4px 12px rgba(0,0,0,0.2);
    text-decoration: none;
}

.whatsapp-knop svg { width: 30px; height: 30px; }

@keyframes waPuls {
    0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.15); }
    50%      { box-shadow: 0 4px 32px rgba(37,211,102,0.65), 0 2px 8px rgba(0,0,0,0.15); }
}

/* BACK TO TOP KNOP */
.naar-top-knop {
    position: fixed;
    bottom: 96px;
    right: 28px;
    z-index: 200;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--donker);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    pointer-events: none;
}

.naar-top-knop.zichtbaar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.naar-top-knop:hover {
    background: var(--hoofdkleur);
}

@media (max-width: 899px) {
    /* Onderbalk is 60px + safe area — alles erboven plaatsen */
    .naar-top-knop {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* SOCIALE ZWEEFBALK */
.zweef-social {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zweef-social-knop {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: width 0.25s ease, background 0.2s ease;
    overflow: visible;
}

.zweef-social-knop svg { width: 18px; height: 18px; flex-shrink: 0; position: relative; z-index: 1; }

.zweef-facebook,
.zweef-instagram,
.zweef-linkedin,
.zweef-youtube   { background: var(--hoofdkleur); }

.zweef-social-knop:hover { width: 160px; text-decoration: none; }

/* Tooltip label */
.zweef-tooltip {
    position: absolute;
    left: 44px;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    padding-left: 10px;
}

.zweef-social-knop:hover .zweef-tooltip { opacity: 1; }

/* Eerste en laatste afgerond */
.zweef-social-knop:first-child { border-radius: 0 8px 0 0; }
.zweef-social-knop:last-child  { border-radius: 0 0 8px 0; }

/* Mobiel — kleiner */
@media (max-width: 899px) {
    .zweef-social { display: none; }
    .whatsapp-knop {
        /* Boven de onderbalk (60px) + ademruimte */
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        width: 50px;
        height: 50px;
    }
}