/* Barlow, zelf gehost.
 *
 * Stond hiervoor bij Google. Die verwijzing kostte 769 ms in de
 * render-blokkerende keten, vooral door de extra verbinding naar een vreemd
 * domein. De bestanden zijn met fonttools uit de originele TTF gesneden op de
 * latin-tekenset en naar woff2 omgezet: zes stuks, samen 112 KB.
 * font-display swap houdt de tekst leesbaar tijdens het laden. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/2026/09/Barlow-Regular.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/wp-content/uploads/2026/09/Barlow-Medium.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/uploads/2026/09/Barlow-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/uploads/2026/09/Barlow-Bold.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/wp-content/uploads/2026/09/BarlowCondensed-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/wp-content/uploads/2026/09/BarlowCondensed-Bold.woff2) format('woff2')}

/*
 * Designlaag van deze site, beheerd door Vogel Visibility.
 * Dit bestand wordt op de voorkant EN in de blok-editor geladen, zodat de
 * redacteur ziet wat de bezoeker ziet.
 *
 * Aanpassen doe je HIER, niet in Customizer > Extra CSS. Dat veld houden we
 * bewust leeg als ontsnappingsluik voor de sitebeheerder.
 */

/* --------------------------------------------------------------
   1. Basis
   -------------------------------------------------------------- */

/* Astra rekent volle-breedtesecties met 100vw en telt de scrollbalk mee.
   Dat geeft een horizontale scrollbalk op Windows. clip lost dat op.
   Let op: NIET overflow-x:hidden gebruiken, dat sloopt position:sticky. */
html { overflow-x: clip; }

/* --------------------------------------------------------------
   2. Kopritme
   Astra staat standaard op regelafstand 1,4. Dat maakt grote koppen slap.
   -------------------------------------------------------------- */

h1, .entry-content h1 { line-height: 1.02; letter-spacing: -0.02em; }
h2, .entry-content h2 { line-height: 1.08; letter-spacing: -0.015em; }
h3, .entry-content h3 { line-height: 1.2;  letter-spacing: -0.01em; }

/* Leesbare regellengte. Binnen gekleurde blokken laten we het los, daar
   bepaalt de kolombreedte het al. */
.entry-content p { max-width: 72ch; }
.entry-content .wp-block-group.has-background p,
.entry-content .wp-block-column p { max-width: none; }

/* --------------------------------------------------------------
   3. Voettekst
   -------------------------------------------------------------- */

.site-primary-footer-wrap { color: #c9d6df; border: 0 !important; padding-top: 48px; padding-bottom: 44px; }
.site-primary-footer-wrap a { color: #7ede56; }
@media (hover: hover){ .site-primary-footer-wrap a:hover { color: #ffffff; } }
.site-primary-footer-wrap strong { color: #ffffff; }
.site-primary-footer-wrap .widget { margin-bottom: 0; }
.site-footer { border-top: 0 !important; }
.ast-builder-grid-row-container { border: 0 !important; }

/* --------------------------------------------------------------
   4. Google-reviews in huisstijl
   De plugin levert standaard Google-blauwe knoppen. Dat leest als een
   geleend blok; hier trekken we ze naar het palet van de klant.
   -------------------------------------------------------------- */

.rpi .rpi-review_us { background: #002f52 !important; }
@media (hover: hover){ .rpi .rpi-review_us:hover { background: #3c7f24 !important; } }
.rpi .rpi-card-inner { background: #ffffff !important; }
.rpi .rpi-name a, .rpi .rpi-title a { color: #002f52 !important; }

/* Drie kolommen op desktop, twee op tablet, een op mobiel.
   De eerste kaart is de samenvatting met de score; die blijft over de volle breedte. */
.rpi .rpi-cards { gap: 16px; }
.rpi .rpi-cards > .rpi-card {
  flex: 1 1 calc(33.333% - 11px) !important;
  max-width: calc(33.333% - 11px);
}
.rpi .rpi-cards > .rpi-card.rpi-card_block {
  flex-basis: 100% !important;
  max-width: 100%;
}
.rpi .rpi-card-inner { height: 100%; }

@media (max-width: 1024px) {
  .rpi .rpi-cards > .rpi-card { flex-basis: calc(50% - 8px) !important; max-width: calc(50% - 8px); }
  .rpi .rpi-cards > .rpi-card.rpi-card_block { flex-basis: 100% !important; max-width: 100%; }
}
@media (max-width: 600px) {
  .rpi .rpi-cards > .rpi-card { flex-basis: 100% !important; max-width: 100%; }
}

/* Geen scrollbalkjes in de kaarten: lange recensies netjes afkappen op zes regels. */
.rpi .rpi-text.rpi-scroll {
  overflow: hidden !important;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------
   5. Klaarstaande patronen
   Zet de klasse op een blok onder Geavanceerd > Extra CSS-klasse.
   -------------------------------------------------------------- */

/* .vv-reveal : blok schuift zacht in beeld bij het scrollen.
   Standaard zichtbaar, dus in browsers zonder ondersteuning (Firefox tot
   versie 157) is er niets aan de hand. Nul JavaScript. */
.vv-reveal { opacity: 1; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vv-reveal {
      opacity: 0;
      translate: 0 1.5rem;
      animation: vv-in .6s ease-out both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes vv-in { to { opacity: 1; translate: 0 0; } }
  }
}

/* .vv-plak : blijft staan terwijl de tekst ernaast doorloopt.
   Zet dit op een kolom, niet op het blok erbinnen. */
@media (min-width: 922px) {
  .vv-plak { position: sticky; top: 100px; align-self: start; }
}

/* .vv-groot : displaykop die meeschaalt zonder breekpunten. */
.vv-groot {
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------
   6. Respecteer de systeeminstelling voor beweging
   -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------
   6. Google-reviews: eigen beeldmerk in plaats van het Google-winkeltje
   De plugin valt terug op gmblogo.svg zodra het bedrijfsprofiel geen
   eigen foto heeft. We vervangen alleen dat ene plaatje, dus de foto's
   van de reviewers zelf blijven ongemoeid. Het beeldmerk staat als
   data-URI in dit bestand: geen extra verzoek, en het kan niet uit de
   mediabibliotheek verdwijnen.
   -------------------------------------------------------------- */

.rpi img.rpi-img[src*="gmblogo"]{
  content: url("data:image/png;base64,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");
  border-radius: 50%;
  background: #ffffff;
}

/* --------------------------------------------------------------
   7. Zwevende WhatsApp-knop
   De knop zelf wordt in vv-beheer.php op wp_footer neergezet.
   Op mobiel schuift hij omhoog, want daar staat de naar-boven-knop
   van Astra in dezelfde hoek.
   -------------------------------------------------------------- */

.vv-app{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #25D366;
  /* Donkerblauw in plaats van wit op het WhatsApp-groen. Wit gaf een contrast
     van 1,98 waar 4,5 de eis is; dit haalt ruim 7 en blijft in de huisstijl. */
  color: #002F52;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.vv-app:focus{ background:#1da851; color:#ffffff; }
@media (hover: hover){ .vv-app:hover{ background:#1da851; color:#ffffff; } }

.vv-app:focus-visible{ outline:3px solid #002F52; outline-offset:3px; }

/* Op een telefoon alleen het icoon, anders dekt de knop de tekst af. */
@media (max-width:600px){
  .vv-app{ right:16px; bottom:16px; padding:14px; gap:0; }
  .vv-app span{ display:none; }
}

/* De naar-boven-knop van Astra staat standaard in dezelfde hoek. */
#ast-scroll-top{ bottom:88px !important; }
@media (max-width:600px){ #ast-scroll-top{ bottom:78px !important; } }

/* --------------------------------------------------------------
   8. De sportieve huid (variant 3, gekozen door Arnoud op 27 aug 2026)
   Donkerblauw verloop, limegroen als enige accent, koppen in
   Barlow Condensed. Geldt voor de hele site. De !important-regels
   overschrijven inline blokstijlen uit de oude, lichte opzet;
   die verdwijnen definitief bij de herbouw van de pagina-inhoud.
   -------------------------------------------------------------- */

body{background:linear-gradient(178deg,#00121f 0%,#002f52 40%,#013a5f 70%,#00243f 100%) #00121f;background-attachment:fixed;color:#cfe0ea}
.site-header,.ast-primary-header-bar{background:transparent!important;border:0!important}
.main-header-menu a{color:#cfe3ef!important}
.main-header-menu .current-menu-item > a{color:#7edd57!important}
.custom-logo-link img{max-width:230px;aspect-ratio:749/345;height:auto}
.site-footer{background:transparent!important}

/* Koppen: Barlow Condensed, kapitalen, lime. Maximaal 64px en nooit
   midden in een woord breken; dat ging op twee varianten al mis. */
.entry-content h1,.entry-content h2,.entry-content h3,.entry-title{font-family:'Barlow Condensed',Barlow,sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.01em;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.entry-content h1{font-size:clamp(40px,5vw,64px);line-height:.94;color:#7edd57!important}
.entry-content h2{font-size:clamp(28px,3.4vw,44px);line-height:.96;color:#7edd57!important}
.entry-content h3{font-size:21px;color:#ffffff!important}

.entry-content p,.entry-content li{color:#cfe0ea}
.entry-content a:not(.wp-block-button__link){color:#7edd57}
@media (hover: hover){.entry-content a:not(.wp-block-button__link):hover{color:#ffffff}}

/* Lichte panelen uit de oude opzet worden donkere panelen. */
/* vervangen door de generieke paneelregel in 8b */
.entry-content .wp-block-group.has-background[style*="002f52"]{background:rgba(0,0,0,.28)!important;border:1px solid rgba(126,221,87,.35)}
.entry-content .wp-block-group[style*="dbe3e8"]{border-color:rgba(255,255,255,.18)!important}

/* Inline tekstkleuren uit de lichte opzet. */
.entry-content .has-text-color[style*="4a5b66"]{color:#9fb8c8!important}
.entry-content p.has-text-color[style*="color:#002f52"]{color:#7edd57!important}
.entry-content .has-text-color[style*="color:#53af31"]{color:#7edd57!important}

/* Knoppen: lime pil, een stijl. */
.entry-content .wp-block-button__link{border-radius:999px;padding:15px 32px;background:#7edd57!important;color:#00243f!important;font-weight:700}
.entry-content .is-style-outline .wp-block-button__link{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)}

/* Yoast FAQ leesbaar op donker. */
.entry-content .schema-faq-question{color:#ffffff;font-weight:600}
.entry-content .schema-faq-answer{color:#cfe0ea}

/* Formulieren van SureForms op donker. */
.srfm-form label,.srfm-form .srfm-block-label,.srfm-form legend{color:#e6f1f7!important}
.srfm-form .srfm-description,.srfm-form .srfm-help{color:#9fb8c8!important}
.srfm-form input[type=text],.srfm-form input[type=email],.srfm-form input[type=tel],.srfm-form textarea{background:rgba(255,255,255,.95)!important;color:#10202b!important}

/* Reviews: witte kaarten blijven wit, dat is prima contrast. */
.rpi .rpi-based,.rpi .rpi-header a{color:#cfe3ef!important}

/* De voettekstregels uit punt 3 gelden nog, alleen de rand hoeft niet meer. */
.site-primary-footer-wrap{color:#9fb8c8}
.site-primary-footer-wrap a{color:#7edd57}

/* --------------------------------------------------------------
   8b. Leesbaarheid op donker: ALLE lichte panelen mee
   De oude opzet had panelen in allerlei tinten wit en grijs, per blok
   inline gezet. In plaats van elke kleurcode najagen wordt hier elk blok
   met een achtergrond donker gemaakt. Uitzonderingen staan eronder.
   -------------------------------------------------------------- */

.entry-content .wp-block-group.has-background,
.entry-content .wp-block-column.has-background,
.entry-content .wp-block-group[class*="-background-color"],
.entry-content .wp-block-column[class*="-background-color"]{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14);color:#cfe0ea!important}

/* Het Fundament-blok houdt zijn eigen accent. */
.entry-content .wp-block-group.has-background[style*="002f52"]{background:rgba(0,0,0,.28)!important;border:1px solid rgba(126,221,87,.35)}

/* Alle inline tekstkleuren uit de lichte opzet: op donker is licht de norm. */
.entry-content .has-text-color:not([style*="7edd57"]):not([style*="7ede56"]):not([style*="53af31"]):not([style*="ffffff"]){color:#cfe0ea!important}
.entry-content strong{color:#ffffff}

/* Uitklapmenu was wit met lichte tekst. */
.main-header-menu .sub-menu{background:#01243d!important;border:1px solid rgba(255,255,255,.12)}
.main-header-menu .sub-menu .menu-link,.main-header-menu .sub-menu a{color:#cfe3ef!important}
@media (hover: hover){.main-header-menu .sub-menu a:hover{color:#7edd57!important}}

/* Mobiel menu idem. */
.ast-mobile-popup-drawer .ast-mobile-popup-inner{background:#01243d!important}
.ast-mobile-popup-drawer .menu-link{color:#cfe3ef!important}

/* --------------------------------------------------------------
   8c. Astra-container: de witte dozen om de inhoud gaan mee naar donker.
   Dit is dezelfde reset die de variantpagina's al in hun eigen blok
   hadden; nu geldt hij sitebreed.
   -------------------------------------------------------------- */
.ast-separate-container .ast-article-single,
.ast-separate-container #primary,
.ast-separate-container .ast-article-post,
.ast-separate-container .comments-area{background:transparent!important;border:0!important}
.entry-content .wp-block-columns.has-background{background:rgba(255,255,255,.055)!important}

/* --------------------------------------------------------------
   8d. Knoppen: de sluitregel. Wat hierboven ook gebeurt, een knop is
   altijd donkere tekst op lime, en een omlijnde knop witte tekst.
   Staat bewust als laatste in dit bestand: bij gelijke specificiteit
   wint de laatste regel.
   -------------------------------------------------------------- */
.entry-content .wp-block-button__link,
.entry-content .wp-block-button__link.has-text-color{color:#00243f!important;background:#7edd57!important}
.entry-content .is-style-outline .wp-block-button__link{color:#ffffff!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.4)}
@media (hover: hover){.entry-content .wp-block-button__link:hover{background:#94e878!important;color:#00243f!important}}

/* --------------------------------------------------------------
   8e. FAQ ingeklapt: de vraag wordt een knop, het antwoord klapt uit.
   Het script staat in vv-beheer.php; zonder JavaScript is alles open.
   -------------------------------------------------------------- */
.schema-faq-section{border:1px solid rgba(255,255,255,.14);border-radius:12px;margin:0 0 10px;background:rgba(255,255,255,.04)}
.schema-faq-question{display:block;cursor:pointer;padding:16px 48px 16px 18px;margin:0!important;position:relative;user-select:none}
.schema-faq-question::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#7edd57;font-weight:700;font-size:22px;line-height:1}
.vv-faq-open .schema-faq-question::after{content:"\2013"}
.schema-faq-answer{display:block;padding:0 18px 16px;margin:0!important}
.schema-faq-question:focus-visible{outline:2px solid #7edd57;outline-offset:2px;border-radius:12px}

/* --------------------------------------------------------------
   8f. Mobiel menu: Astra geeft de menu-items op mobiel een witte
   achtergrond; onze lichte letters vielen daarop weg. Hier krijgt het
   uitgeklapte menu dezelfde donkere ondergrond als de rest.
   -------------------------------------------------------------- */
.ast-header-break-point .main-header-bar-navigation{background:#01243d!important}
.ast-header-break-point .main-header-menu{background:#01243d!important}
.ast-header-break-point .main-header-menu .menu-link{background:transparent!important;color:#cfe3ef!important;border-color:rgba(255,255,255,.12)!important}
.ast-header-break-point .main-header-menu .menu-item{border-color:rgba(255,255,255,.12)!important}
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link{color:#7edd57!important}
@media (hover: hover){.ast-header-break-point .main-header-menu .menu-link:hover{color:#7edd57!important}}
.ast-header-break-point .main-header-menu .sub-menu{background:#012a49!important}
.ast-header-break-point .ast-menu-toggle{color:#cfe3ef!important;background:transparent!important}
.menu-toggle.main-header-menu-toggle{color:#cfe3ef!important}

/* 3b · voetfoto — VOORBEELD met hyrox-event.jpg; vervangen zodra de echte foto
   van Arnoud er is. Donkere overlay houdt de tekst leesbaar (contrast gemeten). */
footer.site-footer{background:linear-gradient(180deg,rgba(1,18,31,.82),rgba(1,18,31,.94) 60%,#01121f),url(/wp-content/uploads/2026/08/hyrox-event.jpg) center 30%/cover no-repeat #01121f!important}
footer.site-footer .site-primary-footer-wrap,footer.site-footer .site-footer-section,footer.site-footer .site-below-footer-wrap{background:transparent!important}

/* 8g · sureforms op de donkere huid: de witte plugincontainer uit, alles op de huid. */
.srfm-form-container{background:transparent!important}
.srfm-form-container .srfm-block-label{margin-bottom:6px!important}
.srfm-form-container .srfm-description{color:#b7cdd9!important}
.srfm-form-container .srfm-block-content-wrap{background:rgba(255,255,255,.06)!important;border:1px solid rgba(207,224,234,.4)!important;border-radius:10px!important}
@media (hover: hover){.srfm-form-container .srfm-block-content-wrap:hover{border-color:rgba(126,221,87,.65)!important}}
.srfm-form-container .srfm-multi-choice-single input:checked+.srfm-block-content-wrap{border-color:#7edd57!important;background:rgba(126,221,87,.14)!important}
.srfm-form-container input[type=radio],.srfm-form-container input[type=checkbox]{accent-color:#7edd57}
.srfm-form-container .srfm-submit-button{background:#7edd57!important;color:#00243f!important;border-color:#7edd57!important;font-weight:700!important}
@media (hover: hover){.srfm-form-container .srfm-submit-button:hover{background:#8ee96a!important;color:#00243f!important}}

/* 8f-bis · hamburgerknop goed zichtbaar op de donkere balk. */
.ast-header-break-point .main-header-menu-toggle{color:#eaf4fb!important;border:1px solid rgba(207,224,234,.45)!important;border-radius:8px!important}
.ast-header-break-point .main-header-menu-toggle .ast-mobile-svg{fill:#eaf4fb!important}
.ast-header-break-point .main-header-menu-toggle[aria-expanded=true] .ast-mobile-svg{fill:#7edd57!important}

/* 5b · vv-links: alinea links uitlijnen onder de kop (Astra centreert alinea’s standaard). */
.entry-content p.vv-links{margin-left:0!important}

/* 4b · reviews: de widget leeft in één wit afgerond paneel op de donkere huid. */
.entry-content .wp-block-group:has(> .rpi){background:#fff!important;border-radius:22px;padding:40px 40px 28px!important;margin-left:auto!important;margin-right:auto!important}
.entry-content .wp-block-group:has(> .rpi) h2{color:#002f52!important}
.entry-content .wp-block-group:has(> .rpi) p{color:#4a5b66!important}
.entry-content .wp-block-group:has(> .rpi) .rpi-based,.entry-content .wp-block-group:has(> .rpi) .rpi-header a{color:#4a5b66!important}
.rpi .rpi-card-inner{background:#f6f9fb!important;border:1px solid #e3ebf1;border-radius:14px}
.entry-content .wp-block-group:has(> .rpi) .rpi-review_us a{color:#fff!important}
@media (max-width:600px){.entry-content .wp-block-group:has(> .rpi){padding:24px 16px 18px!important;border-radius:16px}}

/* 5c · tekst links onder de kop, sitebreed. Astra centreert alinea’s en lijsten
   binnen constrained layout; dat oogt als een gat onder elke linkse kop.
   Bewust gecentreerde tekst (has-text-align-center) blijft gecentreerd. */
.entry-content .is-layout-constrained > p:not(.has-text-align-center),
.entry-content .is-layout-constrained > ul,
.entry-content .is-layout-constrained > ol{margin-left:0!important}

/* 5d · tarieventabel: dienst links, prijs rechts, rustige lijnen. */
.entry-content table.vv-tarieven, .entry-content .vv-tarieven table{width:100%;max-width:640px;border-collapse:collapse;margin-left:0!important}
.vv-tarieven td{padding:12px 8px;border-bottom:1px solid rgba(207,224,234,.25);color:#e6f1f8;font-size:17px}
.vv-tarieven td:last-child{text-align:right;font-weight:700;color:#7edd57;white-space:nowrap}

/* 8h · 3c-laag sitebreed: gelaagde kaarten met limerand boven, diepte en rust. */
.entry-content .wp-block-group .wp-block-group.has-background,
.entry-content .wp-block-column > .wp-block-group.has-background,
.entry-content .wp-block-column.has-background{border:1px solid rgba(126,221,87,.75);border-radius:6px;box-shadow:0 20px 44px rgba(0,8,18,.5);overflow:hidden}
.entry-content .wp-block-group:has(> .rpi){border:1px solid rgba(126,221,87,.75)}
.entry-content .wp-block-columns{gap:28px}
.entry-content .wp-block-button__link{box-shadow:0 10px 24px rgba(126,221,87,.28)}
/* gelijke kaarthoogte en vaste beeldverhouding in kolomkaarten. */
.entry-content .wp-block-column > .wp-block-group.has-background{height:100%}
.entry-content .wp-block-column > .wp-block-group.has-background .wp-block-image img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:16px}
/* koppen komen rustig binnen zoals in 3C; zonder ondersteuning staat alles gewoon stil. */
@supports (animation-timeline: view()) {
  .entry-content h2.wp-block-heading{animation:vvkop .6s ease-out both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes vvkop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* 8i · één lijn in afronding en gelaagdheid, sitebreed. Systeem: panelen en
   kaarten 16px met limerand en diepte, losse beelden 14px, elementen 10px. */
.entry-content .wp-block-button__link{border-radius:10px!important}
.entry-content figure.wp-block-image img{border-radius:16px}
.entry-content .wp-block-group.has-background figure.wp-block-image img{border-radius:16px}
.entry-content .wp-block-group.has-background > figure.wp-block-image{margin:24px 28px 0!important}
.entry-content .wp-block-media-text figure img{border-radius:16px}
.entry-content .schema-faq-section{border-radius:14px!important}
.entry-content .wp-block-group:has(> .rpi){border-radius:6px!important}
.srfm-form-container .srfm-input-common{border-radius:10px!important}
.srfm-form-container .srfm-block-content-wrap{border-radius:12px!important}

/* 5e · citaten: groot aanhalingsteken in lime, rustige inspringing. */
.entry-content blockquote{position:relative;border:0!important;margin:6px 0!important;padding:14px 0 6px 66px!important;font-style:italic;color:#d7e6ef;background:transparent!important}
.entry-content blockquote::before{content:"\201C";position:absolute;left:0;top:-6px;font-family:Georgia,'Times New Roman',serif;font-style:normal;font-size:92px;line-height:1;color:rgba(126,221,87,.6)}
.entry-content blockquote p{margin-left:0!important}
.entry-content blockquote p:last-of-type::after{content:"\201D";margin-left:3px;font-family:Georgia,'Times New Roman',serif;font-style:normal;font-size:30px;line-height:0;vertical-align:-8px;color:rgba(126,221,87,.6)}
.editor-styles-wrapper blockquote p:last-of-type::after{content:"\201D";margin-left:3px;font-family:Georgia,'Times New Roman',serif;font-style:normal;font-size:30px;line-height:0;vertical-align:-8px;color:rgba(126,221,87,.6)}

/* 8k · aanhef binnenpagina's als gelaagde kaart met kicker-pil. Alleen hero's
   geldt voor elke pagina-aanhef, met of zonder beeld: overal dezelfde kaart. */
.entry-content > .wp-block-group:has(h1){border:1px solid rgba(126,221,87,.75)!important;border-radius:6px;background-color:#0a2c44!important;background-image:linear-gradient(160deg,#0c3253,#07223c)!important;box-shadow:0 24px 50px rgba(0,8,18,.5);padding:56px 56px 46px!important;margin-top:10px}
.entry-content > .wp-block-group:has(h1) p:first-child,
.entry-content > .wp-block-group:has(h1) > .wp-block-group > p:first-child{display:inline-block;padding:7px 18px;border:1px solid rgba(126,221,87,.55);border-radius:999px;background:rgba(126,221,87,.08);margin-bottom:14px!important}
@media (max-width:600px){.entry-content > .wp-block-group:has(h1){padding:30px 20px 26px!important;border-radius:6px}}

/* 8l · cijfertegels: lime capsules met cijferkop. */
.entry-content .wp-block-group[style*="001e36"] .wp-block-column{background:rgba(255,255,255,.05);border:1px solid rgba(126,221,87,.3);border-top:3px solid #7edd57;border-radius:12px;padding:16px 20px!important;text-align:center}
.entry-content .wp-block-group[style*="001e36"] .wp-block-column p:first-child{color:#7edd57!important;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px!important}

/* citaatgroep op de homepage: groot aanhalingsteken erboven. */
.entry-content .vv-citaat{position:relative;padding-top:26px!important}
.entry-content .vv-citaat > p:first-child{position:relative}
.entry-content .vv-citaat > p:first-child::before{content:"\201C";position:absolute;left:-64px;top:-30px;font-family:Georgia,serif;font-size:84px;line-height:1;color:rgba(126,221,87,.6)}
.entry-content .vv-citaat > p:first-child::after{content:"\201D";position:absolute;right:-64px;bottom:-44px;font-family:Georgia,serif;font-size:84px;line-height:1;color:rgba(126,221,87,.6)}
@media (max-width:781px){.entry-content .vv-citaat > p:first-child::before{left:-4px;top:-46px}.entry-content .vv-citaat > p:first-child::after{right:-4px;bottom:-52px}}

/* 5f · terzijde: kort naschrift met accent in plaats van een los zwevend blokje. */
.entry-content p.vv-terzijde{border-left:3px solid #7edd57;background:rgba(126,221,87,.07);padding:14px 18px!important;border-radius:0 12px 12px 0;max-width:72ch}

/* accentbeelden: losse beelden in de tekst zijn ter beeldvorming, maximaal halve breedte. */
.entry-content > figure.wp-block-image,
.entry-content .wp-block-group:not(.has-background) > figure.wp-block-image{max-width:50%;margin-left:0!important;margin-right:auto!important}
.entry-content > figure.wp-block-image img,
.entry-content .wp-block-group:not(.has-background) > figure.wp-block-image img{max-height:460px;width:auto}
.entry-content .wp-block-group.has-background figure.wp-block-image img{max-height:none;width:100%}
.entry-content .wp-block-group.has-background > figure.wp-block-image{width:calc(100% - 56px)!important}
@media (max-width:781px){.entry-content > figure.wp-block-image,.entry-content .wp-block-group:not(.has-background) > figure.wp-block-image{max-width:100%}}

/* binnenkaarten blijven rond: alles binnen een kader is zacht afgerond. */
.entry-content .wp-block-group.has-background .wp-block-group.has-background{border-radius:14px!important;border:1px solid rgba(126,221,87,.3);border-top:3px solid #7edd57}

/* TIJDELIJK vv_fotos3: portret in posteruitsnede binnenhalen (eenmalig). */
add_action( 'admin_init', function () {
    if ( ! isset( $_GET['vv_fotos3'] ) || ! current_user_can( 'manage_options' ) ) return;
    require_once ABSPATH . 'wp-admin/includes/media.php';
    require_once ABSPATH . 'wp-admin/includes/file.php';
    require_once ABSPATH . 'wp-admin/includes/image.php';
    $id = media_sideload_image( 'https://vogelvisibility.com/demo/tmp/arnoud-dorlijn-portret.jpg', 0, 'Arnoud Dorlijn, fysiotherapeut en personal trainer bij D-Physics', 'id' );
    if ( is_wp_error( $id ) ) wp_die( 'FOUT: ' . esc_html( $id->get_error_message() ) );
    update_post_meta( $id, '_wp_attachment_image_alt', 'Arnoud Dorlijn, fysiotherapeut en personal trainer bij D-Physics' );
    wp_die( 'id=' . (int) $id );
} );

/* 8m · ritme: vaste lucht tussen aanhef, secties en beelden, sitebreed. */
.entry-content > .wp-block-group:has(h1){margin-bottom:56px!important}
.entry-content > h2.wp-block-heading{margin-top:64px!important;margin-bottom:18px!important}
.entry-content > h2.wp-block-heading:first-child{margin-top:0!important}
.entry-content > figure.wp-block-image{margin-top:36px!important;margin-bottom:36px!important}
.entry-content > .wp-block-columns{margin-top:28px!important;margin-bottom:44px!important}
.entry-content figure.wp-block-table{margin-top:18px}
.entry-content > .wp-block-group{margin-bottom:40px}

/* drieluik: css-scrollstrip met stipjes; geen autoplay, alle beelden lazy. */
.vv-drieluik{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;scrollbar-width:none}
.vv-drieluik::-webkit-scrollbar{display:none}
.vv-drieluik > figure{flex:0 0 100%;margin:0!important;scroll-snap-align:start}
.vv-drieluik > figure img{width:100%!important;max-height:none!important;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
.entry-content .wp-block-group.has-background > .vv-drieluik{margin:24px 28px 0!important}
.vv-drieluik-dots{display:flex;gap:8px;justify-content:center;align-items:center;margin:-24px auto 0!important;transform:translateY(-12px);position:relative;z-index:2;width:max-content;padding:7px 11px;border-radius:999px;background:rgba(7,34,60,.55)}
.vv-drieluik-dots button{width:10px;height:10px;border-radius:50%;border:1px solid rgba(126,221,87,.7);background:transparent;padding:0;cursor:pointer;box-shadow:none!important}
.vv-drieluik-dots button.aan{background:#7edd57}

/* voettekst op mobiel: nette zijruimte, niet tegen de kantlijn. */
@media (max-width:921px){
  footer.site-footer .ast-builder-grid-row{padding-left:22px!important;padding-right:22px!important}
  footer.site-footer .site-below-footer-wrap{padding-left:22px!important;padding-right:22px!important}
}

/* 8n. ketenschema: klein uitlegbeeld met bijschrift, geen accentfoto */
.entry-content > figure.vv-schema{max-width:100%!important;margin:34px 0 34px!important;display:flex;flex-direction:column;align-items:flex-start;gap:14px;border:1px solid rgba(126,221,87,.28);border-radius:6px;padding:22px 26px}
.entry-content > figure.vv-schema img{height:330px!important;width:auto!important;max-height:none!important;flex:none}
.entry-content > figure.vv-schema figcaption{font-size:1.02rem;line-height:1.6;opacity:.8;max-width:42em;margin:0;text-align:left;flex:1 1 auto}
@media (min-width:782px){.entry-content > figure.vv-schema{flex-direction:row;align-items:center;gap:30px}}
@media (max-width:781px){.entry-content > figure.vv-schema img{align-self:center}}

/* Editor: dezelfde kleuren en vlakken als op de voorkant. De site stuurt op
   .entry-content en die klasse bestaat niet in de blokeditor, waardoor daar
   donkere tekst op een donkere achtergrond stond. Raakt alleen de editor. */
.editor-styles-wrapper h1{color:#7edd57!important}
.editor-styles-wrapper h2{color:#7edd57!important}
.editor-styles-wrapper h3{color:#ffffff!important}
.editor-styles-wrapper p,.editor-styles-wrapper li{color:#cfe0ea}
.editor-styles-wrapper a:not(.wp-block-button__link){color:#7edd57}
.editor-styles-wrapper a:not(.wp-block-button__link):hover{color:#ffffff}
.editor-styles-wrapper .wp-block-group.has-background[style*="002f52"]{background:rgba(0,0,0,.28)!important;border:1px solid rgba(126,221,87,.35)}
.editor-styles-wrapper .wp-block-group[style*="dbe3e8"]{border-color:rgba(255,255,255,.18)!important}
.editor-styles-wrapper .has-text-color[style*="4a5b66"]{color:#9fb8c8!important}
.editor-styles-wrapper p.has-text-color[style*="color:#002f52"]{color:#7edd57!important}
.editor-styles-wrapper .has-text-color[style*="color:#53af31"]{color:#7edd57!important}
.editor-styles-wrapper .wp-block-button__link{background:#7edd57!important;color:#00243f!important}
.editor-styles-wrapper .is-style-outline .wp-block-button__link{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)}
.editor-styles-wrapper .schema-faq-question{color:#ffffff}
.editor-styles-wrapper .schema-faq-answer{color:#cfe0ea}
.editor-styles-wrapper .wp-block-group.has-background, .editor-styles-wrapper .wp-block-column.has-background, .editor-styles-wrapper .wp-block-group[class*="-background-color"], .editor-styles-wrapper .wp-block-column[class*="-background-color"]{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14);color:#cfe0ea!important}
.editor-styles-wrapper .wp-block-group.has-background[style*="002f52"]{background:rgba(0,0,0,.28)!important;border:1px solid rgba(126,221,87,.35)}
.editor-styles-wrapper .has-text-color:not([style*="7edd57"]):not([style*="7ede56"]):not([style*="53af31"]):not([style*="ffffff"]){color:#cfe0ea!important}
.editor-styles-wrapper strong{color:#ffffff}
.editor-styles-wrapper .wp-block-columns.has-background{background:rgba(255,255,255,.055)!important}
.editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-button__link.has-text-color{color:#00243f!important;background:#7edd57!important}
.editor-styles-wrapper .is-style-outline .wp-block-button__link{color:#ffffff!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.4)}
.editor-styles-wrapper .wp-block-button__link:hover{background:#94e878!important;color:#00243f!important}
.editor-styles-wrapper .wp-block-group:has(> .rpi){background:#fff!important}
.editor-styles-wrapper .wp-block-group:has(> .rpi) h2{color:#002f52!important}
.editor-styles-wrapper .wp-block-group:has(> .rpi) p{color:#4a5b66!important}
.editor-styles-wrapper .wp-block-group:has(> .rpi) .rpi-based,.editor-styles-wrapper .wp-block-group:has(> .rpi) .rpi-header a{color:#4a5b66!important}
.editor-styles-wrapper .wp-block-group:has(> .rpi) .rpi-review_us a{color:#fff!important}
.editor-styles-wrapper .wp-block-group .wp-block-group.has-background, .editor-styles-wrapper .wp-block-column > .wp-block-group.has-background, .editor-styles-wrapper .wp-block-column.has-background{border:1px solid rgba(126,221,87,.75)}
.editor-styles-wrapper .wp-block-group:has(> .rpi){border:1px solid rgba(126,221,87,.75)}
.editor-styles-wrapper blockquote{border:0!important;color:#d7e6ef;background:transparent!important}
.editor-styles-wrapper blockquote::before{color:rgba(126,221,87,.6)}
.editor-styles-wrapper > .wp-block-group:has(h1){border:1px solid rgba(126,221,87,.75)!important;background-color:#0a2c44!important}
.editor-styles-wrapper > .wp-block-group:has(h1) p:first-child, .editor-styles-wrapper > .wp-block-group:has(h1) > .wp-block-group > p:first-child{border:1px solid rgba(126,221,87,.55);background:rgba(126,221,87,.08)}
.editor-styles-wrapper .wp-block-group[style*="001e36"] .wp-block-column{background:rgba(255,255,255,.05);border:1px solid rgba(126,221,87,.3)}
.editor-styles-wrapper .wp-block-group[style*="001e36"] .wp-block-column p:first-child{color:#7edd57!important}
.editor-styles-wrapper .vv-citaat > p:first-child::before{color:rgba(126,221,87,.6)}
.editor-styles-wrapper .vv-citaat > p:first-child::after{color:rgba(126,221,87,.6)}
.editor-styles-wrapper p.vv-terzijde{background:rgba(126,221,87,.07)}
.editor-styles-wrapper .wp-block-group.has-background .wp-block-group.has-background{border:1px solid rgba(126,221,87,.3)}
.editor-styles-wrapper > figure.vv-schema{border:1px solid rgba(126,221,87,.28)}

/* Het uitklappijltje in het menu was 20,2 px breed. Aanraakdoelen moeten
   minstens 24 bij 24 px zijn, anders mist een deel van de bezoekers hem. */
.ast-header-navigation-arrow,
.main-header-menu .dropdown-menu-toggle{
  min-width: 26px;
  min-height: 26px;
}


/* --------------------------------------------------------------
   9 - Hover alleen waar een muisaanwijzer bestaat (14 sep 2026)

   Een telefoon heeft geen muisaanwijzer. Safari en Chrome op iOS lossen
   dat op door de eerste tik de hover-stand te laten zetten en de link pas
   bij de tweede tik te openen. Symptoom is dat de tekst wit wordt en er
   verder niets gebeurt. Daarom staat elke hover-regel hierboven in
   @media (hover: hover). Op een aanraakscherm bestaat die stand dan niet
   en opent elke link meteen.

   Een uitzondering is nodig. Astra zet inline a:hover met kleur 3C7F24
   neer. Die regel weegt net zo zwaar als a.vv-app, dus zonder de regel
   hieronder zou de WhatsApp-knop op een telefoon alsnog van kleur
   wisselen bij de eerste tik. Bij alle andere links wint onze eigen
   basisregel al.
   -------------------------------------------------------------- */
@media (hover: none){
  .vv-app:hover{ background:#25D366; color:#002F52; }
}