/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.3
*/
/* ================================================================================
VTM-DIVE — GLOBAL DESIGN LAYER
--------------------------------------------------------------------------------
Spec: VTM-Dive/Website/vtm-global-design-spec.md
Managed by Claude via SSH. Bump the version below on EVERY change — never
silently overwrite. Keep a one-line changelog entry per version.
v1.0.0 2026-09-10 Initial global setup: self-hosted fonts, colour tokens,
typography, layout width, buttons, forms, header
(transparent-over-hero + navy sticky), footer, WooCommerce
base, "Bild folgt" image placeholders, responsive.
v1.0.1 2026-09-10 Beat BeTheme's Options CSS: !important + broader selectors
for heading font (Titan One) and header background (navy),
so it holds even before the Options pass.
v1.0.2 2026-09-10 Heading font override raised above BeTheme's #Subheader
.title specificity (html body / #Subheader selectors).
v1.0.3 2026-09-10 Header bg logic fixed: navy default now excludes
.header-transparent so the Options "Transparent header"
actually takes effect; sticky state re-wins as navy.
v1.0.4 2026-09-11 Removed the white gap above the hero on pages using the
custom overlay header template: BeTheme's #Content wrapper
carries a default padding-top:30px (reserved for a normal
fixed header) that isn't needed under an absolute/overlay
header — zeroed it, scoped to .mfn-header-template pages.
v1.1.0 2026-09-11 DESIGN FREEDOM PASS, on request. Removed !important from
every look-and-feel rule (typography, buttons, forms,
footer, WooCommerce colours, header background colour) —
those are now soft DEFAULTS: anything unstyled still gets
the brand look, but a colour/font/style set in BeBuilder
or Betheme Options on a specific element now wins, as it
normally would. Kept `!important` ONLY on things that are
not a design choice but a functional fix: the transparent
↔ sticky header state-switch (needed so scrolling doesn't
leave an unreadable header) and the #Content padding-top
bug fix from v1.0.4. Ask if you want those relaxed too.
================================================================================ */
/* ---------- 1. FONTS (self-hosted — no external requests) ------------------------ */
@font-face{
font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/titanone-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/titanone-latinext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
src:url('fonts/outfit-var-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;
src:url('fonts/outfit-var-latinext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;
src:url('fonts/jbmono-var-latin.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap;
src:url('fonts/jbmono-var-latinext.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ---------- 2. TOKENS ----------------------------------------------------------- */
:root{
--vtm-blue:#005F82;
--vtm-navy:#0A2850;
--vtm-aqua:#20C4C9;
--vtm-aqua-dark:#1AA6AB;
--vtm-ink:#14202B;
--vtm-muted:#5B6B78;
--vtm-bg:#FFFFFF;
--vtm-bg-alt:#F4F7F9;
--vtm-border:#DDE5EA;
--vtm-ph:#E3E8EC;
--vtm-ph-dark:#2A3B4D;
--vtm-font-head:'Titan One',Georgia,serif;
--vtm-font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--vtm-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--vtm-radius:8px;
--vtm-shadow:0 6px 24px -8px rgba(10,40,80,.15);
--vtm-container:1240px;
--vtm-focus:0 0 0 3px rgba(0,95,130,.20);
}
/* ---------- 3. BASE & TYPOGRAPHY (soft defaults — overridable) ----------------- */
body,
.mfn-base,
#Wrapper{
font-family:var(--vtm-font-body);
font-size:17px;
line-height:1.65;
color:var(--vtm-ink);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.mfn-heading,.title,.column_title,
.the_content_wrapper h1,.the_content_wrapper h2,
.mcb-column .column_column h1,.mcb-column .column_column h2{
color:var(--vtm-navy);
font-weight:700;
letter-spacing:0;
}
/* Titan One default for H1/H2. No !important — a font set on a specific
element in BeBuilder or Options wins. */
h1,h2,
.mcb-column .column_column h1,
.mcb-column .column_column h2,
#Subheader .title,
.page-title-container .title,
.mfn-heading.title-h1,
.mfn-heading.title-h2{
font-family:var(--vtm-font-head);
font-weight:400;
line-height:1.12;
}
h1{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;}
h2{font-size:clamp(1.8rem,3.5vw,2.5rem);}
h3,h3 a{font-family:var(--vtm-font-body);font-weight:700;font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;}
h4,h4 a{font-family:var(--vtm-font-body);font-weight:700;font-size:1.15rem;line-height:1.25;}
h5{font-family:var(--vtm-font-body);font-weight:600;font-size:1rem;}
h6{font-family:var(--vtm-font-body);font-weight:600;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;}
p{margin:0 0 1.1em;}
.the_content_wrapper > p,
.column_column p{max-width:68ch;}
a{color:var(--vtm-blue);}
.the_content_wrapper a:not(.button),
.column_column a:not(.button){
text-decoration:underline;
text-decoration-color:var(--vtm-aqua);
text-underline-offset:3px;
transition:color var(--vtm-t-1) ease;
}
.the_content_wrapper a:not(.button):hover,
.column_column a:not(.button):hover{color:var(--vtm-navy);}
/* Eyebrow / small label */
.vtm-eyebrow{
display:inline-block;
font-family:var(--vtm-font-body);
font-weight:600;
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--vtm-blue);
margin-bottom:.6em;
}
/* Numeric / price / date */
.vtm-mono,
.price,.woocommerce-Price-amount,
.mfn-woocommerce-price,
.event-date,.evo_time,.ev_ftr_date{
font-family:var(--vtm-font-mono);
font-weight:500;
font-variant-numeric:tabular-nums;
}
/* ---------- 4. LAYOUT WIDTH ---------------------------------------------------- */
.container{max-width:var(--vtm-container);}
@media (min-width:1240px){
.container{width:var(--vtm-container);}
}
/* Section vertical rhythm (only where BeTheme leaves defaults) */
.section .section_wrapper{padding-top:0;padding-bottom:0;}
.section{padding:64px 0;}
@media (min-width:768px){.section{padding:104px 0;}}
.section.the_content{padding-top:48px;padding-bottom:48px;}
/* v1.1.1 — empty BeTheme wrappers (no editor content / empty pager) must not
get section padding, otherwise they show as a white band under BeBuilder pages */
.section.the_content.no_content,
.section.section-page-footer:not(:has(.page-pager a)){display:none;}
.bg-alt,.section.bg-alt{background:var(--vtm-bg-alt);}
/* ---------- 5. BUTTONS (soft defaults — style one in BeBuilder to override) --- */
.button,
a.button,
.button.button_theme,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"],
button[type="submit"],
.mfn-button,
.wpforms-submit{
display:inline-flex;
align-items:center;
gap:.5em;
font-family:var(--vtm-font-body);
font-weight:700;
font-size:15px;
line-height:1;
letter-spacing:.01em;
text-transform:none;
text-decoration:none;
padding:14px 26px;
border-radius:var(--vtm-radius);
border:2px solid transparent;
background:var(--vtm-aqua);
color:var(--vtm-navy);
box-shadow:none;
transition:transform var(--vtm-t-1) ease,background-color var(--vtm-t-1) ease,color var(--vtm-t-1) ease,border-color var(--vtm-t-1) ease;
cursor:pointer;
}
.button:hover,
a.button:hover,
.button.button_theme:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.mfn-button:hover,
.wpforms-submit:hover{
background:var(--vtm-aqua-dark);
color:var(--vtm-navy);
transform:translateY(-1px);
}
/* Secondary: navy outline */
.button.button_stroke,
a.button.button-stroke,
.button.vtm-secondary,
.woocommerce a.button.wc-backward,
.woocommerce a.added_to_cart{
background:transparent;
color:var(--vtm-navy);
border-color:var(--vtm-navy);
}
.button.button_stroke:hover,
a.button.button-stroke:hover,
.button.vtm-secondary:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce a.added_to_cart:hover{
background:var(--vtm-navy);
color:#fff;
border-color:var(--vtm-navy);
}
/* Text button */
.vtm-textlink{
font-weight:700;color:var(--vtm-navy);text-decoration:none;
border-bottom:2px solid transparent;transition:border-color var(--vtm-t-1) ease;
}
.vtm-textlink::after{content:" \2192";color:var(--vtm-aqua);}
.vtm-textlink:hover{border-color:var(--vtm-aqua);}
/* On dark sections */
.section-dark,.mcb-section-dark,.dark{color:rgba(255,255,255,.82);}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4,.section-dark h5,.section-dark h6{color:#fff;}
.section-dark .button.button_stroke,
.section-dark .vtm-secondary{color:#fff;border-color:#fff;}
.section-dark .button.button_stroke:hover,
.section-dark .vtm-secondary:hover{background:#fff;color:var(--vtm-navy);}
/* ---------- 6. FORMS (soft defaults) ---------------------------------------- */
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="password"],input[type="search"],input[type="number"],input[type="date"],
textarea,select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wpforms-field input,.wpforms-field textarea,.wpforms-field select{
font-family:var(--vtm-font-body);
font-size:16px;
color:var(--vtm-ink);
background:#fff;
border:1px solid var(--vtm-border);
border-radius:var(--vtm-radius);
padding:12px 14px;
min-height:44px;
box-shadow:none;
transition:border-color var(--vtm-t-1) ease,box-shadow var(--vtm-t-1) ease;
}
textarea{min-height:140px;}
input:focus,textarea:focus,select:focus,
.wpforms-field input:focus,.wpforms-field textarea:focus{
outline:none;
border-color:var(--vtm-blue);
box-shadow:var(--vtm-focus);
}
label,.wpforms-field-label,.woocommerce form .form-row label{
font-family:var(--vtm-font-body);
font-weight:600;
font-size:14px;
color:var(--vtm-navy);
}
::placeholder{color:var(--vtm-muted);opacity:1;}
/* ---------- 7. HEADER — #Content padding-top bug fix ------------------------
v1.1.27 removed this section's old BeTheme "Header 1" CSS (#Top_bar,
#Header_wrapper.is-sticky, body.header-transparent): dead code since the
site switched to its own Header Builder template (post 2484 "VTM Header",
#mfn-header-template / .mfn-menu-link / .logo-wrapper) — those old
selectors don't match anything in the current DOM (verified live). The
header's own look/behaviour now lives entirely in section 12 (MISC / QoL,
v1.1.26 "Surface Tension"), which targets the real markup.
This one rule survives because it's an unrelated functional fix (see
v1.0.4) that DOES target the current template: BeTheme's #Content wrapper
carries a default padding-top:30px meant for a normal fixed header; under
the absolute/overlay Header Builder template that just leaves a blank
gap above the hero. --- */
body.mfn-header-template #Content{
padding-top:0!important;
}
/* ---------- 8. FOOTER (soft defaults) --------------------------------------- */
#Footer{
background:var(--vtm-navy);
color:rgba(255,255,255,.75);
font-family:var(--vtm-font-body);
}
#Footer .widgets_wrapper{padding:56px 0;}
#Footer .widget-title,
#Footer .widgettitle,
#Footer h3,#Footer h4{
color:#fff;
font-family:var(--vtm-font-body);
font-weight:700;
font-size:14px;
text-transform:uppercase;
letter-spacing:.06em;
margin-bottom:1em;
}
#Footer a{color:rgba(255,255,255,.75);text-decoration:none;transition:color var(--vtm-t-1) ease;}
#Footer a:hover{color:var(--vtm-aqua);}
#Footer .social a,#Footer .social li a{color:var(--vtm-aqua);}
#Footer ul{list-style:none;margin:0;padding:0;}
#Footer ul li{margin:0 0 .5em;}
#Footer .footer_copy,
#Footer #bottom_bar,
.footer_copy{
border-top:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.55);
font-size:13px;
}
#Footer .footer_copy a,.footer_copy a{color:rgba(255,255,255,.55);}
#Footer .footer_copy a:hover{color:var(--vtm-aqua);}
/* ---------- 9. WOOCOMMERCE BASE (soft defaults) ----------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
background:#fff;
border:1px solid var(--vtm-border);
border-radius:var(--vtm-radius);
padding:14px;
transition:transform var(--vtm-t-1) ease,box-shadow var(--vtm-t-1) ease;
}
.woocommerce ul.products li.product:hover{
transform:translateY(-3px);
box-shadow:var(--vtm-shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3{
font-family:var(--vtm-font-body);
font-weight:600;
font-size:1rem;
color:var(--vtm-navy);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
color:var(--vtm-navy);
font-family:var(--vtm-font-mono);
font-weight:600;
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale{
background:var(--vtm-aqua);
color:var(--vtm-navy);
font-family:var(--vtm-font-body);
font-weight:700;
border-radius:999px;
min-height:auto;line-height:1;padding:.5em .9em;
}
/* product image slot → placeholder look until real images */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img{
background:var(--vtm-ph);
border-radius:6px;
}
/* single product add-to-cart = primary */
.woocommerce div.product form.cart .button{background:var(--vtm-aqua);color:var(--vtm-navy);}
/* tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--vtm-navy);}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--vtm-navy);}
/* WooCommerce messages */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info{border-top-color:var(--vtm-blue);}
/* ---------- 10. IMAGE PLACEHOLDERS ("Bild folgt") -------------------- */
.vtm-ph{
position:relative;
background:var(--vtm-ph);
border-radius:var(--vtm-radius);
min-height:220px;
overflow:hidden;
}
.vtm-ph::after{
content:"Bild folgt";
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-family:var(--vtm-font-body);
font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
color:var(--vtm-muted);
}
.vtm-ph--dark{background:var(--vtm-ph-dark);}
.vtm-ph--dark::after{color:rgba(255,255,255,.55);}
/* Homepage hero placeholder: full-bleed navy block behind transparent header */
.vtm-hero-ph{
background:var(--vtm-navy);
color:#fff;
min-height:72vh;
display:flex;align-items:center;
}
.vtm-hero-ph h1{color:#fff;}
.vtm-hero-ph p{color:rgba(255,255,255,.8);}
/* ---------- 11. RESPONSIVE ----------------------------------------------- */
@media (max-width:1100px){
.section{padding:56px 0;}
}
@media (max-width:768px){
body,#Wrapper{font-size:16px;line-height:1.6;}
.section{padding:44px 0;}
.button,a.button,input[type="submit"],.wpforms-submit{padding:12px 20px;}
#Footer .widgets_wrapper{padding:40px 0;}
}
/* ---------- 12. MISC / QoL -------------------------------------------- */
::selection{background:var(--vtm-aqua);color:var(--vtm-navy);}
img{border-radius:0;}
hr{border:none;border-top:1px solid var(--vtm-border);margin:2em 0;}
/* ================================================================================
v1.1.2 — Reveal-on-hover cards
BeBuilder: class `vtm-reveal` on the WRAP, `vtm-reveal-text` on the text COLUMN.
Title + button stay visible; the text slides up on hover / keyboard focus.
Touch devices have no hover, so the text is always shown there.
================================================================================ */
.vtm-reveal .vtm-reveal-text{
max-height:0;opacity:0;overflow:hidden;transform:translateY(16px);
transition:max-height 1.6s var(--vtm-ease),opacity 1.4s ease,transform 1.6s var(--vtm-ease); /* terug (muis weg): 1,6 s */
}
.vtm-reveal:hover .vtm-reveal-text,
.vtm-reveal:focus-within .vtm-reveal-text{
max-height:300px;opacity:1;transform:none;
transition:max-height var(--vtm-t-4) var(--vtm-ease),opacity var(--vtm-t-4) ease .1s,transform var(--vtm-t-4) var(--vtm-ease); /* omhoog (hover): 0,8 s */
}
/* extra dark fade behind the text so white copy stays readable over the photo */
.vtm-reveal .mcb-wrap-background-overlay::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(to top,rgba(8,25,58,.78) 0%,rgba(8,25,58,0) 65%);
opacity:0;transition:opacity var(--vtm-t-4) ease;
}
.vtm-reveal:hover .mcb-wrap-background-overlay::after,
.vtm-reveal:focus-within .mcb-wrap-background-overlay::after{opacity:1;}
@media (hover:none){
.vtm-reveal .vtm-reveal-text{max-height:none;opacity:1;transform:none;}
.vtm-reveal .mcb-wrap-background-overlay::after{opacity:1;}
}
@media (prefers-reduced-motion:reduce){
.vtm-reveal .vtm-reveal-text,
.vtm-reveal .mcb-wrap-background-overlay::after{transition:none;}
}
/* ================================================================================
v1.1.3 — Hero parallax (JS: js/vtm-parallax.js)
The video/photo layer is translated down by 15% of the scroll distance, so it
travels slower than the content. It only ever moves down, and the edge that
opens up at the top stays above the viewport, so no overshoot is needed.
Only active once the script has added .vtm-parallax-on (desktop, no
reduced-motion). Opt out per section with the class vtm-no-parallax.
================================================================================ */
.vtm-parallax-on > .section_video{will-change:transform;}
/* v1.1.4 — card parallax: class `vtm-parallax-card` on a wrap (see js/vtm-parallax.js).
No CSS needed; the script sizes and positions the wrap's background photo. */
/* ================================================================================
v1.1.5 — Header burger only on tablet/mobile
BeTheme's "desktop" breakpoint starts at 1441px; 960–1440px (most laptops) is
"laptop". The burger column only carries `hide-desktop`, so it also showed on
laptops next to the full main menu. The menu columns are hidden below 960px
(hide-tablet + hide-mobile), so hide the burger from 960px up.
Functional fix, hence !important (same as BeTheme's own hide-* helpers).
================================================================================ */
@media (min-width:960px){
.mcb-header-section .column_header_burger{display:none!important;}
}
/* ================================================================================
v1.1.6 — Card shade + trust badge
`vtm-shade` (on a WRAP with a photo): navy gradient from the bottom edge so white
text stays readable. Layered on ::before of the wrap's overlay
(::after is used by vtm-reveal), i.e. on top of BeBuilder's own overlay.
`vtm-badge` (on a TEXT COLUMN): small glass pill, e.g. review score line.
================================================================================ */
.vtm-shade .mcb-wrap-background-overlay::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(to top,rgba(8,25,58,.88) 0%,rgba(8,25,58,.6) 32%,rgba(8,25,58,0) 68%);
}
.vtm-badge .column_attr,
.vtm-badge .mcb-column-inner > p{
display:inline-flex;align-items:center;gap:.5em;
margin:0 0 14px;padding:7px 14px;
font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:#fff;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.3);border-radius:999px;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.vtm-badge .column_attr p{margin:0;}
/* ================================================================================
v1.1.7 — Water background effect (JS: js/vtm-water.js)
Class `vtm-water` on a SECTION without photo/video. Two layers of thin aqua wave
lines drift slowly in opposite directions while bobbing gently; soft light rays
sway behind them. All decorative (aria-hidden, pointer-events none), transform-only
animation, paused off-screen by the script, off for prefers-reduced-motion.
Tuning: line opacity in the two SVG stroke-opacity values, speed = the durations.
================================================================================ */
.vtm-water-on{position:relative;overflow:hidden;isolation:isolate;}
.vtm-water-on > .section_wrapper{position:relative;z-index:1;}
.vtm-water-fx{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
/* fade the whole effect out towards the top and bottom edge, so two vtm-water
sections on top of each other blend instead of showing a hard seam */
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);
}
.vtm-wave{position:absolute;inset:-20px 0;animation:vtmBob 11s ease-in-out infinite alternate;}
.vtm-wave-b{animation-duration:15s;animation-delay:-5s;}
.vtm-wave-drift{position:absolute;top:0;bottom:0;left:0;will-change:transform;}
/* layer A: 1200px tile, drifts left, 90s */
.vtm-wave-a .vtm-wave-drift{
width:calc(100% + 1200px);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200' fill='none' stroke='%2320C4C9' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath stroke-opacity='.16' d='M0 40C150 0 450 80 600 40C750 0 1050 80 1200 40'/%3E%3Cpath stroke-opacity='.11' d='M0 90C150 60 450 120 600 90C750 60 1050 120 1200 90'/%3E%3Cpath stroke-opacity='.07' d='M0 145C150 105 450 185 600 145C750 105 1050 185 1200 145'/%3E%3C/svg%3E") 0 0/1200px 200px repeat;
animation:vtmDriftL 90s linear infinite;
}
/* layer B: 1800px tile, drifts right, 140s, fainter and wider */
.vtm-wave-b .vtm-wave-drift{
width:calc(100% + 1800px);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='260' viewBox='0 0 1800 260' fill='none' stroke='%23FFFFFF' stroke-width='1' stroke-linecap='round'%3E%3Cpath stroke-opacity='.09' d='M0 70C225 20 675 120 900 70C1125 20 1575 120 1800 70'/%3E%3Cpath stroke-opacity='.06' d='M0 160C225 120 675 200 900 160C1125 120 1575 200 1800 160'/%3E%3C/svg%3E") 0 0/1800px 260px repeat;
animation:vtmDriftR 140s linear infinite;
}
@keyframes vtmDriftL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}
@keyframes vtmDriftR{from{transform:translate3d(-1800px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes vtmBob{from{transform:translate3d(0,-9px,0)}to{transform:translate3d(0,9px,0)}}
/* soft light rays from above */
.vtm-rays{
position:absolute;top:0;bottom:0;left:-6%;right:-6%;
background:
linear-gradient(105deg,transparent 18%,rgba(255,255,255,.055) 26%,transparent 36%),
linear-gradient(105deg,transparent 46%,rgba(255,255,255,.04) 55%,transparent 66%),
linear-gradient(105deg,transparent 72%,rgba(32,196,201,.06) 80%,transparent 90%);
-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
animation:vtmRays 24s ease-in-out infinite alternate;will-change:transform;
}
@keyframes vtmRays{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,0,0)}}
.vtm-water-paused .vtm-wave,
.vtm-water-paused .vtm-wave-drift,
.vtm-water-paused .vtm-rays{animation-play-state:paused;}
@media (max-width:767px){ /* lighter on phones: one wave layer, no rays */
.vtm-wave-b,.vtm-rays{display:none;}
}
@media (prefers-reduced-motion:reduce){
.vtm-wave,.vtm-wave-drift,.vtm-rays{animation:none;}
}
/* ================================================================================
v1.1.9 — Caustics (JS: js/vtm-caustics.js)
Class `vtm-caustics` on a SECTION without photo/video. The script draws a low-res
WebGL light net into .vtm-caustics-canvas; here it is placed behind the content,
blended with `screen` (only brightens) and faded out at the top and bottom edge
so stacked sections blend. Tuning: `opacity` = strength.
================================================================================ */
.vtm-caustics-on{position:relative;overflow:hidden;isolation:isolate;}
.vtm-caustics-on > .section_wrapper{position:relative;z-index:1;}
.vtm-caustics-canvas{
position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
mix-blend-mode:screen;opacity:.12;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 160px,#000 calc(100% - 160px),transparent 100%);
}
/* ================================================================================
v1.1.11 — Depth gauge, dive-computer design (JS: js/vtm-depth.js)
Class `vtm-depth` on any section switches it on for that page. A fixed, decorative,
non-interactive instrument on the right edge: 0 m (Oberfläche) to 10 m (Grund = max
depth of the dive site). No box: a gradient line with a fill, per-metre ticks, a dot per
section, the 5 m safety-stop marker, a big readout and the max depth reached. A soft
edgeless vignette behind it keeps it readable on light photos/video.
Wide screens only (the script does not build it below 1360px).
================================================================================ */
.vtm-dg{
--h:clamp(240px,52vh,420px);
position:fixed;right:10px;top:50%;z-index:40;pointer-events:none;
transform:translateY(-50%);
display:flex;flex-direction:column;align-items:flex-end;gap:16px;
font-family:var(--vtm-font-body,"Outfit",sans-serif);color:#fff;
opacity:0;transition:opacity var(--vtm-t-4) ease;
text-shadow:0 1px 8px rgba(4,20,45,.6);
}
.vtm-dg.is-in{opacity:1;}
.vtm-dg::before{ /* edgeless vignette, no visible box */
content:"";position:absolute;z-index:-1;inset:-50px -40px;
/* v1.1.25 2026-09-29: veel lichter op verzoek klant (was .42) — getest tegen zowel de
donkere hero als de lichtste foto's onderaan de pagina, blijft overal leesbaar. */
background:radial-gradient(ellipse 60% 55% at 62% 50%,rgba(4,20,45,.12),rgba(4,20,45,0) 72%);
}
/* readout */
.vtm-dg-read{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-right:6px;}
.vtm-dg-cap{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.75;}
.vtm-dg-val{display:flex;align-items:baseline;gap:4px;line-height:1;}
.vtm-dg-num{font-family:var(--vtm-font-head,"Titan One",serif);font-size:30px;letter-spacing:.01em;}
.vtm-dg-unit{font-size:15px;font-weight:700;color:#6EE6EA;text-shadow:0 1px 6px rgba(4,20,45,.85);}
/* track */
.vtm-dg-track{position:relative;width:1px;height:var(--h);margin-right:26px;}
.vtm-dg-line{position:absolute;top:0;bottom:0;left:0;width:1px;
background:linear-gradient(to bottom,rgba(180,240,242,.8),rgba(255,255,255,.22));}
.vtm-dg-fill{position:absolute;top:0;left:-.5px;width:2px;height:0;border-radius:2px;
background:linear-gradient(to bottom,rgba(32,196,201,0),#20C4C9);
box-shadow:0 0 10px rgba(32,196,201,.55);}
.vtm-dg-ticks{position:absolute;top:0;bottom:0;left:1px;width:6px;
background:repeating-linear-gradient(to bottom,rgba(255,255,255,.65) 0,rgba(255,255,255,.65) 1px,transparent 1px,transparent 10%);
border-bottom:1px solid rgba(255,255,255,.65);}
.vtm-dg-ticks--half{width:3px;
background:repeating-linear-gradient(to bottom,rgba(255,255,255,.32) 0,rgba(255,255,255,.32) 1px,transparent 1px,transparent 5%);
border-bottom:0;}
.vtm-dg-mark{position:absolute;left:12px;transform:translateY(-50%);font-size:11px;font-weight:500;opacity:.8;font-variant-numeric:tabular-nums;}
/* 5 m safety stop */
.vtm-dg-stop{position:absolute;right:12px;transform:translateY(-50%);width:58px;text-align:right;
font-size:8.5px;font-weight:600;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:#7FE3E6;hyphens:manual;}
.vtm-dg-stop::after{content:"";position:absolute;right:-10px;top:50%;width:8px;height:1px;background:#7FE3E6;}
/* one dot per section: hollow until you have passed it */
.vtm-dg-dot{position:absolute;left:0;width:5px;height:5px;border-radius:50%;transform:translate(-50%,-50%);
border:1px solid rgba(255,255,255,.75);background:rgba(10,40,80,.5);transition:background-color var(--vtm-t-2) ease,border-color var(--vtm-t-2) ease;}
.vtm-dg-dot.is-past{background:#fff;border-color:#fff;}
/* current depth: aqua dot with a soft pulse */
.vtm-dg-pin{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);
background:#20C4C9;border:2px solid #fff;box-shadow:0 0 12px rgba(32,196,201,.8);
transition:top var(--vtm-t-2) linear;animation:vtmDgPulse 2.6s ease-out infinite;}
.vtm-dg-fill{transition:height var(--vtm-t-2) linear;}
@keyframes vtmDgPulse{0%{box-shadow:0 0 0 0 rgba(32,196,201,.55),0 0 12px rgba(32,196,201,.8)}
70%{box-shadow:0 0 0 12px rgba(32,196,201,0),0 0 12px rgba(32,196,201,.8)}100%{box-shadow:0 0 0 0 rgba(32,196,201,0),0 0 12px rgba(32,196,201,.8)}}
/* rising bubbles (spawned while scrolling) */
.vtm-dg-bubbles{position:absolute;inset:0;pointer-events:none;}
.vtm-dg-bub{position:absolute;left:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.18);
animation:vtmDgBub 1.7s ease-out forwards;}
@keyframes vtmDgBub{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translate(-50%,var(--rise,-52px)) scale(1.1);opacity:0}}
.vtm-dg-foot{margin-right:6px;font-size:10px;font-weight:500;letter-spacing:.06em;opacity:.65;font-variant-numeric:tabular-nums;}
.vtm-dg-foot b{font-weight:700;}
@media (prefers-reduced-motion:reduce){
.vtm-dg,.vtm-dg-pin,.vtm-dg-fill,.vtm-dg-dot{transition:none;}
.vtm-dg-pin{animation:none;}
}
/* ================================================================================
v1.1.12 — Custom cursor, site-wide (JS: js/vtm-cursor.js)
Only exists on devices with a real mouse (the script does not add anything otherwise).
`html.vtm-cursor-on` hides the native cursor; the map, form fields, the Rox booking app
and anything marked data-cursor="native" keep the normal cursor.
Labels: data-cursor="Text" or class vtm-cursor-ansehen/-buchen/-mehr/-entdecken/-anfragen/-lesen.
================================================================================ */
html.vtm-cursor-on{cursor:none;}
html.vtm-cursor-on :is(a,button,[role="button"],label,summary,.button,[onclick],.vtm-nocursor){cursor:none;}
html.vtm-cursor-on :is(.vtm-map,.maplibregl-map,.rox-appointment-booking-frontend-root,[data-cursor="native"]){cursor:auto;}
html.vtm-cursor-on :is(.vtm-map,.maplibregl-map,.rox-appointment-booking-frontend-root,[data-cursor="native"]) :is(a,button,[role="button"],label,summary,.button){cursor:pointer;}
.vtm-cur{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity var(--vtm-t-2) ease;}
.vtm-cur.is-on{opacity:1;}
.vtm-cur[data-mode="native"]{opacity:0!important;}
/* buitenlaag: alleen de schermpositie (transform via JS); binnenlaag: vorm, grootte en schaal */
.vtm-cur-pos{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;}
.vtm-cur-dot,.vtm-cur-ring{position:absolute;left:0;top:0;translate:-50% -50%;border-radius:50%;}
.vtm-cur-dot{width:8px;height:8px;background:#20C4C9;
box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 1px 8px rgba(4,20,45,.4);
transition:scale var(--vtm-t-2) var(--vtm-ease),opacity var(--vtm-t-2) ease;}
.vtm-cur-ring{--d:34px;width:var(--d);height:var(--d);display:flex;align-items:center;justify-content:center;
border:1.5px solid rgba(255,255,255,.9);
box-shadow:0 0 0 1px rgba(4,20,45,.28),inset 0 0 0 1px rgba(4,20,45,.1);
transition:width var(--vtm-t-2) var(--vtm-ease),height var(--vtm-t-2) var(--vtm-ease),background-color var(--vtm-t-2) ease,border-color var(--vtm-t-2) ease;}
.vtm-cur-label{font-family:var(--vtm-font-body,"Outfit",sans-serif);font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.04em;color:#fff;
opacity:0;scale:.8;transition:opacity var(--vtm-t-2) ease,scale var(--vtm-t-2) var(--vtm-ease);white-space:nowrap;}
/* over links en knoppen: ring groeit en kleurt aqua, de stip verdwijnt */
.vtm-cur[data-mode="hover"] .vtm-cur-ring{--d:54px;background:rgba(32,196,201,.2);border-color:#20C4C9;}
.vtm-cur[data-mode="hover"] .vtm-cur-dot{scale:0;}
/* met label: ring wordt een donkere schijf met tekst */
.vtm-cur[data-mode="label"] .vtm-cur-ring{--d:88px;background:rgba(10,40,80,.82);border-color:rgba(255,255,255,.55);}
.vtm-cur[data-mode="label"] .vtm-cur-label{opacity:1;scale:1;}
.vtm-cur[data-mode="label"] .vtm-cur-dot{scale:0;}
/* klik: een bel "ploft" — een ring zet uit vanaf de klikplek en vervaagt. De cursor zelf beweegt of schaalt niet. */
.vtm-cur-pop{position:absolute;width:46px;height:46px;border-radius:50%;translate:-50% -50%;pointer-events:none;
border:2px solid #20C4C9;background:rgba(32,196,201,.14);box-shadow:0 0 0 1px rgba(255,255,255,.55);
animation:vtmCurPop .6s cubic-bezier(.15,.7,.3,1) forwards;}
@keyframes vtmCurPop{0%{scale:.3;opacity:.95}70%{opacity:.45}100%{scale:1.7;opacity:0}}
.vtm-cur[data-mode="label"] .vtm-cur-pop{border-color:#fff;background:rgba(255,255,255,.12);}
/* ================================================================================
v1.1.13 — Heebo, self-hosted (used by the Rox booking app)
The Rox plugin's CSS pulled Heebo (and Inter, unused) from fonts.googleapis.com, which sent
every visitor's IP address to Google. The Google @import is now stripped (inc/vtm-privacy.php)
and Heebo is served from this theme instead. Variable font, weights 100–900, OFL licence.
================================================================================ */
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;
src:url("fonts/heebo-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;
src:url("fonts/heebo-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ================================================================================
v1.1.15 — Pop-ups (JS: js/vtm-modal.js) + knoppen naast elkaar
Block = class `vtm-modal` + ID; open with a link to #that-id. Without JS the block stays on the page.
Buttons: vtm-btn-primary (aqua, gevuld) · vtm-btn-ghost (omlijnd wit) — on a BeBuilder button (Advanced → Custom → Classes).
Row: class vtm-cta-row on the WRAP that holds the buttons: centers them side by side (wraps on narrow screens).
================================================================================ */
/* `vtm-js` wordt meteen in gezet (functions.php): het blok is dan vanaf de eerste paint verborgen, zonder flits. Zonder JavaScript blijft het gewoon op de pagina staan. */
html.vtm-js .vtm-modal:not(.is-open),.vtm-modal-init:not(.is-open){display:none!important;}
.vtm-modal-overlay{position:fixed;inset:0;z-index:10000;background:rgba(4,20,45,.78);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity var(--vtm-t-2) ease;}
.vtm-modal-overlay[hidden]{display:none;}
.vtm-modal-overlay.is-visible{opacity:1;}
.vtm-modal-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;display:flex;justify-content:center;align-items:flex-start;padding:min(7vh,64px) 16px 40px;box-sizing:border-box;}
.vtm-modal-dialog{position:relative;width:100%;margin:auto 0;outline:none;transform:translateY(18px) scale(.98);opacity:0;
transition:transform var(--vtm-t-2) var(--vtm-ease),opacity var(--vtm-t-2) ease;}
.vtm-modal-overlay.is-visible .vtm-modal-dialog{transform:none;opacity:1;}
.vtm-modal-body{position:relative;}
/* vangnet, alleen voor "brede" pop-ups (vtm-modal-wide, zoals de Rox-boekingswidget): een eigen
ondoorzichtige achtergrond, zodat de pop-up nooit "doorzichtig" oogt — ook niet als het geopende blok
zelf op dat moment (nog) geen eigen achtergrond tekent (bijv. terwijl Rox opnieuw laadt). Rox' eigen
witte kaart (.service-layout) tekent hier gewoon overheen. Smalle pop-ups (bijv. de Kurs-Finder) blijven
bewust "glas" zonder deze achtergrond, want die hebben hun eigen doorschijnende kaart. */
.vtm-modal-dialog:has(.vtm-modal-wide){background:#fff;border-radius:25px;min-height:200px;box-shadow:0 30px 60px -28px rgba(4,20,45,.55);overflow:hidden;}
/* BeTheme geeft de column-inner van een module een standaard buitenmarge (voor de ruimte tussen
blokken in de normale paginaflow: 0 12px 40px). Binnen een pop-up hoort de inhoud strak tegen de
randen van onze eigen witte kaart aan te sluiten, dus die marge wordt hier geneutraliseerd — anders
ontstaat een scheve, asymmetrische rand (zichtbaar geworden zodra de kaart hierboven een eigen
ondoorzichtige achtergrond kreeg). */
.vtm-modal-body .mcb-column-inner{margin:0!important;}
.vtm-modal-body > .vtm-modal{display:block!important;margin-left:auto;margin-right:auto;}
/* Vangnet-melding (js/vtm-modal.js): ligt bovenop een lege .vtm-modal-body zolang een "brede" pop-up
(Rox) nog niets heeft laten zien. Verdwijnt vanzelf zodra er inhoud verschijnt. */
.vtm-modal-fallback{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
padding:40px;text-align:center;background:#fff;border-radius:inherit;}
.vtm-modal-fallback[hidden]{display:none;}
.vtm-modal-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(10,40,80,.15);border-top-color:#20C4C9;animation:vtmModalSpin .8s linear infinite;}
.vtm-modal-fallback.is-error .vtm-modal-spin{display:none;}
.vtm-modal-fallback-text{margin:0;max-width:360px;font-family:var(--vtm-font-body,"Outfit",sans-serif);font-size:15px;line-height:1.5;color:#5B6B78;}
.vtm-modal-fallback.is-error .vtm-modal-fallback-text{color:#0A2850;font-weight:600;}
@keyframes vtmModalSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.vtm-modal-spin{animation-duration:1.6s;}}
.vtm-modal-close{position:absolute;top:-6px;right:-6px;z-index:5;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);
display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(10,40,80,.85);cursor:pointer;
box-shadow:0 8px 22px -8px rgba(4,20,45,.8);transition:background-color var(--vtm-t-1) ease,transform var(--vtm-t-1) ease;}
.vtm-modal-close:hover{background:#20C4C9;color:#0A2850;transform:scale(1.06);}
.vtm-modal-close:focus-visible{outline:2px solid #7FE3E6;outline-offset:3px;}
html.vtm-modal-open{overflow:hidden;padding-right:var(--vtm-sbw,0px);}
/* meldingen van het boekingsformulier (Ant Design) moeten boven de pop-up blijven */
body > .ant-message,body > .ant-notification{z-index:20000!important;}
@media (max-width:640px){
.vtm-modal-scroll{padding:56px 10px 24px;}
.vtm-modal-close{top:-46px;right:2px;}
}
@media (prefers-reduced-motion:reduce){
.vtm-modal-overlay,.vtm-modal-dialog{transition:none;}
.vtm-modal-dialog{transform:none;}
}
/* twee knoppen naast elkaar */
.vtm-cta-row .mcb-wrap-inner{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 16px;}
.vtm-cta-row .mcb-wrap-inner > .column{width:auto!important;flex:0 0 auto;margin:0!important;}
a.vtm-btn-primary,.vtm-btn-primary a,
a.vtm-btn-ghost,.vtm-btn-ghost a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 30px;border-radius:999px;
font-family:var(--vtm-font-body,"Outfit",sans-serif);font-size:17px;font-weight:700;letter-spacing:-.005em;line-height:1.2;text-decoration:none;
transition:background-color var(--vtm-t-2) ease,color var(--vtm-t-2) ease,border-color var(--vtm-t-2) ease,transform var(--vtm-t-2) var(--vtm-ease),box-shadow var(--vtm-t-2) ease;}
a.vtm-btn-primary,.vtm-btn-primary a{background:#20C4C9;color:#0A2850;border:1.5px solid #20C4C9;box-shadow:0 12px 26px -12px rgba(32,196,201,.9);}
a.vtm-btn-primary:hover,.vtm-btn-primary a:hover{background:#7FE3E6;border-color:#7FE3E6;color:#0A2850;transform:translateY(-2px);}
a.vtm-btn-ghost,.vtm-btn-ghost a{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
a.vtm-btn-ghost:hover,.vtm-btn-ghost a:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;transform:translateY(-2px);}
/* ================================================================================
v1.1.16 2026-09-27 Contactformulier: privacy-akkoord-vakje (DSGVO), CF7-form
post 2530. `currentColor` voor de rand zodat hij vanzelf meekleurt op zowel
lichte als donkere secties (geen aparte varianten nodig). !important nodig om
BeTheme's eigen Options-CSS voor checkboxes te verslaan (zelfde patroon als
v1.0.1). BeTheme schakelt de verstuur-knop zelf uit zolang het vakje niet is
aangevinkt (disabled-state hieronder subtiel zichtbaar gemaakt i.p.v.
onveranderd/verwarrend).
================================================================================ */
.wpcf7-acceptance{display:block;margin:4px 0 22px;}
.wpcf7-acceptance .wpcf7-list-item{margin:0;}
.wpcf7-acceptance label{display:flex;align-items:flex-start;gap:11px;font-size:.92rem;line-height:1.5;cursor:pointer;color:inherit;}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]{appearance:none!important;-webkit-appearance:none!important;
flex:0 0 21px;width:21px!important;height:21px!important;margin-top:2px;
border:2px solid currentColor!important;border-radius:6px!important;background:transparent!important;color:inherit!important;
cursor:pointer;position:relative;transition:background-color var(--vtm-t-1) ease,border-color var(--vtm-t-1) ease,transform .1s ease;}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:hover{border-color:var(--vtm-aqua)!important;}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked{background:var(--vtm-aqua)!important;border-color:var(--vtm-aqua)!important;}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked:active{transform:scale(.92);}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
border:solid var(--vtm-navy);border-width:0 2px 2px 0;transform:rotate(45deg);}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:focus-visible{outline:none!important;box-shadow:var(--vtm-focus)!important;}
.wpcf7-acceptance a{color:inherit;text-decoration:underline;text-decoration-color:var(--vtm-aqua);text-underline-offset:2px;}
.wpcf7-acceptance a:hover{color:var(--vtm-aqua);}
.wpcf7-form input[type="submit"][disabled]{opacity:.4;cursor:not-allowed;}
/* ================================================================================
v1.1.17 2026-09-27 Verzendicoon op de "Absenden"-knop (CF7). Een kan geen kind-elementen bevatten, dus het icoon gaat als
achtergrondafbeelding (SVG) rechts in de knop — wit, zelfde kleur als de
knoptekst. Extra padding-rechts maakt er ruimte voor.
v1.1.18 2026-09-27 Vriendelijker icoon: gevuld rond vliegtuigje i.p.v. het
dunne lijn-pijltje — zelfde "versturen"-gedachte, zachter/warmer beeld.
v1.1.19 2026-09-27 Icoon naar links verplaatst (voor de tekst i.p.v. erna).
v1.1.20 2026-09-27 Ruimte gecorrigeerd: met alleen een grotere linker-padding
kwam de tekst tegen het icoon aan te "kleven" met een groot leeg gat rechts
(tekst bleef immers gewoon gecentreerd in de knop, dus icoon+tekst samen
schoven links). Nu weer symmetrische padding zodat de tekst net als vóór het
icoon mooi in het midden staat; het icoon is een vast ingedeeld accent aan de
linkerkant met een strakke, gelijkmatige afstand tot de tekst.
v1.1.21 2026-09-27 Nog steeds links overwicht (tekst wordt gecentreerd in de
HELE knop, maar telt het icoon niet mee — icoon+tekst sámen stonden daardoor
alsnog ~15px links van het echte midden). Nu asymmetrische padding (meer links,
minder rechts, zelfde totaal) + icoon verder naar rechts, zodat het icoon+tekst
samen als geheel gecentreerd staan i.p.v. alleen de tekst.
================================================================================ */
.wpcf7-form input[type="submit"]{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3.4 20.6l17.5-8.4c.8-.4.8-1.5 0-1.9L3.4 1.9c-.7-.4-1.6.2-1.5 1l1.4 7 10 1.5-10 1.5-1.4 7c-.1.8.8 1.4 1.5 1z'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;
background-position:left 32px center!important;
background-size:17px 17px!important;
padding:20px 32px 20px 60px!important;
}
/* ================================================================================
v1.1.22 2026-09-27 Reviewkaarten homepage ("Was unsere lieben Gäste sagen!"):
gelijke hoogte + groter lettertype. BeTheme's eigen elementen (blockquote +
progress_icons hergebruikt als sterren), geen eigen vtm-klasse nodig — dit
patroon (one-third-kolom met blockquote + progress_icons) komt alleen bij
reviewkaarten voor, dus scoping via :has() i.p.v. een broze sectie-ID.
- Rij van kaarten wordt flex zodat ze elkaars hoogte volgen (was: hoogte volgde
alleen de eigen tekstlengte, dus een korte review gaf een kort, "kaal" kaartje
naast langere buren).
- Binnen elke kaart: blockquote-kolom groeit mee, sterren blijven onderaan
"geankerd" i.p.v. ergens halverwege te eindigen.
- Reviewtekst van 14px naar 16px (was fors kleiner dan de rest van de site).
================================================================================ */
.section_wrapper:has(.column_blockquote){display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;}
.mcb-wrap.one-third:has(.column_blockquote):has(.column_progress_icons){display:flex!important;}
.mcb-wrap-inner:has(> .column_blockquote):has(> .column_progress_icons){
display:flex!important;flex-direction:column!important;width:100%;padding-bottom:25px!important;
}
.column_blockquote:has(+ .column_progress_icons){flex:1 1 auto!important;}
.mcb-wrap-inner:has(> .column_blockquote) blockquote{font-size:16px!important;line-height:1.6!important;}
.mcb-wrap-inner:has(> .column_blockquote) .progress_icons{margin-top:16px;}
a.vtm-btn-primary:focus-visible,.vtm-btn-primary a:focus-visible,a.vtm-btn-ghost:focus-visible,.vtm-btn-ghost a:focus-visible{outline:2px solid #7FE3E6;outline-offset:3px;}
/* ================================================================================
v1.1.23 2026-09-27 Footer-links: leesbaarheid + rustiger uiterlijk. De
algemene link-stijl (`.column_column a` — voor gewone lichte tekstblokken,
permanente aqua-onderstreping, navy bij hover) gold óók in de footer, want de
footer-tekst zit ook in `.column_column`-elementen. Op de donkere footer-
achtergrond werd "navy bij hover" onleesbaar (navy op navy). Los van de bug
vond de klant de permanente aqua-onderstreping in de footer ook niet mooi.
Nu, gescoped op het footer-template zelf (`#mfn-footer-template`, BeTheme's
eigen stabiele ID voor een Footer Builder-template — dus geen broze hash):
standaard géén onderstreping, bij hover alleen een kleurverandering naar aqua
(geen onderstreping — op verzoek klant, past beter bij losse lijst-links dan
bij lopende tekst). Geldt ook voor de social-iconen (Font Awesome-iconen
kleuren via `color`, dus deze regel werkt daar automatisch in mee).
================================================================================ */
#mfn-footer-template a:not(.button):not(.logo-wrapper){text-decoration:none;transition:color var(--vtm-t-1) ease;}
#mfn-footer-template a:not(.button):not(.logo-wrapper):hover{color:var(--vtm-aqua);}
/* ================================================================================
v1.1.24 2026-09-29 "Kurs Buchen" / "Kurs Finder"-knoppen (homepage, boven de
cursusrij): hetzelfde premium hover-gevoel als de kaarten eronder (zachte aqua
gloed + optillen) + een aangescherpte hiërarchie (Kurs Buchen = hoofdactie,
groter en met een zachte "ademende" gloed in rust; Kurs Finder = bewust
rustiger/kleiner, geen gloed) + karakter op de iconen bij hover (kalender
"tikt", vergrootglas "wiebelt" alsof het zoekt). Gescoped op de href's, dus
raakt alleen déze 2 knoppen. Native BeTheme-knoppen (Options-gestuurd), bewust
GEEN Code-element — klant kan label/link gewoon zelf in BeBuilder aanpassen,
dit is alleen een visuele laag erbovenop.
================================================================================ */
a[href="#kurs-buchen"],a[href="#kurs-finder"]{
transition:transform var(--vtm-t-2) var(--vtm-ease),box-shadow var(--vtm-t-2) var(--vtm-ease),border-color var(--vtm-t-2) var(--vtm-ease)!important;
}
a[href="#kurs-buchen"] .button_icon i,a[href="#kurs-finder"] .button_icon i{display:inline-block;}
@keyframes vtmCtaBreathe{
0%,100%{box-shadow:0 0 0 0 rgba(32,196,201,0);}
50%{box-shadow:0 0 24px 2px rgba(32,196,201,.25);}
}
a.button[href="#kurs-buchen"]{padding:28px 84px!important;animation:vtmCtaBreathe 3.2s ease-in-out 1.5s 3;} /* v1.4.3: 3 keer, daarna rust (was oneindig) */
a.button[href="#kurs-buchen"]:hover{
transform:translateY(-3px);
box-shadow:0 0 0 1px rgba(127,227,230,.55),0 0 40px 6px rgba(32,196,201,.5)!important;
animation-play-state:paused;
}
@keyframes vtmIconTick{
0%{transform:scale(1) rotate(0deg);}
40%{transform:scale(1.25) rotate(-10deg);}
70%{transform:scale(.94) rotate(5deg);}
100%{transform:scale(1.08) rotate(0deg);}
}
a.button[href="#kurs-buchen"]:hover .button_icon i{animation:vtmIconTick .5s var(--vtm-ease) both;}
/* v1.1.58: de regels hierboven voor #kurs-buchen gelden nu alleen voor BeBuilder-knoppen (`a.button`); anders pakten ze ook de nieuwe
`.vtm-c-btn`-knoppen op de cursuspagina's (grote opvulling + gloed). */
a[href="#kurs-finder"]{padding:18px 60px!important;}
a[href="#kurs-finder"]:hover{
transform:translateY(-2px);
border-color:rgba(127,227,230,.7)!important;
}
@keyframes vtmIconWiggle{
0%,100%{transform:rotate(0deg);}
25%{transform:rotate(-14deg);}
75%{transform:rotate(14deg);}
}
a[href="#kurs-finder"]:hover .button_icon i{animation:vtmIconWiggle .4s ease-in-out;}
@media (prefers-reduced-motion:reduce){
a.button[href="#kurs-buchen"]{animation:none;}
a.button[href="#kurs-buchen"]:hover .button_icon i,a[href="#kurs-finder"]:hover .button_icon i{animation:none;}
}
/* ================================================================================
v1.1.26 2026-09-29 Hoofdmenu-redesign "Surface Tension" — sticky menu (nieuw
gedrag) + frosted-glass scroll-overgang + aqua ripple-underline bij hover +
logo dat meekrimpt + premium gloed op de Tauchshop-knop. Mikt op de ECHTE,
huidige header-structuur (Header Builder: #mfn-header-template / .mfn-menu-link
/ .logo-wrapper) — NIET op sectie 7 hierboven (#Top_bar / .is-sticky). Dat oude
blok is dode code: het mikt op BeTheme's klassieke Header 1-systeem, dat deze
site niet meer gebruikt sinds de overstap naar een eigen Header Builder-
template (post 2484 "VTM Header"). (Inmiddels verwijderd, zie v1.1.27.)
Vóór deze wijziging bleef het menu NERGENS op de site vastzitten tijdens
scrollen (position:absolute, scrollt gewoon mee weg) — klant koos expliciet
voor een echt sticky menu als onderdeel van deze optie (bevestigd i.p.v.
aangenomen). JS (js/vtm-header.js) zet alleen een CSS-variabele (--vtm-hs,
0→1 over de eerste 70px scroll); alle visuele opbouw (achtergrond, blur,
schaduw, logo-schaal) gebeurt hier in CSS — zelfde aanpak als het
fotokaarten-parallax-scriptje (nooit dezelfde property vanuit JS én
CSS:hover laten sturen, zie v3-les hierboven bij de fotokaarten).
Bijvangst 1: BeTheme's eigen binnen de header-builder-content
heeft standaard een witte achtergrond (normaal onzichtbaar, want de header
scrolt toch weg) — die overschildert zodra de header vastzit de nieuwe
navy/blur-laag hieronder. Naar transparant gezet.
Bijvangst 2: de --vtm-hs-overgang (transparant→navy) is alleen mooi op de
homepage, die een donkere hero-foto achter de header heeft. Op binnen-
pagina's (geen hero) gaf een transparante starttoestand grijze menutekst
op een lichte achtergrond — bijna onleesbaar, en dat viel nu veel meer op
omdat de header niet meer wegscrolt. Daarom: alleen `body.home` krijgt de
scroll-overgang, alle andere pagina's krijgen meteen een vaste navy balk.
================================================================================ */
#mfn-header-template.mfn-header-tmpl-absolute{
position:fixed!important;
top:0;left:0;right:0;
z-index:999;
}
/* v1.1.31 bugfix: de header-achtergrond (incl. backdrop-filter) stond eerst
rechtstreeks OP #mfn-header-template zelf. De Tauchschule-dropdown zit
daar als kind IN — en een element met backdrop-filter binnen een ouder
die zelf óók backdrop-filter heeft, blokkeert elkaars blur (bevestigd
live: de dropdown-blur deed niets zolang de header zijn eigen
backdrop-filter had, en werkte meteen zodra die tijdelijk verwijderd
werd). Fix: de achtergrond + blur naar een eigen `::before`-laag
verplaatst. **v1.1.38: deze volle-breedte `::before`-laag is inmiddels
VERVANGEN door `.section_wrapper::before` (zie de v1.1.38-toelichting
verderop) — die krimpt mee met de pil-vorm, zodat er nooit meer een
moment is met een volle-breedte donkere balk. Hier bewust niets meer
gedefinieerd (geen dode regels achterlaten). */
#mfn-header-template .mfn-header-tmpl-builder > .section.mfn-default-section{
background:transparent!important;
}
/* v1.1.43 2026-09-30 Klant, met screenshot: "gekke lijn door de volledige
breedte van de site" in de compacte staat. Oorzaak: alleen de PIL zelf
(`.section_wrapper::before`) heeft ooit een achtergrond gehad — de rest
van de volle-breedte header-doos (de ~38px erboven/errond, waar het
logo-badge overheen "zweeft") is altijd transparant gebleven, met opzet,
voor het "zwevende pil"-gevoel. Bij een korte hero bovenaan de pagina
viel dat niet op (rustige, egale onderwaterfoto), maar verderop in de
pagina scrollt de ECHTE paginainhoud gewoon door dat transparante gat
heen — en zodra daar toevallig een harde kleurgrens tussen 2 secties
voorbijkomt, lijkt dat een rechte lijn dwars over de site. Geen bug in
1 sectie, maar een gat in het header-ontwerp zelf dat op ELKE lange
pagina kan optreden.
Eerste poging (`background:rgba(10,40,80,.5)!important`, vlak, geen
gradient) loste de lijn wel op maar klant meldde meteen daarna, met
screenshot: "nu zit er op de volledige breedte een balk, dit is ook
niet de bedoeling" — een vlakke vulling met scherpe boven-/onderrand
op de volle 115px hoogte van de header-doos oogde zelf als een
duidelijk herkenbaar rechthoekig blok, met een even harde rand als het
probleem dat het moest oplossen (alleen nu permanent zichtbaar i.p.v.
alleen bij toevallige sectie-overgangen).
Definitieve fix: een verticale gradient i.p.v. een vlakke kleur — begint
transparant aan de boven- én onderrand van de doos (dus GEEN scherpe
randovergang meer, nergens), bouwt op naar een lichte tint (.22,
beduidend subtieler dan de eerste .5-poging) in het middengedeelte waar
de pil zit. Getest op meerdere scrolldieptes (700/1200/1800/3000): geen
zichtbare naad meer, en oogt niet meer als een toegevoegd blok. */
/* v1.1.46 (2026-10-02): de volle-breedte gradient hieronder (v1.1.43) is
VERWIJDERD — klant: "de rare afbrekende verloop achter het menu over de
volledige breedte van de website weghalen". De header-doos eromheen is
dus weer volledig transparant (alleen de pil zelf heeft een achtergrond).
Bekend risico (zie v1.1.43): op lange pagina's kan een harde sectie-
overgang die toevallig door het transparante gat achter de header
voorbijscrolt als een lijn zichtbaar zijn — dat was de reden voor de
gradient. Komt dat terug, dan niet opnieuw een volle-breedte vlak/gradient
gebruiken (dat gaf een balk resp. een afbrekend verloop), maar bv. de
sectie-overgangen zelf zacht maken. */
/* v1.1.48: de losse Tauchshop-bubbel staat 20px rechts naast de pil. Pil-
buitenbreedte = 744 + 2×28 = 800 → halve breedte 400 → bubbel-links =
50% + 400 + 20 = 50% + 420px. Met !important zodat dit ongeacht de
geplakte Code-element-versie (die zelf `left:calc(50% + 506px)` heeft,
passend bij de oude pilbreedte 972px) klopt. Bij een volgende
pilbreedte-wijziging DIT getal mee aanpassen. */
#mfn-header-template.vtm-header-compact .vtm-shop-pill{
left:calc(50% + 430.5px)!important;
}
/* v1.1.47 (2026-10-02): ECHTE oorzaak van het "rare afbrekende verloop op
volle breedte" gevonden. Het was NIET de eigen gradient (v1.1.43, al weg),
maar BeBuilder's eigen achtergrond-overlay van de header-sectie
(`.mcb-header-section > .mcb-background-overlay`, ingesteld in de
Header Builder): `linear-gradient(0deg, transparent 30%, rgba(0,0,0,.145)
100%)`, volle breedte. In rust (hoogte ~115px) is dat een onopvallende
donkere waas boven de hero; in de compacte staat start de sectie door de
pil-marge pas op y=38px — en dan eindigt die overlay daar abrupt in een
harde bovenrand, een band over de hele breedte. Fix: in de compacte staat
faden we die overlay uit (rust-staat blijft ongewijzigd). */
#mfn-header-template .mcb-header-section > .mcb-background-overlay{
transition:opacity var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template.vtm-header-compact .mcb-header-section > .mcb-background-overlay{
opacity:0;
}
/* v1.1.39: was continu `scale(calc(1 - var(--vtm-hs)*.14))` — samen met de
rest omgezet naar een binaire klasse-schakelaar (zie de toelichting
verderop bij de pil), dus nu gewoon vaste schaal 1 in rust; de compacte
badge-vorm (verderop) neemt het over zodra `vtm-header-compact` actief
is. */
#mfn-header-template .logo-wrapper{
display:inline-block;
transform:scale(1);
transform-origin:left center;
}
#mfn-header-template .mfn-menu-link{position:relative;color:#fff!important;text-decoration:none!important;}
/* v1.1.28 bugfix: de regel hierboven raakte ook de Tauchschule-dropdown —
dat paneel (.mfn-submenu) heeft een witte achtergrond, dus wit-op-wit was
onleesbaar (klant meldde: "dropdown opent, maar ik zie geen teksten
staan"). Terug naar de oorspronkelijke navy tekstkleur binnen het paneel
(bevestigd via de computed style vóórdat de v1.1.26-regel er was:
rgb(10,40,80) = --vtm-navy). */
#mfn-header-template .mfn-submenu .mfn-menu-link{color:var(--vtm-navy)!important;}
/* v1.1.29 bugfix: "oude underline nog zichtbaar" bij hover op de hoofditems —
zelfde terugkerende sitewide bug als eerder bij footer/kurskiezer/kaarten:
BeTheme's eigen kern-CSS (be.css) heeft een generieke `a:hover{text-
decoration:underline}`, die hier gewoon meekwam naast onze eigen aqua
::after-lijn (2 lijnen tegelijk i.p.v. 1). text-decoration:none erbovenop
de bestaande regel gezet i.p.v. een aparte regel, om precies dezelfde
selector-specificiteit/plek in de cascade te houden.
Bijvangst op verzoek klant (2026-09-29): dropdown-paneel (.mfn-submenu)
van solide wit naar frosted-glass — zelfde materiaal-taal als de header
zelf, i.p.v. een plat wit vlak dat los staat van het "Surface Tension"-
concept.
v1.1.42 2026-09-30 TERUG naar solide wit (klant: "hoofdmenu minder
zwaar maken, minder animaties"). `backdrop-filter` is een van de duurdere
CSS-eigenschappen (de browser moet continu alles ERACHTER opnieuw
samplen/vervagen) — nu op 3 plekken in de header gebruikt (dit paneel,
de hoofdpil, de Tauchshop-knop), allemaal verwijderd in deze pas. Zie
ook v1.1.41-blok verderop (druppel-animatie volledig verwijderd) en
`Claude/vtm-shop-button-v6.html` (ademende gloed + blur van de knop af). */
#mfn-header-template .mfn-submenu{
background:#fff!important;
box-shadow:0 10px 30px rgba(1,7,39,.18);
}
#mfn-header-template .mfn-menu-link::after{
content:"";
position:absolute;left:0;right:0;bottom:-4px;height:2px;
background:var(--vtm-aqua);
transform:scaleX(0);transform-origin:center;
transition:transform var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template .mfn-menu-link:hover::after{transform:scaleX(1);}
/* v1.1.30 bugfix: klant zag TWEE lijnen tegelijk bij hover (screenshot).
Oorzaak: het menu heeft BeTheme's eigen ingebouwde hover-animatie actief
(Options-klasse `mfn-menu-animation-text-toggle-line-bottom` op de
menu-wrapper) — die tekent via `.label-wrapper::before` een eigen
lichtblauwgrijze lijn, los van en bovenop onze aqua ::after-ripple. Native
lijn uitgezet, onze eigen ripple blijft de enige indicator. */
#mfn-header-template .mfn-menu-link .label-wrapper::before{content:none!important;}
/* Tauchshop-knop (los bovenblok, staat NIET in #mfn-header-template zelf) —
zelfde premium-gloedtaal als de Kurs Buchen/Finder-knoppen (v1.1.24). */
.mfn-header-icon-box:has(.desc-wrapper){
transition:transform var(--vtm-t-2) var(--vtm-ease);
animation:vtmShopBreathe 3.4s ease-in-out infinite;
}
@keyframes vtmShopBreathe{
0%,100%{box-shadow:0 0 0 0 rgba(32,196,201,0);}
50%{box-shadow:0 0 20px 2px rgba(32,196,201,.22);}
}
.mfn-header-icon-box:has(.desc-wrapper):hover{
transform:translateY(-2px);
box-shadow:0 0 0 1px rgba(127,227,230,.5),0 0 28px 4px rgba(32,196,201,.4)!important;
animation-play-state:paused;
}
/* ================================================================================
v1.1.32 2026-09-30 Compacte "pil"-vorm bij scrollen — optie 2 uit de 3
hoofdmenu-mockups (klant koos "Floating Pill", met 2 aanpassingen: kleiner,
en alle 6 hoofditems moeten erin blijven passen — Tauchschule, Tauchbasis,
Tauchclub, Service, Über uns, Kontakt, niet slechts een selectie zoals in
de eerste ruwe mockup). Bouwt voort op de bestaande sticky/frosted header
(v1.1.26): voorbij dezelfde 70px-scroldrempel trekt de volle-breedte balk
zich samen tot een smallere, afgeronde capsule, met het logo als los rond
badge dat over de bovenrand heen "zweeft". Klasse `vtm-header-compact`
wordt gezet door js/vtm-header.js op die 70px-drempel (zelfde moment als
--vtm-hs volledig op 1 staat).
v1.1.38 (2026-09-30) probeerde dit op te lossen door de pil-vorm óók
`calc(var(--vtm-hs))`-gestuurd te maken (continu aan de scrollpositie
gekoppeld, net als de achtergrond) — dat loste de desync inderdaad op,
maar klant wees terecht op een NIEUW probleem: bij continu aan scroll
gekoppelde waarden kan de gebruiker gewoon stoppen met scrollen op willekeurig
welk punt tussen 0 en 70px, en dan blijft de header voor altijd in die
TUSSENSTAND hangen (half breed, half rond, half doorzichtig) — niet meer
"kapot", maar ook niet meer een nette aan/uit-schakelaar.
v1.1.39 (2026-09-30) — klant: "of de pil is actief of simpelweg niet en je
hebt de basis hoofdmenu stijl" — dus geen tussenstanden meer, punt. Terug
naar een pure klasse-schakelaar (`vtm-header-compact`, binair: alleen y=0
of y=70, nooit ertussenin), maar dit keer met ALLE eigenschappen — vorm
ÉN achtergrond/blur — op DEZELFDE gedeelde transition-duur (400ms). Dat is
het eigenlijke lek van vóór v1.1.38: niet "klasse+transition is fout",
maar "twee verschillende tijdmodellen door elkaar" (continu vs. klasse-
transition, met bovendien twee verschillende transition-duurs). Nu: alles
bepaald door één klasse, alles met identieke duur, dus alles komt altijd
samen aan bij de eindstand — en rust ALTIJD in óf de basisstijl óf de
volledige pil, nooit ertussenin, ongeacht waar je stopt met scrollen.
`--vtm-hs` (de continue variabele) is hiermee overbodig geworden en uit
js/vtm-header.js gehaald — alleen nog de klasse-toggle op de 70px-drempel.
Techniek voor de breedte: de rij (`.section_wrapper`) kan niet vloeiend
animeren naar een "fit-content"-breedte (browsers interpoleren niet naar/
vanaf 'auto'/'fit-content') — daarom een expliciete `max-width` in beide
standen (1220px rust / 920px compact, ruim boven de gemeten intrinsieke
breedte van ~899px met alle 6 items) die wél soepel transitioned. Dropdown-
tekst (`.mfn-submenu`) bewust NIET meegenomen in de kleinere font-size —
blijft op normale leesgrootte, alleen de bovenbalk compacter. */
#mfn-header-template .section.mfn-default-section{
transition:padding var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template.vtm-header-compact .section.mfn-default-section{
padding-top:0;padding-bottom:14px;
}
#mfn-header-template .section_wrapper{
position:relative;
max-width:1220px;
padding:0;
margin-top:0;
border-radius:0;
transition:max-width var(--vtm-t-3) var(--vtm-ease),
padding var(--vtm-t-3) var(--vtm-ease),
margin-top var(--vtm-t-3) var(--vtm-ease),
border-radius var(--vtm-t-3) var(--vtm-ease);
}
/* v1.1.40 2026-09-30 Klant: pil (en de losse Tauchshop-bubbel, zie het
Code-element) allebei wat hoger. Verticale padding 8px→14px (was
51,5px hoog, wordt ~63-64px) — border-radius blijft 50px (nog steeds
ruim boven de helft van de nieuwe hoogte, dus nog steeds volledig rond
afgeronde uiteinden). margin-top ongewijzigd, de pil groeit dus naar
beneden toe. */
#mfn-header-template.vtm-header-compact .section_wrapper{
/* v1.1.48 (2026-10-02): klant — te veel leegruimte aan de buitenkanten
binnenin de pil, menu iets verder van het logo, pil minder breed.
Gemeten: de 2 menugroepen waren 412px breed (flex:1 1 0) voor 299px
(links) resp. 231px (rechts) aan echte links, dus 108/202px lege ruimte
aan de buitenzijden. max-width 920→744 (= 2 × ~308px kleinste
groepsbreedte [min-width:max-content, anders breken de links af naar 2
regels] + 2 × 64px logo-ruimte), zijpadding 26→28, en de ruimte
tussen menu en logo 48→64px per kant. De rechtergroep is inherent
~68px smaller dan de linker (kortere woorden), dus rechts blijft iets
meer buitenruimte dan links — gelijk trekken kan alleen met ongelijke
linkafstanden, dat is lelijker. De Tauchshop-bubbel volgt de nieuwe
pilbreedte via een eigen `left` (zie hieronder), onafhankelijk van welke
versie van het Code-element de klant geplakt heeft.
v1.1.50 (2026-10-02): optisch afgestemd na 12 visuele varianten (zie
de v1.1.50-toelichting bij `.mfn-header-menu` hieronder): max-width
747px, zijpadding 23px, ruimte menu↔logo 57,7px → buitenbreedte ≈ 793px. */
max-width:771px;
padding:14px 25px;
margin-top:38px;
border-radius:50px;
}
/* v1.1.42: `backdrop-filter` (frosted-glass) hier verwijderd — zie de
v1.1.42-toelichting bij `.mfn-submenu` hierboven. De compacte staat op de
homepage gaat van "matglas over de hero" naar gewoon een effen, bijna
ondoorzichtige navy — geen vervaging meer nodig, en dat is meteen ook
consistent met hoe binnenpagina's (`body:not(.home)`) al werkten: die
hadden nooit blur, alleen een effen kleur. */
#mfn-header-template .section_wrapper::before{
content:"";
position:absolute;inset:0;z-index:-1;
border-radius:inherit;
pointer-events:none;
transition:background-color var(--vtm-t-3) var(--vtm-ease),
box-shadow var(--vtm-t-3) var(--vtm-ease);
}
body.home #mfn-header-template .section_wrapper::before{
background:transparent;
box-shadow:0 0 0 rgba(1,7,39,0);
}
body.home #mfn-header-template.vtm-header-compact .section_wrapper::before{
background:rgba(10,40,80,.985);
box-shadow:0 10px 28px rgba(1,7,39,.4);
}
body:not(.home) #mfn-header-template .section_wrapper::before{
background:var(--vtm-navy);
box-shadow:0 10px 28px rgba(1,7,39,.4);
}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap{
flex:0 0 auto;width:auto;
}
/* v1.1.33: het logo hing eerst op zijn natuurlijke flex-plek tussen de 2
menu-groepen — die zijn ongelijk breed, dus het logo kwam niet op het
echte midden van de pil uit. Losgemaakt uit de flex-rij, apart
gecentreerd op de pil zelf (zie de `:nth-child(2)`-regel verderop).
Vervolgbugs bij het testen: (1) het logo viel eerst buiten beeld (te
weinig ruimte boven de pil — `.section_wrapper` kreeg meer marge,
10px→38px). (2) `display:flex` (nodig om de afbeelding te centreren
binnenin) brak de centrering van het logo BINNEN zijn eigen kolom (kwam
eerst van `display:inline-block` + de ouders `text-align:center`) — fix:
`margin:0 auto` op `.logo-wrapper` (zie verderop).
v1.1.34/35, ECHTE bugfix (klant meldde 2x, terecht: "dit ziet er nog
steeds niet uit"): v1.1.34's `justify-content:center` centreerde alleen
de BUITENRANDEN van de 2 menu-groepen samen als 1 blok — niet het
zichtbare GAT ertussen (waar het logo zit). Bij ongelijk brede groepen
(hier: rechts ~88px breder dan links) liggen die twee dingen niet op
dezelfde plek: het blok-midden was toevallig gelijk aan de doos-breedte-
midden (beide 720px, meetbaar maar misleidend — vandaar dat mijn eerdere
"geverifieerd"-melding het echte probleem miste), maar het WERKELIJKE gat
tussen "Tauchclub" en "Service" zat 43,8px daar vandaan. **Les: bij het
verifiëren van "is X gecentreerd tussen A en B", altijd de afstand tussen
de A/B-RANDEN zelf meten (`A.right` en `B.left`), nooit de buitenste
randen van het hele blok — die twee metingen zijn met ongelijke
deelbreedtes NIET hetzelfde, ook al lijkt het zo.**
Robuuste fix: de 2 menu-groepen krijgen elk `flex:1 1 0` (gelijk aandeel
van de resterende ruimte, ongeacht hun eigen tekstbreedte) + interne
uitlijning naar de buitenkant (links rechts uitgelijnd, rechts links
uitgelijnd). Zo liggen hun binnenranden ALTIJD exact op het midden van de
pil, wiskundig gegarandeerd, ongeacht hoe breed elke tekstgroep zelf is —
dit hangt niet meer af van een handmatig afgestelde margin-waarde die
kan verschuiven zodra de tekst verandert. Geverifieerd: doos-midden,
logo-midden én het WERKELIJKE gat tussen de groepen nu alle drie exact
720,0px (op zowel homepage als Tauchschule-pagina, 1440px breedte). */
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:first-child{
flex:1 1 0;width:auto;min-width:max-content;
display:flex;justify-content:flex-end;
}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:last-child{
flex:1 1 0;width:auto;min-width:max-content;
display:flex;justify-content:flex-start;
}
/* v1.1.39: margins en font-size/padding terug naar klasse+transition (zelfde
gedeelde 400ms-duur als de pil-vorm hierboven) i.p.v. continu aan de
scrollpositie gekoppeld — zie de v1.1.39-toelichting hierboven: dit
voorkomt dat de header in een tussenstand kan blijven "hangen" als de
gebruiker precies daar stopt met scrollen. */
#mfn-header-template .section_wrapper > .wrap.mcb-header-wrap:first-child{
margin-right:0;
transition:margin-right var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template .section_wrapper > .wrap.mcb-header-wrap:last-child{
margin-left:0;
transition:margin-left var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:first-child{
margin-right:57.7px;
}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:last-child{
margin-left:57.7px;
}
/* v1.1.51 (2026-10-02): klant koos het aangeboden compromis — pil iets
BREDER met meer ruimte tussen de linkerlinks, voor een rustiger ritme
(verschil links/rechts kleiner). 4 varianten opnieuw gemeten (tekst-tot-
tekst links 37/43/47/55px → pil 791/819/835/871px). Gekozen: links 43px /
rechts 77px (verhouding 1,8× i.p.v. 1,9×, absoluut verschil gelijk maar
relatief rustiger), pil ≈ 821px breed (was 793), li-marge links 14px,
zijpadding 25px, max-width 771px, bubbel `left:calc(50% + 430.5px)`.
tekst↔logo blijft 74,7px aan beide kanten, buitenruimte 42px. */
/* v1.1.50 (2026-10-02): klant — "speel optisch met afstanden tussen menu-
items en de grootte van de pil, doe zelf meerdere visuele tests". 12
varianten naast elkaar bekeken (tekst-tot-tekst-afstand links 27–45px,
afstand tekst↔logo 60–80px, buitenruimte 36–46px, én een variant waarin
de rechterlinks maar deels uitgespreid werden). Conclusies: (1) een
symmetrische afstand tekst→logo is het meest opvallend voor het oog —
varianten met 10–22px verschil links/rechts (Service dichter/verder van
het logo dan Tauchclub) oogden direct scheef, dus de rechterlinks
spreiden zich volledig (space-between, v1.1.49) en alleen de ruimte
TUSSEN de rechterlinks is groter; (2) onder ~27px tussenruimte links
oogt de linkergroep gedrongen (verhouding rechts/links >2,3×); boven
~40px wordt de pil ≥ 800px terwijl klant juist een smallere pil wilde;
(3) afstand tekst↔logo 74px (was 80) houdt het logo vrij zonder de pil
op te rekken. Gekozen: tekst-tot-tekst links 37px / rechts 71px,
tekst↔logo 74,7px aan beide kanten, buitenruimte 40px aan beide kanten,
pil 791px breed, alles op 1 regel. De linkerlinks krijgen daarvoor een
eigen tussenruimte (li-marge 8px i.p.v. 5px). */
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:first-child .mfn-header-menu li:not(:last-child){
margin-right:14px;
}
/* v1.1.49 (2026-10-02): klant — rechterlinks ruimer uit elkaar "zodat het
optische plaatje volledig klopt". De rechtergroep (Service/Über uns/
Kontakt) is inherent ~66px smaller dan de linker (kortere woorden), dus
rechts bleef meer lege buitenruimte (111px vs 45px links). Nu spreidt de
rechter menulijst zich met `space-between` over de volle groepsbreedte
(dezelfde breedte als de linkergroep): Service blijft op dezelfde afstand
van het logo als Tauchclub, Kontakt eindigt op dezelfde afstand van de
pilrand als Tauchschule begint, en alleen de ruimte TUSSEN de rechterlinks
groeit (~+33px per tussenruimte). `margin-right:-10px` compenseert de
5px li-marge + 5px kolom-marge aan de rand zodat buitenruimte links en
rechts exact gelijk is (45/45px gemeten). */
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:last-child .mfn-header-menu{
justify-content:space-between;
margin-right:-10px;
/* v1.1.52 (2026-10-02): klant — "rechter menu iets dichter bij elkaar".
16px extra ruimte aan de BUITENkant (niet aan de logo-kant, zodat de
symmetrische afstand tekst↔logo 74,7px blijft): tussenruimte rechts
77→69px, buitenruimte rechts 42→58px (links 43px). */
padding-right:16px;
box-sizing:border-box;
}
#mfn-header-template .mfn-menu-link:not(.mfn-submenu *){
font-size:15px;padding-left:20px;padding-right:20px;
transition:font-size var(--vtm-t-3) var(--vtm-ease),
padding var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template.vtm-header-compact .mfn-menu-link:not(.mfn-submenu *){
font-size:13px;padding-left:12px;padding-right:12px;
}
/* v1.1.36: badge zat eerst alleen ín de pil, boven de rand. v1.1.37 (klant:
"nog een stukkie naar beneden zodat het in het midden-midden staat van
de pil"): nu op `top:50%` i.p.v. `top:0` — centreert het midden van de
badge op het VERTICALE midden van de pil zelf (niet meer op de
bovenrand), zodat de cirkel gelijkmatig een klein stukje boven én onder
de pil uitsteekt. Ook de linker/rechter menu-helft verder uit elkaar
getrokken (`margin-right`/`margin-left` 32px→48px, samen 96px ruimte)
zodat de nu prominentere, middenstaande badge (68px breed) niet tegen
"Tauchclub"/"Service" aan zit. Geverifieerd: badge-midden-Y (68,0) =
pil-midden-Y (68,0), badge-midden-X = pil-midden-X (720,0, ongewijzigd
t.o.v. v1.1.35), plus een ingezoomde visuele screenshot. */
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:nth-child(2){
position:absolute;
left:50%;top:50%;
transform:translateX(-50%) translateY(-50%);
margin:0;
z-index:5;
transition:transform var(--vtm-t-3) var(--vtm-ease);
}
#mfn-header-template .logo-wrapper{
transition:transform var(--vtm-t-3) var(--vtm-ease),width var(--vtm-t-3) var(--vtm-ease),
height var(--vtm-t-3) var(--vtm-ease),filter var(--vtm-t-3) ease;
}
#mfn-header-template.vtm-header-compact .logo-wrapper{
transform:none;transform-origin:center;
display:flex;align-items:center;justify-content:center;
margin:0 auto;
/* v1.1.45 (2026-10-02): logo 10% groter (68px → 75px), klant-verzoek. */
width:75px;height:75px;
/* v1.1.44 (2026-10-02): klant — "de cirkel om het logo weghalen, wel de
schaduw behouden zodat het voelt alsof het logo erop zweeft". Het
donkere cirkel-vlak + de aqua ring zijn weg; de schaduw zit nu als
drop-shadow op het logo zelf (volgt de vorm van het logo i.p.v. een
cirkel), zodat het los boven de pil lijkt te zweven. */
filter:drop-shadow(0 8px 10px rgba(1,7,39,.55));
}
/* v1.1.41 (2026-09-30) had hier een "vloeiend druppel water"-animatie voor
de Tauchshop-knop (JS-gespawnde `.vtm-water-drop`/`.vtm-water-ripple`-
elementen via de Web Animations API). **v1.1.42 (2026-09-30): volledig
verwijderd** — klant wilde het hoofdmenu minder zwaar/minder animaties
na een gesprek over de DOM/script-belasting van de site. De bijbehorende
logica in `js/vtm-header.js` is ook teruggebracht naar de simpele versie
(alleen de klasse-toggle op de scrolldrempel, geen druppel-metingen/
-spawns meer). */
/* ================================================================================
v1.1.53 2026-10-02 MOBIEL + TABLET (+ smal desktop 960–1012px) — klant:
"loop met het team de pill-menu na op mobiel en zorg dat dit perfect
eruit ziet". Breakpoints (BeTheme): mobiel ≤767, tablet 768–959, burger
verdwijnt ≥960. Gevonden bij de nameting (390px) en opgelost:
1. Tauchshop-bubbel viel op ALLE breedtes <~1013px buiten beeld (de
desktop-`left:calc(50% + 416px)` week niet af) en op mobiel liep de
knop in rust half van het scherm. → Rust: ronde 44px-knop (zonder
label); compact: bubbel 52px rechts naast de pil (mobiel) resp. samen
met de pil gecentreerd als groep (tablet 640–959px: pil 520px +
8px + bubbel 52px).
2. Burger-icoon: donker teal 'icon-menu-fine' op de hero (nauwelijks
zichtbaar) → eigen witte 3-streeps-icoon, 44×44px tikvlak.
3. De burger-zijbalk toonde het FOOTER-menu (Datenschutz/AGB/Impressum/
Kontakt) i.p.v. het hoofdmenu: Header-Builder-item `header_burger` had
`menu_display=125` = een menu dat niet (meer) bestaat → BeTheme viel
terug op een ander menu. Nieuw WP-menu "Mobile" (id 45 op staging;
kopie van Split Left + Split Right + custom link Tauchshop) en
`menu_display` in post 2484 (`mfn-page-items`, backup in optie
`vtm_hdr_2484_backup_pre_mobilemenu`) daarop gezet. NB: bij go-live
moet dit menu mee (staging→live push neemt het mee) — anders valt de
burger op live terug op het verkeerde menu.
4. Zijbalk was lichtgrijs met WITTE tekst (de desktop-regel
`.mfn-menu-link{color:#fff}` + de submenu-regel `.mfn-submenu{background:
#fff}` lekten erin) → navy paneel, 20px/16px/15px-niveaus, 52px
tikdoelen, aqua pijltjes, Tauchshop als aqua pilknop, rond sluitkruisje.
5. BeTheme zet op ≤767px `padding-left/right:0!important` op
`.section_wrapper` — overruled met een hogere specificiteit + !important.
6. Pil .96 → .985 dekking: de grote hero-kop scheen als spook door de pil.
7. `env(safe-area-inset-top)` (iPhone-notch in standalone/PWA-modus).
8. Toegankelijkheid (js/vtm-header.js): `aria-label` + rol op burger en
sluitkruisje (BeTheme levert een leeg title / kale span).
9. Tussenbereik 960–1012px: desktop-menu maar te smal voor pil 821 +
bubbel → compactere pil (≈766px).
Gemeten (live): mobiel 375/390/430/639px, tablet 768/820/959px, 960 en
1012/1013px: bubbel binnen beeld, gat pil↔bubbel 8px (mobiel/tablet) of
20px (desktop), logo exact gecentreerd, geen horizontale overflow.
================================================================================ */
/*MOB-START*/
@media (max-width:959px){
/* ---------- rust-staat (bovenaan de pagina) ---------- */
#mfn-header-template .section.mfn-default-section{padding:0;}
#mfn-header-template .section_wrapper{padding-top:14px;padding-right:16px!important;padding-bottom:14px;padding-left:16px!important;padding-top:calc(14px + env(safe-area-inset-top,0px));}
#mfn-header-template .logo-wrapper{width:92px;}
#mfn-header-template a.mfn-header-menu-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-8px;}
#mfn-header-template a.mfn-header-menu-burger .icon-wrapper{display:flex;align-items:center;justify-content:center;width:44px;height:44px;}
#mfn-header-template a.mfn-header-menu-burger i{display:block;position:relative;width:24px;height:2px;border-radius:2px;background:#fff;font-size:0;line-height:0;filter:drop-shadow(0 1px 3px rgba(1,7,39,.5));}
#mfn-header-template a.mfn-header-menu-burger i::before,
#mfn-header-template a.mfn-header-menu-burger i::after{content:""!important;position:absolute;left:0;width:24px;height:2px;border-radius:2px;background:#fff;font-size:0;}
#mfn-header-template a.mfn-header-menu-burger i::before{top:-7px;}
#mfn-header-template a.mfn-header-menu-burger i::after{top:7px;}
#mfn-header-template .vtm-shop-pill{width:44px;min-width:44px;max-width:44px;padding:0;gap:0;justify-content:center;}
#mfn-header-template .vtm-shop-pill .vtm-shop-pill-label{max-width:0;opacity:0;margin:0;}
/* ---------- compacte pil ---------- */
#mfn-header-template.vtm-header-compact .section.mfn-default-section{padding:0 12px 10px;}
#mfn-header-template.vtm-header-compact .section_wrapper{
box-sizing:border-box;max-width:none;width:calc(100% - 60px);margin:20px 0 0 0;margin-top:calc(20px + env(safe-area-inset-top,0px));padding:0;padding-left:6px!important;padding-right:6px!important;min-height:52px;align-items:center;border-radius:50px;
}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:first-child{
flex:0 0 52px;min-width:0;width:52px;margin:0;justify-content:flex-start;
}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:last-child{
flex:0 0 0;min-width:0;width:0;margin:0;padding:0;
}
#mfn-header-template.vtm-header-compact .logo-wrapper{width:64px;height:64px;}
#mfn-header-template.vtm-header-compact a.mfn-header-menu-burger{margin-left:0;}
#mfn-header-template.vtm-header-compact .vtm-shop-pill{
position:fixed!important;top:calc(46px + env(safe-area-inset-top,0px))!important;right:12px!important;left:auto!important;
width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;
transform:translateY(-50%)!important;
}
#mfn-header-template.vtm-header-compact .vtm-shop-pill:hover{transform:translateY(-50%) translateY(-2px)!important;}
/* ---------- off-canvas menu (burger) ---------- */
#mfn-header-template .mfn-header-tmpl-menu-sidebar{
background:linear-gradient(180deg,#0B2A55 0%,#06152A 100%)!important;
border-left:1px solid rgba(127,227,230,.18);
font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-header-tmpl-menu-sidebar-wrapper{padding:76px 24px 32px;align-items:flex-start;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-close-icon{
position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.1);color:#fff;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-close-icon .icon{font-size:18px;line-height:1;color:#fff;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar ul.mfn-header-menu{width:100%;margin:0;padding:0;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-li{width:100%;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-link{
display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;
min-height:52px;padding:12px 0!important;font-size:20px;font-weight:600;letter-spacing:-.01em;color:#fff!important;
border-bottom:1px solid rgba(255,255,255,.08);
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-link::after,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-link::before{content:none!important;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-subicon,
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-sub-subicon{color:#7FE3E6;font-size:13px;margin-left:12px;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-submenu{
position:static!important;background:transparent!important;box-shadow:none!important;border:0!important;
width:100%!important;min-width:0!important;padding:0 0 0 14px!important;margin:0!important;transform:none!important;backdrop-filter:none;
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-link .menu-item-helper{display:none!important;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-menu-link .label-wrapper{flex:1 1 auto;margin:0 auto 0 0!important;text-align:left!important;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-submenu .mfn-menu-link{
justify-content:space-between!important;text-align:left!important;
min-height:46px;font-size:16px;font-weight:500;color:#B7E7EC!important;border-bottom:1px solid rgba(255,255,255,.05);
}
#mfn-header-template .mfn-header-tmpl-menu-sidebar .mfn-submenu .mfn-submenu .mfn-menu-link{font-size:15px;color:#8FB0C6!important;min-height:42px;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar ul.mfn-header-menu > li:last-child > .mfn-menu-link .label-wrapper{flex:0 1 auto;margin:0 auto!important;text-align:center!important;}
#mfn-header-template .mfn-header-tmpl-menu-sidebar ul.mfn-header-menu > li:last-child > .mfn-menu-link{
justify-content:center;margin-top:18px;border:0;border-radius:999px;background:#20C4C9;color:#0A2850!important;min-height:52px;font-size:17px;
}
}
@media (min-width:640px) and (max-width:959px){
#mfn-header-template.vtm-header-compact .section_wrapper{width:520px;margin-left:max(0px,calc(50% - 290px));}
#mfn-header-template.vtm-header-compact .vtm-shop-pill{right:auto!important;left:calc(50% + 238px)!important;}
}
/*MOB-END*/
/* v1.1.53: tussenbereik 960–1012px (desktop-menu, maar te smal voor pil 821px
+ bubbel: de bubbel zou buiten beeld vallen). Compactere variant van de
pil: iets minder ruimte tussen menu↔logo (60px) en padding, pil ≈766px. */
@media (min-width:960px) and (max-width:1012px){
#mfn-header-template.vtm-header-compact .section_wrapper{max-width:720px;padding:14px 23px;}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:first-child{margin-right:44px;}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:last-child{margin-left:44px;}
#mfn-header-template.vtm-header-compact .section_wrapper > .wrap.mcb-header-wrap:first-child .mfn-header-menu li:not(:last-child){margin-right:8px;}
#mfn-header-template.vtm-header-compact .vtm-shop-pill{left:calc(50% + 403px)!important;}
}
/* ================================================================================
v1.1.54 2026-10-02 PARTNERBALK ("Unsere Partner") op alle formaten — klant:
"check ook het Unsere Partner-blok voor alle formaten". Het blok is een
Code-element (Claude/vtm-partnerbalk-v1.html) dat zichzelf schaalt via
container queries op de breedte van zijn PLEK (niet de viewport). Gemeten
(viewport → containerbreedte → rijen): 1440→861: 5+4 ✓; 960–1200→651: 5+4 ✓;
768→477: 4+4+1 ✗ (wees-logo); 640→520: 5+4 ✓; 600→504: 4+4+1 ✗; 520→424:
3+3+3 ✓; 430→334: 3+3+3 ✓; 390→294: 3+2+2+2 ✗; 360→264: 3+2+2+2 ✗; 320→224:
2+2+2+2+1 ✗. Oorzaak: vaste schaalstappen (u .68/.78) in het snippet passen
niet bij elke containerbreedte, en `max-width:284px` voor 3-per-rij was 12px
te krap voor de breedste rij (Kallweit+Garmin+Cressi).
Fix hier in style.css (niet in het Code-element, dus zonder opnieuw plakken;
`!important` omdat de