/**
 * Echt Inzicht — Child Theme Stylesheet
 * Gebaseerd op alle visuele ontwerpen gebouwd in deze sessie
 * Parent: Hello Elementor (of GeneratePress)
 *
 * Inhoudsopgave:
 * 1. Variabelen & reset
 * 2. Typografie
 * 3. Navigatie
 * 4. Knoppen
 * 5. Labels & tags
 * 6. Secties & layout
 * 7. Hero
 * 8. Dienst blokken
 * 9. Kaarten
 * 10. USP / statistieken
 * 11. Payoff split
 * 12. Ervaringen / quotes
 * 13. Persoon blokken
 * 14. FAQ
 * 15. Formulieren
 * 16. Blog / Inspiratie
 * 17. Podcast
 * 18. Agenda
 * 19. Footer
 * 20. Hulpklassen
 */

/* ══════════════════════════════════════════════════════════════
   1. VARIABELEN & RESET
   ══════════════════════════════════════════════════════════════ */

:root {
    --ei-creme:      #F4FBFB;
    --ei-creme2:     #F3DBC9;
    --ei-navy:       #252639;
    --ei-goud:       #ED6F54;
    --ei-turquoise:  #1CB5BE;
    --ei-tekst:      #252639;
    --ei-subtekst:   #5a5870;
    --ei-border:     #e2dbd4;
    --ei-wit:        #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════
   2. TYPOGRAFIE
   ══════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Larken Bold';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url(/wp-content/uploads/2024/04/font.woff2) format('woff2'),
         url(/wp-content/uploads/2024/04/font.woff) format('woff');
}


/* ══════════════════════════════════════════════════════════════
   HARDE RESET — alle externe CSS (GeneratePress, plugins) killen
   ══════════════════════════════════════════════════════════════ */

#ei *, #ei *::before, #ei *::after {
    box-sizing: border-box;
}

#ei h1, #ei h2, #ei h3, #ei h4, #ei h5, #ei h6 {
    margin: 0;
    padding: 0;
}

#ei p {
    margin: 0;
    padding: 0;
}

#ei a {
    text-decoration: none;
    color: inherit;
}

#ei ul, #ei ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

#ei img {
    display: block;
    max-width: 100%;
}

#ei input, #ei textarea, #ei button, #ei select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}

#ei button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* Elementor / plugin containers killen */
#ei .entry-content, #ei .entry-header, #ei .entry-footer, #ei .post-navigation, #ei .site-header, #ei .site-footer, #ei .nav-previous, #ei .nav-next {
    display: none !important;
}

body {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 18px;
    color: var(--ei-tekst);
    background: #edeae5;
    line-height: 1.7;
    overflow-x: hidden;
}

/* ── Centrale paginakolom (1080px gecentreerd) ── */
.ei-site {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--ei-wit);
    box-shadow: 0 0 60px rgba(0,0,0,.08);
}

/* Nav altijd volle breedte maar inhoud gecentreerd */
.ei-nav {
    /* nav heeft eigen max-width via ei-nav-inner */
}

/* ID-gebaseerde GP override — hogere specificiteit dan GP class selectors */
#ei .ei-btn,
#ei .ei-btn:visited,
#ei .ei-btn:hover {
    text-decoration: none;
}
#ei .ei-btn--goud,
#ei .ei-btn--goud:visited {
    color: var(--ei-wit);
    background: var(--ei-goud);
}
#ei .ei-btn--navy,
#ei .ei-btn--navy:visited {
    color: var(--ei-wit);
    background: var(--ei-navy);
}
#ei .ei-nav-cta,
#ei .ei-nav-cta:visited {
    color: var(--ei-wit);
    background: var(--ei-goud);
}

/* Knoppen nooit volle breedte */
#ei .ei-btn {
    display: inline-block;
    width: auto;
}

/* GP margin reset hero via ID specificiteit */
#ei .ei-home-hero-links h1,
#ei .ei-home-hero-links p,
#ei .ei-home-hero-links span,
#ei .ei-home-hero-links strong {
    margin: 0;
    padding: 0;
}
.ei-template strong {
    font-weight: bold;
}

h1, h2, h3, h4 {
    font-family: 'Larken Bold', sans-serif;
    font-weight: bold;
    color: var(--ei-navy);
    line-height: 1.15;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3.5vw, 48px); }
h3 { font-size: clamp(20px, 2.5vw, 32px); }

.ei-kop--licht { font-weight: 300; }
.ei-kop--vet   { font-weight: bold; display: block; }

p {
    font-size: 17px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.85;
}

/* ══════════════════════════════════════════════════════════════
   3. NAVIGATIE
   ══════════════════════════════════════════════════════════════ */

/* ei-nav-top bewaard voor achterwaartse compatibiliteit maar niet meer gebruikt */
.ei-nav-top { display: none; }

.ei-nav {
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid var(--ei-border);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1280px;
    z-index: 1000;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .3s, box-shadow .3s;
}

.ei-nav--scrolled {
    background: rgba(255,255,255,.82);
    box-shadow: 0 2px 20px rgba(37,38,57,.08);
}

.ei-nav-inner {
    padding: 1.4rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ei-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* SVG-logo hoogte */
.ei-logo svg {
    height: 36px;
    width: auto;
    display: block;
}

/* Bewaard voor achterwaartse compatibiliteit */
.ei-logo-img { display: none; }
.ei-logo-tekst { display: none; }

.ei-nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.ei-nav-link {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ei-navy);
    text-decoration: none;
    transition: color .15s;
}

.ei-nav .ei-nav-link {
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .15s, box-shadow .15s;
}

.ei-nav .ei-nav-link:hover,
.ei-nav .ei-nav-link--actief {
    color: var(--ei-goud);
    box-shadow: inset 0 -2px 0 var(--ei-goud);
}

/* ══════════════════════════════════════════════════════════════
   4. KNOPPEN
   ══════════════════════════════════════════════════════════════ */

.ei-btn {
    display: inline-block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .65rem 2rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background .15s, color .15s;
    align-self: flex-start;
}

.ei-btn--goud,
.ei-btn--goud:visited,
.ei-btn--goud:hover,
.ei-btn--goud:active {
    background: var(--ei-goud);
    color: var(--ei-wit);
}

.ei-btn--goud:hover {
    background: #c45c43;
}

/* Hover-fix: #ei .ei-btn--goud op regel 148 overrult deze hover zonder #ei-prefix */
#ei .ei-btn--goud:hover {
    background: #c45c43;
}

.ei-btn--outline-turq {
    background: transparent;
    color: var(--ei-turquoise);
    border: 2px solid var(--ei-turquoise);
}

.ei-btn--outline-turq:hover {
    background: var(--ei-turquoise);
    color: var(--ei-wit);
}

.ei-btn--turq,
.ei-btn--turq:visited {
    background: var(--ei-turquoise);
    color: var(--ei-wit);
}
.ei-btn--turq:hover {
    background: #159aa1;
    color: var(--ei-wit);
}

.ei-btn--navy {
    background: var(--ei-navy);
    color: var(--ei-wit);
}

.ei-btn--navy:hover { background: var(--ei-goud); color: var(--ei-wit); }

.ei-btn--outline {
    background: transparent;
    color: var(--ei-wit);
    border: 1px solid rgba(255,255,255,.35);
}

.ei-btn--outline:hover {
    background: rgba(255,255,255,.1);
    color: var(--ei-wit);
}

.ei-nav-cta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--ei-goud);
    color: var(--ei-wit);
    padding: .6rem 1.5rem;
    text-decoration: none;
    transition: background .15s;
}

.ei-nav-cta:hover { background: #c45c43; color: var(--ei-wit); }

/* ══════════════════════════════════════════════════════════════
   5. LABELS & TAGS
   ══════════════════════════════════════════════════════════════ */

.ei-label,
#ei .ei-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: 1rem;
}

.ei-label--turq,
#ei .ei-label--turq { color: var(--ei-turquoise); }

/* Hero kop blok: ruimte tussen label en h1 */
.ei-home-hero-kop {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#ei .ei-home-hero-kop .ei-home-h1 {
    margin: 0;
}

.ei-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: inline-block;
}

/* ══════════════════════════════════════════════════════════════
   6. SECTIES & LAYOUT
   ══════════════════════════════════════════════════════════════ */

.ei-sectie {
    padding: 4rem 3rem;
}

.ei-sectie--wit    { background: var(--ei-wit); }
.ei-sectie--creme  { background: var(--ei-creme); }
.ei-sectie--creme2 { background: var(--ei-creme2); }
.ei-sectie--navy   { background: var(--ei-navy); }

/* Gecentreerde sectie-variant: smaller midden-kolom voor statement-momenten */
.ei-sectie--gecentreerd { padding: 5rem 3rem; }
.ei-sectie-midden {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.ei-sectie--gecentreerd .ei-grid-2 {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .ei-sectie--gecentreerd { padding: 3rem 1.25rem; }
    .ei-sectie--gecentreerd .ei-grid-2 { max-width: 100%; }
}

.ei-sectie-kop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
    margin-bottom: 3rem;
}

.ei-sectie-kop--smal {
    grid-template-columns: 1fr;
    max-width: 600px;
}

.ei-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ei-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.ei-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }

/* Verticale flex-kolom met gap — voor blok-content waar margin-collapse onbetrouwbaar is */
.ei-flex-kol { display: flex; flex-direction: column; gap: 1.5rem; }

/* ══════════════════════════════════════════════════════════════
   7. HERO
   ══════════════════════════════════════════════════════════════ */

.ei-hero {
    background: var(--ei-navy);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
}

.ei-hero-links {
    padding: 6rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ei-hero h1 {
    color: var(--ei-wit);
    margin-bottom: 1.25rem;
}

.ei-hero-lead {
    font-size: 20px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.ei-hero-rechts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid rgba(255,255,255,.06);
}

/* ══════════════════════════════════════════════════════════════
   8. DIENST BLOKKEN
   ══════════════════════════════════════════════════════════════ */

/* Dienst blokken met asymmetrische ronde hoeken */
.ei-dienst-blok {
    padding: 3rem;
    background: var(--ei-navy);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Meer ruimte tussen de twee dienst blokken, stretch zodat knoppen uitlijnen */
.ei-sectie--navy .ei-grid-2 {
    gap: 3rem;
    align-items: stretch;
}

.ei-dienst-blok--a { border-radius: 4px 60px 4px 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .2s, transform .2s; }
.ei-dienst-blok--a:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.ei-dienst-blok--b { border-radius: 4px 4px 4px 60px; background: var(--ei-creme2); border: 1px solid var(--ei-border); transition: filter .2s, transform .2s; }
.ei-dienst-blok--b:hover { filter: brightness(.96); transform: translateY(-3px); }

/* Tekst in dienst blok b (creme achtergrond) */
.ei-dienst-blok--b .ei-kleur-wit { color: var(--ei-navy); }
.ei-dienst-blok--b .ei-kleur-wit-licht { color: var(--ei-subtekst); font-style: italic; }
.ei-dienst-blok--b .ei-split-sub { color: var(--ei-subtekst); }
.ei-dienst-blok--b .ei-pijl-flex { color: var(--ei-subtekst); }
.ei-dienst-blok--b .ei-link-turquoise { color: var(--ei-turquoise); }

/* ══════════════════════════════════════════════════════════════
   9. KAARTEN
   ══════════════════════════════════════════════════════════════ */

.ei-kaart {
    background: var(--ei-wit);
    border: 0.5px solid var(--ei-border);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-decoration: none;
    transition: border-color .15s;
}

.ei-kaart:hover { border-color: var(--ei-goud); }

.ei-kaart h3 {
    font-size: 20px;
    color: var(--ei-navy);
}

.ei-kaart p {
    font-size: 15px;
}

.ei-kaart-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ei-goud);
    text-decoration: none;
    margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════
   10. USP / STATISTIEKEN
   ══════════════════════════════════════════════════════════════ */

.ei-usp {
    background: var(--ei-navy);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.06);
}

.ei-usp-item {
    padding: 2.5rem;
    border-right: 1px solid rgba(255,255,255,.06);
    text-align: center;
}

.ei-usp-item:last-child { border-right: none; }

.ei-usp-getal {
    font-family: 'Larken Bold', sans-serif;
    font-size: 48px;
    font-weight: bold;
    color: var(--ei-wit);
    line-height: 1;
    margin-bottom: .5rem;
}

.ei-usp-label {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,.4);
}

/* ══════════════════════════════════════════════════════════════
   11. PAYOFF SPLIT
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   12. ERVARINGEN / QUOTES
   ══════════════════════════════════════════════════════════════ */

.ei-quote {
    border-left: 2px solid var(--ei-goud);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
}

.ei-quote-tekst {
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,.75);
    line-height: 1.8;
    margin-bottom: .75rem;
}

.ei-quote-tekst--donker { color: var(--ei-navy); }

.ei-quote-naam {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ei-goud);
}

/* ══════════════════════════════════════════════════════════════
   13. PERSOON BLOKKEN
   ══════════════════════════════════════════════════════════════ */

.ei-persoon {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ei-persoon-foto {
    background: var(--ei-creme);
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.ei-persoon-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ei-persoon-tekst {
    padding: 5rem;
    background: var(--ei-creme);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ei-persoon--gespiegeld .ei-persoon-foto { order: 2; }
.ei-persoon--gespiegeld .ei-persoon-tekst { order: 1; background: var(--ei-navy); }
.ei-persoon--gespiegeld h2 { color: var(--ei-wit); }
.ei-persoon--gespiegeld p { color: rgba(255,255,255,.6); }

/* ══════════════════════════════════════════════════════════════
   14. FAQ
   ══════════════════════════════════════════════════════════════ */

.ei-faq-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--ei-border);
}

.ei-faq-item:last-child,
.ei-faq-item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.ei-faq-vraag {
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--ei-navy);
    margin-bottom: .75rem;
}

.ei-faq-antwoord {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.8;
}

/* INKLAPBARE FAQ (mobile-only accordion via <details>/<summary>)
   Gebruik op .ei-faq-lijst--inklapbaar. Op desktop/tablet: gedraagt zich als
   open lijst (icoon verborgen, summary niet klikbaar). Op mobile: JS klapt
   alle items behalve het eerste dicht; click op summary toggelt open/dicht. */

.ei-faq-lijst--inklapbaar .ei-faq-item {
    padding: 0 0 1.5rem;
}

.ei-faq-lijst--inklapbaar .ei-faq-vraag {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ei-faq-lijst--inklapbaar .ei-faq-vraag::-webkit-details-marker {
    display: none;
}

.ei-faq-vraag-tekst {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ei-navy);
    flex: 1;
}

.ei-faq-icoon {
    width: 28px;
    height: 28px;
    background: var(--ei-creme2);
    color: var(--ei-goud);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.ei-faq-icoon::before,
.ei-faq-icoon::after {
    content: '';
    position: absolute;
    background: var(--ei-goud);
    transition: transform .2s;
}

.ei-faq-icoon::before {
    width: 12px;
    height: 2px;
}

.ei-faq-icoon::after {
    width: 2px;
    height: 12px;
}

.ei-faq-item[open] .ei-faq-icoon {
    background: var(--ei-goud);
}

.ei-faq-item[open] .ei-faq-icoon::before,
.ei-faq-item[open] .ei-faq-icoon::after {
    background: #fff;
}

.ei-faq-item[open] .ei-faq-icoon::after {
    transform: rotate(90deg);
}

.ei-faq-lijst--inklapbaar .ei-faq-antwoord {
    font-size: 18px;
    line-height: 1.75;
    padding: 0 0 1.25rem 0;
    margin: 0;
}

/* Desktop & tablet: inklapbare FAQ gedraagt zich als open lijst */
@media (min-width: 769px) {
    .ei-faq-lijst--inklapbaar .ei-faq-vraag {
        cursor: default;
        pointer-events: none;
        padding: 1.25rem 0 .4rem;
    }
    .ei-faq-icoon {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   15. FORMULIEREN
   ══════════════════════════════════════════════════════════════ */

.ei-form-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-subtekst);
    display: block;
    margin-bottom: .4rem;
    margin-top: 1.25rem;
}

.ei-form-input,
.ei-form-textarea,
.ei-form-select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--ei-border);
    padding: .85rem 1rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-tekst);
    background: var(--ei-creme);
    border-radius: 0;
    transition: border-color .15s;
}

.ei-form-input:focus,
.ei-form-textarea:focus,
.ei-form-select:focus {
    outline: none;
    border-color: var(--ei-turquoise);
}

.ei-form-textarea {
    height: 120px;
    resize: vertical;
}

/* Form-rij: twee gelijke kolommen op desktop (voornaam + achternaam),
   op mobile vallen ze automatisch onder elkaar. */
.ei-form-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.ei-form-rij > div {
    display: flex;
    flex-direction: column;
}
.ei-form-rij .ei-form-label {
    margin-top: 0;
}
/* In gap-gestuurde containers (zoals .ei-flex-col) regelt de gap de spacing,
   dus geen eigen margin-top op de rij. */
.ei-flex-col > .ei-form-rij {
    margin-top: 0;
}
@media (max-width: 768px) {
    .ei-form-rij {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ei-form-rij > div + div .ei-form-label {
        margin-top: 1.25rem;
    }
}

.ei-form-onderwerpknoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.ei-form-onderwerp {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: .4rem 1rem;
    border: 1px solid var(--ei-border);
    background: var(--ei-wit);
    color: var(--ei-subtekst);
    cursor: pointer;
    transition: all .15s;
}

.ei-form-onderwerp:hover,
.ei-form-onderwerp--actief {
    background: var(--ei-goud);
    border-color: var(--ei-goud);
    color: var(--ei-wit);
}

/* ══════════════════════════════════════════════════════════════
   16. BLOG / INSPIRATIE
   ══════════════════════════════════════════════════════════════ */

.ei-blog-citaat {
    background: var(--ei-navy);
    border-left: 3px solid var(--ei-goud);
    padding: 2rem;
    border-radius: 0 60px 0 0;
    margin: 2rem 0;
}

.ei-blog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
}

.ei-blog-kaart {
    background: var(--ei-wit);
    border-top: 2px solid var(--ei-border);
    padding: 1.75rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: border-color .15s;
}

.ei-blog-kaart:hover { border-color: var(--ei-goud); }

.ei-blog-kaart h3 {
    font-size: 18px;
    font-weight: bold;
    color: var(--ei-navy);
    line-height: 1.3;
}

/* Single blog */
.ei-blog-single {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 5rem;
    padding: 4rem 5rem;
    align-items: start;
}

.ei-blog-inhoud p {
    font-size: 18px;
    line-height: 1.9;
    margin-bottom: 1.75rem;
}

.ei-blog-inhoud h2 {
    font-size: 28px;
    margin: 2.5rem 0 1rem;
}

.ei-blog-sidebar {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ei-sidebar-blok {
    padding: .5rem;
    background: var(--ei-creme);
}

.ei-sidebar-blok--navy { background: var(--ei-navy); }

/* ══════════════════════════════════════════════════════════════
   17. PODCAST — sectie verwijderd 26 mei 2026
   Alle 5 classes (.ei-podcast-speler, -controls, -play, -track, -fill)
   waren dood gewicht; werden nergens in PHP gebruikt.
   Page-home podcast-speler gebruikt eigen .ei-home-podcast-* familie.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   18. AGENDA
   ══════════════════════════════════════════════════════════════ */

.ei-agenda-pagina {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 68px);
}

/* ══════════════════════════════════════════════════════════════
   19. FOOTER
   ══════════════════════════════════════════════════════════════ */

.ei-footer {
    background: var(--ei-navy);
    padding: 5rem 3rem;
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 5rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* Lijn boven footer wanneer erboven navy */
.ei-footer-wrap--navy-boven .ei-footer {
    border-top: 1px solid rgba(255,255,255,.12);
}

.ei-footer-wrap {
    background: var(--ei-navy);
}

.ei-footer-logo {
    font-family: 'Larken Bold', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--ei-wit);
    margin-bottom: .75rem;
}

.ei-footer-logo span { color: var(--ei-goud); }

.ei-footer-tag {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255,255,255,.45);
    line-height: 1.6;
}

.ei-footer-kop {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: 1rem;
}

.ei-footer-link,
#ei .ei-footer-link {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,.5) !important;
    text-decoration: none;
    line-height: 1.6;
    transition: color .15s;
}

.ei-footer-link:hover,
#ei .ei-footer-link:hover { color: var(--ei-goud) !important; }

.ei-footer-bottom {
    background: #1a1b2e;
    padding: .9rem 5rem;
    display: flex;
    justify-content: space-between;
}

.ei-footer-copy {
    font-size: 11px;
    color: rgba(255,255,255,.3);
}

/* ══════════════════════════════════════════════════════════════
   20. HULPKLASSEN
   ══════════════════════════════════════════════════════════════ */

.ei-tekst-wit    { color: var(--ei-wit) !important; }
.ei-tekst-goud   { color: var(--ei-goud) !important; }
.ei-tekst-subtiel{ color: var(--ei-subtekst) !important; }
.ei-tekst-navy   { color: var(--ei-navy) !important; }

.ei-bg-wit    { background: var(--ei-wit); }
.ei-bg-creme  { background: var(--ei-creme); }
.ei-bg-creme2 { background: var(--ei-creme2); }
.ei-bg-navy   { background: var(--ei-navy); }

.ei-border-top    { border-top: 1px solid var(--ei-border); }
.ei-border-bottom { border-bottom: 1px solid var(--ei-border); }

.ei-mt-0  { margin-top: 0; }
.ei-mt-1  { margin-top: 1rem; }
.ei-mt-2  { margin-top: 2rem; }
.ei-mt-25 { margin-top: 2.5rem; }
.ei-mt-3  { margin-top: 3rem; }
.ei-mb-0  { margin-bottom: 0; }
.ei-mb-1  { margin-bottom: 1rem; }
.ei-mb-2  { margin-bottom: 2rem; }
.ei-mb-3  { margin-bottom: 3rem; }

/* Stack-utility: verticale flow met consistente witruimte tussen kinderen */
.ei-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ei-ronde-a { border-radius: 0 60px 0 60px; }
.ei-ronde-b { border-radius: 60px 0 60px 0; }
.ei-ronde-c { border-radius: 0 80px 0 0; }

/* ══════════════════════════════════════════════════════════════
   21. UITGEBREIDE TYPOGRAFIE HULPKLASSEN
   ══════════════════════════════════════════════════════════════ */

/* Tekst varianten */
/* ei-tekst-wit-licht en ei-tekst-subtiel-licht → gebruik ei-home-split-sub */
.ei-tekst-wit-licht    { font-size:20px; font-weight:300; color:rgba(255,255,255,.6); line-height:1.7; }
.ei-tekst-subtiel-licht{ font-size:20px; font-weight:300; color:var(--ei-subtekst); line-height:1.7; }
.ei-tekst-xs           { font-size:12px; font-weight:300; color:var(--ei-subtekst); }
.ei-tekst-nota         { font-size:12px; font-weight:300; color:rgba(255,255,255,.35); }

/* Kop groottes */
.ei-h1-groot { font-family:'Larken Bold',sans-serif; font-size:clamp(42px,6vw,90px); font-weight:300; color:var(--ei-navy); line-height:1.05; letter-spacing:-.03em; }
.ei-h1-groot strong { font-weight:bold; display:block; }
.ei-h2-midden { font-family:'Larken Bold',sans-serif; font-size:32px; font-weight:300; color:var(--ei-subtekst); line-height:1.2; letter-spacing:-.02em; margin-bottom:1.5rem; }
.ei-h2-midden strong { font-weight:bold; font-style:normal; display:block; font-size:36px; color:var(--ei-navy); line-height:1.05; letter-spacing:-.025em; }
.ei-h2-midden.ei-tekst-wit-300,
.ei-h2-midden--wit { color:rgba(255,255,255,.75); }
.ei-h2-midden.ei-tekst-wit-300 strong,
.ei-h2-midden--wit strong { color:var(--ei-wit); }
.ei-h2-midden--inline strong { display: inline; font-size: inherit; }
.ei-h2-wit    { color:var(--ei-wit); }
.ei-h3-kaart  { font-family:'Larken Bold',sans-serif; font-size:22px; font-weight:bold; color:var(--ei-navy); line-height:1.2; }

/* ══════════════════════════════════════════════════════════════
   22. LAYOUT HULPKLASSEN
   ══════════════════════════════════════════════════════════════ */

/* Grids */
.ei-grid-2-5     { display:grid; grid-template-columns:1fr 1fr; gap:8rem; align-items:start; }
.ei-grid-2-center{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.ei-grid-3-kaart { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.ei-grid-4-kaart { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }

/* Flex */
.ei-flex-col     { display:flex; flex-direction:column; }
.ei-flex-col-gap { display:flex; flex-direction:column; gap:.75rem; }
.ei-flex-center  { display:flex; align-items:center; gap:1rem; }
.ei-flex-between { display:flex; justify-content:space-between; align-items:center; }
.ei-flex-knoppen { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

/* Sectie padding varianten */
.ei-sectie-sm    { padding:3rem 5rem; }
.ei-sectie-lg    { padding:6rem 5rem; }
.ei-sectie-xl    { padding:8rem 5rem; }

/* ══════════════════════════════════════════════════════════════
   23. NAVIGATIE DETAIL
   ══════════════════════════════════════════════════════════════ */

.ei-terug-link {
    font-size:13px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:2rem;
    transition:color .15s;
}
.ei-terug-link:hover { color:var(--ei-goud); }

/* ══════════════════════════════════════════════════════════════
   24. HERO VARIANTEN
   ══════════════════════════════════════════════════════════════ */

.ei-hero-wit {
    background:var(--ei-wit);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
    padding:5rem 3rem 4rem;
}

/* Hero h1 voor binnenste pagina's */
.ei-hero-h1 {
    font-family: 'Larken Bold', sans-serif;
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0;
}

.ei-hero-h1 strong {
    font-weight: bold;
    display: block;
    font-size: clamp(48px, 6vw, 80px);
    color: var(--ei-navy);
    line-height: 1.0;
    letter-spacing: -.03em;
}

/* Em kleur op donkere achtergrond */
.ei-kleur-wit-licht {
    color: rgba(255,255,255,.45);
    font-style: italic;
    font-weight: 300;
}

.ei-hero-split {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:520px;
}

.ei-hero-split-links  { padding:6rem 5rem; display:flex; flex-direction:column; justify-content:center; }
.ei-hero-split-rechts { padding:6rem 5rem; display:flex; flex-direction:column; justify-content:center; background:var(--ei-creme); }

/* ══════════════════════════════════════════════════════════════
   25. STAPPEN
   ══════════════════════════════════════════════════════════════ */

.ei-stap {
    display:flex;
    align-items:flex-start;
    gap:1.5rem;
    padding:1.5rem 0;
    border-bottom:1px solid var(--ei-border);
}

.ei-stap:last-child { border-bottom:none; }

.ei-stap-num {
    font-family: 'Larken Bold', sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: var(--ei-goud);
    opacity: .35;
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
}

/* In donkere context: iets lichter */
.ei-sectie--navy .ei-stap-num {
    color: var(--ei-goud);
}

/* In lichte context: navy */
.ei-sectie--creme .ei-stap-num,
.ei-sectie--wit .ei-stap-num {
    color: var(--ei-goud);
    opacity: .35;
}

.ei-stap-inhoud h3 {
    font-size:18px;
    font-weight:700;
    color: var(--ei-wit);
    margin-bottom:.35rem;
}

.ei-stap-inhoud p {
    font-size:15px;
    font-weight:300;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
}

/* Stappen op lichte achtergrond */
.ei-sectie--creme .ei-stap-inhoud h3,
.ei-sectie--wit .ei-stap-inhoud h3 {
    color: var(--ei-navy);
}
.ei-sectie--creme .ei-stap-inhoud p,
.ei-sectie--wit .ei-stap-inhoud p {
    color: var(--ei-subtekst);
}
.ei-sectie--creme .ei-stap,
.ei-sectie--wit .ei-stap {
    border-bottom-color: var(--ei-border);
}

/* ══════════════════════════════════════════════════════════════
   26. DETAIL ICOON REGELS (agenda / over ons)
   ══════════════════════════════════════════════════════════════ */

.ei-detail-icoon {
    width:20px;
    flex-shrink:0;
    margin-top:2px;
}

.ei-detail-icoon svg {
    width:18px;
    height:18px;
    stroke:var(--ei-goud);
    fill:none;
    stroke-width:1.5;
}

/* ══════════════════════════════════════════════════════════════
   27. STATISTIEK / GETAL BLOKKEN
   ══════════════════════════════════════════════════════════════ */

.ei-stat-blok {
    text-align:center;
    padding:2.5rem;
}

.ei-stat-getal {
    font-family:'Larken Bold',sans-serif;
    font-size:56px;
    font-weight:bold;
    color:var(--ei-wit);
    line-height:1;
    margin-bottom:.5rem;
}

.ei-stat-label {
    font-size:14px;
    font-weight:300;
    color:rgba(255,255,255,.4);
}

/* ══════════════════════════════════════════════════════════════
   28. PODCAST SPECIFIEK — sectie verwijderd 26 mei 2026
   Alle classes (.ei-podcast-uitgelicht, -speler-sectie, -info-sectie,
   .ei-serie-kaart, .ei-serie-num) waren dood gewicht; werden nergens
   in PHP gebruikt.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   29. AANMELD-BLOK + BLOG / INSPIRATIE SPECIFIEK
   ══════════════════════════════════════════════════════════════ */

/* AANMELD-BLOK — generieke twee-koloms aanmelding/aankondiging (nieuwsbrief,
   podcast-aanmeld, uitgelicht artikel). Default navy achtergrond, modifiers
   voor creme-varianten (gebruikt door podcast-aanmeld). */
.ei-aanmeld-blok {
    background:var(--ei-navy);
    padding:4rem 5rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}

.ei-aanmeld-blok--creme  { background:var(--ei-creme); }
.ei-aanmeld-blok--creme2 { background:var(--ei-creme2); }

.ei-blog-featured-tag {
    font-size:11px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    display:block;
    margin-bottom:.75rem;
}

/* ══════════════════════════════════════════════════════════════
   30. CONTACT PAGINA
   ══════════════════════════════════════════════════════════════ */

.ei-contact-pagina {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:calc(100vh - 100px);
}

/* .ei-contact-formulier* verwijderd 25 mei 2026 — class werd nergens in PHP gebruikt */
/* .ei-contact-info container-block + descendant selectors verwijderd 26 mei 2026 — was nergens in PHP gebruikt; niet te verwarren met .ei-contact-info-rij (info-rij component, sectie info-rij) */

.ei-contact-detail {
    margin-bottom:2rem;
}

.ei-contact-detail-label {
    font-size:11px;
    font-weight:700;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ei-goud);
    display:block;
    margin-bottom:.5rem;
}

.ei-contact-detail-waarde {
    font-size:17px;
    font-weight:300;
    color:var(--ei-subtekst);
}

.ei-contact-links {
    margin-top:4rem;
    padding-top:3rem;
    border-top:1px solid var(--ei-border);
}

.ei-contact-link-item {
    font-size:16px;
    font-weight:300;
    color:var(--ei-navy);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:.75rem;
    transition:color .15s;
}

.ei-contact-link-item:hover { color:var(--ei-goud); }

.ei-contact-link-item::before {
    content:'→';
    color:var(--ei-goud);
}

/* ══════════════════════════════════════════════════════════════
   31. BEDANKT PAGINA
   ══════════════════════════════════════════════════════════════ */

.ei-bedankt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--ei-creme);
}

#ei .ei-bedankt-inner {
    max-width: 640px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--ei-creme);
    padding: 4rem 3rem;
}

#ei .ei-bedankt-h1 {
    font-family: 'Larken Bold', sans-serif;
    font-size: 42px;
    font-weight: 300;
    color: var(--ei-navy);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
}

#ei .ei-bedankt-h1 strong { font-weight: bold; display: block; }
#ei .ei-bedankt-lead { font-size: 17px; font-weight: 300; color: var(--ei-subtekst); line-height: 1.8; margin-bottom: .75rem; }
#ei .ei-bedankt-spam { font-size: 14px; font-weight: 300; color: var(--ei-subtekst); opacity: .7; margin-bottom: 1.5rem; }
#ei .ei-bedankt-noot { font-family: 'Larken Bold', sans-serif; font-style: italic; font-weight: 300; font-size: 16px; color: var(--ei-navy); line-height: 1.5; margin-bottom: 1.75rem; max-width: 480px; }

/* ══════════════════════════════════════════════════════════════
   32. AANVULLENDE HULPKLASSEN (uit clean template analyse)
   ══════════════════════════════════════════════════════════════ */

/* Font weight */
.ei-licht { font-weight:300; }
/* h2.ei-licht → gebruik ei-h2-midden */
.ei-vet       { font-weight:bold; }
.ei-geen-link { text-decoration:none; }

/* Marges — veelgebruikte combinaties */
.ei-mt-05  { margin-top:.5rem; }
.ei-mt-075 { margin-top:.75rem; }
.ei-mt-15  { margin-top:1.5rem; }
.ei-mb-075 { margin-bottom:.75rem; }
.ei-mb-125 { margin-bottom:1.25rem; }

/* Tekst op navy achtergrond */
.ei-tekst-wit-300      { color:var(--ei-wit); font-weight:300; }
.ei-h3-navy            { color:var(--ei-wit); font-size:20px; margin-bottom:.75rem; }
.ei-h3-navy-groot      { color:var(--ei-wit); font-size:22px; }
.ei-h2-wit-licht       { color:var(--ei-wit); font-weight:300; font-size:36px; line-height:1.1; margin-bottom:1rem; }

/* Turquoise doorlink — dienst kaarten op navy */
.ei-link-turquoise {
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ei-turquoise);
    text-decoration:none;
}

/* Pijl + tekst rij — gebruikt in herkenningspunten, voordelen etc. */
.ei-pijl-rij {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
}

.ei-pijl-rij__pijl {
    color:var(--ei-goud);
    flex-shrink:0;
    margin-top:2px;
}

.ei-pijl-lijst {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

/* Creme highlight blok met ronde hoek */
.ei-creme-blok {
    background:var(--ei-creme);
    padding:3rem;
}

.ei-creme-blok--ronde-tr { border-radius:0 80px 0 0; }
.ei-creme-blok--ronde-tl { border-radius:80px 0 0 0; }
.ei-creme-blok--ronde-br { border-radius:0 0 80px 0; }
.ei-creme-blok--ronde-bl { border-radius:0 0 0 80px; }

/* Genummerd stap icoon — klein (in methode blokken) */
.ei-stap-icoon {
    width:36px;
    height:36px;
    background:var(--ei-goud);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    color:var(--ei-wit);
    flex-shrink:0;
    margin-bottom:1rem;
}

/* Honeypot — altijd verborgen */
.ei-honeypot {
    position:absolute;
    left:-9999px;
    top:-9999px;
    height:0;
    overflow:hidden;
}

/* Breedte begrenzingen */
.ei-max-680 { max-width:680px; }
.ei-max-900 { max-width:900px; }
.ei-max-560 { max-width:560px; }

/* Transparant achtergrond blok op navy */
.ei-navy-blok-transparant {
    padding:2rem;
    background:rgba(255,255,255,.05);
}

/* Knop volledig breed */
.ei-btn--breed { width:100%; text-align:center; }
#ei .ei-btn--breed { width:100%; text-align:center; }

/* Pagina als flex column voor sticky footer */
.ei-pagina-flex {
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* ══════════════════════════════════════════════════════════════
   33. LAATSTE RESTERENDE PATRONEN
   ══════════════════════════════════════════════════════════════ */

.ei-kleur-wit      { color:var(--ei-wit); }
.ei-kleur-goud     { color:var(--ei-goud); }
/* Tekst utilities — grootte */
.ei-tekst-sm  { font-size:14px; font-weight:300; color:var(--ei-subtekst); line-height:1.7; }
.ei-tekst-md  { font-size:18px; font-weight:300; line-height:1.7; }
.ei-tekst-lg  { font-size:20px; font-weight:300; line-height:1.7; }
.ei-tekst-xl  { font-size:22px; font-weight:300; line-height:1.7; }
/* Tekst utility — subtiele italic-paragraaf (voor geruststellende, terloopse opmerkingen in tekst) */
.ei-tekst-italic-subtle { font-size:15px; font-weight:300; font-style:italic; color:var(--ei-subtekst); opacity:.8; line-height:1.6; }
/* Legacy aliassen — uitgefaseerd */
.ei-tekst-14, .ei-tekst-15 { font-size:14px; font-weight:300; color:var(--ei-subtekst); }
.ei-tekst-18 { font-size:18px; }
.ei-tekst-20 { font-size:20px; }
.ei-tekst-22 { font-size:22px; }


.ei-gap-075        { gap:.75rem; }
.ei-gap-1          { gap:1rem; }

.ei-padding-25     { padding:2.5rem; }
.ei-padding-3      { padding:3rem; }

.ei-flex-start-075 { display:flex; align-items:flex-start; gap:.75rem; }
.ei-flex-start-1   { display:flex; align-items:flex-start; gap:1rem; }

.ei-pijl-flex {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    font-size:16px;
    font-weight:300;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
}
.ei-sectie--creme .ei-pijl-flex,
.ei-sectie--wit .ei-pijl-flex {
    color: var(--ei-subtekst);
}

.ei-pijl-goud {
    color:var(--ei-goud);
    flex-shrink:0;
    line-height: inherit;
}

.ei-h3-wit-20 {
    color:var(--ei-wit);
    font-size:20px;
    margin-bottom:.75rem;
}

.ei-h3-wit-22 {
    color:var(--ei-wit);
    font-size:22px;
}

.ei-h2-hero-podcast {
    color:var(--ei-wit);
    font-weight:bold;
    font-size:36px;
    line-height:1.1;
    margin-bottom:1rem;
}


.ei-contact-detail-groep {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.ei-stap-num-klein {
    width:36px;
    height:36px;
    background:var(--ei-goud);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    color:var(--ei-wit);
    flex-shrink:0;
    margin-bottom:1rem;
}

.ei-btn--display-block { display:block; margin-top:.75rem; text-decoration:none; }

/* ══════════════════════════════════════════════════════════════
   34. PODCAST SPELER KNOPPEN & SPECIFIEKE STATES
   ══════════════════════════════════════════════════════════════ */

.ei-speler-skip {
    background:none;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.3rem;
}

.ei-speler-skip-label {
    font-size:9px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.35);
}

.ei-speler-play {
    width:64px;
    height:64px;
    background:var(--ei-goud);
    border:none;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ei-speler-play--div { border:none; }

.ei-serie-sidebar-inner {
    background:var(--ei-navy);
    padding:4rem 3.5rem;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.ei-tekst-wit-subtiel { color:rgba(255,255,255,.4); }


/* ══════════════════════════════════════════════════════════════
   36. AUTISMEHUIS LANDINGSPAGINA
   ══════════════════════════════════════════════════════════════ */

/* Minimale nav — alleen logo */
.ei-nav--minimaal {
    justify-content:flex-start;
    border-bottom:1px solid var(--ei-border);
}

.ei-nav--minimaal .ei-nav-links { display:none; }
.ei-nav--minimaal .ei-nav-cta   { display:none; }

/* Hoofdlayout: split navy links, wit rechts */
.ei-autismehuis-pagina {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:calc(100vh - 100px - 48px); /* nav + footer */
}

.ei-autismehuis-tekst {
    background:var(--ei-navy);
    padding:5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.ei-autismehuis-formulier {
    background:var(--ei-wit);
    padding:5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* Radio buttons — custom styling met goud-accent
   Werkt op zowel witte als creme achtergrond door --ei-border rand.
   Tekst-styling werkt zowel direct op het label als op een <span> erbinnen. */
.ei-form-radio {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-navy);
    cursor: pointer;
    line-height: 1.5;
}

.ei-form-radio span {
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-navy);
}

.ei-form-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ei-border);
    border-radius: 50%;
    background: var(--ei-wit);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: border-color .15s;
    margin: 0;
}

.ei-form-radio input[type="radio"]:checked {
    border-color: var(--ei-goud);
}

.ei-form-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ei-goud);
}

.ei-form-radio input[type="radio"]:focus-visible {
    outline: 2px solid var(--ei-turquoise);
    outline-offset: 2px;
}

/* Minimale footer */
.ei-autismehuis-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 5rem;
    border-top:1px solid var(--ei-border);
    background:var(--ei-wit);
}

@media (max-width:900px) {
    .ei-autismehuis-pagina {
        grid-template-columns:1fr;
    }
    .ei-autismehuis-tekst,
    .ei-autismehuis-formulier {
        padding:3rem 2rem;
    }
    .ei-autismehuis-footer {
        padding:1rem 2rem;
        flex-direction:column;
        gap:.5rem;
        text-align:center;
    }
}

/* ══════════════════════════════════════════════════════════════
   NAV HAMBURGER + MOBILE DRAWER
   ══════════════════════════════════════════════════════════════ */

/* Burger knop — default verborgen (desktop) */
.ei-nav-burger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.ei-nav-burger-lijn {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ei-navy);
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}
/* Burger naar X als open */
.ei-nav-burger--actief .ei-nav-burger-lijn:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ei-nav-burger--actief .ei-nav-burger-lijn:nth-child(2) {
    opacity: 0;
}
.ei-nav-burger--actief .ei-nav-burger-lijn:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Body lock wanneer drawer open */
body.ei-nav-open {
    overflow: hidden;
}

/* Sub-nav onder hoofdlink — alleen zichtbaar in mobile drawer */
.ei-nav-sub {
    display: none;
}


/* ══════════════════════════════════════════════════════════════
   HOME — pagina-specifieke klassen
   ══════════════════════════════════════════════════════════════ */

/* HERO */
.ei-home-hero {
    display: grid;
    grid-template-columns: 1fr 480px;
    min-height: 560px;
}

.ei-home-hero-links {
    background: var(--ei-creme);
    padding: 5rem 4rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.ei-home-hero-links .ei-btn {
    margin-top: 1rem;
}

.ei-home-h1 {
    font-family: 'Larken Bold', sans-serif;
    margin: 1.5rem 0 0 0;
    line-height: 1;
}

.ei-home-h1-licht {
    display: block;
    font-family: 'Larken Bold', sans-serif;
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 100;
    color: var(--ei-navy);
    letter-spacing: -.01em;
    line-height: 1.05;
    margin-bottom: .05em;
}

.ei-home-h1-vet {
    display: block;
    font-family: 'Larken Bold', sans-serif;
    font-size: clamp(58px, 7.5vw, 96px);
    font-weight: bold;
    color: var(--ei-navy);
    letter-spacing: -.03em;
    line-height: 1.0;
    margin: 0;
}

.ei-home-lead {
    font-size: 20px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.85;
    max-width: 360px;
    margin: 2.5rem 0 2.5rem 0;
}

.ei-home-hero-rechts {
    display: flex;
    flex-direction: column;
}

.ei-home-dienst {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.ei-home-dienst--navy {
    background: var(--ei-navy);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ei-home-dienst--link {
    text-decoration: none;
    transition: filter .2s, transform .2s;
    display: flex;
}

.ei-home-dienst--link:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.ei-home-dienst--creme2 { background: var(--ei-creme2); }

.ei-home-dienst-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: block;
}

.ei-home-dienst-label--goud { color: var(--ei-goud); }
.ei-home-dienst-label--turq { color: var(--ei-turquoise); }

.ei-home-dienst-kop { line-height: 1.05; }

.ei-home-dienst-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: var(--ei-wit);
}

.ei-home-dienst-h--navy { color: var(--ei-navy); }
.ei-home-dienst-tekst--donker { color: var(--ei-subtekst); }
.ei-home-dienst-tekst--wit { color: rgba(255,255,255,.6); }
.ei-home-dienst-sub--wit { color: rgba(255,255,255,.5); }
.ei-home-dienst-sub--donker { color: var(--ei-subtekst); }

.ei-home-dienst-sub {
    font-size: 24px;
    font-weight: 300;
    font-style: italic;
}

.ei-home-dienst-tekst {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
}

.ei-home-dienst-link {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: auto;
    opacity: .9;
    transition: opacity .15s;
}

.ei-home-dienst-link:hover { opacity: 1; }

.ei-home-dienst-link--goud { color: var(--ei-goud); opacity: 1; }
.ei-home-dienst-link--turq { color: var(--ei-turquoise); opacity: 1; }

/* USP */
.ei-home-usp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--ei-navy);
}

.ei-home-usp-item {
    padding: 3rem 2.5rem;
    border-right: 1px solid rgba(255,255,255,.08);
    position: relative;
    overflow: hidden;
}

.ei-home-usp-item:last-child { border-right: none; }
.ei-home-usp-item:nth-child(2) { background: rgba(255,255,255,.05); }

.ei-home-usp-bg {
    position: absolute;
    bottom: -.5rem;
    right: 1.5rem;
    font-size: 72px;
    font-weight: 800;
    font-style: italic;
    color: rgba(255,255,255,.07);
    line-height: 1;
    pointer-events: none;
    font-family: 'Larken Bold', sans-serif;
}

.ei-home-usp-payoff {
    font-family: 'Larken Bold', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: .6rem;
    position: relative;
    z-index: 1;
}

.ei-home-usp-uitleg {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.ei-home-usp-item p {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    line-height: 1.85;
    position: relative;
    z-index: 1;
}

/* PODCAST + BLOG */
.ei-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    padding: 5rem 5rem;
    background: var(--ei-wit);
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.ei-content-grid-wrap {
    background: var(--ei-wit);
}

.ei-home-podcast-kaart {
    background: var(--ei-navy);
    padding: 2.5rem;
    border-radius: 0 0 60px 0;
    margin-top: 1.5rem;
}

.ei-home-podcast-titel {
    font-family: 'Larken Bold', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--ei-wit);
    line-height: 1.3;
    margin-top: .5rem;
    margin-bottom: 1.25rem;
}

.ei-home-podcast-speler {
    background: rgba(255,255,255,.1);
    border-radius: 4px;
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ei-home-play-btn {
    width: 38px;
    height: 38px;
    background: var(--ei-goud);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    padding-left: 2px;
}

.ei-home-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,.2);
    border-radius: 2px;
}

.ei-home-tijd {
    font-size: 12px;
    font-weight: 300;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
}

.ei-home-blog-lijst { margin-top: 1.5rem; }

.ei-home-blog-item {
    display: block;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--ei-border);
    text-decoration: none;
    transition: border-color .15s;
}

.ei-home-blog-item:last-child { border-bottom: none; }
.ei-home-blog-item:hover { border-color: var(--ei-goud); }

.ei-home-blog-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: .35rem;
}

.ei-home-blog-titel {
    font-family: 'Larken Bold', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--ei-navy);
    line-height: 1.3;
}

/* SPLIT */
.ei-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ei-creme);
}

.ei-split-links {
    background: var(--ei-creme);
    padding: 5rem 4rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.ei-split-rechts {
    background: var(--ei-creme);
    padding: 5rem 5rem 5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    font-size: 17px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.9;
}

.ei-split-sub {
    font-size: 20px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.7;
}

.ei-contact-blok .ei-split-sub,
.ei-split-sub--wit {
    color: rgba(255,255,255,.6);
}
.ei-tekst-slot--wit {
    color: rgba(255,255,255,.6);
}

/* Alleen in contact blok de breedte beperken */
.ei-contact-blok .ei-split-sub {
    max-width: 320px;
}

.ei-split-slot {
    font-weight: 400;
    color: var(--ei-navy);
}

/* ZO WERKT HET + ERVARINGEN */
.ei-home-aanpak {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ei-navy);
}

.ei-home-aanpak-links {
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ei-home-stap {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 2rem;
    align-items: start;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.ei-home-stap:last-of-type { border-bottom: none; margin-bottom: 2rem; }

.ei-home-stap-num {
    font-family: 'Larken Bold', sans-serif;
    font-size: 48px;
    font-weight: bold;
    color: var(--ei-goud);
    opacity: .35;
    line-height: 1;
}

.ei-home-stap-h {
    font-size: 20px;
    font-weight: 700;
    color: var(--ei-wit);
    margin-bottom: .5rem;
}

.ei-home-stap-p {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
}

.ei-home-erv {
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
}





/* WIE WIJ ZIJN */
.ei-home-over {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--ei-wit);
    align-items: center;
}

.ei-home-over > div:first-child {
    background: var(--ei-wit);
    padding: 5rem 4rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ei-home-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    padding: 5rem 5rem 5rem 2rem;
}

.ei-home-foto-w {
    aspect-ratio: 3/4;
    border-radius: 0 60px 0 60px;
    overflow: hidden;
}

.ei-home-foto-e {
    aspect-ratio: 3/4;
    border-radius: 60px 0 60px 0;
    overflow: hidden;
    margin-top: 2.5rem;
}

.ei-home-foto-w img,
.ei-home-foto-e img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* CONTACT */
.ei-contact-blok-wrap { background: var(--ei-wit); }

.ei-contact-blok {
    background: var(--ei-navy);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 80px 0 0 0;
}

.ei-contact-blok > div:first-child {
    padding: 5rem 4rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ei-contact-blok > *:last-child {
    padding: 5rem 5rem 5rem 4rem;
}

/* ei-home-contact-h2 gebruikt ei-home-h2 + ei-home-h2--wit */
/* ei-home-contact-p verwijderd 25 mei 2026 — gebruikte nergens; gebruik .ei-split-sub */

.ei-contact-blok-form {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    gap: 0;
    padding: 2rem 0;
}

#ei .ei-contact-blok-form .ei-btn {
    align-self: flex-start;
    margin-top: 1.5rem;
    width: auto;
    background: var(--ei-goud);
    color: var(--ei-wit);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .65rem 2rem;
    border: none;
    cursor: pointer;
    transition: background .15s;
}

#ei .ei-contact-blok-form .ei-btn:hover {
    background: #c45c43;
}

/* ei-home-contact-intro verwijderd 25 mei 2026 — gebruikte nergens */



/* FAQ */
.ei-faq {
    background: var(--ei-creme);
    padding: 5rem 5rem;
}

.ei-faq-lijst {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4rem;
    width: 100%;
}

/* Single-column variant: voor FAQ binnen een buitenste 2-koloms grid */
.ei-faq-lijst--enkel {
    grid-template-columns: 1fr;
    gap: 0;
}

/* Honeypot verbergen */
.ei-honeypot {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}


/* Aanpak links: ruimte tussen h2 en eerste stap */
.ei-home-aanpak-links .ei-h2-midden { margin-bottom: .5rem; }

/* Ervaringen: ruimte tussen h2 en eerste quote */
.ei-home-erv .ei-h2-midden { margin-bottom: .25rem; }

/* Foto's: achtergrond als fallback als de afbeelding laadt */
.ei-home-foto-w { background: var(--ei-turquoise); }
.ei-home-foto-e { background: var(--ei-goud); }


/* ══════════════════════════════════════════════════════════════
   ONTBREKENDE KLASSEN — toegevoegd na template-audit
   ══════════════════════════════════════════════════════════════ */

/* Tekststijlen */
.ei-tekst-slot {
    font-size: 18px;
    font-weight: 600;
    color: var(--ei-navy);
    line-height: 1.85;
}

/* Quote functie-regel */
.ei-quote-fn {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.4);
    margin-top: .15rem;
}

/* Tag blok — kleine badge onderaan dienst-blok */
.ei-tag-blok {
    display: inline-block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-navy);
    background: var(--ei-goud);
    padding: .25rem .75rem;
    margin-top: auto;
    align-self: flex-start;
}

/* Navy blok varianten met ronde hoeken */
.ei-navy-blok-ronde-tl {
    border-radius: 0 60px 0 0;
}

.ei-navy-blok-ronde-bl {
    border-radius: 0 0 0 60px;
}

/* Creme blok donkere variant (voor methode vergelijking) */
.ei-creme-blok--donker {
    background: var(--ei-wit);
    padding: 2rem 2.5rem;
}

.ei-creme-blok--donker + .ei-creme-blok--donker {
    margin-top: 1.5rem;
}

/* ── OVER ONS pagina ── */
.ei-over-persoon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

.ei-over-persoon--gespiegeld .ei-over-tekst { order: 1; }
.ei-over-persoon--gespiegeld .ei-over-foto  { order: 2; }

.ei-over-tekst {
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ei-over-foto {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.ei-over-foto--a { border-radius: 0 60px 0 0; }
.ei-over-foto--c { border-radius: 0 0 0 60px; }

.ei-over-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    position: absolute;
    top: 0; left: 0;
}

.ei-over-foto-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.75rem;
    background: linear-gradient(to top, rgba(37,38,57,.7), transparent);
}

.ei-over-foto-naam {
    font-family: 'Larken Bold', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: rgba(255,255,255,.9);
    display: block;
}

.ei-over-foto-fn {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    display: block;
    margin-top: .2rem;
}

.ei-over-ov-intro {
    padding: 5rem 5rem 2rem;
}

/* Stats blokken over-ons */
.ei-over-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}

.ei-over-stat { }

.ei-over-stat-getal {
    font-family: 'Larken Bold', sans-serif;
    font-size: 52px;
    font-weight: bold;
    color: var(--ei-navy);
    line-height: 1;
    margin-bottom: .5rem;
}

.ei-over-stat-label {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.6;
}

/* Autismehuis signature */
.ei-autismehuis-signature {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.4);
    font-style: italic;
    margin-top: 2.5rem;
    line-height: 1.7;
}

.ei-autismehuis-signature strong {
    color: rgba(255,255,255,.7);
    font-style: normal;
}

/* SVG logo klassen in nav */
.ei-l1 { fill: #26273a; stroke-width: 0; }
.ei-l2 { fill: #ee7054; stroke-width: 0; }


/* ══════════════════════════════════════════════════════════════
   GRID MODIFIER KLASSEN
   ══════════════════════════════════════════════════════════════ */

.ei-grid--align-start   { align-items: start; }
.ei-grid--align-center  { align-items: center; }
.ei-grid--align-end     { align-items: end; }
.ei-grid--gap-5         { gap: 5rem; }


/* ══════════════════════════════════════════════════════════════
   AGENDA — keuzestap (fysiek / online)
   ══════════════════════════════════════════════════════════════ */

.ei-agenda-keuze {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 60px);
}

.ei-agenda-keuze-intro {
    background: var(--ei-navy);
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

.ei-agenda-keuze-opties {
    background: var(--ei-creme);
    padding: 5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

.ei-agenda-keuze-kaart {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 2.5rem;
    background: var(--ei-wit);
    border: 2px solid var(--ei-border);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
    border-radius: 0 40px 0 40px;
}

.ei-agenda-keuze-kaart:hover {
    border-color: var(--ei-goud);
    box-shadow: 0 4px 24px rgba(237,111,84,.12);
}

.ei-agenda-keuze-label {
    font-family: 'Larken Bold', sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: var(--ei-navy);
    line-height: 1.2;
}

.ei-agenda-keuze-sub {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.75;
}

.ei-agenda-keuze-cta {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ei-goud);
    margin-top: .25rem;
}

/* Teruglink boven de agenda */
.ei-agenda-terug {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color .15s;
}

.ei-agenda-terug:hover { color: var(--ei-wit); }


.ei-home-media--volledig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    padding: 5rem;
    background: var(--ei-wit);
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.ei-home-media--volledig .ei-home-blog-lijst--top {
    margin-top: 4rem;
}

.ei-home-blog-lijst--top {
    margin-top: 0;
    padding-top: 0;
}
/* Knop rij */
.ei-knop-rij {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Outline knop */
.ei-btn--outline {
    background: transparent;
    color: var(--ei-navy);
    border: 1.5px solid var(--ei-navy);
}

.ei-btn--outline:hover {
    background: var(--ei-navy);
    color: var(--ei-wit);
}

/* Form label op donkere achtergrond */
.ei-form-label {
    color: rgba(255,255,255,.5);
}

.ei-form-label-opt {
    font-weight: 300;
    text-transform: none;
    font-size: 11px;
    opacity: .6;
}

/* Margin utility */

/* Knop nooit volle breedte in contact sectie */
#ei .ei-sectie--navy .ei-btn {
    align-self: flex-start;
    width: auto;
}

/* Contact sectie formulier knop — zelfde als home */
#ei .ei-sectie--navy form .ei-btn {
    align-self: flex-start;
    margin-top: 1.5rem;
    width: auto;
    background: var(--ei-goud);
    color: var(--ei-wit);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .65rem 2rem;
    border: none;
    cursor: pointer;
    transition: background .15s;
}

#ei .ei-sectie--navy form .ei-btn:hover {
    background: #c45c43;
}

/* Stap kaart — 4-koloms grid in De methode */
.ei-stap-kaart {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 2rem;
    border: 0.5px solid var(--ei-border);
    border-radius: 4px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    cursor: default;
}

.ei-stap-kaart:hover {
    border-color: var(--ei-goud);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(37,38,57,.08);
}

.ei-stap-kaart-h {
    font-size: 18px;
    font-weight: 700;
    color: var(--ei-navy);
    line-height: 1.2;
}

.ei-stap-kaart-p {
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.75;
}

/* Button-stijl link — outline variant voor op donkere en lichte achtergrond */
.ei-btn-link {
    display: inline-block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .85rem 2rem;
    border: 2px solid var(--ei-turquoise);
    color: var(--ei-turquoise);
    text-decoration: none;
    transition: background .15s, color .15s;
    align-self: flex-start;
}

.ei-btn-link:hover {
    background: var(--ei-turquoise);
    color: var(--ei-wit);
}

/* Op creme achtergrond — navy variant */
.ei-dienst-blok--b .ei-btn-link {
    border-color: var(--ei-navy);
    color: var(--ei-navy);
}

.ei-dienst-blok--b .ei-btn-link:hover {
    background: var(--ei-navy);
    color: var(--ei-wit);
}

/* margin-top auto utility */
.ei-mt-auto { margin-top: auto; }

.ei-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }

.ei-wanneer-kaart {
    padding: 1.75rem;
    border: 0.5px solid var(--ei-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s;
}

.ei-wanneer-kaart:hover {
    border-color: var(--ei-goud);
    transform: translateY(-3px);
}

.ei-wanneer-h {
    font-size: 17px;
    font-weight: 700;
    color: var(--ei-navy);
    margin-bottom: .5rem;
    line-height: 1.2;
}

.ei-wanneer-p {
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.7;
}

.ei-hero-h1-em {
    font-style: italic;
    font-weight: 300;
    display: block;
    font-size: clamp(44px, 5.5vw, 72px);
}

.ei-kleur-turq { color: var(--ei-turquoise); }

.ei-dienst-blok--c { border-radius: 4px 4px 4px 60px; background: rgba(255,255,255,.07); }

.ei-sectie--creme .ei-form-label { color: var(--ei-subtekst); }
.ei-sectie--creme .ei-form-input,
.ei-sectie--creme .ei-form-textarea {
    background: var(--ei-wit);
    border-color: var(--ei-border);
    color: var(--ei-navy);
}

.ei-dienst-blok--mid { background: rgba(255,255,255,.04); }

.ei-kaart--wit-ronde-bl {
    background: var(--ei-wit);
    border-radius: 4px 4px 4px 60px;
    border: 0.5px solid var(--ei-border);
}

/* Utility klassen — gegenereerd */
.ei-mb-25 { margin-bottom: 2.5rem; }
.ei-gap-05 { gap: .5rem; }
.ei-block { display: block; }
.ei-pijl-goud--groot { font-size:18px; margin-bottom:.75rem; display:block; }
.ei-h3-larken-24 { font-family:'Larken Bold',sans-serif; font-size:24px; font-weight:bold; }
.ei-h3-larken-22 { font-family:'Larken Bold',sans-serif; font-size:22px; font-weight:bold; }

/* Vergelijkingskaarten in navy sectie: wit met juiste ronde hoeken */
.ei-sectie--navy .ei-kaart {
    background: var(--ei-wit);
}
.ei-sectie--navy .ei-kaart.ei-dienst-blok--a {
    border-radius: 4px 32px 4px 4px;
    background: var(--ei-wit);
}
.ei-sectie--navy .ei-kaart.ei-dienst-blok--c {
    border-radius: 4px 4px 4px 32px;
    background: var(--ei-wit);
}

/* UITKOMST-BLOKKEN — gekleurde kaders met pijl-lijst (voor jezelf / voor anderen) */
.ei-uitkomst-blok {
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid;
}
.ei-uitkomst-blok--blauw {
    background: #F4FBFB;
    border-color: #B5D4F4;
}
.ei-uitkomst-blok--groen {
    background: #E1F5EE;
    border-color: #5DCAA5;
}
.ei-uitkomst-blok-lbl {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: .5rem;
}
.ei-uitkomst-blok--blauw .ei-uitkomst-blok-lbl { color: #185FA5; }
.ei-uitkomst-blok--groen .ei-uitkomst-blok-lbl { color: #0F6E56; }
.ei-uitkomst-blok-intro {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}
.ei-uitkomst-blok--blauw .ei-uitkomst-blok-intro { color: #042C53; }
.ei-uitkomst-blok--groen .ei-uitkomst-blok-intro { color: #04342C; }
.ei-uitkomst-blok-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.ei-uitkomst-blok-lijst li {
    display: flex;
    gap: .5rem;
    font-size: 14px;
    line-height: 1.5;
}
.ei-uitkomst-blok-pijl {
    flex-shrink: 0;
    font-weight: 700;
}
.ei-uitkomst-blok--blauw .ei-uitkomst-blok-pijl,
.ei-uitkomst-blok--blauw li { color: #042C53; }
.ei-uitkomst-blok--groen .ei-uitkomst-blok-pijl,
.ei-uitkomst-blok--groen li { color: #04342C; }

/* PAD-BLOK — drie keuzes in CTA-sectie (op navy achtergrond) */
.ei-pad-blok {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    padding: 1.75rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ei-pad-blok--a { border-radius: 4px 32px 4px 4px; }
.ei-pad-blok--b { border-radius: 4px; }
.ei-pad-blok--c { border-radius: 4px 4px 4px 32px; }

.ei-pad-blok-kicker {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.ei-pad-blok--a .ei-pad-blok-kicker,
.ei-pad-blok--b .ei-pad-blok-kicker { color: rgba(133, 183, 235, .9); }
.ei-pad-blok--c .ei-pad-blok-kicker { color: rgba(93, 202, 165, .9); }

.ei-pad-blok-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--ei-wit);
    margin: 0;
    line-height: 1.3;
}
.ei-pad-blok-p {
    font-size: 16px;
    color: rgba(181, 212, 244, .85);
    line-height: 1.5;
    margin: 0 0 .5rem;
    flex-grow: 1;
}
/* Outline-knop binnen pad-blok: sterker contrast tegen subtiele blok-achtergrond.
   #ei-prefix nodig om #ei a { color: inherit } (specificiteit 110) te overrulen. */
#ei .ei-pad-blok .ei-btn--outline {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.6);
    color: rgba(255,255,255,.9);
}
#ei .ei-pad-blok .ei-btn--outline:hover {
    background: rgba(255,255,255,.2);
    color: var(--ei-wit);
}

/* EIGENSCHAP — typografische opsomming met goud-cijfer-accent (geen kader) */
.ei-grid-3--ruim {
    gap: 2.5rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.ei-eigenschap-num {
    font-family: 'Larken Bold', sans-serif;
    font-size: 36px;
    color: var(--ei-goud);
    line-height: 1;
    margin-bottom: .75rem;
}
.ei-eigenschap-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--ei-navy);
    margin: 0 0 .5rem;
}
.ei-eigenschap-p {
    font-size: 17px;
    color: var(--ei-subtekst);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 768px) {
    .ei-grid-3--ruim { max-width: 100%; }
}

/* Split rechts zonder creme achtergrond of border — voor CTA blokken */
.ei-split-rechts--neutraal {
    background: var(--ei-wit);
    border-left: none;
}

/* Split links ook wit wanneer naast neutrale rechts */
.ei-split-links--wit {
    background: var(--ei-wit);
}

/* CTA kolom: knoppen onder elkaar, breedte van breedste knop */
.ei-cta-knop-kolom {
    background: var(--ei-wit);
    padding: 5rem 4rem 5rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    align-items: flex-start;
}

/* Alle knoppen even breed — breedte van de breedste */
.ei-cta-knop-kolom .ei-btn {
    align-self: stretch;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   SIGNALEN GRID (ondernemen)
   ══════════════════════════════════════════════════════════════ */

.ei-signaal {
    background: var(--ei-wit);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: box-shadow .2s;
}

.ei-signaal:hover {
    box-shadow: 0 4px 16px rgba(37,38,57,.08);
}

.ei-signaal--a { border-radius: 4px 40px 4px 4px; }
.ei-signaal--c { border-radius: 4px 4px 4px 40px; }

.ei-signaal-kop {
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--ei-navy);
    line-height: 1.2;
}

.ei-signaal-tekst {
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.75;
}

.ei-max-240 { max-width: 240px; }

/* Linkerkolom in grid secties — zelfde verticale afstand als ei-label margin-bottom */
.ei-sectie-kol {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

/* Verwijder dubbele margin op elementen binnen ei-sectie-kol */
.ei-sectie-kol .ei-label,
.ei-sectie-kol .ei-h2-midden,
.ei-sectie-kol .ei-split-sub,
.ei-sectie-kol p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Radio-rij: wrapper voor meerdere .ei-form-radio items onder elkaar */
.ei-radio-rij {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .25rem;
}

/* Bedankt pagina */
#ei.ei-site--bedankt {
    background: var(--ei-creme);
    box-shadow: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ei-bedankt-link {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    text-decoration: none;
    margin-top: .75rem;
}

.ei-bedankt-link:hover { color: var(--ei-goud); }

/* Bedankt sectie vult volledige viewport hoogte */
.ei-bedankt--volledig {
    flex: 0 0 auto;
}

/* Achtergrond ook op GP wrappers zetten */
.ei-pagina--bedankt .site-main,
.ei-pagina--bedankt #genesis-content,
.ei-pagina--bedankt .generate-columns-container {
    background: var(--ei-creme) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Bedankt knop: gecentreerd, zelfde stijl als home */
#ei .ei-bedankt-inner .ei-btn {
    align-self: center !important;
    background: var(--ei-goud);
    color: var(--ei-wit);
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .65rem 2rem;
    border: none;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
    display: inline-block;
}

#ei .ei-bedankt-inner .ei-btn:hover {
    background: #c45c43;
}

/* GP wrapper reset voor bedankt pagina */
.ei-pagina--bedankt .site-content,
.ei-pagina--bedankt .content-area,
.ei-pagina--bedankt .entry-content,
.ei-pagina--bedankt .inside-article,
.ei-pagina--bedankt article,
.ei-pagina--bedankt .entry-header {
    padding: 0 !important;
    margin: 0 !important;
}

.ei-pagina--bedankt #ei.ei-site--bedankt {
    background: var(--ei-creme);
}

/* Body en alle wrappers creme voor bedankt pagina */
.ei-pagina--bedankt body {
    background: var(--ei-creme) !important;
}

/* GP right-sidebar wrapper volledig de hoogte in */
.ei-pagina--bedankt .right-sidebar,
.ei-pagina--bedankt .site,
.ei-pagina--bedankt .site-content,
.ei-pagina--bedankt .inside-page-hero,
.ei-pagina--bedankt .content-area {
    background: var(--ei-creme) !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* GP layout volledig uitgeschakeld op EI templates */
.ei-no-gp-layout .site-content,
.ei-no-gp-layout .content-area,
.ei-no-gp-layout .site-main,
.ei-no-gp-layout article,
.ei-no-gp-layout .inside-article,
.ei-no-gp-layout .entry-content,
.ei-no-gp-layout .entry-header {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: transparent !important;
}

/* GP page-hero uitschakelen */
.ei-no-gp-layout .page-hero-container,
.ei-no-gp-layout .inside-page-hero {
    display: none !important;
}

/* Bedankt pagina: footer onderin, creme stopt bij footer */
.ei-site--bedankt .ei-footer-wrap {
    margin-top: 0;
}

.ei-max-480 { max-width: 480px; }

/* Divider */
.ei-divider {
    padding: .6rem 5rem;
    border-bottom: 1px solid var(--ei-border);
    border-top: 1px solid var(--ei-border);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: var(--ei-wit);
}

.ei-divider span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ei-subtekst);
    white-space: nowrap;
}

.ei-divider::before,
.ei-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ei-border);
}

/* Split gespiegeld — foto links, tekst rechts */
.ei-split--gespiegeld {
    flex-direction: row-reverse;
}

/* Quotes op lichte achtergrond */
.ei-sectie--creme .ei-quote-tekst { color: var(--ei-subtekst); }
.ei-sectie--creme .ei-quote-naam  { color: var(--ei-navy); }
.ei-sectie--creme .ei-quote-fn    { color: var(--ei-subtekst); }
.ei-sectie--creme .ei-quote       { border-left-color: var(--ei-goud); }

/* Form labels op witte achtergrond */
.ei-sectie--wit .ei-form-label {
    color: var(--ei-subtekst);
}
.ei-sectie--wit .ei-form-input,
.ei-sectie--wit .ei-form-textarea {
    background: var(--ei-creme);
    border-color: var(--ei-border);
    color: var(--ei-navy);
}

/* Split variant met creme achtergrond */
.ei-split--creme .ei-split-links {
    background: var(--ei-creme);
}
.ei-split--creme .ei-over-foto {
    background: var(--ei-creme);
}

.ei-over-foto--wit { background: var(--ei-wit); }

.ei-split--wit { background: var(--ei-wit); }

/* GP sticky header uitzetten op EI templates — ei-nav regelt dit zelf */
.ei-template .generate-sticky-header,
.ei-template .stuck,
.ei-template .site-header.stuck,
.ei-template #site-navigation.sticky-enabled,
.ei-template .navigation-search {
    position: static !important;
    top: auto !important;
}

/* Offset voor fixed nav via ei-nav-spacer */
.ei-nav-spacer {
    height: 81px; /* exacte nav hoogte */
}



/* ══════════════════════════════════════════════════════════════
   AGENDA PAGINA
   ══════════════════════════════════════════════════════════════ */

.ei-agenda-wrap {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: calc(100vh - 62px);
}

/* INFO kolom links */
.ei-agenda-info {
    background: var(--ei-navy);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
}

.ei-agenda-h1 {
    font-family: 'Larken Bold', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}

.ei-agenda-h1 em {
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,.5);
    display: block;
}

.ei-agenda-lead {
    font-size: 14px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    line-height: 1.8;
    margin-bottom: 1.75rem;
}

.ei-agenda-detail {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1rem;
}

.ei-agenda-detail svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ei-agenda-detail-tekst {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
}

.ei-agenda-detail-tekst strong {
    color: rgba(255,255,255,.85);
    font-weight: 600;
}

/* Stappen indicator */
.ei-agenda-stappen {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.ei-agenda-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: inline-block;
    transition: background .2s;
}

.ei-agenda-dot--actief { background: var(--ei-goud); }
.ei-agenda-dot--klaar  { background: rgba(255,255,255,.35); }

.ei-agenda-stap-label {
    font-size: 11px;
    font-weight: 300;
    color: rgba(255,255,255,.35);
    margin-left: .25rem;
}

/* RECHTS: stappen */
.ei-agenda-rechts {
    background: var(--ei-wit);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.ei-agenda-stap { flex: 1; }

.ei-agenda-kop {
    font-family: 'Larken Bold', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: var(--ei-navy);
    line-height: 1.2;
    margin-bottom: .5rem;
}

.ei-agenda-kop strong {
    font-weight: 700;
    display: block;
}

.ei-agenda-sub {
    font-size: 13px;
    font-weight: 300;
    color: var(--ei-subtekst);
    margin-bottom: 1.25rem;
}

/* Keuze kaarten */
.ei-agenda-keuze-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.ei-agenda-keuze-kaart {
    border: 1.5px solid var(--ei-border);
    padding: 1.5rem 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: border-color .15s, background .15s;
}

.ei-agenda-keuze-kaart:hover {
    border-color: var(--ei-goud);
    background: rgba(237,111,84,.04);
}

.ei-agenda-keuze-kaart svg {
    width: 20px;
    height: 20px;
}

.ei-agenda-keuze-titel {
    font-size: 14px;
    font-weight: 700;
    color: var(--ei-navy);
}

.ei-agenda-keuze-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ei-goud);
}

.ei-agenda-keuze-pijl {
    font-size: 11px;
    font-weight: 600;
    color: var(--ei-goud);
    margin-top: .25rem;
}

/* Geselecteerd tijdstip */
.ei-agenda-geselecteerd {
    background: var(--ei-creme);
    border: 1px solid var(--ei-border);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.ei-agenda-geselecteerd svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ei-agenda-geselecteerd-tijd {
    font-family: 'Larken Bold', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--ei-navy);
}

.ei-agenda-geselecteerd-sub {
    font-size: 12px;
    font-weight: 300;
    color: var(--ei-subtekst);
    margin-top: .15rem;
}

/* Bookly container — reset Bookly overflow */
.ei-bookly-container { }

#ei .bookly-css-root .bookly-box {
    overflow: visible !important;
}

#ei .bookly-css-root .bookly-form {
    overflow: visible !important;
}

/* Navigatie knoppen */
.ei-agenda-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}

#ei .ei-agenda-btn-terug {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--ei-navy) !important;
    background: none !important;
    border: 1.5px solid var(--ei-border) !important;
    padding: .65rem 1.5rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
}

#ei .ei-agenda-btn-terug:hover {
    border-color: var(--ei-goud) !important;
    color: var(--ei-goud) !important;
}

#ei .ei-agenda-btn-meer {
    display: inline-block !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    background: var(--ei-goud) !important;
    color: #fff !important;
    border: none !important;
    padding: .65rem 1.5rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
}

#ei .ei-agenda-btn-meer:hover {
    background: #c45c43 !important;
    color: #fff !important;
}

#ei .ei-agenda-btn-bevestig {
    display: inline-block !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    background: var(--ei-goud) !important;
    color: #fff !important;
    border: none !important;
    padding: .65rem 2rem !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
}

#ei .ei-agenda-btn-bevestig:hover {
    background: #c45c43 !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   AGENDA — RESPONSIVE MOBILE
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE TOGGLES
   ══════════════════════════════════════════════════════════════ */
.ei-mobile-only { display: none; }

@media (max-width: 1024px) {

    /* ── Nav ── */
    .ei-nav-inner {
        padding: 0 1.5rem;
    }

    /* ── Sectie padding ── */
    .ei-sectie { padding: 4rem 2rem; }
    .ei-sectie-lg { padding: 6rem 2rem; }
    .ei-sectie-xl { padding: 8rem 2rem; }

    /* ── Grids: 2-koloms naar 1 op tablet ── */
    .ei-grid-2-5,
    .ei-grid-2-center {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* ── Grid 4 → 2 kolommen op tablet ── */
    .ei-grid-4,
    .ei-grid-4-kaart {
        grid-template-columns: 1fr 1fr;
    }

    /* ── Grid 5 → 2 kolommen ── */
    .ei-grid-5 {
        grid-template-columns: 1fr 1fr;
    }

    /* ── Home hero ── */
    .ei-home-hero {
        grid-template-columns: 1fr;
    }

    .ei-home-hero-rechts {
        display: none;
    }

    .ei-home-hero-links {
        padding: 4rem 2rem;
    }

    /* ── Home content (podcast + blog) ── */
    .ei-content-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ei-content-grid > div {
        padding: 2.5rem 1.25rem;
        border-bottom: 1px solid var(--ei-border);
    }

    .ei-content-grid > div:last-child {
        border-bottom: none;
    }

    /* ── h2-midden kleiner op tablet/mobile ── */
    .ei-h2-midden {
        font-size: 28px;
    }

    /* ── Home split ── */
    .ei-split {
        grid-template-columns: 1fr;
    }

    .ei-split-links,
    .ei-split-rechts {
        padding: 3rem 2rem;
    }

    /* ── Home diensten ── */
    .ei-home-dienst-kop {
        flex-direction: column;
    }

    /* ── Home media volledig (geen podcast) ── */
    .ei-home-media--volledig {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem;
        gap: 0;
    }

    /* ── Contact pagina ── */
    .ei-contact-pagina {
        grid-template-columns: 1fr;
    }

    /* ── Over ons persoon ── */
    .ei-over-persoon {
        grid-template-columns: 1fr;
    }

    .ei-over-tekst {
        padding: 3rem 2rem;
    }

    /* ── Blog single ── */
    .ei-blog-single {
        grid-template-columns: 1fr;
    }

    .ei-blog-sidebar {
        display: none;
    }

    /* ── Hero ── */
    .ei-hero {
        grid-template-columns: 1fr;
    }

    .ei-hero-rechts {
        display: none;
    }

    .ei-hero-links {
        padding: 4rem 2rem;
    }

    /* ── Home USP ── */
    .ei-home-usp {
        grid-template-columns: 1fr;
    }

    .ei-home-usp-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 2rem;
    }

    /* ── Home split ── */
    .ei-split-links,
    .ei-split-rechts {
        padding: 3rem 2rem;
    }

    /* ── Home aanpak ── */
    .ei-home-aanpak {
        grid-template-columns: 1fr;
    }

    .ei-home-aanpak-links {
        padding: 3rem 2rem;
    }

    .ei-home-erv {
        padding: 3rem 2rem;
    }

    /* ── Home over ── */
    .ei-home-over {
        grid-template-columns: 1fr 1fr;
    }

    /* ── Home contact ── */
    .ei-contact-blok {
        grid-template-columns: 1fr 1fr;
    }

    .ei-contact-blok > div:first-child {
        padding: 3rem 2rem;
    }

    .ei-contact-blok > *:last-child {
        padding: 3rem 2rem;
    }

    /* ── FAQ ── */
    .ei-faq {
        padding: 4rem 2rem;
    }

    /* ── Agenda ── */
    .ei-agenda-wrap {
        grid-template-columns: 1fr;
    }

    .ei-agenda-info {
        padding: 2rem;
    }

    .ei-agenda-rechts {
        padding: 2rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ei-desktop-only { display: none !important; }
    .ei-mobile-only { display: block; }
}

@media (max-width: 768px) {

    /* ── Nav ── */
    .ei-nav-inner {
        padding: 0 1.25rem;
    }

    /* Hamburger zichtbaar op mobile */
    .ei-nav-burger {
        display: flex;
    }

    /* Drawer: dropdown rechtsboven, smal venster */
    .ei-nav-links {
        display: none;
        position: fixed;
        top: 81px;
        right: 1rem;
        left: auto;
        width: 260px;
        max-width: calc(100vw - 2rem);
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.25rem 1.25rem;
        gap: 0;
        z-index: 99;
        border: 1px solid var(--ei-border);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0,0,0,.12);
    }
    .ei-nav-links.ei-nav-links--open {
        display: flex;
    }
    .ei-nav-link {
        padding: .75rem 0;
        font-size: 16px;
    }
    /* Contact-link in drawer: identiek aan andere hoofdlinks */
    .ei-nav-links .ei-nav-cta {
        background: transparent;
        color: var(--ei-navy);
        font-size: 16px;
        font-weight: 300;
        text-transform: none;
        letter-spacing: 0;
        padding: .75rem 0;
        border: none;
        border-radius: 0;
        text-align: left;
        align-self: stretch;
        margin-top: 0;
    }
    .ei-nav-links .ei-nav-cta:hover {
        color: var(--ei-goud);
    }

    /* Sub-nav: zichtbaar in mobile drawer, niet ingesprongen */
    .ei-nav-sub {
        display: flex;
        flex-direction: column;
    }
    .ei-nav-sublink {
        padding: .75rem 0;
        font-size: 16px;
        font-weight: 300;
        color: var(--ei-navy);
        text-decoration: none;
    }
    .ei-nav-sublink:hover {
        color: var(--ei-goud);
    }

    /* Actieve link in mobile drawer: grijstint, geen onderlijn */
    .ei-nav-links .ei-nav-link--actief {
        color: #9a9a9a;
        box-shadow: none;
    }

    /* Blur overlay achter het menu wanneer open */
    .ei-nav-overlay {
        display: none;
        position: fixed;
        top: 81px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(37,38,57,.25);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 98;
    }
    body.ei-nav-open .ei-nav-overlay {
        display: block;
    }

    /* ── Sectie padding ── */
    .ei-sectie { padding: 3rem 1.25rem; }
    .ei-sectie-sm { padding: 2rem 1.25rem; }
    .ei-sectie-lg { padding: 4rem 1.25rem; }
    .ei-sectie-xl { padding: 5rem 1.25rem; }

    /* ── Alle grids naar 1 kolom ── */
    .ei-grid-2,
    .ei-grid-3,
    .ei-grid-4,
    .ei-grid-5,
    .ei-grid-2-5,
    .ei-grid-2-center,
    .ei-grid-3-kaart,
    .ei-grid-4-kaart {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* ── Hero wit naar 1 kolom op mobile ── */
    .ei-hero-wit {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem 1.25rem 3rem;
    }

    /* ── Home hero ── */
    .ei-home-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .ei-home-hero-rechts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ei-home-dienst {
        padding: 2rem 1.25rem;
    }

    .ei-home-hero-links {
        padding: 3rem 1.25rem;
    }

    .ei-home-h1-licht { font-size: 22px; }
    .ei-home-h1-vet   { font-size: 38px; }

    .ei-home-lead {
        font-size: 16px;
        margin: 1.5rem 0;
        max-width: 100%;
    }

    /* ── Home content (podcast + blog) ── */
    .ei-content-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ei-content-grid > div {
        padding: 2.5rem 1.25rem;
        border-bottom: 1px solid var(--ei-border);
    }

    .ei-content-grid > div:last-child {
        border-bottom: none;
    }

    /* ── h2-midden kleiner op tablet/mobile ── */
    .ei-h2-midden {
        font-size: 28px;
    }

    /* ── Home split ── */
    .ei-split {
        grid-template-columns: 1fr;
    }

    .ei-split-links,
    .ei-split-rechts {
        padding: 2.5rem 1.25rem;
    }

    /* ── Home diensten ── */
    /* ── Sectie kop ── */
    .ei-h2-midden { font-size: 28px; }

    /* ── Hero ── */
    .ei-hero {
        grid-template-columns: 1fr;
    }

    .ei-hero-rechts { display: none; }

    .ei-hero-links {
        padding: 3rem 1.25rem;
    }

    .ei-hero-h1 { font-size: 32px; }

    /* ── Home stappen ── */
    .ei-home-aanpak {
        grid-template-columns: 1fr;
    }

    /* ── Home media volledig (geen podcast) ── */
    .ei-home-media--volledig {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.25rem;
        gap: 0;
    }

    /* ── Contact pagina ── */
    .ei-contact-pagina {
        grid-template-columns: 1fr;
    }

    .ei-contact-links {
        flex-direction: column;
        gap: .75rem;
    }

    /* ── Radio knoppen ── */
    .ei-radio-rij {
        flex-direction: column;
        gap: .5rem;
    }

    /* ── Over ons ── */
    .ei-over-persoon {
        grid-template-columns: 1fr;
    }

    .ei-over-persoon--gespiegeld .ei-over-tekst,
    .ei-over-persoon--gespiegeld .ei-over-foto {
        order: unset;
    }

    .ei-over-tekst {
        padding: 2.5rem 1.25rem;
    }

    .ei-over-foto {
        min-height: 280px;
    }

    /* ── Blog single ── */
    .ei-blog-single {
        grid-template-columns: 1fr;
    }

    .ei-blog-sidebar { display: none; }

    .ei-blog-inhoud {
        padding: 2rem 1.25rem;
    }

    /* ── Stap kaarten ── */
    .ei-stap-kaart {
        padding: 1.5rem 1.25rem;
    }

    /* ── Knoppen rij ── */
    .ei-knop-rij {
        flex-direction: column;
        align-items: stretch;
    }

    .ei-knop-rij .ei-btn {
        text-align: center;
    }

    /* ── Bedankt ── */
    .ei-bedankt-inner {
        padding: 3rem 1.25rem;
    }

    /* ── Footer ── */
    .ei-footer {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 1.25rem;
    }

    .ei-footer-bottom {
        padding: 1rem 1.25rem;
        flex-direction: column;
        gap: .5rem;
        text-align: center;
    }

    /* ── Autismehuis ── */
    .ei-autismehuis-pagina {
        grid-template-columns: 1fr;
    }

    .ei-autismehuis-tekst,
    .ei-autismehuis-formulier {
        padding: 2.5rem 1.25rem;
    }

    /* ── Max-width hulpklassen op mobile irrelevant ── */
    .ei-max-480,
    .ei-max-560,
    .ei-max-680,
    .ei-max-900 {
        max-width: 100%;
    }

    /* ── Cta knop kolom ── */
    .ei-cta-knop-kolom {
        padding: 2rem 1.25rem;
    }

    /* ── Sectie kol ── */
    .ei-sectie-kol {
        grid-template-columns: 1fr;
    }

    /* ── Home USP ── */
    .ei-home-usp {
        grid-template-columns: 1fr;
    }

    .ei-home-usp-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 2rem 1.25rem;
        overflow: visible;
    }

    .ei-home-usp-item:last-child { border-bottom: none; }

    .ei-home-usp-bg {
        font-size: 52px;
        bottom: -.25rem;
        right: 1rem;
    }

    /* ── Home over ── */
    .ei-home-over {
        grid-template-columns: 1fr;
    }

    .ei-home-over > div:first-child {
        padding: 2.5rem 1.25rem;
    }

    /* ── Home contact ── */
    .ei-contact-blok {
        grid-template-columns: 1fr;
        border-radius: 60px 0 0 0;
    }

    .ei-contact-blok > div:first-child {
        padding: 2.5rem 2rem;
    }

    .ei-contact-blok > *:last-child {
        padding: 2rem 2rem 3rem;
    }

    .ei-contact-blok-form {
        padding: 0;
    }

    /* ── FAQ ── */
    .ei-faq {
        padding: 3rem 1.25rem;
    }

    .ei-faq-lijst {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ei-faq-item:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid var(--ei-border);
    }

    /* ── Home ervaringen ── */
    .ei-home-erv {
        padding: 2.5rem 1.25rem;
    }

    .ei-home-aanpak-links {
        padding: 2.5rem 1.25rem;
    }

    /* ── Home fotos ── */
    .ei-home-fotos {
        grid-template-columns: 1fr 1fr;
    }

    .ei-home-foto-w,
    .ei-home-foto-e {
        min-height: 240px;
    }

    .ei-home-foto-w img,
    .ei-home-foto-e img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── Home aanpak ── */
    .ei-home-aanpak {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 1.25rem;
    }

    .ei-home-aanpak-links {
        padding: 2.5rem 0;
    }

    /* ── Home stappen ── */
    .ei-home-stap {
        padding: 1.25rem 0;
    }

    /* ── Algemene tekst groottes op mobile ── */
    #ei p {
        font-size: 17px;
        line-height: 1.7;
    }

    .ei-home-lead,
    .ei-split-sub,
    .ei-split-sub--wit,
    .ei-home-stap-p,
    .ei-home-dienst-tekst,
    .ei-home-usp-item p,
    .ei-faq-lijst--inklapbaar .ei-faq-antwoord,
    .ei-home-erv .ei-quote-tekst {
        font-size: 17px;
        line-height: 1.7;
    }

    .ei-home-lead {
        max-width: 100%;
        margin: 1.25rem 0;
    }
}

/* ── AGENDA specifiek (768px) ── */
@media (max-width: 768px) {

    /* Grid naar enkele kolom */
    .ei-agenda-wrap {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Info kolom wordt banner bovenaan */
    .ei-agenda-info {
        padding: 1.5rem 1.25rem;
    }

    .ei-agenda-h1 {
        font-size: 24px;
        margin-bottom: .75rem;
    }

    /* Details als chips naast elkaar */
    .ei-agenda-lead { display: none; }

    .ei-agenda-detail {
        display: inline-flex;
        margin-bottom: 0;
        margin-right: 1rem;
    }

    .ei-agenda-detail-tekst br { display: none; }
    .ei-agenda-detail-tekst { font-size: 12px; }

    /* Stappen bar eigen rij */
    .ei-agenda-stappen {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    /* Rechts: geen padding aan zijkanten */
    .ei-agenda-rechts {
        padding: 1.5rem 1.25rem;
    }

    /* Keuze kaarten gestapeld, horizontaal met pijl rechts */
    .ei-agenda-keuze-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .ei-agenda-keuze-kaart {
        flex-direction: row;
        align-items: center;
        padding: 1.25rem;
        gap: 1rem;
    }

    .ei-agenda-keuze-kaart svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .ei-agenda-keuze-titel { font-size: 14px; }

    .ei-agenda-keuze-pijl {
        margin-top: 0;
        margin-left: auto;
        font-size: 18px;
        color: rgba(237,111,84,.4);
    }

    /* Stap 2: footer nav — Meer links, Terug rechts */
    #ei-stap-2 .ei-agenda-nav {
        flex-direction: row-reverse;
    }

    /* Stap 3: footer nav — Bevestig links, Terug rechts */
    #ei-stap-3 .ei-agenda-nav {
        flex-direction: row;
    }

    /* Nav sticky onderaan op mobile */
    .ei-agenda-nav {
        position: sticky;
        bottom: 0;
        background: var(--ei-wit);
        border-top: 1px solid var(--ei-border);
        padding: 1rem 1.25rem;
        margin: 0 -1.25rem -1.5rem;
    }

    /* Bookly tijdsloten per dag */
    .ei-bookly-container .bookly-column {
        flex-direction: column;
        align-items: flex-start;
    }

    .ei-bookly-container .bookly-day {
        font-size: 13px;
        padding: .6rem 0 .4rem;
        border-bottom: 1px solid var(--ei-border);
        width: 100%;
        margin-bottom: .5rem;
    }

    /* Knoppen terug — pijl links */
    #ei-stap-2 .ei-agenda-btn-terug::before { content: '← '; }
    #ei-stap-3 .ei-agenda-btn-terug::before { content: '← '; }
}


/* ══════════════════════════════════════════════════════════════
   HOME — NIEUWE COMPONENTEN (hero-peek, dienst-num, podcast cover,
   blog kaart, FAQ accordion, sticky CTA, quote openingsteken)
   ══════════════════════════════════════════════════════════════ */

/* HERO PEEK (mobile-only — default hidden, flex op mobile) */
.ei-home-hero-peek {
    display: none;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ei-border);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (max-width: 768px) {
    .ei-home-hero-peek {
        display: flex;
    }
}
.ei-home-hero-peek-tekst {
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.5;
}
.ei-home-hero-peek-tekst strong {
    font-weight: 700;
    color: var(--ei-navy);
}
.ei-home-hero-peek-arrow {
    font-size: 20px;
    color: var(--ei-goud);
    flex-shrink: 0;
}

/* DIENST GROOT ITALIC NUMMER */
.ei-home-dienst {
    position: relative;
}
.ei-home-dienst-num {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-family: 'Larken Bold', sans-serif;
    font-size: 72px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}
.ei-home-dienst-num--goud { color: rgba(237,111,84,.15); }
.ei-home-dienst-num--turq { color: rgba(28,181,190,.15); }

/* PODCAST COVER STRIP (mobile-only — default hidden) */
.ei-podcast-cover {
    display: none;
    height: 100px;
    background: linear-gradient(135deg, #ead1bd 0%, #dfc2a8 100%);
    position: relative;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
    margin: -2.5rem -1.25rem 1.5rem;
    overflow: hidden;
}
.ei-podcast-cover-icoon {
    width: 44px;
    height: 44px;
    background: var(--ei-goud);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.ei-podcast-cover-label {
    font-family: 'Larken Bold', sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    color: var(--ei-subtekst);
    position: relative;
    z-index: 1;
}
.ei-podcast-cover-deco {
    position: absolute;
    font-family: 'Larken Bold', sans-serif;
    font-size: 72px;
    font-weight: 800;
    font-style: italic;
    color: rgba(37,38,57,.06);
    right: -.5rem;
    bottom: -1rem;
    line-height: 1;
}

/* BLOG KAART (mobile-only — default hidden) */
.ei-home-blog-kaart {
    display: none;
    text-decoration: none;
    padding: 1rem 0;
}
@media (max-width: 768px) {
    .ei-home-blog-kaart {
        display: block;
    }
}
.ei-home-blog-kaart-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: 1rem;
}
.ei-home-blog-kaart-titel {
    font-family: 'Larken Bold', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--ei-navy);
    line-height: 1.15;
    margin-bottom: 1rem;
}
.ei-home-blog-kaart-intro {
    font-size: 17px;
    font-weight: 300;
    font-style: italic;
    color: var(--ei-subtekst);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.ei-home-blog-kaart-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ei-goud);
}

/* QUOTE OPENINGSTEKEN */
.ei-quote-tekst::before {
    content: '\201C';
    display: block;
    font-family: 'Larken Bold', sans-serif;
    font-size: 56px;
    font-style: italic;
    color: var(--ei-goud);
    line-height: .4;
    margin-bottom: 1rem;
    height: 1.5rem;
}

/* STICKY MOBILE CTA (default verborgen, alleen op mobile zichtbaar) */
.ei-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ei-goud);
    padding: .85rem 1.25rem;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 -8px 24px rgba(0,0,0,.15);
    z-index: 50;
    text-decoration: none;
}
@media (max-width: 768px) {
    .ei-sticky-cta {
        display: flex;
    }
}
.ei-sticky-cta-tekst {
    font-family: 'Larken Bold', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    color: #fff;
    line-height: 1.2;
}
.ei-sticky-cta-btn {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: #fff;
    color: var(--ei-goud);
    padding: .55rem 1rem;
    flex-shrink: 0;
}

/* ── Sticky CTA: extra padding onderaan body op mobile zodat footer niet wegvalt ── */
@media (max-width: 768px) {
    .ei-site { padding-bottom: 60px; }

    /* Dienst nummer kleiner op mobile */
    .ei-home-dienst-num {
        top: 1rem;
        right: 1.25rem;
        font-size: 64px;
    }

    /* USP payoff iets kleiner */
    .ei-home-usp-payoff {
        font-size: 22px;
    }

    /* Quote openingsteken iets kleiner */
    .ei-quote-tekst::before {
        font-size: 48px;
    }
}


/* ══════════════════════════════════════════════════════════════
   AANPAK PAGINA — NIEUWE COMPONENTEN
   ══════════════════════════════════════════════════════════════ */

/* MOBILE KIES KAARTEN (default verborgen, alleen op mobile zichtbaar) */
.ei-keuze-kaart-rij {
    display: none;
}
@media (max-width: 768px) {
    .ei-keuze-kaart-rij {
        display: block;
    }
}

.ei-keuze-kaart {
    display: flex;
    gap: 0;
    text-decoration: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    align-items: stretch;
    box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
}
.ei-keuze-kaart--a { border-radius: 0 40px 0 0; }
.ei-keuze-kaart--b { border-radius: 0 0 0 40px; }

.ei-keuze-kaart-num-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255,255,255,.08);
}
.ei-keuze-kaart-num-wrap--koraal { background: rgba(237,111,84,.12); }
.ei-keuze-kaart-num-wrap--turq   { background: rgba(28,181,190,.12); }

.ei-keuze-kaart-num {
    font-family: 'Larken Bold', sans-serif;
    font-size: 48px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
}
.ei-keuze-kaart-num--koraal { color: var(--ei-goud); }
.ei-keuze-kaart-num--turq   { color: var(--ei-turquoise); }

.ei-keuze-kaart-inhoud {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.25rem;
}

.ei-keuze-kaart-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    line-height: 1.1;
    margin-bottom: .75rem;
}
.ei-keuze-kaart-h em {
    font-style: italic;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    display: block;
}

.ei-keuze-kaart-p {
    font-size: 15px;
    font-weight: 300;
    color: rgba(255,255,255,.65);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ei-keuze-kaart-knop {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ei-goud);
}
.ei-keuze-kaart-knop--turq { color: var(--ei-turquoise); }

/* DERDE UITWEG */
.ei-keuze-kaart--derde {
    display: block;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 1.25rem;
    margin-top: 1rem;
    text-align: center;
}
.ei-keuze-kaart-derde-tekst {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
    line-height: 1.6;
    font-style: italic;
}
.ei-keuze-kaart-derde-tekst strong {
    font-style: normal;
    font-weight: 700;
    color: var(--ei-goud);
    display: inline;
    margin-top: 0;
}

/* Desktop variant van derde uitweg — strakker */
.ei-keuze-kaart--derde-desktop {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 2rem;
}


/* ══════════════════════════════════════════════════════════════
   ONDERNEMEN PAGINA — extra componenten
   ══════════════════════════════════════════════════════════════ */

/* SIGNALEN AFSLUITER (mobile-only) */
.ei-signalen-afsluiter {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ei-border);
    text-align: center;
}
.ei-signalen-afsluiter p {
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    color: var(--ei-subtekst);
    line-height: 1.5;
}
.ei-signalen-afsluiter strong {
    font-style: normal;
    font-weight: 700;
    color: var(--ei-navy);
    display: block;
    margin-top: .25rem;
}

/* PRIJSINDICATIE */
.ei-ondernemen-investering {
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.6;
    padding-top: 1rem;
    border-top: 1px solid var(--ei-border);
}
.ei-ondernemen-investering strong {
    font-weight: 700;
    color: var(--ei-navy);
}


/* ══════════════════════════════════════════════════════════════
   MEDEWERKERS PAGINA — extra componenten voor mobile
   ══════════════════════════════════════════════════════════════ */

/* HERO OPBRENGST (mobile-only) */
.ei-medewerkers-opbrengst {
    background: var(--ei-creme);
    padding: 1.5rem 1.25rem;
    margin: 1.5rem -1.25rem 0;
    border-top: 1px solid var(--ei-border);
}
.ei-medewerkers-opbrengst-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: .85rem;
}
.ei-medewerkers-opbrengst-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-navy);
}
.ei-medewerkers-opbrengst-vink {
    width: 20px;
    height: 20px;
    background: var(--ei-goud);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Hero padding-bottom op mobile weg zodat opbrengst-strip strakker aansluit */
@media (max-width: 768px) {
    .ei-medewerkers-hero { padding-bottom: 0; }
}

/* HERKEN JE DIT? LIJST (mobile-only) */
.ei-herken-lijst {
    margin: .85rem 0 0;
}
.ei-herken-item {
    display: flex;
    gap: .85rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.ei-herken-item:last-of-type {
    border-bottom: none;
}
.ei-herken-pijl {
    color: var(--ei-goud);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1.5;
}
.ei-herken-item p {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-navy);
    line-height: 1.6;
    margin: 0;
}

/* AANPAK TIJDLIJN (mobile-only) */
.ei-medewerkers-tijdlijn {
    position: relative;
    padding: .5rem 0 0;
}
.ei-medewerkers-tijdlijn::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: rgba(255,255,255,.12);
}
.ei-medewerkers-tijdlijn-rij {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 1.75rem;
}
.ei-medewerkers-tijdlijn-rij:last-child {
    padding-bottom: 0;
}
.ei-medewerkers-tijdlijn-bol {
    width: 50px;
    height: 50px;
    background: var(--ei-navy);
    border: 2px solid var(--ei-goud);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ei-goud);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.ei-medewerkers-tijdlijn-inhoud {
    flex: 1;
    padding-top: .4rem;
}
.ei-medewerkers-tijdlijn-fase {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ei-goud);
    margin-bottom: .4rem;
}
.ei-medewerkers-tijdlijn-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: .4rem;
}
.ei-medewerkers-tijdlijn-p {
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
}

/* WANNEER COMPACT — rijen (mobile-only) */
.ei-medewerkers-wanneer-compact {
    margin-top: .5rem;
}
.ei-medewerkers-wanneer-rij {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ei-border);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    row-gap: .25rem;
    align-items: baseline;
}
.ei-medewerkers-wanneer-rij:last-child {
    border-bottom: none;
}
.ei-medewerkers-wanneer-rij-pijl {
    grid-row: 1 / 3;
    color: var(--ei-goud);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
}
.ei-medewerkers-wanneer-rij-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ei-navy);
    line-height: 1.2;
}
.ei-medewerkers-wanneer-rij-sub {
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.5;
}

/* PIJN VAN INACTIE (mobile-only) */
.ei-medewerkers-pijn {
    background: var(--ei-creme2);
    padding: 1.75rem 1.25rem;
    border: 1px solid rgba(0,0,0,.08);
}
.ei-medewerkers-pijn-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ei-goud);
    line-height: 1.2;
    margin-bottom: .6rem;
}
.ei-medewerkers-pijn-p {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.65;
}

/* EERLIJK VERHAAL — wel/bij grotere blokken */
.ei-keuze-blok {
    padding: 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--ei-border);
}
.ei-keuze-blok--ja {
    border-radius: 0 24px 0 0;
}
.ei-keuze-blok--anders {
    border-radius: 0 0 0 24px;
}
.ei-keuze-blok-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    display: block;
    margin-bottom: .85rem;
}
.ei-keuze-blok-label--ja {
    color: var(--ei-goud);
}
.ei-keuze-blok-label--anders {
    color: var(--ei-subtekst);
}
.ei-keuze-blok-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ei-keuze-blok-lijst li {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-navy);
    line-height: 1.6;
    padding: .4rem 0;
    display: flex;
    gap: .6rem;
}
.ei-keuze-blok-lijst li::before {
    content: '→';
    color: var(--ei-goud);
    font-weight: 700;
    flex-shrink: 0;
}
.ei-keuze-blok p {
    font-size: 16px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.7;
    margin: 0;
}
.ei-keuze-blok p strong {
    font-weight: 700;
    color: var(--ei-navy);
}

/* Formulier label-sub (optioneel) */
.ei-form-label-sub {
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    opacity: .6;
}

/* Sectie creme2 (voor eerlijk verhaal) — als die nog niet bestaat */
.ei-sectie--creme2 {
    background: var(--ei-creme2);
}


/* ONDERNEMEN HERO — padding-bottom 0 op mobile zodat opbrengst-strip strak aansluit */
@media (max-width: 768px) {
    .ei-ondernemen-hero { padding-bottom: 0; }
}


/* AANPAK methode link onder tijdlijn — wrapper voor gecentreerde knop */
.ei-methode-link {
    margin-top: 2.5rem;
    text-align: center;
}




/* ══════════════════════════════════════════════════════════════
   METHODE PAGINA — mobile UX componenten
   ══════════════════════════════════════════════════════════════ */

/* Hero — mobile padding-control voor opbrengst-strip aansluiting */
@media (max-width: 768px) {
    .ei-methode-hero { padding-bottom: 0; }
}

/* Mobile hero extra: opbrengst + TOC (mobile-only) */
.ei-methode-mobile-hero-extra {
    margin-top: 1.5rem;
}

.ei-checklist {
    background: var(--ei-creme2);
    padding: 1.5rem 1.25rem;
    margin: 0 -1.25rem;
    border-top: 1px solid var(--ei-border);
}
.ei-checklist-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: .85rem;
}
.ei-checklist-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 0;
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-navy);
}
.ei-checklist-vink {
    width: 20px;
    height: 20px;
    background: var(--ei-goud);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* TOC */
.ei-toc {
    background: var(--ei-creme);
    padding: 1.25rem 1.25rem 1rem;
    margin: 0 -1.25rem;
    border-top: 1px solid var(--ei-border);
}
.ei-toc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-subtekst);
    display: block;
    margin-bottom: .85rem;
    opacity: .7;
}
.ei-toc-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--ei-border);
    text-decoration: none;
    color: var(--ei-navy);
    font-size: 14px;
    font-weight: 300;
}
.ei-toc-item:last-child {
    border-bottom: none;
}
.ei-toc-num {
    font-family: 'Larken Bold', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: var(--ei-goud);
    min-width: 24px;
}

/* VS-blok */
.ei-vs-blok {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
    align-items: stretch;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.ei-vs-helft {
    background: #fff;
    border: 1px solid var(--ei-border);
    padding: 1rem .75rem;
    text-align: center;
}
.ei-vs-helft--anderen {
    opacity: .65;
    border-radius: 20px 0 0 0;
}
.ei-vs-helft--ei {
    border: 1px solid var(--ei-turquoise);
    border-radius: 0 0 20px 0;
}
.ei-vs-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ei-subtekst);
    display: block;
    margin-bottom: .4rem;
}
.ei-vs-lbl--ei {
    color: var(--ei-turquoise);
}
.ei-vs-tekst {
    font-family: 'Larken Bold', sans-serif;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: var(--ei-subtekst);
    line-height: 1.4;
    margin: 0;
}
.ei-vs-tekst--ei {
    color: var(--ei-navy);
    font-weight: 700;
    font-style: normal;
}
.ei-vs-streep {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Larken Bold', sans-serif;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: var(--ei-goud);
}
@media (max-width: 768px) {
    .ei-vs-blok { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   HOME PAGINA — extra mobile UX verbeteringen
   ══════════════════════════════════════════════════════════════ */

/* 'Alle artikelen →' link onder blog */
.ei-home-blog-meer {
    display: inline-block;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ei-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ei-goud);
    text-decoration: none;
    transition: opacity .2s;
}
.ei-home-blog-meer:hover {
    opacity: .75;
}

/* Mobile: ervaringen-sectie krijgt creme2 om visuele breuk te creëren tussen aanpak (navy) en ervaringen */
@media (max-width: 768px) {
    .ei-home-erv--mobile-light {
        background: var(--ei-creme2);
        padding: 2.5rem 1.25rem;
        margin-top: 1rem;
    }
    .ei-home-erv--mobile-light .ei-label {
        color: var(--ei-goud);
    }
    .ei-home-erv--mobile-light .ei-h2-midden--wit {
        color: var(--ei-navy);
    }
    .ei-home-erv--mobile-light 
    .ei-home-erv--mobile-light .ei-h2-midden--wit strong {
        color: var(--ei-navy);
    }
    .ei-home-erv--mobile-light .ei-quote-tekst {
        color: var(--ei-subtekst);
    }
    .ei-home-erv--mobile-light .ei-quote-naam {
        color: var(--ei-navy);
        opacity: .7;
    }
    .ei-home-erv--mobile-light .ei-quote-fn {
        color: var(--ei-subtekst);
        opacity: .6;
    }
    .ei-home-erv--mobile-light .ei-quote-tekst::before {
        color: var(--ei-goud);
    }
}


/* ══════════════════════════════════════════════════════════════
   OVER ONS PAGINA — verhaal, rol-kaarten, credentials, locatie
   ══════════════════════════════════════════════════════════════ */

/* TIJDLIJN — desktop horizontaal, mobile verticaal */
.ei-tijdlijn {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    position: relative;
    margin-top: 1rem;
}
.ei-tijdlijn::before {
    content: '';
    position: absolute;
    left: 32px;
    right: 32px;
    top: 32px;
    height: 2px;
    background: var(--ei-border);
    z-index: 0;
}
.ei-tijdlijn-rij {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
.ei-tijdlijn-jaar {
    width: 64px;
    height: 64px;
    background: #fff;
    border: 2px solid var(--ei-goud);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Larken Bold', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ei-goud);
    position: relative;
    z-index: 1;
}
.ei-tijdlijn-inhoud {
    flex: 1;
}
.ei-tijdlijn-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ei-navy);
    margin-bottom: .5rem;
    line-height: 1.2;
}
.ei-tijdlijn-p {
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.6;
    margin: 0;
}

/* Mobile: terug naar verticaal */
@media (max-width: 768px) {
.ei-tijdlijn {
        grid-template-columns: 1fr;
        gap: 0;
    }
.ei-tijdlijn::before {
        left: 32px;
        right: auto;
        top: 1.5rem;
        bottom: 1.5rem;
        width: 2px;
        height: auto;
    }
    .ei-tijdlijn-rij {
        flex-direction: row;
        gap: 1.25rem;
        padding-bottom: 1.75rem;
    }
    .ei-tijdlijn-rij:last-child {
        padding-bottom: 0;
    }
    .ei-tijdlijn-inhoud {
        padding-top: .4rem;
    }
.ei-tijdlijn-h {
        font-size: 18px;
    }
.ei-tijdlijn-p {
        font-size: 15px;
        line-height: 1.65;
    }
}

/* ROL KAARTEN */
.ei-rol-kaart-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ei-rol-kaart {
    padding: 1.75rem 1.5rem;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.ei-rol-kaart--w {
    border-radius: 0 24px 0 0;
    border-left: 3px solid var(--ei-goud);
}
.ei-rol-kaart--e {
    border-radius: 0 0 0 24px;
    border-left: 3px solid var(--ei-turquoise);
}
.ei-rol-kaart-cirkel {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Larken Bold', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: .85rem;
}
.ei-rol-kaart-cirkel--w {
    background: var(--ei-goud);
}
.ei-rol-kaart-cirkel--e {
    background: var(--ei-turquoise);
}
.ei-rol-kaart-naam {
    font-family: 'Larken Bold', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ei-navy);
    margin-bottom: .15rem;
}
.ei-rol-kaart-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .65rem;
}
.ei-rol-kaart-label--w {
    color: var(--ei-goud);
}
.ei-rol-kaart-label--e {
    color: var(--ei-turquoise);
}
.ei-rol-kaart-uitleg {
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.55;
    margin: 0;
}

/* Mobile: rol-kaarten onder elkaar */
@media (max-width: 768px) {
    .ei-rol-kaart-rij {
        grid-template-columns: 1fr;
    }
}

/* CREDENTIALS BLOK */
.ei-credentials {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(0,0,0,.03);
    border-left: 2px solid var(--ei-border);
}
.ei-credentials-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-subtekst);
    display: block;
    margin-bottom: .75rem;
    opacity: .8;
}
.ei-credentials-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}
.ei-credentials-lijst li {
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.5;
    padding: .35rem 0 .35rem 1rem;
    position: relative;
}
.ei-credentials-lijst li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .85rem;
    width: 4px;
    height: 4px;
    background: var(--ei-goud);
    border-radius: 50%;
}

/* OVERTUIGINGEN — bullets ipv nummering */
.ei-overons-overtuiging {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--ei-border);
    position: relative;
    padding-left: 1.5rem;
}
.ei-overons-overtuiging:last-child {
    border-bottom: none;
}
.ei-overons-overtuiging::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.6rem;
    width: 8px;
    height: 8px;
    background: var(--ei-goud);
    border-radius: 50%;
}
.ei-overons-overtuiging-h {
    font-family: 'Larken Bold', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ei-navy);
    margin-bottom: .4rem;
}
.ei-overons-overtuiging-p {
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.65;
    margin: 0;
}

/* LOCATIE */
.ei-locatie-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    align-items: center;
}
.ei-locatie-foto {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #d9d3cc 0%, #b8b1a9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.65);
}
.ei-locatie-foto-cap {
    font-family: 'Larken Bold', sans-serif;
    font-size: 13px;
    font-style: italic;
}
.ei-info-rij {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--ei-border);
    align-items: start;
}
.ei-info-rij:last-child {
    border-bottom: none;
}
.ei-info-rij-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ei-subtekst);
    display: block;
    margin-bottom: .25rem;
}
.ei-info-rij-waarde {
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-navy);
    line-height: 1.5;
}

/* Mobile: locatie + credentials onder elkaar */
@media (max-width: 768px) {
    .ei-locatie-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ei-credentials-lijst {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════
   OVER ONS — desktop UX verbeteringen
   ══════════════════════════════════════════════════════════════ */

/* VISUEEL RUSTPUNT — grote payoff tussen secties */
.ei-payoff-blok {
    background: var(--ei-navy);
    padding: 5rem 1.5rem;
    text-align: center;
}
.ei-payoff-blok-inner {
    margin: 0 auto;
}
.ei-payoff-blok-tekst {
    font-family: 'Larken Bold', sans-serif;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 300;
    color: rgba(255,255,255,.85);
    line-height: 1.3;
    margin: 0;
}
.ei-payoff-blok-tekst em {
    font-style: italic;
    color: #fff;
    font-weight: 700;
}

/* Modifier: warme creme2-variant (navy tekst, goud accent) */
.ei-payoff-blok--creme2 { background: var(--ei-creme2); }
.ei-payoff-blok--creme2 .ei-payoff-blok-tekst { color: var(--ei-navy); }
.ei-payoff-blok--creme2 .ei-payoff-blok-tekst em { color: var(--ei-goud); }

@media (max-width: 768px) {
    .ei-payoff-blok {
        padding: 3rem 1.25rem;
    }
}

/* LOCATIE — icoontjes */
.ei-info-rij-icoon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: rgba(237,111,84,.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ei-goud);
}

/* Locatie-info-rij wordt nu flex met icoon ipv 2-koloms label/info */
.ei-info-rij {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 1rem !important;
    padding: 1.25rem 0 !important;
    align-items: flex-start !important;
}
.ei-info-rij > div,
.ei-info-rij-tekst {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* OVERTUIGINGEN — gecentreerde kop + 3-koloms grid */
.ei-overons-overt-kop {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}
.ei-overons-overt-kop .ei-h2-midden {
    text-align: center;
}
.ei-overons-overt-intro {
    font-size: 17px;
    font-weight: 300;
    color: var(--ei-subtekst);
    line-height: 1.7;
    margin-top: 1rem;
}
.ei-overons-overt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Overtuigingen in 3-koloms grid: kaart-stijl met koraal balk */
.ei-overons-overt-grid .ei-overons-overtuiging {
    padding: 1.75rem 1.5rem;
    background: #fff;
    border-left: 3px solid var(--ei-goud);
    border-bottom: none;
    padding-left: 1.75rem;
}
.ei-overons-overt-grid .ei-overons-overtuiging::before {
    display: none;
}

/* Mobile: terug naar verticale bullet-stijl */
@media (max-width: 768px) {
    .ei-overons-overt-kop {
        text-align: left;
        margin: 0 0 1.5rem;
    }
    .ei-overons-overt-kop .ei-h2-midden {
        text-align: left;
    }
    .ei-overons-overt-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .ei-overons-overt-grid .ei-overons-overtuiging {
        background: transparent;
        border-left: none;
        padding: 1.25rem 0 1.25rem 1.5rem;
        border-bottom: 1px solid var(--ei-border);
    }
    .ei-overons-overt-grid .ei-overons-overtuiging:last-child {
        border-bottom: none;
    }
    .ei-overons-overt-grid .ei-overons-overtuiging::before {
        display: block;
    }
}


/* ══════════════════════════════════════════════════════════════
   CONTACT PAGINA — herzien
   ══════════════════════════════════════════════════════════════ */

/* Links compact (boven formulier, voor wie nog twijfelt) */
.ei-contact-links-compact {
    padding-bottom: 1rem !important;
}
.ei-contact-links-compact-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ei-goud);
    display: block;
    margin-bottom: .85rem;
}
.ei-contact-link-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
    text-decoration: none;
    font-size: 15px;
    font-weight: 300;
    color: var(--ei-navy);
}
.ei-contact-link-compact:last-child {
    border-bottom: none;
}
.ei-contact-link-arrow {
    color: var(--ei-goud);
    font-weight: 700;
    margin-left: 1rem;
}

/* Form label sub-tekst (optioneel) */
.ei-form-label-sub {
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0;
    opacity: .6;
}

/* Textarea ruim (voor contact-formulier) */
.ei-form-textarea--ruim {
    min-height: 140px;
}

/* Mail-alternatief — spam-vrij via JS */
.ei-contact-mail-alternatief {
    display: block;
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--ei-border);
    font-size: 14px;
    font-weight: 300;
    color: var(--ei-subtekst);
    text-decoration: none;
    cursor: pointer;
}
.ei-contact-mail-pijl {
    color: var(--ei-goud);
    font-weight: 700;
    margin-left: .25rem;
}

/* Info-rij (Telefoon, Bezoekadres) met icoontjes — donker-variant op navy */
.ei-info-rij--donker {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    align-items: flex-start;
}
.ei-info-rij--donker:last-child {
    border-bottom: none;
}
.ei-info-rij--donker .ei-info-rij-icoon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ei-goud);
}
.ei-info-rij--donker .ei-info-rij-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    display: block;
    margin-bottom: .25rem;
}
.ei-info-rij--donker .ei-info-rij-waarde {
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    line-height: 1.5;
    text-decoration: none;
}


/* Mobile-only display override: podcast-cover */
@media (max-width: 768px) {
    .ei-podcast-cover {
        display: flex;
    }
}



/* ══════════════════════════════════════════════════════════════
   OVER-ONS PAGINA — specifieke styling
   ══════════════════════════════════════════════════════════════ */

/* Rol-kaarten groter op desktop */
.ei-rol-kaart {
    padding: 2.5rem 2.25rem;
}
.ei-rol-kaart-cirkel {
    width: 64px;
    height: 64px;
    font-size: 24px;
}
.ei-rol-kaart-naam {
    font-size: 20px;
    margin-bottom: .35rem;
}
.ei-rol-kaart-label {
    font-size: 13px;
    margin-bottom: 1rem;
}
.ei-rol-kaart-uitleg {
    font-size: 17px;
    line-height: 1.7;
}

/* William's verhaal: creme variant van split-rechts--neutraal */
.ei-split-rechts--creme {
    background: var(--ei-creme);
}

/* "Niet perfect, wel authentiek" — inline bold zonder display:block */
.ei-h2-inline-bold {
    font-weight: bold;
    color: var(--ei-navy);
}

/* Sticky CTA tekst groter op één regel (voor over-ons en home) */
.ei-sticky-cta-tekst--groot {
    font-size: 18px;
}
.ei-sticky-cta-btn--groot {
    font-size: 13px;
    padding: .7rem 1.25rem;
}

/* OVER-ONS MOBILE OVERRIDES */
@media (max-width: 768px) {
    /* Elma sectie: foto bovenaan op mobile (zelfde patroon als William) */
    .ei-overons-elma {
        display: flex;
        flex-direction: column;
    }
    .ei-overons-elma .ei-over-foto {
        order: -1;
    }

    /* Rol-kaarten op mobile gewone (kleinere) maten */
    .ei-rol-kaart {
        padding: 1.75rem 1.5rem;
    }
    .ei-rol-kaart-cirkel {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
    .ei-rol-kaart-naam {
        font-size: 16px;
    }
    .ei-rol-kaart-label {
        font-size: 11px;
    }
    .ei-rol-kaart-uitleg {
        font-size: 14px;
        line-height: 1.55;
    }
}
/* ════════════════════════════════════════════════════════════════
   ECHT INZICHT — AGENDA TEMPLATE (v3)
   Alle selectors hebben .ei-pagina--agenda prefix om oude regels te
   overrulen zonder die weg te halen.
   ════════════════════════════════════════════════════════════════ */

/* ── Stappen-indicator ── */
.ei-pagina--agenda .ei-agenda-stappen {
    background: var(--ei-wit);
    border-bottom: 1px solid var(--ei-border);
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.ei-pagina--agenda .ei-agenda-stappen-binnen {
    padding: 1.25rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    align-items: center;
}
.ei-pagina--agenda .ei-agenda-stappen .ei-agenda-stap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding-bottom: 0.4rem;
    border-bottom: 1.5px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    flex: none;
}
.ei-pagina--agenda .ei-agenda-stappen .ei-agenda-stap-num,
.ei-pagina--agenda .ei-agenda-stappen .ei-agenda-stap-label {
    color: var(--ei-subtekst);
    font-weight: 500;
}
.ei-pagina--agenda .ei-agenda-stappen .ei-agenda-stap-sep {
    color: var(--ei-border);
    align-self: center;
}
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="1"] .ei-agenda-stap[data-stap="1"],
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="2"] .ei-agenda-stap[data-stap="2"],
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="3"] .ei-agenda-stap[data-stap="3"] {
    border-bottom-color: var(--ei-goud);
}
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="1"] .ei-agenda-stap[data-stap="1"] .ei-agenda-stap-num,
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="1"] .ei-agenda-stap[data-stap="1"] .ei-agenda-stap-label,
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="2"] .ei-agenda-stap[data-stap="2"] .ei-agenda-stap-num,
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="2"] .ei-agenda-stap[data-stap="2"] .ei-agenda-stap-label,
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="3"] .ei-agenda-stap[data-stap="3"] .ei-agenda-stap-num,
.ei-pagina--agenda .ei-agenda-stappen[data-actieve-stap="3"] .ei-agenda-stap[data-stap="3"] .ei-agenda-stap-label {
    color: var(--ei-goud);
    font-weight: 600;
}

/* ── Wrap ── */
.ei-pagina--agenda .ei-agenda-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 460px) 1fr;
    min-height: 600px;
}

/* ── LINKERKOLOM: donker, info ── */
.ei-pagina--agenda .ei-agenda-info {
    background: var(--ei-navy);
    color: var(--ei-wit);
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
}

/* Terug-link */
.ei-pagina--agenda .ei-agenda-terug {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 2rem;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    color: var(--ei-creme);
    opacity: 0.75;
    text-decoration: none;
    transition: opacity 0.2s;
}
.ei-pagina--agenda .ei-agenda-terug:hover {
    opacity: 1;
    color: var(--ei-wit);
}

/* Label "Afspraak inplannen" */
.ei-pagina--agenda .ei-agenda-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ei-goud);
    margin: 0 0 1.5rem;
}

/* H1 */
.ei-pagina--agenda .ei-agenda-h1 {
    font-family: 'PP Editorial New', Georgia, serif;
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 2.5rem !important;
    color: var(--ei-wit);
    letter-spacing: -0.01em;
}
.ei-pagina--agenda .ei-agenda-h1 em,
.ei-pagina--agenda .ei-agenda-h1-persoon {
    display: block;
    margin-top: 0.25rem;
}
.ei-pagina--agenda .ei-agenda-h1 em {
    font-style: italic;
    color: var(--ei-creme);
    font-weight: 300;
    opacity: 0.85;
    display: block;
}

/* Beschrijving — duidelijk veel ademruimte met !important om alle oude regels te verslaan */
.ei-pagina--agenda .ei-agenda-info .ei-agenda-beschrijving {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ei-creme) !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0.9 !important;
    max-width: 380px !important;
    padding: 0 !important;
}

/* Detail-regels */
.ei-pagina--agenda .ei-agenda-info .ei-agenda-detail {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin: 0 0 1.5rem;
    padding: 0;
    font-family: 'Instrument Sans', sans-serif;
}
.ei-pagina--agenda .ei-agenda-info .ei-agenda-detail:last-child {
    margin-bottom: 0;
}
.ei-pagina--agenda .ei-agenda-detail-icoon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ei-goud);
    margin-top: 2px;
}
.ei-pagina--agenda .ei-agenda-info .ei-agenda-detail-tekst {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ei-wit);
}
.ei-pagina--agenda .ei-agenda-info .ei-agenda-detail-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--ei-creme);
    opacity: 0.7;
    margin-top: 3px;
}

/* ── RECHTERKOLOM ── */
.ei-pagina--agenda .ei-agenda-rechts {
    background: var(--ei-wit);
    padding: 4rem 3rem;
    display: block;
}

/* Keuze-grid */
.ei-pagina--agenda .ei-agenda-keuze-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 520px;
}
.ei-pagina--agenda .ei-agenda-keuze-kaart {
    display: block;
    padding: 1.75rem;
    background: var(--ei-creme);
    border: 1.5px solid var(--ei-goud);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ei-tekst);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ei-pagina--agenda .ei-agenda-keuze-kaart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.ei-pagina--agenda .ei-agenda-keuze-icoon {
    width: 22px;
    height: 22px;
    color: var(--ei-goud);
    margin-bottom: 1rem;
}
.ei-pagina--agenda .ei-agenda-keuze-titel {
    font-family: 'PP Editorial New', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ei-tekst);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.ei-pagina--agenda .ei-agenda-keuze-sub {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ei-subtekst);
    margin: 0 0 1.25rem;
}
.ei-pagina--agenda .ei-agenda-keuze-cta {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ei-goud);
}

/* Bookly-kop en sub-tekst boven het formulier */
.ei-pagina--agenda .ei-agenda-rechts .ei-agenda-bookly-kop {
    font-family: 'PP Editorial New', Georgia, serif !important;
    font-size: 1.75rem !important;
    font-weight: 400 !important;
    color: var(--ei-tekst) !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: -0.01em !important;
}
.ei-pagina--agenda .ei-agenda-rechts .ei-agenda-bookly-sub {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--ei-subtekst) !important;
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
}

/* Kop-sets per stap: toon alleen de set die bij de actieve stap hoort */
.ei-pagina--agenda .ei-agenda-bookly-koppen .ei-agenda-bookly-kop-set {
    display: none;
}
.ei-pagina--agenda .ei-agenda-bookly-koppen[data-actieve-stap="2"] .ei-agenda-bookly-kop-set[data-stap="2"],
.ei-pagina--agenda .ei-agenda-bookly-koppen[data-actieve-stap="3"] .ei-agenda-bookly-kop-set[data-stap="3"] {
    display: block;
}

/* Info-kolom: details per stap tonen/verbergen op basis van actieve stap.
   Elementen met data-stap="2" zijn alleen zichtbaar op stap 2 (datum-keuze).
   Elementen met data-stap="3" zijn alleen zichtbaar op stap 3 (gegevens). */
.ei-pagina--agenda .ei-agenda-info[data-actieve-stap="2"] [data-stap="3"],
.ei-pagina--agenda .ei-agenda-info[data-actieve-stap="3"] [data-stap="2"] {
    display: none;
}

/* Lege em in h1 (gedeelde-agenda-pagina's zonder vooraf vaste persoon) verbergen */
.ei-pagina--agenda .ei-agenda-h1-persoon:empty {
    display: none;
}

/* Privacy-zin onderaan info-kolom op stap 3 */
.ei-pagina--agenda .ei-agenda-info .ei-agenda-privacy {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--ei-creme);
    opacity: 0.7;
    margin: 1rem 0 0;
}
.ei-pagina--agenda .ei-agenda-info .ei-agenda-privacy a {
    color: var(--ei-wit);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.ei-pagina--agenda .ei-agenda-info .ei-agenda-privacy a:hover {
    color: var(--ei-goud);
}

/* Op agenda-pagina's: hele footer verbergen voor schone focus op de actie */
.ei-pagina--agenda .ei-footer-wrap,
.ei-pagina--agenda .ei-footer-bottom {
    display: none !important;
}

/* Leeg-melding */
.ei-pagina--agenda .ei-agenda-leeg {
    font-family: 'Instrument Sans', sans-serif;
    color: var(--ei-subtekst);
    font-style: italic;
}

/* ── Responsive ── */

/* TABLET (601-1024px): twee kolommen behouden maar compacter */
@media (min-width: 601px) and (max-width: 1024px) {
    .ei-pagina--agenda .ei-agenda-wrap {
        grid-template-columns: minmax(260px, 380px) 1fr;
    }
    .ei-pagina--agenda .ei-agenda-info {
        padding: 2.5rem 2rem;
    }
    .ei-pagina--agenda .ei-agenda-rechts {
        padding: 2.5rem 2rem;
    }
    .ei-pagina--agenda .ei-agenda-h1 {
        font-size: 1.875rem;
    }
    .ei-pagina--agenda .ei-agenda-rechts .ei-agenda-bookly-kop {
        font-size: 1.5rem !important;
    }
    .ei-pagina--agenda .ei-agenda-stappen-binnen {
        padding: 1rem 2rem;
        gap: 1.25rem;
        font-size: 10px;
    }
}

/* MOBIEL (≤600px): info-kolom boven, agenda eronder, compactere typografie */
@media (max-width: 600px) {
    .ei-pagina--agenda .ei-agenda-wrap {
        grid-template-columns: 1fr;
    }
    .ei-pagina--agenda .ei-agenda-info {
        padding: 2rem 1.25rem;
    }
    .ei-pagina--agenda .ei-agenda-rechts {
        padding: 2rem 1.25rem;
    }
    .ei-pagina--agenda .ei-agenda-h1 {
        font-size: 1.625rem;
    }
    .ei-pagina--agenda .ei-agenda-info .ei-agenda-beschrijving {
        margin-top: 1.25rem !important;
        margin-bottom: 2rem !important;
        font-size: 14px !important;
    }
    .ei-pagina--agenda .ei-agenda-rechts .ei-agenda-bookly-kop {
        font-size: 1.375rem !important;
        margin-bottom: 0.75rem !important;
    }
    .ei-pagina--agenda .ei-agenda-rechts .ei-agenda-bookly-sub {
        margin-bottom: 1.75rem !important;
    }
    /* Stappen-indicator verbergen op mobiel — bespaart ruimte */
    .ei-pagina--agenda .ei-agenda-stappen {
        display: none;
    }
}