.elementor-kit-7557{--e-global-color-primary:#0F3651;--e-global-color-secondary:#2BB5B4;--e-global-color-text:#256D85;--e-global-color-accent:#DFF6FF;--e-global-color-3327762:#FFFFFF;--e-global-color-57335bc:#FFFFFF;--e-global-color-41fcef6:#525252;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"Source Sans 3", Sans-serif;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:1500ms;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-color:#256D85;--e-preloader-size:20px;}.elementor-kit-7557 e-page-transition{background-color:#DFF6FF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   Fysio Rakthof, aangepaste CSS voor Elementor
   Plakken in: Site-instellingen, Aangepaste CSS.
   Dit bestand is de bron. Wijzig hier, plak daarna het geheel.

   Waarom dit bestaat: alles wat hier staat hoef je niet per widget in
   Elementor in te stellen. Je zet in Geavanceerd, CSS-klassen de naam
   erbij en de sectie ziet er goed uit. Dat scheelt bij drieentwintig
   pagina's honderden handelingen, en het blijft consistent omdat er een
   bron is in plaats van tweehonderd losse instellingen.

   Hoofdstuk 1 en 2 zijn generiek en gelden altijd. Vanaf hoofdstuk 4 zijn
   het componenten die je aanzet met een klasse.

   Gemeten op de blauwdruk bij 768px en 1440px, 29 augustus 2026.
   Zie _stijlkaart.md voor de herkomst van elke waarde.
   ========================================================= */


/* ---------- 1. Typeschaal ----------
   Gegenereerd met typeschaal.js uit typeschaal.json. Niet met de hand
   aanpassen: wijzig typeschaal.json en genereer opnieuw met
   node ../webproject-machine/scripts/typeschaal.js --project . --controle 1440,1024,768

   Let op de valkuil uit het draaiboek: een lettergrootte die in een widget
   is ingesteld wint van deze regels, want Elementor schrijft die weg met
   drie klassen. Maak in zo'n widget het veld lettergrootte leeg, dan valt
   de kop terug op de schaal. Controleren met typecontrole.js. */

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.8125rem, 1.0268rem + 3.7202vw, 4.375rem); line-height: 1.12; }
.subhero h1, .subhero .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.375rem, 1.0893rem + 2.6786vw, 3.5rem); line-height: 1.12; }
.baan h2, .baan .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(2.375rem, 1.0893rem + 2.6786vw, 3.5rem); line-height: 1.12; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.9375rem, 1.1518rem + 1.6369vw, 2.625rem); line-height: 1.15; }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.1875rem, 1.1161rem + 0.1488vw, 1.25rem); line-height: 1.3; }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: clamp(1.0625rem, 0.9911rem + 0.1488vw, 1.125rem); line-height: 1.35; }


/* ---------- 2. Twee lettertypes voor de hele site ----------
   Op de testpagina liepen er zes door elkaar: DM Sans, Roboto, Source Sans 3,
   Overpass, Poppins, Bai Jamjuree en Montserrat. Die komen uit losse widgets
   van de gekochte kit en verslaan elke globale instelling. Daarom hier hard,
   met !important. Overpass draagt de koppen, DM Sans de rest. */

body, p, a, span, li, td, th, label, input, textarea, select, button,
blockquote, summary, .elementor-button, .elementor-widget-text-editor {
    font-family: "DM Sans", system-ui, sans-serif !important;
}
h1, h2, h4, h5, h6,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
    font-family: "Overpass", system-ui, sans-serif !important;
}
/* h3 is bij ons een kaartkop en hoort bij de lopende tekst, niet bij de
   koppenfamilie. Dat is bewust, want een kaartkop van 20px in Overpass 800
   schreeuwt naast de tekst eronder. */
h3, .elementor-widget-heading h3.elementor-heading-title {
    font-family: "DM Sans", system-ui, sans-serif !important;
    font-weight: 700;
}

/* Handen af van de admin-balk: die draait op Dashicons. Zonder deze
   tegenregel worden alle icoontjes daar vraagtekens. En bewust geen
   sterretje in de .elementor-kit-7557 hierboven, want dat raakt ook de i-elementen
   waar icoonlettertypes op draaien. */
#wpadminbar, #wpadminbar * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
#wpadminbar [class*="ab-icon"]:before,
#wpadminbar [class*="ab-item"]:before,
#wpadminbar [class*="dashicons"]:before {
    font-family: dashicons !important;
}


/* ---------- 3. Kleuren en basismaten ----------
   Zet deze zes ook in Elementor onder Site-instellingen, Kleuren, zodat ze
   in de kleurkiezer staan. De variabelen hier zijn voor de componenten
   hieronder. */

:root {
    --fr-primair: #0F3651;
    --fr-primair-diep: #0A283C;
    --fr-accent: #2BB5B4;
    --fr-accent-diep: #1E9291;
    --fr-zacht: #DFF6FF;
    --fr-zacht-warm: #F2FAFC;
    --fr-tweede: #256D85;
    --fr-tekst: #37474F;
    --fr-tekst-zacht: #5A6B75;
    --fr-lijn: #DCE8EE;
    --fr-schaduw-zacht: 0 2px 4px rgba(15,54,81,.04), 0 12px 28px rgba(15,54,81,.07);
    --fr-schaduw-diep: 0 24px 60px rgba(10,40,60,.18), 0 4px 12px rgba(10,40,60,.08);
}

/* De lopende tekst stond op de testpagina op 14px. Voor een doelgroep van
   ouderen en chronische patienten is dat te klein. */
body { font-size: 17px; line-height: 1.72; color: var(--fr-tekst); }


/* ---------- 5. Micro-label boven een sectiekop ----------
   Klasse: eyebrow, op een Heading- of Text-widget.
   Dit kleine label met het accentstreepje ervoor is het kenmerk uit de
   Vermdesign-documenten en het geeft ritme zonder ruis. */

.eyebrow, .eyebrow .elementor-heading-title {
    display: flex !important; align-items: center; gap: 12px;
    font-size: .76rem !important; font-weight: 700 !important;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--fr-accent-diep) !important; margin-bottom: 14px;
    font-family: "DM Sans", sans-serif !important;
}
.eyebrow .elementor-heading-title::before, .eyebrow > *::before {
    content: ""; width: 28px; height: 2px; border-radius: 2px;
    background: var(--fr-accent); flex: none;
}
.baan .eyebrow, .baan .eyebrow .elementor-heading-title,
.hero .eyebrow, .hero .eyebrow .elementor-heading-title { color: var(--fr-accent) !important; }


/* ---------- 6. Donkere baan ----------
   Klasse: baan, op een sectie of container. Zet de achtergrond, keert de
   tekstkleuren om en legt er een zachte teal gloed overheen. Scheelt per
   donkere sectie een handvol instellingen. */

.baan { background: var(--fr-primair) !important; color: rgba(255,255,255,.86) !important; position: relative; overflow: hidden; }
.baan::before {
    content: ""; position: absolute; top: -20%; right: -8%;
    width: 640px; height: 640px; pointer-events: none;
    background: radial-gradient(circle, rgba(43,181,180,.20), transparent 66%);
}
.baan > * { position: relative; z-index: 1; }
.baan h1, .baan h2, .baan h3, .baan h4, .baan .elementor-heading-title { color: #fff !important; }
.baan p, .baan .elementor-widget-text-editor { color: rgba(255,255,255,.86) !important; }
.baan a { color: var(--fr-zacht); }

/* Zachte baan. Klasse: zacht. */
.zacht { background: var(--fr-zacht-warm) !important; }


/* ---------- 7. Fotohero met sluier ----------
   Klasse: hero op de sectie, met de foto als achtergrondafbeelding.
   De sluier is een donker verloop van links voor de leesbaarheid van de
   tekst, plus een teal gloed rechtsonder die het merk vasthoudt. Zonder
   deze sluier valt witte tekst op een lichte foto weg. */

.hero { position: relative; overflow: hidden; color: #fff; }
.hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(96deg, rgba(10,40,60,.94) 0%, rgba(10,40,60,.86) 38%,
                        rgba(10,40,60,.42) 72%, rgba(10,40,60,.28) 100%),
        radial-gradient(680px 480px at 88% 88%, rgba(43,181,180,.30), transparent 68%);
}
.hero > .e-con-inner, .hero > .elementor-container { position: relative; z-index: 2; }
.hero h1, .hero .elementor-heading-title { color: #fff !important; }
.hero p { color: rgba(255,255,255,.9) !important; }


/* ---------- 8. Feitenbalk die de hero overlapt ----------
   Klasse: feitenbalk, op de container direct onder de hero. Dit is de laag
   die de pagina diepte geeft. Zet de bovenmarge in Elementor niet zelf: die
   staat hier op -68px en dat is precies de overlap uit de blauwdruk. */

.feitenbalk {
    background: #fff !important; border-radius: 24px !important;
    box-shadow: var(--fr-schaduw-diep) !important;
    margin-top: -68px !important; position: relative; z-index: 3;
    padding: 0 !important; overflow: hidden;
}
.feitenbalk > .e-con-inner { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; }
.feitenbalk .e-con-inner > * { padding: 30px 32px !important; }
.feitenbalk .e-con-inner > * + * { border-left: 1px solid var(--fr-lijn); }
.feitenbalk h3, .feitenbalk .elementor-heading-title {
    font-family: "Overpass", sans-serif !important; font-weight: 800 !important;
    font-size: 1.53rem !important; color: var(--fr-primair) !important; margin-bottom: 4px;
}
.feitenbalk p { color: var(--fr-tekst-zacht) !important; font-size: .9rem !important; line-height: 1.55; }


/* ---------- 9. Kaart ----------
   Klasse: kaart, op een container. De accentlijn schuift bij aanwijzen van
   links binnen. Bij een klikbare kaart ook de klasse klikbaar erbij. */

.kaart {
    background: #fff !important; border: 1px solid var(--fr-lijn) !important;
    border-radius: 14px !important; padding: 30px 28px !important;
    position: relative; overflow: hidden;
    box-shadow: var(--fr-schaduw-zacht);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kaart::before {
    content: ""; position: absolute; top: 0; left: 0; right: 100%; height: 3px;
    background: linear-gradient(90deg, var(--fr-accent), var(--fr-tweede));
    transition: right .28s ease;
}
.kaart.klikbaar:hover { transform: translateY(-4px); box-shadow: var(--fr-schaduw-diep); border-color: transparent !important; }
.kaart.klikbaar:hover::before { right: 0; }
.kaart p { color: var(--fr-tekst-zacht) !important; font-size: .9rem !important; line-height: 1.62; }
.zacht .kaart { border-color: rgba(15,54,81,.10) !important; }
.baan .kaart { background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: none; }
.baan .kaart p { color: rgba(255,255,255,.78) !important; }


/* ---------- 10. Teamblok ----------
   Klasse: persoon. Kop, functieregel, persoonlijke alinea. De functieregel
   krijgt de klasse functie. */

.persoon {
    background: #fff !important; border-radius: 14px !important;
    padding: 30px 28px !important; box-shadow: var(--fr-schaduw-zacht);
    border-top: 3px solid var(--fr-accent) !important;
}
.persoon h3, .persoon .elementor-heading-title {
    font-family: "Overpass", sans-serif !important; font-size: 1.3rem !important;
    font-weight: 800 !important; color: var(--fr-primair) !important;
}
.persoon .functie, .persoon .functie p {
    color: var(--fr-accent-diep) !important; font-weight: 600;
    font-size: .9rem !important; line-height: 1.5;
}
.persoon p { color: var(--fr-tekst-zacht) !important; font-size: .9rem !important; line-height: 1.65; }


/* ---------- 11. Beeld naast tekst ----------
   Klasse: split op de container met twee kolommen, beeldkant op de
   beeldkolom. Het turquoise vlak achter het beeld is dezelfde laagjestruc
   als de feitenbalk, maar dan als accent. */

.split { align-items: center; }
.beeldkant img {
    border-radius: 28px !important; box-shadow: var(--fr-schaduw-diep);
    width: 100%; object-fit: cover; aspect-ratio: 3 / 2;
}
.beeldkant { position: relative; }
.beeldkant::after {
    content: ""; position: absolute; inset: auto -18px -18px auto;
    width: 46%; height: 46%; border-radius: 28px;
    background: var(--fr-accent); opacity: .16; z-index: -1;
}
.beeldkant.staand img { aspect-ratio: 4 / 5; }


/* ---------- 12. Beeldbaan met uitspraak ----------
   Klasse: beeldbaan, op een sectie met een achtergrondfoto. Alleen voor
   korte sterke zinnen; een alinea werkt hier niet. */

.beeldbaan { position: relative; overflow: hidden; color: #fff; }
.beeldbaan::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(10,40,60,.92) 0%, rgba(10,40,60,.74) 55%, rgba(10,40,60,.5) 100%);
}
.beeldbaan > .e-con-inner, .beeldbaan > .elementor-container { position: relative; z-index: 2; }
.beeldbaan h2, .beeldbaan .elementor-heading-title {
    color: #fff !important; font-family: "Overpass", sans-serif !important;
    font-weight: 700 !important; line-height: 1.2; max-width: 840px;
}
.beeldbaan p { color: rgba(255,255,255,.82) !important; max-width: 640px; }


/* ---------- 13. Genummerde stappen ----------
   Klasse: stappen op de container, stap op elk item. De nummers komen uit
   CSS, dus je hoeft ze niet in te typen en ze kloppen altijd. */

.stappen { counter-reset: stap; }
.stappen .stap {
    counter-increment: stap; position: relative;
    padding: 22px 0 22px 68px !important; border-bottom: 1px solid var(--fr-lijn);
}
.stappen .stap:last-child { border-bottom: 0; }
.stappen .stap::before {
    content: counter(stap, decimal-leading-zero);
    position: absolute; left: 0; top: 22px;
    font-family: "Overpass", sans-serif; font-weight: 800; font-size: 1.06rem;
    color: var(--fr-accent-diep); background: var(--fr-zacht);
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
}


/* ---------- 14. Lijsten en prijzen ----------
   Klasse: lijst voor een opsomming met bolletjes, prijzen voor de
   tarieventabel met het bedrag rechts uitgelijnd. */

.lijst ul, ul.lijst { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.lijst li { position: relative; padding: 12px 0 12px 32px !important; border-bottom: 1px solid var(--fr-lijn); }
.lijst li:last-child { border-bottom: 0; }
.lijst li::before {
    content: ""; position: absolute; left: 6px; top: 50%;
    width: 9px; height: 9px; margin-top: -4px; border-radius: 50%;
    background: var(--fr-accent);
}
.baan .lijst li { border-bottom-color: rgba(255,255,255,.16); }

.prijzen ul, ul.prijzen { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.prijzen li {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 24px; padding: 17px 0 !important; border-bottom: 1px solid var(--fr-lijn);
}
.prijzen li:last-child { border-bottom: 0; }
.prijzen li strong, .prijzen .bedrag {
    font-family: "Overpass", sans-serif; font-weight: 800;
    font-size: 1.24rem; color: var(--fr-primair); white-space: nowrap;
}
.baan .prijzen li { border-bottom-color: rgba(255,255,255,.16); }
.baan .prijzen li strong, .baan .prijzen .bedrag { color: var(--fr-accent); }


/* ---------- 15. Citaat ----------
   Klasse: citaat. Het aanhalingsteken komt uit CSS. */

.citaat {
    background: #fff !important; border-radius: 14px !important;
    padding: 34px 32px !important; box-shadow: var(--fr-schaduw-zacht);
    position: relative;
}
.citaat::before {
    content: "\201C"; position: absolute; top: 6px; right: 26px;
    font-family: "Overpass", serif; font-size: 5rem; line-height: 1;
    color: var(--fr-accent); opacity: .22;
}
.citaat p { font-size: 1.12rem !important; line-height: 1.6; color: var(--fr-primair) !important; }
.citaat .naam { font-weight: 700; color: var(--fr-accent-diep) !important; font-size: .9rem !important; }


/* ---------- 16. Keurmerkenbalk ----------
   Klasse: keurmerken. Rustig, en pas vol in kleur als iemand er met de
   muis overheen gaat. Bewijs hoort te ondersteunen, niet te schreeuwen. */

.keurmerken img {
    height: 56px !important; width: auto !important;
    opacity: .85; filter: saturate(.7);
    transition: opacity .2s ease, filter .2s ease;
}
.keurmerken img:hover { opacity: 1; filter: none; }
.keurmerken .label {
    font-size: .76rem !important; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fr-tekst-zacht) !important; font-weight: 700;
}


/* ---------- 17. Slotoproep ----------
   Klasse: cta, op de container. */

.cta {
    position: relative; overflow: hidden; border-radius: 24px !important;
    background: linear-gradient(135deg, var(--fr-primair-diep) 0%, var(--fr-primair) 58%, var(--fr-tweede) 130%) !important;
    padding: 62px 58px !important; color: #fff !important;
    box-shadow: var(--fr-schaduw-diep);
}
.cta::after {
    content: ""; position: absolute; inset: auto -80px -120px auto;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(43,181,180,.3), transparent 66%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2, .cta .elementor-heading-title { color: #fff !important; }
.cta p { color: rgba(255,255,255,.86) !important; }


/* ---------- 18. Breekpunten ----------
   De maten die op mobiel omvallen. De typeschaal in hoofdstuk 1 regelt de
   koppen al; hier staan alleen de dingen die een clamp niet oplost. */

@media (max-width: 980px) {
    .feitenbalk { margin-top: -44px !important; }
    .cta { padding: 40px 32px !important; }
    .beeldkant::after { display: none; }
}
@media (max-width: 660px) {
    .feitenbalk > .e-con-inner { grid-template-columns: 1fr !important; }
    .feitenbalk .e-con-inner > * + * { border-left: 0; border-top: 1px solid var(--fr-lijn); }
    .stappen .stap { padding-left: 56px !important; }
    .stappen .stap::before { width: 38px; height: 38px; font-size: .94rem; }
    .keurmerken img { height: 34px !important; }
    .cta { padding: 34px 26px !important; }
}


/* ---------- 19. Meelopende kop ----------
   Klasse: site-kop, op de headercontainer met logo, menu en knop.

   Elementor doet het vastplakken zelf. Zet op die container:
   Geavanceerd, Motion Effects, Sticky = Top, Sticky On = Desktop Tablet Mobile,
   Offset = 0, Effects Offset = 60.

   Dat laatste getal is de sleutel: zodra de bezoeker 60px gescrold heeft, zet
   Elementor de klasse elementor-sticky--effects op de container. Daar hangen we
   de nettere toestand aan. Geen javascript nodig, en het werkt ook als een
   script niet laadt.

   Bovenaan de pagina blijft de kop dus precies zoals je hem hebt gebouwd. Pas
   bij het scrollen wordt hij compacter, krijgt hij een lichte doorschijnende
   achtergrond en een zachte schaduw die hem van de inhoud losmaakt. */

.site-kop {
    transition: padding .28s ease, background-color .28s ease,
                box-shadow .28s ease, backdrop-filter .28s ease;
}
.site-kop .elementor-widget-image img,
.site-kop .elementor-button {
    transition: height .28s ease, padding .28s ease, font-size .28s ease;
}

/* De gescrolde toestand. */
.site-kop.elementor-sticky--effects {
    background-color: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    box-shadow: 0 1px 0 rgba(15, 54, 81, .08), 0 10px 30px rgba(10, 40, 60, .10);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Het logo krimpt mee. Zet in de widget zelf een hoogte van 64px, dan is dit
   de gekrompen maat. Breedte op auto, anders vervormt het logo. */
.site-kop.elementor-sticky--effects .elementor-widget-image img {
    height: 44px !important;
    width: auto !important;
}

/* De knop wordt iets platter, zodat de hele balk lager wordt en niet alleen
   het logo. */
.site-kop.elementor-sticky--effects .elementor-button {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

/* Op mobiel neemt een meelopende kop veel van het scherm in. Daar krimpt hij
   dus verder, en verdwijnt het telefoonnummer als dat in de kop staat. */
@media (max-width: 660px) {
    .site-kop.elementor-sticky--effects {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .site-kop.elementor-sticky--effects .elementor-widget-image img {
        height: 36px !important;
    }
    .site-kop .tel { display: none; }
}

/* Wie in zijn systeem heeft aangegeven bewegingen te willen beperken, krijgt
   de eindtoestand zonder de overgang. Dat is geen extraatje: bij duizeligheid
   en migraine kan een schuivende kop klachten uitlokken, en dat is precies de
   doelgroep van een fysiopraktijk. */
@media (prefers-reduced-motion: reduce) {
    .site-kop,
    .site-kop .elementor-widget-image img,
    .site-kop .elementor-button { transition: none !important; }
}/* End custom CSS */