/*
Theme Name: YOOtheme Child (MaximeChloe)
Template: yootheme
Version: 1.1.0
Description: Child theme voor MaximeChloë Consultancy. Bevat alleen wat de themastijl
             en de elementvelden van YOOtheme niet kunnen dragen. Alles wat wel via de
             customizer kan staat daar, zodat het aanpasbaar blijft.

             Elke klasse hieronder hoort bij een blok dat op de site voorkomt en draagt
             zowel de maat als de marge. Reden: de marge-utilities van UIkit zijn
             !important, dus een maat in een css-veld achter een element wint het nooit.
             Met een klasse staat er in de bouwer één leesbare naam ("mc-hero-kop") in
             plaats van een blok css.
*/

/* ==========================================================================
   1. Lettertypen - lokaal, niet via de Google-CDN
   De bron host Lora en Inter zelf. Dat blijft zo: het scheelt een verbinding
   met Google bij elke bezoeker (voor een adviseur in de zorg geen detail) en
   het garandeert exact dezelfde glyphs als het origineel.
   ========================================================================== */
@font-face { font-family: "Lora"; src: url("fonts/lora-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-500.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-700.woff2") format("woff2");
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2");
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --mc-ease-clean: cubic-bezier(0.22, 1, 0.36, 1);
    --mc-ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
    --mc-motion-fast: 180ms;
    --mc-motion-smooth: 520ms;
    /* De hover-zoom op een foto heeft een eigen duur, 20% korter dan de 520ms van de
       bron. Keuze van Josh, 31-08-2026: "hij voelt een klein beetje traag". Een eigen
       variabele en niet de algemene, want --mc-motion-smooth stuurt ook de
       dienstenrijen aan en die mogen blijven zoals ze zijn. */
    --mc-motion-zoom: 416ms;
    --mc-eden: #0d5951;
    --mc-eden-dark: #0a4740;
    --mc-inkt: #050402;
    --mc-rand: rgba(5, 4, 2, 0.12);
}

/* ==========================================================================
   2. Contentbreedte
   De bron zet 5% lucht op de sectie en legt daarbinnen een kolom van 75rem.
   YOOtheme zet een vaste padding in pixels op de container. Bij 1024px scheelt
   dat 54px inhoudsbreedte, en dat verschuift elke kolom en elke foto.

   Let op de plaats van de padding: op de SECTIE, niet op de container. Zet je
   5% op de container zelf, dan gaat die padding van de 1200px af in plaats van
   van de vensterbreedte, en is de inhoud op groot scherm 144px te smal.
   ========================================================================== */
.uk-section { padding-left: 5%; padding-right: 5%; }

.uk-container {
    box-sizing: border-box;
    max-width: 1200px;
    padding-left: 0;
    padding-right: 0;
}

/* Secties die tot de rand mogen lopen: de hero-foto en het CTA-blok. */
.mc-bleed { padding-left: 0; padding-right: 0; }
.mc-bleed > .uk-container { max-width: none; }

/* ==========================================================================
   3. Beweging
   De bron laat blokken opkomen met opacity 0 -> 1 en 20px omhoog, in 700/760ms.
   UIkit's scrollspy doet hetzelfde met 10px in 0,2s. Maat en easing worden hier
   gelijkgetrokken; wélke elementen meedoen bepaalt de sectie-instelling
   "Animation" in de bouwer, niet dit bestand.
   ========================================================================== */
@keyframes mc-slide-bottom {
    0%   { opacity: 0; transform: translateY(1.25rem); }
    100% { opacity: 1; transform: translateY(0); }
}

.uk-animation-slide-bottom-small {
    animation-name: mc-slide-bottom;
    animation-duration: 760ms;
    animation-timing-function: var(--mc-ease-reveal);
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* De eindtoestand tonen, niet de begintoestand: anders blijft alles onzichtbaar. */
    [uk-scrollspy-class] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   4. Knoppen
   De bron tekent een 3px-schaduw onder de knop die bij hover wegvalt, zodat de
   knop letterlijk indrukt. Dat is geen UIkit-instelling.
   Deze regel staat bewust NIET in een hover-mediaquery: ook op een aanraak-
   scherm hoort de knop in te drukken bij :active.
   ========================================================================== */
.uk-button {
    /* UIkit maakt de knophoogte met line-height, de bron met padding. Dat scheelt
       drie pixels per knop en vier pixels ruimte eronder, en dat telt op in elke
       knoppenrij. Hier staat de doos van de bron; kleur, afronding en lettergrootte
       blijven gewoon in de customizer. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9375rem;
    padding-block: 0.625rem;
    border-width: 1.5px;
    line-height: 1.5;
    margin-bottom: 0.25rem;
    box-shadow: 0 3px 0 0 var(--mc-knopschaduw, var(--mc-eden-dark));
    transition:
        background-color var(--mc-motion-fast) ease,
        border-color var(--mc-motion-fast) ease,
        color var(--mc-motion-fast) ease,
        transform var(--mc-motion-fast) var(--mc-ease-clean),
        box-shadow var(--mc-motion-fast) var(--mc-ease-clean);
}

.uk-button-primary { --mc-knopschaduw: var(--mc-eden-dark); }
.uk-button-default { --mc-knopschaduw: var(--mc-eden); border-width: 2px; }

/* UIkit geeft een knop bij aanwijzen en indrukken een andere tekst- en randkleur.
   In de bron verandert alleen de positie en de schaduw; de kleuren blijven staan.
   Zonder deze regel werd de tweede knop bij indrukken zwart met een grijze rand. */
.uk-button-default,
.uk-button-default:hover,
.uk-button-default:focus,
.uk-button-default:active,
.uk-button-default.uk-active {
    border-color: var(--mc-eden);
    color: var(--mc-eden-dark);
}

.uk-button-primary,
.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-button-primary:active,
.uk-button-primary.uk-active {
    border-color: var(--mc-eden-dark);
    background-color: var(--mc-eden);
    color: #fff;
}

/* De kleine knop (op een projectkaart) is lager en smaller. */
/* De tekstknop: in de bron een gewone link met een pijltje erachter (`button-link`),
   dus zonder de hoogte, de rand en het gewicht van een knop. UIkit's `uk-button-text`
   erft die drie wel van `.uk-button`. */
.uk-button.uk-button-text {
    min-height: 0;
    margin-bottom: 0;
    padding-block: 0;
    gap: 0.5rem;
    border: 0;
    box-shadow: none;
    font-weight: 500;
    line-height: 1.5;
}

.uk-button.uk-button-text svg,
.uk-button.uk-button-text img {
    width: 1rem;
    height: 1rem;
    transition: transform var(--mc-motion-fast) var(--mc-ease-clean);
}

.uk-button-small {
    min-height: 2.375rem;
    padding-block: 0.375rem;
    padding-inline: 1.25rem;
}

.uk-button:hover,
.uk-button:focus,
.uk-button:active {
    transform: translateY(3px);
    box-shadow: none;
}

/* GEEN onderstreping bij hover, nergens.

   UIkit zet `text-decoration: underline` op elke link die je aanwijst. De bron doet
   dat nooit: daar rolt onder een menu- of voetlink een eigen ::after-lijntje uit, en
   een link in lopende tekst verandert helemaal niet van vorm. Zonder deze regel kreeg
   elk e-mailadres, elke verwijzing in het privacybeleid en elke voetlink er bij het
   aanwijzen een tweede streepje bij. De enige link die in de bron wél altijd
   onderstreept is, is die in de slotregel van de voet; die staat verderop apart. */
a:hover,
a:focus,
a:active { text-decoration: none; }

/* De focusring voor wie met het toetsenbord navigeert. De bron zet er een groene
   ring van 2px omheen met 4px lucht; zonder deze regel valt de site terug op de
   gestippelde zwarte standaardring van de browser, die op de donkergroene knop
   nauwelijks te zien is. `:focus-visible` zodat een muisklik hem niet oproept. */
a:focus-visible,
.uk-button:focus-visible,
.uk-navbar-toggle:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    /* Zelfde notatie als de bron: die gebruikt color-mix, en dan schrijft de
       browser de kleur als color(srgb ...) in plaats van rgba(). Dezelfde
       kleur, maar zo staat er in de vergelijking van de toestanden ook geen
       verschil meer. */
    outline: 2px solid color-mix(in srgb, var(--mc-eden), transparent 25%);
    outline-offset: 4px;
}

/* De knoppenrij: 1rem tussenruimte, 1,5rem lucht erboven. */
.mc-knoprij { margin-top: 1.5rem !important; margin-bottom: 0 !important; }
/* De tussenruimte komt volledig uit `column-gap`. UIkit maakt zijn tussenruimte
   met een negatieve marge links op de rij plus padding links op elk kind; die telde
   bij de gap op tot 31px in plaats van 16px, en zette een GECENTREERDE rij ook nog
   eens acht pixels naar links. Beide op nul, dan doet de gap het werk. */
.mc-knoprij .uk-grid { margin-left: 0; column-gap: 1rem; row-gap: 1rem; }
.mc-knoprij .uk-grid > * { padding-left: 0; }
/* Breken de knoppen op een smal scherm naar twee regels, dan komt bij `row-gap` ook
   nog de rijmarge van UIkit (15px). Die eruit; de gap doet het werk. */
.mc-knoprij .uk-grid > .uk-grid-margin { margin-top: 0; }

/* Staan er twee knoppen naast elkaar, dan zet YOOtheme ze in een raster en valt de
   ondermarge van de knop weg - precies de 4px die de bron gebruikt om de schaduw
   niet af te knippen. Bij één losse knop blijft die marge wél staan, dus de rij was
   vier pixels lager dan in de bron. */
.mc-knoprij .el-item > .uk-button { margin-bottom: 0.25rem; }

/* Een opsomming als laatste blok in een tekst, met daaronder een knoppenrij.
   In de bron staan die twee in hetzelfde blok en klappen hun marges samen: 32px in
   plaats van 32 + 24. Hier zijn het twee losse elementen in de bouwer, dus dat
   samenklappen gebeurt niet vanzelf; deze twee regels doen het alsnog. */
/* De :not([class]) staat er alleen om deze regel zwaarder te maken dan de
   lijstopmaak verderop in dit bestand; zonder dat wint die en blijft de
   ondermarge staan. */
.uk-panel > ul:last-child:not([class]) { margin-bottom: 0; }
.uk-panel:has(> ul:last-child) + .mc-knoprij { margin-top: 2rem !important; }

/* In het blok dat tot de rand loopt is de tekstkolom een flexbox, en flexboxen laten
   marges niet samenklappen. Daar telt de bron dus 32 + 24 = 56 bij elkaar op. */
.mc-splitrij-rand .uk-panel:has(> ul:last-child) + .mc-knoprij {
    margin-top: 3.5rem !important;
}

/* ==========================================================================
   5. Koppen en tekstblokken
   De maten komen uit de designtokens; de vloeiende schalen staan in de custom
   LESS van de themastijl (Stijl > Custom). Hier staan alleen de marges, want
   die kunnen daar niet: UIkit's marge-utilities zouden ze overrulen.
   ========================================================================== */
.mc-eyebrow    { margin-bottom: 0.75rem !important; }
.mc-hero-kop   { margin-bottom: 1.5rem !important; }
.mc-sectie-kop { margin-bottom: 1.25rem !important; }
.mc-blok-kop   { margin-bottom: 1.5rem !important; }
.mc-cta-kop    { margin-bottom: 1.5rem !important; }

/* Het blokje eyebrow + kop + inleiding. */
/* Het contactformulier op de contactpagina. Dezelfde aanpak als .mc-sectiekop:
   een maximumbreedte en gecentreerd, zodat de regels leesbaar blijven. Een
   invoerveld over de volle schermbreedte oogt onafgemaakt en leest slechter. */
/* De keuzelijst begint leeg, zodat er geen onderwerp wordt meegestuurd dat de
   bezoeker nooit gekozen heeft. Die lege optie krijgt hier plaatshoudergrijs.

   LET OP: de voor de hand liggende regel `select:invalid` werkt NIET bij Contact
   Form 7. Nagemeten 31-08-2026: CF7 zet op een verplicht veld geen `required` maar
   `aria-required="true"` en valideert op de server. Voor de browser is een leeg
   verplicht veld dus geldig, en `:invalid` en `:required` vuren allebei nooit.
   Kijken welke optie gekozen is werkt wel. */
select.mc-invoer:has(option[value=""]:checked) {
    color: color-mix(in srgb, var(--mc-inkt), transparent 45%);
}

.mc-formulierblok {
    box-sizing: border-box;
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
}

.mc-sectiekop {
    box-sizing: border-box;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    margin-bottom: 3rem;
}

.mc-sectiekop-links { margin-inline: 0; }

@media (min-width: 768px) { .mc-sectiekop { margin-bottom: 4.5rem; } }
@media (min-width: 992px) { .mc-sectiekop { margin-bottom: 5rem; } }

/* ==========================================================================
   6. Hero
   ========================================================================== */
.mc-hero-sectie { padding-top: 4rem; padding-bottom: 4rem; }

/* 6rem tussen 768 en 991, niet 7rem: in de bron wint de latere regel van
   .section-padding het daar van .hero__intro. Op ≥992 is het andersom. */
@media (min-width: 768px) {
    .mc-hero-sectie { padding-top: 6rem; padding-bottom: 6rem; }
}

@media (min-width: 992px) {
    .mc-hero-sectie { padding-top: 8.75rem; padding-bottom: 8rem; }
}

.mc-hero-sectie .uk-container { max-width: 56rem; }
.mc-hero-lead { max-width: 45rem; margin-inline: auto; margin-bottom: 0 !important; }

@media (min-width: 992px) {
    .mc-hero-sectie .uk-container { max-width: 50rem; }
    .mc-hero-lead { max-width: 39rem; }
}

/* De hero-foto loopt breder dan de tekstkolom maar niet tot de rand: precies
   de maat uit het ontwerp, met afgeronde hoeken vanaf de tabletbreedte. */
.mc-hero-fotosectie { overflow: hidden; }

.mc-hero-beeld img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    /* Onder de 992px loopt de foto in de bron tot de rand, zonder afronding.
       Het element krijgt van YOOtheme uk-border-rounded mee; die zetten we hier
       weer uit voor smalle schermen. */
    border-radius: 0;
}

@media (min-width: 992px) {
    .mc-hero-beeld {
        width: min(calc(100vw - clamp(5rem, 13vw, 20rem)), 75rem);
        margin-inline: auto;
        border-radius: 1rem;
        overflow: hidden;
    }
    .mc-hero-beeld img { object-position: center 72%; }
}

/* De bron geeft drie secties een minimumhoogte mee. Dat is geen decoratie: zonder
   die maat zijn de diensten- en werkwijzesectie samen ruim 300px korter en schuift
   de hele onderkant van de pagina omhoog. Gemeten op 1440px. */
@media (min-width: 992px) {
    .mc-diensten-sectie  { min-height: 54.75rem; }
    .mc-werkwijze-sectie { min-height: 105.375rem; }
}

/* ==========================================================================
   7. Iconen en kaarten
   ========================================================================== */
.mc-icoon img,
.mc-icoon svg,
.mc-dienstenraster .el-image,
.mc-voordelenraster .el-image,
.mc-tijdlijn .el-image {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    transition: transform 300ms var(--mc-ease-clean);
}

.mc-kaart { transition: transform 300ms var(--mc-ease-clean); }

/* Foto's die inzoomen bij hover. */
.mc-zoom { overflow: hidden; }

.mc-zoom img {
    transform: scale(1);
    translate: 0 0;
    transition:
        /* De 700ms is het OPKOMEN bij scrollen, niet de hover; die blijft. */
        translate 700ms var(--mc-ease-reveal),
        transform var(--mc-motion-zoom) var(--mc-ease-clean),
        filter var(--mc-motion-zoom) ease;
}

/* De tussenruimte tussen de KOLOMMEN van een rij.
   UIkit heeft vier maten (15/30/40/70px) en verdubbelt ze bovendien vanaf 1200px;
   het ontwerp heeft vaste maten die niet meeschalen. Zelfde truc als bij de rasters:
   negatieve marge links op de rij, padding links op elk kind. */
.mc-rij { margin-left: calc(var(--mc-kolomruimte, 30px) * -1); }
.mc-rij > * { padding-left: var(--mc-kolomruimte, 30px); }
.mc-rij > .uk-grid-margin { margin-top: var(--mc-rijruimte, 30px); }

.mc-voordelen-rij { --mc-kolomruimte: 5rem; }
/* Het kennismakingsblok heeft geen ruimte tussen de kolommen: de foto sluit
   aan op de tekst. Zonder deze regel valt UIkit terug op 30px en zijn de
   twee helften 735 in plaats van 720 breed. */
.mc-cta-rij {
    --mc-kolomruimte: 0px;
    --mc-rijruimte: 0px;
    /* De bron kapt zijn kennismakingsblok af op 150rem (2400px) en zet hem daarna
       gecentreerd neer: `.cta__grid { max-width: 150rem; margin-inline: auto; }`.
       Boven 2400px blijft er dus links en rechts een strook wit staan in plaats van
       dat de foto tot de schermrand doorloopt. Zonder deze regel liep de nabouw op
       een scherm van 2560 wél door tot de rand - gemeten 3 tot 4 procent verschil op
       elke pagina met dit blok, terwijl 1440 en 1920 tot op de pixel klopten.
       `.mc-splitrij-rand` had deze grens al; deze rij was vergeten. */
    max-width: 150rem;
    margin-inline: auto;
}
.mc-werkwijze-rij { --mc-kolomruimte: 4rem; }

/* Onder de 992px staan de kolommen onder elkaar; de bron houdt daar 3rem lucht
   tussen in plaats van de 30px van UIkit. */
@media (max-width: 991px) {
    .mc-voordelen-rij,
    .mc-werkwijze-rij,
    .mc-voetrij { --mc-rijruimte: 3rem; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mc-voordelen-rij { --mc-kolomruimte: 3rem; }
}

/* De tussenruimte in een raster.
   UIkit kent maar vier maten (15/30/40/70px) en verdubbelt ze bovendien vanaf
   1200px. Het ontwerp heeft andere maten die niet meeschalen, dus die staan hier
   per raster. Let op: UIkit maakt de kolomruimte met een negatieve marge links op
   de rij plus padding links op elk kind, en de rijruimte met een marge boven
   `.uk-grid-margin`. Alle drie moeten mee, anders schuift het raster opzij. */
.mc-raster > .uk-grid { margin-left: calc(var(--mc-kolomruimte) * -1); }
.mc-raster > .uk-grid > * { padding-left: var(--mc-kolomruimte); }
.mc-raster > .uk-grid > .uk-grid-margin { margin-top: var(--mc-rijruimte); }

/* -- Diensten: drie kaarten, gecentreerd ------------------------------- */
.mc-dienstenraster { --mc-kolomruimte: 3rem; --mc-rijruimte: 4rem; }
.mc-dienstenraster .el-item { transition: transform 300ms var(--mc-ease-clean); }
.mc-dienstenraster .el-image { margin: 0 auto; }
.mc-dienstenraster .el-title {
    margin-top: 1.5rem !important;
    font-size: 1.5rem;
    line-height: 1.3;
}
.mc-dienstenraster .el-content { margin-top: 1.5rem !important; }

/* Op de home passen drie kaarten naast de smallere hero-kolom; daar zijn de koppen
   kleiner. Op de dienstverleningspagina gebruikt de bron de volle h4-maat. Vandaar
   de extra klasse mc-raster-smal in plaats van één maat voor allebei. */
@media (min-width: 992px) {
    .mc-dienstenraster .el-title { font-size: 2.5rem; line-height: 1.3; }

    .mc-raster-smal { --mc-kolomruimte: 2.5rem; --mc-rijruimte: 3.25rem; }
    .mc-raster-smal .el-title {
        font-size: clamp(1.25rem, 1.55vw, 1.45rem);
        line-height: 1.2;
    }
    .mc-raster-smal .el-content { margin-top: 1rem !important; }
}

/* -- Voordelen: vier kaarten in twee kolommen -------------------------- */
.mc-voordelenraster {
    --mc-kolomruimte: 1.5rem;
    --mc-rijruimte: 2rem;
    padding-block: 0.5rem;
}

.mc-voordelenraster .el-item { transition: transform 300ms var(--mc-ease-clean); }
.mc-voordelenraster .el-image { object-position: left center; }
.mc-voordelenraster .el-title { margin-top: 1.25rem !important; }
.mc-voordelenraster .el-content { margin-top: 1rem !important; }

@media (min-width: 992px) {
    /* De bron legt de vier voordelen op een vast raster: een rij van 3rem voor het
       icoon, 3.25rem voor de kop en daaronder de tekst. Daardoor staan de teksten
       van alle vier op dezelfde hoogte, ook als de ene kop over twee regels valt en
       de andere over één. */
    .mc-voordelenraster .el-item {
        display: grid;
        grid-template-rows: 3rem 3.25rem auto;
        row-gap: 0.5rem;
        align-content: start;
    }
    .mc-voordelenraster .el-item > * { margin: 0 !important; }
    .mc-voordelenraster .el-title {
        align-self: start;
        font-size: clamp(1.125rem, 1.45vw, 1.35rem);
        line-height: 1.2;
    }
}

.mc-voordelen-beeld img {
    width: 100%;
    aspect-ratio: 6 / 5;
    object-fit: cover;
}

/* ==========================================================================
   8. Werkwijze: de tijdlijn
   Een lijn achter de iconen die meegroeit met de scrollpositie. De lijn zelf is
   een pseudo-element; het meegroeiende deel wordt door js/gedrag.js toegevoegd,
   zodat er geen leeg html-blok in de bouwer staat waar niemand iets mee kan.
   ========================================================================== */
.mc-tijdlijn { position: relative; }

.mc-tijdlijn::before {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 15%;
    left: 2.4375rem;
    width: 0.125rem;
    background: rgba(5, 4, 2, 0.15);
}

/* GEEN z-index op de voortgangslijn. Hier stond `z-index: 1` en dat tilde de lijn
   boven het afdekblokje van het icoon uit, waardoor hij vanaf 992px dwars door alle
   vier de iconen liep (gemeld 31-08-2026). De bron zet hier ook niets: daar is de
   voortgang een <span> binnen .timeline__line, allebei zonder z-index, en de stap
   dekt hem af puur op DOM-volgorde. Zodra deze lijn een positieve z-index krijgt,
   wint hij van elke stap die een eigen stapelcontext heeft — en dat hebben ze alle
   vier, door de transform van de onthulling. */
.mc-tijdlijn-voortgang {
    position: absolute;
    top: 10%;
    left: 2.4375rem;
    width: 0.125rem;
    height: 0;
    background: var(--mc-inkt);
    transition: height 120ms linear;
}

/* De vier stappen staan onder elkaar, met de lijn erachter. */
.mc-tijdlijn { --mc-kolomruimte: 2.5rem; --mc-rijruimte: 0rem; }

/* De opacity-overgang staat niet hier maar op de inhoud van de stap; zie het blok
   vanaf 992px verderop voor de reden. */
.mc-tijdlijn .el-item {
    transition: transform 300ms var(--mc-ease-clean);
}

/* Het icoon dekt de lijn af, net als in de bron: een blokje in de
   achtergrondkleur van de sectie eromheen. */
/* Op smalle schermen staat het icoon bovenaan naast de tekst, niet in het midden.
   Het veld "Vertical Alignment" van het raster centreert altijd; hier zetten we dat
   onder 992px weer recht. */
@media (max-width: 991px) {
    .mc-tijdlijn .el-item > .uk-grid { align-items: flex-start; }
}

.mc-tijdlijn .el-item > .uk-grid > :first-child {
    position: relative;
    z-index: 2;
    padding-block: 2.5rem;
    background: #e9f5f4;
}

.mc-tijdlijn .el-item > .uk-grid > :first-child .el-image { margin-inline: 1rem; }

/* De ruimte tussen het icoon en de tekst van een stap. UIkit geeft de rij binnen
   een raster-item zijn eigen tussenruimte (30px, boven 1200px 40px); de bron werkt
   met 2,5rem en onder 768px met 1,5rem. Zonder deze regels was de tekstkolom onder
   de 1200px zes pixels te smal, en dat brak elke regel op een andere plek af. */
.mc-tijdlijn .el-item > .uk-grid { margin-left: -2.5rem; }
.mc-tijdlijn .el-item > .uk-grid > * { padding-left: 2.5rem; }

@media (max-width: 767px) {
    .mc-tijdlijn .el-item > .uk-grid { margin-left: -1.5rem; }
    .mc-tijdlijn .el-item > .uk-grid > * { padding-left: 1.5rem; }
    /* Het blokje om het icoon wordt smaller mee, en de lijn schuift naar het
       midden daarvan. */
    .mc-tijdlijn .el-item > .uk-grid > :first-child .el-image { margin-inline: 0.5rem; }
    .mc-tijdlijn::before,
    .mc-tijdlijn-voortgang { left: 2rem; }
}

.mc-tijdlijn .el-title { margin-top: 0 !important; }
.mc-tijdlijn .el-content { margin-top: 1rem !important; }
.mc-tijdlijn .el-item > .uk-grid > :last-child { padding-block: 2.5rem; }

@media (min-width: 992px) {
    .mc-tijdlijn { padding-block: 8vh; }
    .mc-tijdlijn::before,
    .mc-tijdlijn-voortgang { top: 8vh; }
    .mc-tijdlijn::before { bottom: 8vh; }

    .mc-tijdlijn .el-item {
        /* De stap is 54vh hoog en de tekst staat verticaal in het midden daarvan,
           net als in de bron. Zonder het centreren begint elke stap bovenaan zijn
           vak en loopt de tijdlijn 115px uit de pas met de lijn ernaast. */
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: min(54vh, 32rem);
        transform: translateY(1rem);
    }

    /* De vervaging zit op de INHOUD van de stap, niet op de stap zelf.
       Reden: het afdekblokje achter het icoon is de achtergrond van de icoonkolom.
       Zet je `opacity: 0.38` op de hele stap, dan wordt dat blokje 38% doorzichtig
       en schemert de zwarte voortgangslijn er gewoon doorheen — gemeten rgb(92,96,94)
       in plaats van de achtergrondkleur rgb(233,245,244). Het icoon dekt de lijn dan
       wel af voor de muis, maar niet voor het oog. Door de kolom zelf dekkend te
       laten en alleen zijn inhoud te vervagen ziet de vervaging er hetzelfde uit en
       blijft de lijn netjes onderbroken. */
    .mc-tijdlijn .el-item > .uk-grid > :first-child > *,
    .mc-tijdlijn .el-item > .uk-grid > :last-child {
        opacity: 0.38;
        transition: opacity 300ms ease;
    }

    .mc-tijdlijn .el-item.is-actief { transform: translateY(0); }

    .mc-tijdlijn .el-item.is-actief > .uk-grid > :first-child > *,
    .mc-tijdlijn .el-item.is-actief > .uk-grid > :last-child { opacity: 1; }

    .mc-tijdlijn .el-item > .uk-grid > :first-child,
    .mc-tijdlijn .el-item > .uk-grid > :last-child { padding-block: 0; }

    .mc-plakkend {
        position: sticky;
        top: 7rem;
        align-self: start;
    }
}

@media (max-width: 767px) {
    /* Op een telefoon staat het icoon dichter tegen de tekst: 1,5rem ertussen en
       0,5rem lucht om het icoon zelf, in plaats van 2,5rem en 1rem. */
    .mc-tijdlijn { --mc-kolomruimte: 1.5rem; }
    .mc-tijdlijn .el-item > .uk-grid > :first-child .el-image { margin-inline: 0.5rem; }
    .mc-tijdlijn::before,
    .mc-tijdlijn-voortgang { left: 2rem; }
}

/* ==========================================================================
   9. Opsomming met bolletjes
   De bron gebruikt zwarte bolletjes van 0,45rem in plaats van de standaard
   opsommingstekens. Geldt overal waar lopende tekst een lijst bevat.
   ========================================================================== */
/* LET OP de `:not([class])`. Zonder die beperking pakte deze regel ook de lijstjes
   die UIkit zelf maakt - de social-iconen in de voet kregen er 2rem marge boven en
   onder bij en dat maakte de hele voetrij 48px te hoog. Lijsten uit de tekstverwerker
   hebben nooit een klasse; die van UIkit altijd. */
.uk-panel ul:not([class]),
.el-content ul:not([class]) {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.uk-panel ul:not([class]) > li,
.el-content ul:not([class]) > li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.uk-panel ul:not([class]) > li::before,
.el-content ul:not([class]) > li::before {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.6em;
    border-radius: 50%;
    background: currentColor;
}

/* ==========================================================================
   10. Kennismaking-blok (CTA)
   Twee kolommen die tot de rand lopen: tekst links, foto rechts over de volle
   hoogte. De foto is in de bron absoluut gepositioneerd binnen een kolom met
   een minimumhoogte; anders bepaalt de tekst de hoogte en wordt de foto klein.
   ========================================================================== */
.mc-cta-tekst { padding-block: 4rem; }

.mc-cta-tekst > * {
    box-sizing: border-box;
    max-width: 37.5rem;
    margin-inline: auto;
    width: 90%;
}

@media (min-width: 992px) {
    .mc-cta { min-height: 37.5625rem; }

    .mc-cta-tekst {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: 7rem;
    }

    .mc-cta-tekst > * {
        width: 100%;
        margin-left: auto;
        margin-right: 0;
        padding-right: clamp(1.5rem, 4vw, 4rem);
    }

    .mc-cta-foto {
        position: relative;
        align-self: stretch;
        min-height: 40rem;
        overflow: hidden;
    }

    .mc-cta-foto .mc-cta-beeld,
    .mc-cta-foto .mc-cta-beeld img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* ==========================================================================
   11. Genummerde dienstrijen (dienstverlening)
   ========================================================================== */
.mc-dienstrij {
    border-top: 1px solid var(--mc-rand);
    transition: padding-left var(--mc-motion-smooth) var(--mc-ease-clean);
}

.mc-dienstrij-laatste { border-bottom: 1px solid var(--mc-rand); }

.mc-nummer {
    font-family: "Lora", Georgia, serif;
    font-size: 3rem;
    line-height: 1;
    color: rgba(13, 89, 81, 0.65);
}

/* ==========================================================================
   12. Voet en navigatie
   ========================================================================== */
.mc-voetlinks a,
.uk-navbar-nav > li > a { position: relative; }

.mc-voetlinks a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.35rem;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 260ms var(--mc-ease-clean);
}

.mc-voetregel a { text-decoration: underline; }

/* De voet: 5rem lucht boven, 1rem onder, met de scheidingsstreep ertussen. */
/* De voet heeft in de bron een eigen grijs (`scheme-3`, #f6f6f6) - de enige plek
   op de site waar die kleur voorkomt. YOOtheme kent maar vier sectiestijlen en
   `muted` is hier al het mintgroen van de bron; vandaar de kleur op de klasse.

   Dit verschil bleef lang onzichtbaar in de pixelmeting: 246 tegen 255 is negen
   stappen per kanaal, net onder de drempel van twaalf die "een pixel wijkt af"
   bepaalt. Een voet van 1440x370 - bijna 6% van de home - viel daardoor buiten
   elke telling. Een verschil dat te klein is om te meten kan nog steeds te groot
   zijn om te laten staan. */
.mc-voet { background: #f6f6f6; }

.mc-voet { padding-top: 5rem !important; padding-bottom: 1rem !important; }
.mc-voet .uk-container { max-width: 1200px; }

.mc-voetlogo img {
    /* In de bron zit het logo in een kolom die niet breder wordt dan 16rem, dus
       dat is hier de bovengrens. */
    width: clamp(14.5rem, 20vw, 15rem);
    max-height: 3.35rem;
    object-fit: contain;
    object-position: left center;
}

/* De vier links staan in één regel met 1,5rem ertussen. Ze zitten in één
   tekstelement zodat Maxime ze in de bouwer gewoon kan aanpassen; de ruimte
   ertussen komt van deze regel en niet van &nbsp;-tekens in de tekst. */
.mc-voetlinks p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    font-weight: 600;
}

/* De slotregel: copyright en privacylink naast elkaar, gecentreerd. Het zijn twee
   elementen (net als in de bron), dus de flexbox hoort op de omhullende div. */
/* De alinea in de slotregel houdt zijn standaard ondermarge van 20px; in een
   flexbox telt die mee in de hoogte van de rij. Op een breed scherm viel dat weg
   tegen de minimumhoogte van de voet, maar op een tablet werd de voet er 20px te
   hoog van. */
.mc-voetregel > p { margin-bottom: 0; }

.mc-voetregel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.75rem;
}

/* De links in de voet erven de tekstkleur, net als in de bron. */
.mc-voetlinks a, .mc-voetregel a { color: inherit; }

/* De streep staat 5rem onder het bovenblok, de slotregel 2rem onder de streep. */
.mc-voetstreep { margin-top: 5rem !important; }
.mc-voetslot { margin-top: 2rem !important; }
.mc-voetrij { --mc-kolomruimte: 0px; }

@media (min-width: 992px) {
    .mc-voet { min-height: 23.125rem; }
    /* Op de hele slotregel, niet alleen op de alinea: de privacylink staat er als
       tweede element naast en bleef anders op 12px staan terwijl de copyrightregel
       ernaast 16px werd. Een verschil van 6px in een rij die door andere inhoud toch
       al op hoogte werd gehouden - daarom viel het in geen enkele pixelmeting op. */
    .mc-voetregel { font-size: 1rem; }
}

/* Vanaf 1280px is de voetrij in de bron een raster met drie ongelijke kolommen:
   het logo links in een kolom van minstens 16rem, de links in het midden op hun
   eigen breedte, en het icoon rechts in een kolom van minstens 10,5rem - met 4vw
   ertussen. Het gelijk verdelen van UIkit (1/5, 3/5, 1/5) zette de links daardoor
   44px te ver naar links; ze horen niet in het midden van de pagina te staan maar
   in het midden van hun eigen kolom. */
@media (min-width: 1280px) {
    .mc-voetrij {
        display: grid;
        grid-template-columns: minmax(16rem, 0.45fr) auto minmax(10.5rem, 0.35fr);
        align-items: center;
        justify-items: center;
        gap: 1rem 4vw;
        margin-left: 0;
    }

    .mc-voetrij > * {
        width: auto;
        max-width: none;
        margin-top: 0;
        padding-left: 0;
    }

    .mc-voetrij > :first-child { justify-self: start; }
    .mc-voetrij > :last-child { justify-self: end; }
}

/* Onder 1280px zet de bron de voet ONDER elkaar: logo, links en het icoon in drie
   rijen met 3rem ertussen, alles gecentreerd. UIkit doet dat pas onder 992px, en
   daardoor was de voet op een tablet 34px te laag - precies het verschil dat op
   1024 en 1200 in elke paginahoogte terugkwam. */
@media (max-width: 1279px) {
    .mc-voetstreep { margin-top: 3rem !important; }
    .mc-voet { padding-bottom: 1rem !important; }

    .mc-voetrij {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        margin-left: 0;
    }

    .mc-voetrij > *,
    .mc-voetrij > .uk-grid-margin {
        width: auto;
        max-width: 100%;
        /* de rijruimte komt van `gap`; die van UIkit zou er bovenop komen */
        margin-top: 0;
        padding-left: 0;
    }

    .mc-voetlogo { text-align: center; }

    .mc-voetlogo img {
        width: clamp(14.5rem, 34vw, 18rem);
        max-height: 3.1rem;
        margin-inline: auto;
        object-position: center;
    }
}

@media (max-width: 767px) {
    /* de tussenruimte blijft 1,5rem, ook als de links onder elkaar staan */
    .mc-voetlinks p { flex-direction: column; align-items: center; }
    .mc-voetregel { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Onder 992px mag het logo naar verhouding groter: 78vw in plaats van 34vw. De
   rest van de gestapelde voet staat in de mediaquery hierboven. */
@media (max-width: 991px) {
    .mc-voetlogo img { width: clamp(14.5rem, 78vw, 18rem); }
}

/* De social-links staan in de bron in een flexbox; als blok met een inline link
   erin komt er zeven pixels regelruimte onder het icoon bij. */
.mc-sociaal { display: flex; align-items: flex-start; gap: 0.75rem; }
.mc-sociaal a,
.mc-sociaal a:hover { display: block; text-decoration: none; }
/* Het icoon zit in een inline-block span; dan komt er onder het icoon nog zeven
   pixels regelruimte bij en is de voetrij te hoog. */
.mc-sociaal .uk-icon { display: block; }

.mc-sociaal svg,
.mc-sociaal img {
    width: 1.875rem;
    height: 1.875rem;
    transition:
        opacity var(--mc-motion-fast) ease,
        transform var(--mc-motion-fast) var(--mc-ease-clean);
}

.uk-navbar-nav > li > a {
    font-weight: 400;
    transition: color var(--mc-motion-fast) ease, opacity var(--mc-motion-fast) ease;
}

.uk-navbar-nav > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(50% - 1.05rem);
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 260ms var(--mc-ease-clean);
}

.uk-navbar-nav > li.uk-active > a { font-weight: 600; }

/* De menulinks staan in de bron 2,5rem uit elkaar. UIkit gebruikt daar 30px voor en
   dat is geen LESS-variabele in deze versie; de padding op de items zelf staat wel
   in de themastijl (op nul, zodat de onderstreping bij hover precies zo breed is als
   het woord). */
.tm-header .uk-navbar-nav { gap: 2.5rem; }

/* Het logo schaalt mee met het scherm, net als in de bron. */
.uk-logo img {
    width: clamp(16.2rem, 21.6vw, 22.2rem);
    max-height: 3.72rem;
    height: auto;
    object-fit: contain;
    object-position: left center;
}

/* Onder 992px schakelt de bron naar een eigen clamp voor het logo: relatief groter
   op een smal scherm (74vw) maar afgetopt op 17,7rem. Zonder deze regel bleef het
   mobiele logo op de ondergrens van de desktopclamp hangen: 259px in plaats van
   283px breed. */
@media (max-width: 991px) {
    .uk-logo img {
        width: clamp(14.4rem, 74vw, 17.7rem);
        max-height: 3.24rem;
    }
}

/* De mobiele balk is 72px hoog, maar de bron hangt de inhoud aan de BOVENkant:
   het logo staat in een doos van 4rem en de hamburger op een halve rem van boven.
   UIkit centreert alles netjes in de volle 72px, wat het logo 3px en de knop 6px
   lager zet dan in het origineel. */
@media (max-width: 991px) {
    /* De balk zelf houdt zijn 72px; alleen de inhoud erin schuift naar boven. */
    .tm-header-mobile .uk-navbar-container { min-height: 4.5rem; }

    .tm-header-mobile .uk-logo.uk-navbar-item {
        min-height: 4rem;
        align-self: flex-start;
    }

    .tm-header-mobile .uk-navbar-toggle {
        align-self: flex-start;
        margin-top: 0.5rem;
    }
}

/* Het laatste menu-item is een knop. WordPress hangt de klassen van een menu-item
   op de <li>, niet op de <a>, dus de knopopmaak staat hier op het kind. In het
   menuscherm staat er dan gewoon "mc-navknop" bij dat item. */
/* De knop in de balk krimpt niet mee en breekt niet af. Op 1024px werd hij anders
   samengedrukt tot "Plan / kennismaking" op twee regels, terwijl in de bron alleen
   het menu-item ernaast afbreekt. */
/* `align-items` deed hier niets: het li-element is `display: list-item`, dus de
   knop erin rekte mee met de volle balkhoogte en was 72px hoog groen in plaats van
   41. Op een pagina van 981px was dat een van de grootste verschilvlakken. */
.uk-navbar-nav > li.mc-navknop {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.uk-navbar-nav > li.mc-navknop > a { white-space: nowrap; }

.uk-navbar-nav > li.mc-navknop > a {
    box-sizing: border-box;
    /* `height: auto` moet erbij: UIkit zet op elke navbar-link `height: 100%`, en
       daarmee werd het groene vlak zo hoog als de hele balk (72px in plaats van 41). */
    height: auto;
    min-height: 2.375rem;
    /* Zelfde 4px onder de knop als overal: die houdt ruimte vrij voor de schaduw en
       zet de knop daardoor twee pixels hoger in de balk. */
    margin-bottom: 0.25rem;
    align-self: center;
    padding: 0.375rem 1.25rem;
    border: 1.5px solid var(--mc-eden-dark);
    border-radius: 0.75rem;
    background: var(--mc-eden);
    box-shadow: 0 3px 0 0 var(--mc-eden-dark);
    color: #fff;
    font-weight: 600;
    transition:
        transform var(--mc-motion-fast) var(--mc-ease-clean),
        box-shadow var(--mc-motion-fast) var(--mc-ease-clean);
}

.uk-navbar-nav > li.mc-navknop > a::after { content: none; }

.uk-navbar-nav > li.mc-navknop > a:hover,
.uk-navbar-nav > li.mc-navknop > a:active {
    color: #fff;
    transform: translateY(3px);
    box-shadow: none;
}

/* De menubalk loopt in de bron door tot 5% van de schermrand en is dus NIET beperkt
   tot de contentbreedte van 1200px. Gemeten op 1440px: het logo stond 48px te ver
   naar binnen en het hele menu schoof mee. Geldt voor de gewone én de mobiele kop. */
.tm-header .uk-container,
.tm-header-mobile .uk-container {
    max-width: none;
    padding-left: 5%;
    padding-right: 5%;
}

/* De hamburgerknop is in de bron een rond knopje met een randje en een zachte
   schaduw, rechtsboven. UIkit levert een kaal icoon. */
.uk-navbar-toggle {
    /* `min-height` moet er ook staan: UIkit zet op elk navbar-item een min-height
       van de balkhoogte, en die wint van `height`. Zonder deze regel is het knopje
       44x72 in plaats van 44x44 - een pil in plaats van een rondje. */
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    align-self: center;
    padding: 0;
    border: 1px solid rgba(5, 4, 2, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.08);
    color: var(--mc-inkt);
    transition:
        transform var(--mc-motion-fast) var(--mc-ease-clean),
        box-shadow var(--mc-motion-fast) var(--mc-ease-clean);
}

.uk-navbar-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.1);
}

/* Het mobiele menu.
   In de bron is dit een paneel dat onder de balk vandaan naar beneden komt over de
   volle breedte, met een bijna-witte achtergrond en een blur erachter. In YOOtheme
   is dat de dropbar-layout (`mobile.dialog.layout = dropbar`, animatie
   `reveal-top`); de standaard offcanvas schoof een zwarte kolom vanaf rechts in
   beeld met piepkleine 12px-linkjes. De maten hieronder komen uit `.navbar__menu`
   in styles.css van de bron.

   De hamburger die in een kruisje verandert doet UIkit zelf al, via
   `aria-expanded="true"` op de toggle - daar is geen regel voor nodig. */
#tm-dialog-mobile.uk-dropbar {
    /* 1,25rem boven, geen 1,75rem. De bron hangt zijn menupaneel op 64px vast terwijl
       de balk 72px hoog is; het paneel schuift daar dus 8px onder de balk door. Dat
       kan hier niet zonder de balk zelf te verplaatsen, maar het gevolg wél: met 8px
       minder ruimte erboven staat de eerste menuregel op precies dezelfde hoogte als
       in de bron (93px bij 390 breed, nagemeten).

       Waarom geen enkele meter dit zag: het menu staat op elke schermafdruk DICHT.
       Dit is de blinde vlek uit werkwijze.md 3b, hoofdstuk "wat een pixeldiff niet
       ziet", en de reden dat gedrag.py de menuregels nu ook op hoogte nameet. */
    padding: 1.25rem 5% 2rem;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(5, 4, 2, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* De dropbar rekt zichzelf tot onder aan het scherm; de bron doet dat ook
   (`bottom: 0`). De inhoud blijft bovenaan staan. */
#tm-dialog-mobile .uk-nav {
    display: grid;
    align-content: start;
    gap: 0.15rem;
}

#tm-dialog-mobile .uk-nav > li > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 4rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(5, 4, 2, 0.1);
    color: var(--mc-inkt);
    font-family: "Lora", Georgia, serif;
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    font-weight: 400;
    line-height: 1.1;
    text-transform: none;
}

#tm-dialog-mobile .uk-nav > li.uk-active > a { font-weight: 600; }

/* Het laatste item is de knop. Die is in het menuscherm over de volle breedte,
   groen gevuld en zonder onderrand - anders dan in de balk op desktop. */
#tm-dialog-mobile .uk-nav > li.mc-navknop > a {
    box-sizing: border-box;
    justify-content: center;
    min-height: 3.5rem;
    margin-top: 1.75rem;
    padding: 0.875rem 1.25rem;
    border: 1.5px solid var(--mc-eden-dark);
    border-radius: 0.875rem;
    background: var(--mc-eden);
    box-shadow: 0 0.25rem 0 0 var(--mc-eden-dark);
    color: #fff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    transition:
        transform var(--mc-motion-fast) var(--mc-ease-clean),
        box-shadow var(--mc-motion-fast) var(--mc-ease-clean);
}

#tm-dialog-mobile .uk-nav > li.mc-navknop > a:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* De items komen in de bron één voor één binnen: de links van links (45ms uit
   elkaar), de knop van onderen met 170ms vertraging. UIkit laat alleen het paneel
   zelf zakken. `.uk-open` staat op het paneel zodra het open is. */
#tm-dialog-mobile .uk-nav > li > a {
    opacity: 0;
    transform: translateX(-0.25rem);
    transition:
        opacity 320ms ease,
        transform 420ms var(--mc-ease-clean),
        color var(--mc-motion-fast) ease;
}

#tm-dialog-mobile .uk-nav > li.mc-navknop > a {
    transform: translateY(0.5rem);
    transition:
        opacity 320ms ease 170ms,
        transform 420ms var(--mc-ease-clean) 170ms,
        box-shadow var(--mc-motion-fast) var(--mc-ease-clean),
        background-color var(--mc-motion-fast) ease;
}

#tm-dialog-mobile.uk-open .uk-nav > li > a {
    opacity: 1;
    transform: translateX(0);
}

#tm-dialog-mobile.uk-open .uk-nav > li.mc-navknop > a { transform: translateY(0); }

#tm-dialog-mobile.uk-open .uk-nav > li:nth-child(2) > a { transition-delay: 45ms; }
#tm-dialog-mobile.uk-open .uk-nav > li:nth-child(3) > a { transition-delay: 90ms; }
#tm-dialog-mobile.uk-open .uk-nav > li:nth-child(4) > a { transition-delay: 135ms; }

/* Wie beweging heeft uitgezet krijgt het paneel gewoon in één keer te zien. */
@media (prefers-reduced-motion: reduce) {
    #tm-dialog-mobile .uk-nav > li > a {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   13. Projectkaarten en artikelen
   ========================================================================== */
/* Het labeltje op een projectkaart. `width: fit-content` is nodig omdat .el-meta
   een blok-div is: zonder die regel loopt de achtergrond over de volle kaartbreedte. */
/* De link op een contactkaart is in de bron een blok: het hele regelvak is
   aanklikbaar, niet alleen de letters. In de nabouw staat hij in een alinea en was
   hij inline - zelfde plek op het scherm, maar een vak van 21 in plaats van 27px.
   `inline-block` geeft de volle regelhoogte zonder dat het vak de hele kaartbreedte
   pakt; de bron staat in een gecentreerde kolom en krimpt daar net zo. */
.mc-contactraster .el-content a { display: inline-block; }

.mc-badge .uk-text-meta,
.mc-projectraster .el-meta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background: rgba(5, 4, 2, 0.08);
    color: var(--mc-inkt);
    font-weight: 600;
    line-height: 1.5;
}

/* Lopende tekst in een artikel: privacybeleid en de projectdetailpagina's.
   De maten komen uit .project-body in de bron. */
.mc-artikel { max-width: 46rem; margin-inline: auto; }

.mc-artikel h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* De eerste kop van een artikel houdt zijn 2,5rem lucht - behalve op een
   projectpagina, waar de terug-link er vlak boven staat en zelf al 2rem meebrengt. */
.mc-artikel-na-terug > :first-child { margin-top: 0; }

.mc-artikel p {
    /* UIkit zet 20px boven elke alinea; de bron laat de ondermarge van de kop het
       werk doen (16px). Alleen tussen twee alinea's onderling komt er ruimte bij. */
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.mc-artikel p + p { margin-top: 1.25rem; }

/* De terug-link boven een projecttekst. */
.mc-terug { max-width: 46rem; margin-inline: auto; }
.mc-terug p { margin-bottom: 2rem !important; font-weight: 600; color: var(--mc-eden); }
/* De terug-link is in de bron een blok over de volle tekstbreedte (`.project-back`),
   niet alleen de letters. Zonder deze regel is het vak 203x21 in plaats van 736x27:
   dezelfde plek op het scherm, maar een veel kleiner klikgebied. */
.mc-terug a { display: block; color: inherit; }
/* De opsomming in een artikel: 1,5rem lucht en dezelfde maat als de lopende tekst.
   De :not([class]) staat er om deze regel zwaarder te maken dan de algemene
   lijstopmaak hierboven. */
.mc-artikel ul:not([class]) {
    margin-block: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

@media (min-width: 992px) {
    .mc-artikel h2 { font-size: 2.5rem; }
    .mc-artikel p { font-size: 1.25rem; }
    .mc-artikel ul:not([class]) { font-size: 1.25rem; }
}

/* ==========================================================================
   14. Hover
   Eén op één overgenomen uit de bron, inclusief de mediaquery eromheen: op een
   aanraakscherm hoort niets van dit alles te gebeuren.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .mc-voetlinks a:hover::after,
    .uk-navbar-nav > li > a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .mc-voetregel a:hover { opacity: 0.68; }

    /* De zoom is de helft van wat de bron doet: scale(1.009) in plaats van
       scale(1.018). Keuze van Josh, 31-08-2026 - "ze zoomen nu gewoon twee keer te
       veel in". Het gaat om een foto die zonder aanleiding beweegt: geen van deze
       beelden is aanklikbaar, dus de hover is puur een teken van leven en hoort niet
       op te vallen. Terugdraaien = 1.009 weer 1.018 maken. */
    .mc-zoom:hover img {
        transform: scale(1.009);
        filter: saturate(1.015) contrast(1.01);
    }

    /* Beelden die tot de schermrand doorlopen zoomen HELEMAAL niet.
       Nagemeten op 1440px: dat zijn er twee soorten.
         .mc-cta-beeld                     de kennismakingsfoto, op alle tien pagina's
         .mc-splitrij-rand .mc-splitfoto   twee blokken op /dienstverlening/
       Bij zo'n beeld is de linker- of rechterhelft van het scherm in beweging zonder
       dat er iets te klikken valt. Dezelfde 0,9% die op een ingekaderde foto een
       subtiel teken van leven is, leest daar als een schokje. De bron doet dit wél
       (`.cta__image:hover img`); dit is dus een bewuste afwijking.
       Ook de filter gaat eraf: een kleurverschuiving op een beeld dat niet beweegt
       ziet eruit als een weergavefout. */
    .mc-cta-beeld:hover img,
    .mc-splitrij-rand .mc-splitfoto:hover img {
        transform: none;
        filter: none;
    }

    .mc-kaart:hover,
    .mc-dienstenraster .el-item:hover,
    .mc-voordelenraster .el-item:hover,
    .mc-projectraster .el-item:hover,
    .mc-contactraster .el-item:hover,
    .mc-tijdlijn .el-item:hover {
        transform: translateY(-0.125rem);
    }

    .mc-dienstenraster .el-item:hover .el-image,
    .mc-voordelenraster .el-item:hover .el-image,
    .mc-tijdlijn .el-item:hover .el-image,
    .mc-kaart:hover .mc-icoon img {
        transform: translateY(-0.1125rem);
    }

    .mc-dienstrij:hover { padding-left: 0.75rem; }

    .mc-sociaal a:hover svg,
    .mc-sociaal a:hover img {
        opacity: 0.7;
        transform: translateY(-0.125rem);
    }
}

/* ==========================================================================
   15. Binnenpagina's
   ========================================================================== */

/* -- De kop van een binnenpagina --------------------------------------- */
.mc-paginakop-sectie { padding-bottom: 2.5rem !important; }

.mc-paginakop {
    box-sizing: border-box;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
}

/* Twee soorten paginakoppen, met twee marges eronder:
     .page-hero h1        1,5rem  -> mc-paginatitel, mc-artikel-kop
     .section-heading h1  1,25rem -> mc-pagina-kop, mc-contact-kop  */
.mc-paginatitel,
.mc-artikel-kop { margin-bottom: 1.5rem !important; }

.mc-pagina-kop,
.mc-contact-kop { margin-bottom: 1.25rem !important; }

/* -- Genummerde dienstrijen -------------------------------------------- */
.mc-dienstrijen-sectie { padding-top: 2rem !important; }
.mc-dienstrijen-sectie .uk-container { max-width: 72rem; }

.mc-dienstrij {
    --mc-kolomruimte: 2.5rem;
    padding-block: 2.5rem;
    border-top: 1px solid var(--mc-rand);
    transition: padding-left var(--mc-motion-smooth) var(--mc-ease-clean);
}

.mc-dienstrij-laatste { border-bottom: 1px solid var(--mc-rand); }

/* De drie kolommen zijn 6rem, 4rem en de rest. UIkit-rijen zijn flexboxen, dus dat
   gaat met een breedte op het kind; de padding-left van de rasterruimte telt daarin
   mee, vandaar de optelling. */
.mc-dienstrij > :nth-child(1) { width: calc(6rem + var(--mc-kolomruimte)); }
.mc-dienstrij > :nth-child(2) { width: calc(4rem + var(--mc-kolomruimte)); }
.mc-dienstrij > :nth-child(3) { flex: 1 1 0; min-width: 0; }

.mc-nummer p {
    font-family: "Lora", Georgia, serif;
    font-size: 3rem;
    line-height: 1;
    color: rgba(13, 89, 81, 0.65);
}

.mc-dienstrij-icoon img { width: 2.75rem; height: 2.75rem; object-fit: contain; }
/* De h6-stijl van UIkit heeft regelhoogte 1,4; de bron zet deze kop op 1,3.
   Twee pixels per rij, maar drie rijen en dan schuift de hele pagina. */
.mc-dienstrij-kop { margin-bottom: 0.5rem !important; line-height: 1.3; }
.mc-dienstrij-tekst { max-width: 42rem; color: #504f4d; }

/* Onder 600px valt het nummer op een eigen regel, net als in de bron. */
@media (max-width: 600px) {
    .mc-dienstrij {
        --mc-kolomruimte: 1.25rem;
        --mc-rijruimte: 1rem;
        padding-block: 2rem;
        flex-wrap: wrap;
    }
    .mc-dienstrij > :nth-child(1) { width: 100%; }
    .mc-dienstrij > :nth-child(2) { width: calc(3.5rem + var(--mc-kolomruimte)); }
    .mc-nummer p { font-size: 2.25rem; }
}

/* -- Tekst naast een foto ---------------------------------------------- */
.mc-splitrij { --mc-kolomruimte: 5rem; --mc-rijruimte: 5rem; }

/* De maximumbreedte geldt voor de INHOUD van de kolom. UIkit zet de tussenruimte als
   padding-left op elk kind, en met border-box gaat die van de maximumbreedte af: de
   tekstkolom werd 560 in plaats van 640 breed. Vandaar de optelling. */
.mc-splittekst {
    box-sizing: border-box;
    max-width: calc(40rem + var(--mc-kolomruimte, 0px));
}
.mc-alineas p + p { margin-top: 1.5rem; }

.mc-afgerond,
.mc-afgerond img { border-radius: 1rem; }
.mc-afgerond { overflow: hidden; }

/* De variant die tot de schermrand doorloopt: foto over de volle hoogte, tekst
   ernaast met een maximumbreedte. */
.mc-splitrij-rand {
    --mc-kolomruimte: 0px;
    --mc-rijruimte: 0px;
    max-width: 150rem;
    margin-inline: auto;
    align-items: stretch;
}

/* De maten van de tekstkolom gelden op ÉLKE breedte, ook onder 992px. Dat stond eerst
   binnen de mediaquery en dan viel op tablet de padding weg en werd de kolom 640 in
   plaats van 600 breed. */
.mc-splitrij-rand .mc-splittekst {
    box-sizing: border-box;
    max-width: 37.5rem;
    padding-left: clamp(1.5rem, 4vw, 4rem);
    padding-right: 1rem;
    padding-block: 4rem;
}

@media (min-width: 992px) {
    /* De foto vult de hele hoogte van het blok, ook als de tekst ernaast langer is.
       `uk-flex-middle` van de rij centreert de kolommen en houdt de foto dan op zijn
       minimumhoogte van 30rem; gemeten: 480px waar 1042px hoorde. Vandaar het
       expliciete stretch. */
    .mc-splitrij-rand { align-items: stretch; }

    .mc-splitrij-rand .mc-splitfoto-kolom {
        display: flex;
        min-height: 30rem;
    }

    .mc-splitrij-rand .mc-splitfoto {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
    }

    .mc-splitrij-rand .mc-splitfoto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mc-splitrij-rand .mc-splittekst {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 991px) {
    /* Onder de 992px staat in de bron de tekst boven en de foto eronder, ook als de
       foto in de opmaak links staat. Zonder deze omkering begint elk blok met een
       foto en moet de bezoeker eerst langs een beeld scrollen voor hij weet waar het
       over gaat. */
    .mc-splitrij-rand { padding-top: 4rem; }
    .mc-splitrij-rand .mc-splitfoto-kolom { order: 2; }
    .mc-splitrij-rand .mc-splittekst { order: 1; width: 90%; margin-inline: auto; }
}

/* -- Veelgestelde vragen ------------------------------------------------ */
.mc-faq-sectie .uk-container { max-width: 48rem; }

.mc-faq { border-top: 1px solid var(--mc-rand); }

/* De items van een YOOtheme-accordeon zijn `div.el-item`, geen `li`. UIkit zet
   daar 20px tussen; de bron laat ze tegen elkaar aan staan met alleen een
   scheidingslijn. */
.mc-faq > .el-item {
    border-bottom: 1px solid var(--mc-rand);
    margin-top: 0 !important;
}

.mc-faq .uk-accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.25rem;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mc-inkt);
}

.mc-faq .uk-accordion-title [uk-accordion-icon] {
    flex: 0 0 auto;
    /* Precies 16px breed, net als het plusje van de bron. Het icoon van UIkit is 13px
       en dat leek te verwaarlozen - maar de vraagkop is een flexbox met 24px ertussen,
       dus die drie pixels komen bij de TEKST terecht. Bij 320px breed was dat net
       genoeg om "Wordt er alleen advies gegeven of ook daadwerkelijk uitgevoerd?" op
       twee regels te laten passen waar de bron er drie gebruikt: 24px verschil in de
       paginahoogte, op elke pagina met dit blok. Gemeten 30-08-2026. */
    width: 16px;
    height: 16px;
}

.mc-faq .uk-accordion-content { margin-top: 0; padding-bottom: 1.5rem; }
.mc-faq .uk-accordion-content > :first-child { margin-top: 0; }

.mc-faq-slot {
    max-width: 35rem;
    margin-inline: auto;
    margin-top: 5rem;
    text-align: center;
}

.mc-faq-slotkop { margin-bottom: 1rem !important; font-size: 1.5rem; }

@media (min-width: 992px) {
    .mc-faq .uk-accordion-title { font-size: 1.25rem; }
    .mc-faq-slotkop { font-size: 2.5rem; }
}

/* -- Projectkaarten ----------------------------------------------------- */
.mc-projectkolom { max-width: 52rem; margin-inline: auto; }

.mc-projectraster {
    --mc-kolomruimte: 3rem;
    --mc-rijruimte: 3.5rem;
}

.mc-projectraster .el-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.mc-projectraster .el-meta { margin-top: 1.5rem !important; }
.mc-projectraster .el-title { margin-top: 1rem !important; }
.mc-projectraster .el-content { margin-top: 0.75rem !important; }
.mc-projectraster .el-content + .uk-margin-top { margin-top: 1.5rem !important; }
.mc-projectraster .el-item { transition: transform 300ms var(--mc-ease-clean); }

/* -- Contactkaarten ----------------------------------------------------- */
.mc-contactkolom { max-width: 46rem; margin-inline: auto; }

/* -------------------------------------------- contactpagina, variant 3
   Gekozen door Josh op 02-09-2026. Links de kop met inleiding en daaronder de foto,
   rechts het formulier. De eis: links even hoog uitkomen als het formulier.

   TWEE DINGEN DIE HIER MISGINGEN, allebei nagemeten op 03-09:

   1. De klasse mc-kenniskolom komt op de KOLOM zelf terecht, en die heeft al
      `uk-width-1-2@m`. Een eigen `width: 100%` erbij wint dan van YOOtheme (zelfde
      specificiteit, maar dit stylesheet laadt later) en zet de kolommen onder elkaar.
      Dus: hier geen breedte zetten. Nooit.

   2. Het beeld mocht de hoogte van de kolom niet bepalen, anders is de redenering
      rond: de kolom wordt zo hoog als de foto, en dan valt er niets meer te vullen.
      Het beeld staat daarom absoluut; het telt niet mee in de hoogteberekening. De
      kolom is dan zo hoog als de langste kolom van de rij - het formulier - en de
      figure vult met `flex: 1 1 0` precies wat er overblijft. Het verschil is daarmee
      nul in plaats van "bijna nul".

   `object-position: 54% 42%` is uitgerekend: de foto is 2560x2048 liggend en Maxime
   zit rechts van het midden. Met dat brandpunt blijven gezicht, laptop en planten in
   beeld. */
.mc-kennisrij { align-items: stretch; }

.mc-kenniskolom { display: flex; flex-direction: column; gap: 1.25rem; }
.mc-kenniskolom > * { margin: 0 !important; }

.mc-kennisfoto {
    flex: 1 1 0;
    /* Een ondergrens voor het geval het formulier ooit korter wordt dan de kop.
       De 4:5-grens die ik hier eerst op zette bleek te streng: nagemeten en bekeken op
       03-09 staat Maxime ook bij 0,59 (992px, de smalste stand) nog goed in beeld -
       gezicht gecentreerd, laptop en plant erbij. Dat komt door het brandpunt, niet
       door de verhouding. Beoordeel zoiets dus aan het BEELD, niet aan een getal. */
    min-height: 18rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.875rem;
}

.mc-kennisfoto picture,
.mc-kennisfoto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 54% 42%;
    border-radius: 0;
}

/* Het formulier staat in een wit blok op het aqua vlak. De opmaak zit op het KIND van
   de kolom en niet op de kolom zelf: die draagt de goot van het raster, en daar moet je
   nooit doorheen schrijven (zie ook valkuil 53). */
.mc-kennisformulier > * {
    background: #ffffff;
    border: 1px solid rgba(5, 4, 2, 0.08);
    border-radius: 0.875rem;
    padding: 1.75rem;
}

@media (min-width: 768px) { .mc-kennisformulier > * { padding: 2rem; } }

/* Onder 960px stapelt YOOtheme de kolommen. Dan valt er niets te rekken en krijgt de
   foto zijn eigen verhouding terug, anders wordt hij een strook. */
@media (max-width: 959px) {
    .mc-kenniskolom { display: block; }
    .mc-kenniskolom > * + * { margin-top: 1.25rem !important; }
    .mc-kennisfoto { min-height: 0; aspect-ratio: 4 / 5; }
}
}


.mc-contactraster {
    --mc-kolomruimte: 1.25rem;
    --mc-rijruimte: 1.25rem;
}

.mc-contactraster .el-image { width: 2rem; height: 2rem; margin-inline: auto; }
/* De contactkop heeft de h5-MAAT maar is een h3, dus regelhoogte 1,3 en niet
   de 1,2 van de projectkaarten (die zijn een h2 met dezelfde maat). */
.mc-contactraster .el-title { margin-top: 0.85rem !important; line-height: 1.3; }
.mc-contactraster .el-content { margin-top: 0.5rem !important; }
.mc-contactraster .el-item { transition: transform 300ms var(--mc-ease-clean); }

.mc-contactraster a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* ==========================================================================
   16. Kleine correcties
   ========================================================================== */

/* Lange samenstellingen ("Meerjareninvesteringsplanning") mogen afbreken. */
h1, h2, h3, .uk-h1, .uk-h2, .uk-h3 { overflow-wrap: break-word; }

/* YOOtheme wikkelt beelden in een <picture>, en dat is standaard een inline-element.
   Daardoor komt er onder elke foto een paar pixels regelruimte bij - gemeten 5px per
   projectkaart, wat verderop de pagina uit de pas laat lopen. De bron zet beelden op
   `display: block`; hier hoort de wrapper dat ook te doen. */
picture { display: block; }
img, svg { display: block; }

/* ==========================================================================
   17. Contactformulier (Contact Form 7)
   ==========================================================================

   Contact Form 7 brengt zelf géén opmaak mee voor de velden: wat je in de bouwer
   invult komt letterlijk in de pagina. Dat is hier precies de bedoeling - de opmaak
   hieronder gebruikt dezelfde tokens, radii en overgangen als de rest van de site, en
   er hoeft niets van een plugin overschreven te worden. De verzendknop draagt gewoon
   uk-button uk-button-primary en ziet er daarmee vanzelf uit als elke andere knop.

   Staat er (nog) geen formulier op de site, dan doet dit blok niets.
   ========================================================================== */

.mc-formulier { display: flex; flex-direction: column; gap: 1.5rem; }

.mc-veldrij { display: grid; gap: 1.5rem; }

@media (min-width: 768px) {
    .mc-veldrij { grid-template-columns: 1fr 1fr; }
}

.mc-veld { display: flex; flex-direction: column; gap: 0.5rem; }

.mc-label {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--mc-inkt);
}

.mc-optioneel { font-weight: 400; opacity: 0.55; }

/* Eén regel voor input, select én textarea: ze horen er hetzelfde uit te zien.
   `font: inherit` is er omdat een formulierveld anders de letter van het
   besturingssysteem pakt in plaats van die van de site. */
.mc-invoer {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 0.75rem 1rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mc-inkt);
    background-color: #fff;
    border: 1px solid var(--mc-rand);
    border-radius: 0.5rem;
    transition: border-color var(--mc-motion-fast) var(--mc-ease-clean),
                box-shadow var(--mc-motion-fast) var(--mc-ease-clean);
}

textarea.mc-invoer { min-height: 9rem; resize: vertical; }

/* Een select heeft een eigen pijltje nodig zodra appearance uit staat. Als
   achtergrondbeeld, niet als extra element, zodat de opmaak binnen deze ene regel
   blijft. */
select.mc-invoer {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%23050402' stroke-width='1.5' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.mc-invoer:hover { border-color: rgba(5, 4, 2, 0.28); }

.mc-invoer:focus {
    outline: none;
    border-color: var(--mc-eden);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-eden), transparent 82%);
}

/* De zichtbare focusring van de site blijft leidend voor wie met Tab werkt. */
.mc-invoer:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mc-eden), transparent 25%);
    outline-offset: 4px;
}

.mc-verzenden { margin-top: 0.5rem; }

/* Contact Form 7 zet zijn meldingen in eigen elementen. Ze krijgen hier de vorm van
   de site in plaats van de rode standaardkaders van de plugin. */
.wpcf7 form .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    border: 1px solid var(--mc-rand);
    border-radius: 0.5rem;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: color-mix(in srgb, var(--mc-eden), transparent 55%);
    background-color: color-mix(in srgb, var(--mc-eden), transparent 94%);
    color: var(--mc-eden-dark);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border-color: rgba(160, 32, 20, 0.35);
    background-color: rgba(160, 32, 20, 0.05);
    color: #7a1a10;
}

.wpcf7-not-valid-tip {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: #7a1a10;
}

.mc-invoer.wpcf7-not-valid { border-color: rgba(160, 32, 20, 0.55); }

/* De draaiende stip tijdens het versturen. */
.wpcf7 .wpcf7-spinner { margin: 0 0 0 0.75rem; }

/* ==========================================================================
   18. Uitgelichte afbeelding op een projectpagina  (staat nu UIT)
   ==========================================================================

   Hoort bij de schakelaar MET_UITGELICHTE_FOTO in bouw-projectsjabloon.py. Zolang die
   op False staat komt dit blok nergens voor; het staat hier zodat het aanzetten van
   die ene regel meteen een afgemaakt resultaat geeft in plaats van een foto op volle
   breedte zonder marge.

   De bron toont op een projectpagina geen foto. Alle vier de projecten HEBBEN er een -
   die staat al op de kaart op /projecten/ en op de deelkaart van LinkedIn en WhatsApp -
   dus wie doorklikt ziet nu eerst een beeld en dan een pagina zonder. Beslissing ligt
   bij Josh en Maxime; zie output/hervat-hier.md A1.
   ========================================================================== */

.mc-projectfoto-sectie { padding-top: 0; }

.mc-projectfoto img {
    width: 100%;
    height: auto;
    /* De uitsnede staat in het sjabloon (1400x620, een brede band). Hier alleen wat
       de rest van de site ook doet met een beeld dat over de contentbreedte loopt. */
    object-fit: cover;
}

/* Onder het breekpunt loopt de foto tot dichter bij de rand, net als de hero. */
@media (max-width: 767px) {
    .mc-projectfoto img { border-radius: 0.75rem; }
}