*{box-sizing:border-box}html{height:100%;-webkit-text-size-adjust:100%}body.dbp-site{min-height:100%;margin:0;background:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#071229;line-height:1.5}a{color:var(--dbp-accent,#008cff)}img{max-width:100%;height:auto}.dbp-header,.dbp-bottom-nav,.dbp-footer{background:#00091f;color:#fff}.dbp-header{background:#00091f radial-gradient(circle at 8% 0,rgba(8,215,248,.12),transparent 24%)}.dbp-header{padding-bottom:30px}.has-sticky-header .dbp-header{position:sticky;top:0;z-index:40}.dbp-header__inner{min-height:72px;display:flex;align-items:center;justify-content:flex-start;gap:18px;max-width:1180px;margin:0 auto;padding:10px clamp(22px,5vw,58px)}.dbp-header__left,.dbp-header__actions{display:flex;align-items:center;min-width:86px}.dbp-header__actions{justify-content:flex-end;margin-left:auto}.dbp-brand{color:#fff;text-decoration:none;font-weight:900;letter-spacing:.04em;display:flex;align-items:center;gap:14px;min-width:0}.dbp-brand__mark{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--dbp-cyan,#08d7f8),var(--dbp-accent,#008cff));color:#00113d;font-size:34px;box-shadow:0 8px 24px rgba(0,140,255,.34)}.dbp-brand__text{font-size:clamp(20px,4vw,34px);white-space:nowrap}.dbp-brand__image,.dbp-brand img{max-height:58px!important;width:auto!important;display:block}.dbp-header__actions .moduletable,.dbp-header__left .moduletable{margin:0}.dbp-header__actions a,.dbp-header__left a{color:#fff}.dbp-shell{width:100%}.dbp-main{max-width:1180px;margin:-26px auto 0;padding:0 18px 110px}.dbp-page-surface{background:#fff;border-radius:30px 30px 0 0;min-height:60vh;box-shadow:0 -10px 34px rgba(7,18,41,.08);padding:clamp(22px,4vw,36px);position:relative;z-index:1}.dbp-layout{display:grid;gap:28px}.dbp-content{min-width:0}.dbp-card,.dbp-content>.moduletable,.dbp-aside>.moduletable{background:#fff;border:1px solid rgba(7,18,41,.10);box-shadow:0 12px 34px rgba(7,18,41,.10);border-radius:24px;padding:clamp(18px,3vw,28px);overflow:hidden}.dbp-card+.dbp-card,.dbp-content>.moduletable+*,.dbp-content>*+*{margin-top:20px}h1,h2,h3{color:#071229;line-height:1.1;margin-top:0}h1{font-size:clamp(32px,7vw,56px)}h2{font-size:clamp(24px,5vw,38px)}button,.btn,.button,.readmore a,input[type=submit]{appearance:none;border:0;border-radius:16px;background:linear-gradient(135deg,var(--dbp-accent,#008cff),var(--dbp-cyan,#08d7f8));color:#fff;text-decoration:none;font-weight:800;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 22px rgba(0,140,255,.28)}input,select,textarea{width:100%;border:1px solid rgba(7,18,41,.16);border-radius:16px;padding:14px 16px;background:#fff;color:#071229;font:inherit}.dbp-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.25)}.dbp-bottom-nav ul,.dbp-bottom-nav .mod-menu,.dbp-sidebar ul,.dbp-sidebar .mod-menu{list-style:none;margin:0;padding:0;display:flex;justify-content:space-around;gap:8px}.dbp-bottom-nav li,.dbp-sidebar li{margin:0;display:block}.dbp-bottom-nav .moduletable,.dbp-sidebar .moduletable{margin:0}.dbp-bottom-nav .moduletable>h3{display:none}.dbp-bottom-nav a,.dbp-bottom-nav .mod-menu__link,.dbp-sidebar a,.dbp-sidebar .mod-menu__link{color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border-radius:14px;min-width:56px}.dbp-bottom-nav .current>a,.dbp-bottom-nav .active>a,.dbp-sidebar .current>a,.dbp-sidebar .active>a{color:var(--dbp-cyan,#08d7f8);background:rgba(0,140,255,.14)}.dbp-sidebar{display:none}.dbp-footer{padding:28px;text-align:center;color:#dbeafe}.dbp-skip{position:absolute;left:-999px;top:auto}.dbp-skip:focus{left:16px;top:16px;background:#fff;color:#071229;padding:8px 10px;border-radius:8px;z-index:999}.dbp-status{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;background:#dcfce7;color:#166534;font-weight:700}.dbp-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(7,18,41,.12);border-radius:999px;padding:10px 14px;background:#fff;color:#4b5563}.dbp-grid{display:grid;gap:18px}.dbp-grid.two{grid-template-columns:1fr}.dbp-actionbar{display:flex;flex-wrap:wrap;gap:10px}.dbp-muted{color:#6b7280}@media (max-width:520px){.dbp-header{padding-bottom:28px}.dbp-header__inner{padding:10px 20px;min-height:68px}.dbp-header__left,.dbp-header__actions{min-width:46px}.dbp-brand__image,.dbp-brand img{max-height:52px!important}.dbp-brand__mark{width:52px;height:52px}.dbp-main{margin-top:-24px;padding-left:0;padding-right:0}.dbp-page-surface{border-radius:24px 24px 0 0;padding:22px 18px}.dbp-card,.dbp-content>.moduletable,.dbp-aside>.moduletable{border-radius:22px}}@media (min-width:700px){.dbp-main{padding-inline:28px}.dbp-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:900px){.dbp-shell{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:calc(100vh - 72px)}.dbp-sidebar{display:block;background:linear-gradient(180deg,var(--dbp-navy,#020826),#00091f);padding-top:30px}.dbp-sidebar ul{flex-direction:column;align-items:stretch}.dbp-sidebar a{margin:4px 10px;padding:13px 8px}.dbp-bottom-nav{display:none}.dbp-main{padding:0 40px 50px}.dbp-layout{grid-template-columns:minmax(0,1fr) 360px}.has-bottom-nav .dbp-main{padding-bottom:50px}.dbp-brand__image,.dbp-brand img{max-height:62px!important}}@media (min-width:1280px){.dbp-main{max-width:1320px}.dbp-header__inner{max-width:1320px}.dbp-layout{grid-template-columns:minmax(0,820px) 380px;justify-content:center}}
/* v0.1.9: force visible bottom navigation even if Joomla module wrapper differs */
.dbp-bottom-nav { display:block; min-height:72px; }
.dbp-bottom-nav > .moduletable,
.dbp-bottom-nav > div,
.dbp-bottom-nav .moduletable,
.dbp-bottom-nav .mod-menu { width:100%; }
.dbp-bottom-nav ul.mod-menu,
.dbp-bottom-nav ul.menu,
.dbp-bottom-nav .mod-menu { display:flex !important; justify-content:space-around; align-items:center; gap:8px; margin:0; padding:0; list-style:none; }
.dbp-bottom-nav li { flex:1 1 0; text-align:center; list-style:none; }
.dbp-bottom-nav a { min-height:48px; justify-content:center; font-weight:650; }
@media (min-width:900px){ .dbp-bottom-nav{ display:none !important; } .dbp-sidebar{display:block;} }
/* v0.2.1: component/content uses the full white page surface. No inner card around articles. */
.dbp-content > .blog,
.dbp-content > .item-page,
.dbp-content > .com-content-article,
.dbp-main .com-content-article,
.dbp-main .item-page {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.dbp-content { width:100%; }
.dbp-layout { grid-template-columns: minmax(0,1fr); }
@media (min-width:1280px){ .dbp-layout{ grid-template-columns:minmax(0,1fr); justify-content:stretch; } }
/* v0.2.2: CTA button for Nieuwe oproep in before-content */
.dbp-new-call-button,
.dbp-content > .moduletable:first-child a[href$="/nieuw"],
.dbp-content > .moduletable:first-child a[href="/nieuw"]{
width:100%;
min-height:68px;
display:inline-flex!important;
align-items:center;
justify-content:center;
gap:14px;
border:0!important;
border-radius:18px;
background:linear-gradient(135deg,var(--dbp-accent,#008cff),var(--dbp-cyan,#08d7f8));
color:#fff!important;
text-decoration:none!important;
font-weight:900;
font-size:clamp(20px,5vw,28px);
line-height:1;
box-shadow:0 12px 30px rgba(0,140,255,.30);
}
.dbp-new-call-button:hover,
.dbp-new-call-button:focus,
.dbp-content > .moduletable:first-child a[href$="/nieuw"]:hover,
.dbp-content > .moduletable:first-child a[href$="/nieuw"]:focus{
color:#fff!important;
text-decoration:none!important;
transform:translateY(-1px);
}
.dbp-new-call-icon{
width:40px;
height:40px;
border:3px solid rgba(255,255,255,.95);
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:32px;
line-height:1;
font-weight:500;
}
.dbp-content > .moduletable:first-child{
padding:0;
border:0;
box-shadow:none;
background:transparent;
overflow:visible;
}
.dbp-content > .moduletable:first-child + *{margin-top:24px;}
@media (max-width:520px){
.dbp-new-call-button,
.dbp-content > .moduletable:first-child a[href$="/nieuw"],
.dbp-content > .moduletable:first-child a[href="/nieuw"]{min-height:62px;border-radius:16px;}
.dbp-new-call-icon{width:34px;height:34px;font-size:28px;border-width:2px;}
}
/* v0.2.3: header colour closer to logo background and compact before-content CTA */
.dbp-header,
.dbp-footer,
.dbp-bottom-nav{background:#00091f!important;color:#fff;}
.dbp-header{background:#00091f radial-gradient(circle at 8% 0,rgba(8,215,248,.12),transparent 24%)!important;}
.dbp-before-content{max-width:1180px;margin:0 auto 18px;padding:0 18px;position:relative;z-index:2;}
.dbp-before-content .moduletable{margin:0;}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
width:100%;
max-width:760px;
min-height:58px;
margin:0 auto;
display:flex!important;
align-items:center;
justify-content:center;
gap:14px;
border:0!important;
border-radius:16px;
background:linear-gradient(135deg,var(--dbp-accent,#008cff),var(--dbp-cyan,#08d7f8));
color:#fff!important;
text-decoration:none!important;
font-weight:900;
font-size:clamp(18px,4.5vw,26px);
line-height:1;
box-shadow:0 12px 30px rgba(0,140,255,.25);
}
.dbp-before-content .dbp-new-call-icon{width:36px;height:36px;border:3px solid rgba(255,255,255,.95);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:30px;line-height:1;font-weight:500;}
.dbp-main{margin:-18px auto 0;}
.dbp-page-surface{margin-top:0;}
@media (max-width:520px){
.dbp-header{padding-bottom:20px;}
.dbp-before-content{padding:0 20px;margin-bottom:14px;}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{max-width:none;min-height:56px;border-radius:15px;}
.dbp-before-content .dbp-new-call-icon{width:32px;height:32px;font-size:27px;border-width:2px;}
}
/* v0.2.4: compact CTA and less vertical whitespace */
.dbp-page-surface{padding-top:clamp(16px,2.6vw,24px)!important;}
.dbp-before-content{margin-top:-4px!important;margin-bottom:12px!important;}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
max-width:640px!important;
min-height:50px!important;
border-radius:14px!important;
font-size:clamp(17px,4vw,23px)!important;
gap:12px!important;
box-shadow:0 9px 22px rgba(0,140,255,.22)!important;
}
.dbp-before-content .dbp-new-call-icon{
width:30px!important;
height:30px!important;
font-size:25px!important;
border-width:2px!important;
}
@media (max-width:520px){
.dbp-page-surface{padding-top:16px!important;}
.dbp-before-content{padding:0 18px!important;margin-top:-6px!important;margin-bottom:10px!important;}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
width:92%!important;
max-width:92%!important;
min-height:48px!important;
border-radius:13px!important;
font-size:20px!important;
}
.dbp-before-content .dbp-new-call-icon{width:28px!important;height:28px!important;font-size:24px!important;}
}
/* v0.2.6: compact Divebuddyping language dropdown/select in header-actions */
.dbp-header__actions .mod-languages,
.dbp-header__actions .moduletable{margin:0;}
.dbp-header__actions .mod-languages h3,
.dbp-header__actions .moduletable > h3,
.dbp-header__actions .mod-languages .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}
.dbp-language-dropdown{position:relative;display:inline-block;z-index:130;}
.dbp-language-toggle{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;border:1px solid rgba(255,255,255,.24);border-radius:14px;background:rgba(255,255,255,.045);color:#fff;font-weight:750;font-size:15px;line-height:1;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
.dbp-language-toggle:after{content:"⌄";font-size:18px;line-height:1;opacity:.9;margin-left:2px;}
.dbp-language-toggle img{width:24px;height:auto;display:inline-block;}
.dbp-language-dropdown ul,
.dbp-header__actions .mod-languages ul.lang-inline,
.dbp-header__actions .mod-languages ul.lang-block{position:absolute;right:0;top:calc(100% + 8px);z-index:140;display:none!important;min-width:230px;margin:0!important;padding:8px!important;list-style:none!important;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#00091f;box-shadow:0 18px 40px rgba(0,0,0,.38);}
.dbp-language-dropdown.is-open ul,
.dbp-language-dropdown:focus-within ul{display:block!important;}
.dbp-language-dropdown li{display:block!important;margin:0!important;padding:0!important;}
.dbp-language-dropdown a{display:flex!important;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;color:#fff!important;text-decoration:none!important;white-space:nowrap;font-size:15px;font-weight:650;}
.dbp-language-dropdown .lang-active>a,
.dbp-language-dropdown a:hover,
.dbp-language-dropdown a:focus{background:linear-gradient(135deg,var(--dbp-accent,#008cff),var(--dbp-cyan,#08d7f8));color:#fff!important;}
.dbp-language-dropdown a img{width:22px;height:auto;display:inline-block;}
.dbp-language-dropdown .caret{display:none;}
/* Native Joomla dropdown mode */
.dbp-header__actions .mod-languages form,
.dbp-header__actions .mod-languages .mod-languages__select{margin:0!important;}
.dbp-header__actions .mod-languages select,
.dbp-language-native-select{min-height:42px;max-width:230px;padding:8px 42px 8px 14px;border:1px solid rgba(255,255,255,.24);border-radius:14px;background:rgba(255,255,255,.045);color:#fff;font-weight:750;font-size:15px;line-height:1;outline:0;appearance:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
.dbp-header__actions .mod-languages select option,
.dbp-language-native-select option{color:#071229;background:#fff;}
@media(max-width:520px){
.dbp-language-toggle{min-height:36px;padding:7px 10px;font-size:0;gap:4px;}
.dbp-language-toggle:after{font-size:16px;margin-left:0;}
.dbp-language-toggle img{width:24px;}
.dbp-language-toggle .dbp-lang-name{display:none;}
.dbp-language-dropdown ul{right:0;min-width:190px;}
.dbp-header__actions .mod-languages select,
.dbp-language-native-select{min-height:36px;max-width:160px;padding:7px 30px 7px 10px;font-size:14px;}
}
/* v0.2.7: Joomla Language Switcher override as real details/summary dropdown */
.dbp-header__actions .dbp-language-switcher{margin:0;position:relative;z-index:200;}
.dbp-lang-details{position:relative;display:inline-block;color:#fff;}
.dbp-lang-details summary::-webkit-details-marker{display:none;}
.dbp-lang-details summary::marker{content:"";}
.dbp-lang-summary{list-style:none;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:rgba(255,255,255,.045);color:#fff;font-weight:750;font-size:15px;line-height:1;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);user-select:none;}
.dbp-lang-summary:hover{background:rgba(255,255,255,.075);}
.dbp-lang-flag img{width:24px;height:auto;display:block;border-radius:2px;}
.dbp-lang-chevron{font-size:18px;line-height:1;opacity:.9;margin-left:2px;}
.dbp-lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:210;min-width:230px;margin:0!important;padding:8px!important;list-style:none!important;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#00091f;box-shadow:0 18px 40px rgba(0,0,0,.38);}
.dbp-lang-details:not([open]) .dbp-lang-list{display:none!important;}
.dbp-lang-list li{display:block!important;margin:0!important;padding:0!important;}
.dbp-lang-list a{display:flex!important;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;color:#fff!important;text-decoration:none!important;white-space:nowrap;font-size:15px;font-weight:650;}
.dbp-lang-list .lang-active>a,
.dbp-lang-list a:hover,
.dbp-lang-list a:focus{background:linear-gradient(135deg,var(--dbp-accent,#008cff),var(--dbp-cyan,#08d7f8));color:#fff!important;}
@media(max-width:520px){
.dbp-lang-summary{min-height:36px;padding:7px 10px;gap:6px;font-size:0;}
.dbp-lang-summary .dbp-lang-label{display:none;}
.dbp-lang-chevron{font-size:16px;margin-left:0;}
.dbp-lang-flag img{width:24px;}
.dbp-lang-list{right:0;min-width:190px;}
.dbp-lang-list a{font-size:14px;}
}
/* v0.2.8 language dropdown refinements */
.dbp-header__actions .dbp-language-switcher{display:block;position:relative;z-index:500;}
.dbp-lang-details{position:relative;display:inline-block;z-index:500;}
.dbp-lang-summary{min-width:150px;justify-content:center;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.28);}
.dbp-lang-flag{display:inline-flex;align-items:center;justify-content:center;width:24px;min-width:24px;height:18px;font-size:20px;line-height:1;filter:saturate(1.05);}
.dbp-lang-label{display:inline-block;line-height:1.1;}
.dbp-lang-list{overflow:hidden;background:#02091f!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 18px 42px rgba(0,0,0,.45)!important;}
.dbp-lang-list a{position:relative;background:rgba(255,255,255,.035);margin:2px 0;}
.dbp-lang-list a:hover,.dbp-lang-list a:focus{background:rgba(0,172,246,.20)!important;outline:0;}
.dbp-lang-list .lang-active>a{background:linear-gradient(135deg,var(--dbp-accent,#008cff),var(--dbp-cyan,#08d7f8))!important;}
.dbp-lang-check{margin-left:auto;font-weight:900;opacity:.95;}
.dbp-lang-details[open] .dbp-lang-summary{background:rgba(255,255,255,.09);}
@media (max-width: 640px){.dbp-lang-summary{min-width:0}.dbp-lang-list{min-width:190px!important}.dbp-lang-flag{font-size:19px}}
/* v0.2.9: use original Joomla language flag images and make items reliably clickable */
.dbp-lang-list{padding:8px!important;overflow:visible!important;}
.dbp-lang-list a{cursor:pointer;pointer-events:auto;position:relative;z-index:2;background:transparent!important;margin:0!important;}
.dbp-lang-list .lang-active>a{background:rgba(0,172,246,.18)!important;}
.dbp-lang-list a:hover,.dbp-lang-list a:focus{background:rgba(0,172,246,.24)!important;}
.dbp-lang-flag{width:24px;min-width:24px;height:16px;font-size:0;filter:none;}
.dbp-lang-flag img{width:24px!important;height:16px!important;object-fit:cover;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18);}
.dbp-lang-summary .dbp-lang-flag img{width:24px!important;height:16px!important;}
.dbp-lang-check{margin-left:auto;color:#08d7f8;font-weight:900;}
/* v0.3.0: CTA hoger plaatsen voor meer contentruimte */
.dbp-main{margin:-34px auto 0!important;}
.dbp-before-content{margin-top:-34px!important;margin-bottom:8px!important;}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
max-width:600px!important;
min-height:46px!important;
border-radius:13px!important;
font-size:clamp(16px,3.7vw,21px)!important;
gap:10px!important;
}
.dbp-before-content .dbp-new-call-icon{
width:28px!important;
height:28px!important;
font-size:23px!important;
}
@media (max-width:520px){
.dbp-main{margin-top:-32px!important;}
.dbp-before-content{padding:0 18px!important;margin-top:-30px!important;margin-bottom:6px!important;}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
width:84%!important;
max-width:84%!important;
min-height:44px!important;
font-size:18px!important;
}
.dbp-before-content .dbp-new-call-icon{width:26px!important;height:26px!important;font-size:22px!important;}
.dbp-page-surface{padding-top:14px!important;}
}
/* v0.3.1: CTA nog verder omhoog in de headerzone plaatsen */
.dbp-before-content{margin-top:-76px!important;margin-bottom:8px!important;}
@media (max-width:520px){
.dbp-before-content{margin-top:-70px!important;margin-bottom:6px!important;}
}
/* v0.3.2: effen headerachtergrond gelijk aan donkere logo-achtergrond */
:root{
--dbp-logo-bg:#00091f;
}
.dbp-header,
.dbp-footer,
.dbp-bottom-nav{
background:#00091f !important;
background-image:none !important;
}
.dbp-header::before,
.dbp-header::after{
content:none !important;
display:none !important;
}
.dbp-brand,
.dbp-brand__image,
.dbp-brand img{
background:transparent !important;
box-shadow:none !important;
}
/* v0.3.4 - forceer mobiele bottom-nav en hogere knop */
@media (max-width: 899.98px){
body.dbp-site{
padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
}
.dbp-header{
padding-bottom: 92px !important;
}
.dbp-main{
margin-top: -66px !important;
}
.dbp-before-content{
position: relative !important;
z-index: 30 !important;
margin-top: -72px !important;
margin-bottom: 12px !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
.dbp-before-content .moduletable,
.dbp-before-content .moduletable > *,
.dbp-before-content .mod-custom{
margin-top: 0 !important;
padding-top: 0 !important;
}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
width: min(78vw, 420px) !important;
max-width: 420px !important;
min-height: 50px !important;
padding: 0 22px !important;
border-radius: 16px !important;
font-size: 20px !important;
line-height: 1 !important;
margin-left: auto !important;
margin-right: auto !important;
}
.dbp-before-content .dbp-new-call-icon{
width: 30px !important;
height: 30px !important;
font-size: 24px !important;
border-width: 2px !important;
}
.dbp-bottom-nav{
display: block !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 99999 !important;
min-height: calc(78px + env(safe-area-inset-bottom)) !important;
padding: 7px 8px calc(8px + env(safe-area-inset-bottom)) !important;
background: #00091f !important;
background-image: none !important;
border-top: 1px solid rgba(43,232,255,.20) !important;
box-shadow: 0 -12px 34px rgba(0,0,0,.30) !important;
}
.dbp-bottom-nav .moduletable,
.dbp-bottom-nav .mod-menu,
.dbp-bottom-nav ul{
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.dbp-bottom-nav ul,
.dbp-bottom-nav .mod-menu{
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: end !important;
width: 100% !important;
}
.dbp-bottom-nav li{
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
list-style: none !important;
}
.dbp-bottom-nav a,
.dbp-bottom-nav .nav-link{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-height: 58px !important;
padding: 4px 2px !important;
color: #fff !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
position: relative !important;
}
.dbp-bottom-nav li.active > a,
.dbp-bottom-nav li.current > a,
.dbp-bottom-nav a[aria-current="page"]{
color: #19dfff !important;
}
.dbp-bottom-nav li.active > a::before,
.dbp-bottom-nav li.current > a::before,
.dbp-bottom-nav a[aria-current="page"]::before{
content:"" !important;
position:absolute !important;
top:-7px !important;
left:14% !important;
right:14% !important;
height:4px !important;
border-radius:999px !important;
background:#078cff !important;
}
.dbp-bottom-nav a::after,
.dbp-bottom-nav .nav-link::after{
content:"○" !important;
order:-1 !important;
display:block !important;
font-size:30px !important;
line-height:1 !important;
font-weight:300 !important;
color:currentColor !important;
}
.dbp-bottom-nav a[href*="oproep"]::after{content:"☊" !important;}
.dbp-bottom-nav a[href*="nieuw"]::after{content:"＋" !important;font-size:34px !important;}
.dbp-bottom-nav a[href*="kaart"]::after{content:"♧" !important;}
.dbp-bottom-nav a[href*="land"]::after{content:"◎" !important;}
.dbp-bottom-nav a[href*="profiel"]::after{content:"♙" !important;}
}
@media (min-width: 900px){
.dbp-bottom-nav{
display: none !important;
}
}
/* v0.3.5 - correctie bottom-menu inhoud + before-content knop hoger */
@media (max-width: 899.98px){
.dbp-header{
padding-bottom: 42px !important;
}
.dbp-main{
margin-top: -38px !important;
}
.dbp-before-content{
margin-top: -132px !important;
margin-bottom: 8px !important;
padding-left: 18px !important;
padding-right: 18px !important;
z-index: 80 !important;
}
.dbp-before-content .dbp-new-call-button,
.dbp-before-content a[href$="/nieuw"],
.dbp-before-content a[href="/nieuw"]{
width: min(78vw, 390px) !important;
max-width: 390px !important;
min-height: 50px !important;
font-size: 20px !important;
border-radius: 16px !important;
}
.dbp-page-shell{
margin-top: 0 !important;
}
.dbp-bottom-nav{
display: flex !important;
align-items: stretch !important;
justify-content: center !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 99999 !important;
height: calc(82px + env(safe-area-inset-bottom)) !important;
min-height: calc(82px + env(safe-area-inset-bottom)) !important;
padding: 6px 8px calc(7px + env(safe-area-inset-bottom)) !important;
overflow: visible !important;
background: #00091f !important;
border-top: 1px solid rgba(43,232,255,.22) !important;
}
.dbp-bottom-nav:empty::before{
content:"Oproepen Nieuw Kaart Land Jij";
color:#fff;
font-size:12px;
align-self:center;
opacity:.92;
word-spacing:18px;
}
.dbp-bottom-nav > .moduletable,
.dbp-bottom-nav > div,
.dbp-bottom-nav nav{
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
.dbp-bottom-nav ul,
.dbp-bottom-nav .mod-menu,
.dbp-bottom-nav .navbar-nav{
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.dbp-bottom-nav li{
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
text-align: center !important;
}
.dbp-bottom-nav a,
.dbp-bottom-nav .nav-link,
.dbp-bottom-nav span.separator{
display: flex !important;
height: 100% !important;
min-height: 62px !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
padding: 4px 2px !important;
color: #ffffff !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
visibility: visible !important;
opacity: 1 !important;
overflow: visible !important;
}
.dbp-bottom-nav li.active > a,
.dbp-bottom-nav li.current > a,
.dbp-bottom-nav a[aria-current="page"]{
color:#19dfff !important;
}
.dbp-bottom-nav a::before,
.dbp-bottom-nav .nav-link::before{
display:none !important;
}
.dbp-bottom-nav a::after,
.dbp-bottom-nav .nav-link::after,
.dbp-bottom-nav span.separator::after{
content:"○" !important;
display:block !important;
order:-1 !important;
color:currentColor !important;
font-size:28px !important;
line-height:1 !important;
font-family: Arial, sans-serif !important;
}
.dbp-bottom-nav a[href*="oproep"]::after{content:"☊" !important;}
.dbp-bottom-nav a[href*="nieuw"]::after{content:"＋" !important;font-size:32px !important;}
.dbp-bottom-nav a[href*="kaart"]::after{content:"▱" !important;font-size:31px !important;}
.dbp-bottom-nav a[href*="land"]::after{content:"◎" !important;font-size:31px !important;}
.dbp-bottom-nav a[href*="profiel"]::after{content:"♙" !important;font-size:31px !important;}
}
@media (min-width: 900px){
.dbp-bottom-nav{
display:none !important;
}
}
/* v0.3.6 - before-content in header, bottom menu fallback visible */
@media (max-width: 899.98px){
.dbp-header{padding-bottom:0!important;}
.dbp-header .dbp-before-content--header{
position:relative!important;
z-index:80!important;
max-width:1180px!important;
margin:-4px auto -28px!important;
padding:0 18px!important;
}
.dbp-header .dbp-before-content--header .moduletable,
.dbp-header .dbp-before-content--header .mod-custom{
margin:0!important;
padding:0!important;
}
.dbp-header .dbp-before-content--header .dbp-new-call-button,
.dbp-header .dbp-before-content--header a[href$="/nieuw"],
.dbp-header .dbp-before-content--header a[href="/nieuw"]{
width:min(78vw,390px)!important;
max-width:390px!important;
min-height:48px!important;
border-radius:16px!important;
font-size:19px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.dbp-main{margin-top:0!important;}
.dbp-bottom-nav .dbp-bottom-fallback{
display:grid!important;
}
}
/* v0.3.7 - knop iets hoger, content niet laten overlappen */
@media (max-width: 899.98px){
.dbp-header{
padding-bottom:34px!important;
}
.dbp-header .dbp-before-content--header{
margin:-22px auto -12px!important;
padding:0 18px!important;
z-index:90!important;
}
.dbp-header .dbp-before-content--header .dbp-new-call-button,
.dbp-header .dbp-before-content--header a[href$="/nieuw"],
.dbp-header .dbp-before-content--header a[href="/nieuw"]{
width:min(74vw,380px)!important;
max-width:380px!important;
min-height:46px!important;
font-size:18px!important;
border-radius:15px!important;
}
.dbp-header .dbp-before-content--header .dbp-new-call-icon{
width:30px!important;
height:30px!important;
font-size:24px!important;
}
.dbp-main{
margin-top:0!important;
}
.dbp-page-shell,
.dbp-page-surface{
margin-top:24px!important;
}
.dbp-component{
padding-top:0!important;
}
}
/* ===== v0.3.8 mobile bottom nav refinement ===== */
@media (max-width: 899px){
body.dbp-site{
padding-bottom: 74px !important;
}
.dbp-bottom-nav{
height: 68px !important;
min-height: 68px !important;
padding: 4px 6px 6px !important;
border-top: 1px solid rgba(0,255,255,.18) !important;
}
.dbp-bottom-nav ul,
.dbp-bottom-nav .mod-menu{
gap: 0 !important;
}
.dbp-bottom-nav li{
padding: 0 !important;
margin: 0 !important;
}
.dbp-bottom-nav a{
min-height: 50px !important;
font-size: 10px !important;
gap: 2px !important;
letter-spacing: -.1px !important;
}
.dbp-bottom-nav a::after{
width: 24px !important;
height: 24px !important;
font-size: 22px !important;
}
.dbp-bottom-nav a[href*="oproep"]::after{
content: "◉" !important;
font-size: 22px !important;
}
.dbp-bottom-nav a[href*="nieuw"]::after{
content: "＋" !important;
font-size: 25px !important;
}
.dbp-bottom-nav a[href*="kaart"]::after{
content: "⌘" !important;
font-size: 22px !important;
}
.dbp-bottom-nav a[href*="land"]::after{
content: "◎" !important;
font-size: 23px !important;
}
.dbp-bottom-nav a[href*="profiel"]::after{
content: "◌" !important;
font-size: 23px !important;
}
}
/* v0.3.9 - juiste bottom-nav SVG-symbolen volgens voorbeeld */
@media (max-width: 899px){
.dbp-bottom-nav{
height: 72px !important;
min-height: 72px !important;
padding: 5px 8px 7px !important;
}
.dbp-bottom-nav a,
.dbp-bottom-nav .nav-link,
.dbp-bottom-nav span.separator{
min-height: 54px !important;
font-size: 11px !important;
gap: 4px !important;
}
.dbp-bottom-nav a::after,
.dbp-bottom-nav .nav-link::after,
.dbp-bottom-nav span.separator::after{
content: "" !important;
width: 32px !important;
height: 32px !important;
display: block !important;
order: -1 !important;
background-color: currentColor !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
-webkit-mask-size: contain !important;
mask-repeat: no-repeat !important;
mask-position: center !important;
mask-size: contain !important;
font-size: 0 !important;
line-height: 0 !important;
}
.dbp-bottom-nav a[href*="oproep"]::after{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2728%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M16%2030c6-9%2022-9%2031%200%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3Crect%20x%3D%2717%27%20y%3D%2725%27%20width%3D%2730%27%20height%3D%2715%27%20rx%3D%277%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Ccircle%20cx%3D%2726%27%20cy%3D%2732%27%20r%3D%273%27%20fill%3D%27white%27/%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%2732%27%20r%3D%273%27%20fill%3D%27white%27/%3E%0A%3Cpath%20d%3D%27M47%2036c5%201%207%205%207%2010%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3Cpath%20d%3D%27M12%2016c3-3%207-5%2011-6M47%2011c4%202%207%205%209%209%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2728%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M16%2030c6-9%2022-9%2031%200%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3Crect%20x%3D%2717%27%20y%3D%2725%27%20width%3D%2730%27%20height%3D%2715%27%20rx%3D%277%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Ccircle%20cx%3D%2726%27%20cy%3D%2732%27%20r%3D%273%27%20fill%3D%27white%27/%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%2732%27%20r%3D%273%27%20fill%3D%27white%27/%3E%0A%3Cpath%20d%3D%27M47%2036c5%201%207%205%207%2010%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3Cpath%20d%3D%27M12%2016c3-3%207-5%2011-6M47%2011c4%202%207%205%209%209%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
width: 34px !important;
height: 34px !important;
}
.dbp-bottom-nav a[href*="nieuw"]::after{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M32%2019v26M19%2032h26%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M32%2019v26M19%2032h26%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
width: 33px !important;
height: 33px !important;
}
.dbp-bottom-nav a[href*="kaart"]::after{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%0A%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%0A%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
.dbp-bottom-nav a[href*="land"]::after{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026S40%2050%2032%2058M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026S40%2050%2032%2058M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
.dbp-bottom-nav a[href*="profiel"]::after{
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
.dbp-bottom-nav li.active > a,
.dbp-bottom-nav li.current > a,
.dbp-bottom-nav a[aria-current="page"]{
color: #14dfff !important;
}
}
/* v0.4.1 - fix Oproepen icon pad en weergave */
@media (max-width: 899px){
.dbp-bottom-nav a[href*="oproep"]::after,
.dbp-bottom-nav a[href="/"]::after{
content:"" !important;
width:34px !important;
height:34px !important;
display:block !important;
order:-1 !important;
background-image:url("../images/nav/icon-oproepen.jpg") !important;
background-size:contain !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-color:transparent !important;
-webkit-mask-image:none !important;
mask-image:none !important;
border-radius:50% !important;
opacity:1 !important;
}
}
/* v0.4.2 - verwijder lege footerbalk boven mobiele bottom-nav */
@media (max-width: 899px){
.dbp-footer{
display:none !important;
height:0 !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
}
body.dbp-site{
padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important;
}
.dbp-bottom-nav{
height:calc(72px + env(safe-area-inset-bottom)) !important;
min-height:calc(72px + env(safe-area-inset-bottom)) !important;
padding:5px 8px calc(7px + env(safe-area-inset-bottom)) !important;
border-top:1px solid rgba(43,232,255,.18) !important;
}
}
/* v0.4.5 - herstel juiste bottom-nav iconen */
@media (max-width: 899px) {
.dbp-bottom-nav {
height: calc(72px + env(safe-area-inset-bottom)) !important;
min-height: calc(72px + env(safe-area-inset-bottom)) !important;
padding: 5px 8px calc(7px + env(safe-area-inset-bottom)) !important;
}
.dbp-bottom-nav a,
.dbp-bottom-nav .nav-link {
min-height: 54px !important;
font-size: 11px !important;
gap: 4px !important;
}
.dbp-bottom-nav a::after,
.dbp-bottom-nav .nav-link::after {
content: "" !important;
order: -1 !important;
display: block !important;
width: 32px !important;
height: 32px !important;
background-color: currentColor !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
-webkit-mask-size: contain !important;
mask-repeat: no-repeat !important;
mask-position: center !important;
mask-size: contain !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* Oproepen: echte Divebuddyping icon-afbeelding */
.dbp-bottom-nav li:nth-child(1) > a::after,
.dbp-bottom-nav a[href*="oproep"]::after,
.dbp-bottom-nav a[href*="calls"]::after,
.dbp-bottom-nav a[href*="aufrufe"]::after,
.dbp-bottom-nav a[href*="appels"]::after,
.dbp-bottom-nav a[href*="avisos"]::after {
width: 35px !important;
height: 35px !important;
background-image: url("../images/nav/icon-oproepen.jpg") !important;
background-color: transparent !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
-webkit-mask-image: none !important;
mask-image: none !important;
border-radius: 50% !important;
}
/* Nieuw: plus in cirkel */
.dbp-bottom-nav li:nth-child(2) > a::after,
.dbp-bottom-nav a[href*="nieuw"]::after,
.dbp-bottom-nav a[href*="new-call"]::after,
.dbp-bottom-nav a[href*="neuer-aufruf"]::after,
.dbp-bottom-nav a[href*="nouvel-appel"]::after,
.dbp-bottom-nav a[href*="nuevo-aviso"]::after {
background-image: none !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M32%2018v28M18%2032h28%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M32%2018v28M18%2032h28%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
/* Kaart */
.dbp-bottom-nav li:nth-child(3) > a::after,
.dbp-bottom-nav a[href*="kaart"]::after,
.dbp-bottom-nav a[href*="map"]::after,
.dbp-bottom-nav a[href*="karte"]::after,
.dbp-bottom-nav a[href*="carte"]::after,
.dbp-bottom-nav a[href*="mapa"]::after {
background-image: none !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%0A%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%0A%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
/* Land */
.dbp-bottom-nav li:nth-child(4) > a::after,
.dbp-bottom-nav a[href*="land"]::after,
.dbp-bottom-nav a[href*="country"]::after,
.dbp-bottom-nav a[href*="pays"]::after,
.dbp-bottom-nav a[href*="pais"]::after {
background-image: none !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
/* Profiel */
.dbp-bottom-nav li:nth-child(5) > a::after,
.dbp-bottom-nav a[href*="profiel"]::after,
.dbp-bottom-nav a[href*="profile"]::after,
.dbp-bottom-nav a[href*="profil"]::after,
.dbp-bottom-nav a[href*="perfil"]::after {
background-image: none !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%0A%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%0A%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%0A%3C/svg%3E") !important;
}
}
/* v0.4.6 - tablet responsive + fix Nieuw icon */
@media (max-width:1199px){
body.dbp-site{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}
.dbp-bottom-nav{display:flex!important;align-items:stretch!important;justify-content:center!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:99999!important;height:calc(72px + env(safe-area-inset-bottom))!important;min-height:calc(72px + env(safe-area-inset-bottom))!important;padding:5px 8px calc(7px + env(safe-area-inset-bottom))!important;background:#00091f!important;border-top:1px solid rgba(43,232,255,.18)!important}
.dbp-bottom-nav>.moduletable,.dbp-bottom-nav>div,.dbp-bottom-nav nav{display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.dbp-bottom-nav ul,.dbp-bottom-nav .mod-menu,.dbp-bottom-nav .navbar-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;list-style:none!important}
.dbp-bottom-nav li{margin:0!important;padding:0!important;text-align:center!important;list-style:none!important}
.dbp-bottom-nav a,.dbp-bottom-nav .nav-link{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-height:54px!important;padding:2px!important;color:#fff!important;text-decoration:none!important;font-size:11px!important;font-weight:500!important;line-height:1.1!important}
.dbp-bottom-nav li.active>a,.dbp-bottom-nav li.current>a,.dbp-bottom-nav a[aria-current="page"]{color:#14dfff!important}
.dbp-bottom-nav a::after,.dbp-bottom-nav .nav-link::after{content:""!important;order:-1!important;display:block!important;width:32px!important;height:32px!important;background-color:currentColor!important;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;-webkit-mask-repeat:no-repeat!important;-webkit-mask-position:center!important;-webkit-mask-size:contain!important;mask-repeat:no-repeat!important;mask-position:center!important;mask-size:contain!important;font-size:0!important;line-height:0!important}
.dbp-bottom-nav li:nth-child(1)>a::after,.dbp-bottom-nav a[href*="oproep"]::after,.dbp-bottom-nav a[href*="calls"]::after,.dbp-bottom-nav a[href*="aufrufe"]::after,.dbp-bottom-nav a[href*="appels"]::after,.dbp-bottom-nav a[href*="avisos"]::after{width:35px!important;height:35px!important;background-image:url("../images/nav/icon-oproepen.jpg")!important;background-color:transparent!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;-webkit-mask-image:none!important;mask-image:none!important;border-radius:50%!important}
.dbp-bottom-nav li:nth-child(2)>a::after,.dbp-bottom-nav a[href*="nieuw"]::after,.dbp-bottom-nav a[href*="nieuwe-oproep"]::after,.dbp-bottom-nav a[href*="new"]::after,.dbp-bottom-nav a[href*="new-call"]::after,.dbp-bottom-nav a[href*="neuer"]::after,.dbp-bottom-nav a[href*="nouvel"]::after,.dbp-bottom-nav a[href*="nuevo"]::after{background-image:none!important;background-color:currentColor!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M32%2018v28M18%2032h28%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M32%2018v28M18%2032h28%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important}
.dbp-bottom-nav li:nth-child(3)>a::after,.dbp-bottom-nav a[href*="kaart"]::after,.dbp-bottom-nav a[href*="map"]::after,.dbp-bottom-nav a[href*="karte"]::after,.dbp-bottom-nav a[href*="carte"]::after,.dbp-bottom-nav a[href*="mapa"]::after{background-image:none!important;background-color:currentColor!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important}
.dbp-bottom-nav li:nth-child(4)>a::after,.dbp-bottom-nav a[href*="land"]::after,.dbp-bottom-nav a[href*="country"]::after,.dbp-bottom-nav a[href*="pays"]::after,.dbp-bottom-nav a[href*="pais"]::after{background-image:none!important;background-color:currentColor!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important}
.dbp-bottom-nav li:nth-child(5)>a::after,.dbp-bottom-nav a[href*="profiel"]::after,.dbp-bottom-nav a[href*="profile"]::after,.dbp-bottom-nav a[href*="profil"]::after,.dbp-bottom-nav a[href*="perfil"]::after{background-image:none!important;background-color:currentColor!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important}
.dbp-page-surface{width:min(92vw,760px)!important;margin-left:auto!important;margin-right:auto!important}
.dbp-header-inner{width:min(92vw,1100px)!important}
.dbp-before-content--header{width:min(80vw,640px)!important;margin-left:auto!important;margin-right:auto!important}
}
@media (min-width:1200px){.dbp-bottom-nav{display:none!important}}
/* v0.4.8 - tablet layout correctie + fixed bottom-nav */
@media (min-width:768px) and (max-width:1199px){
html,
body,
body.dbp-site{
background:#f8fafc !important;
overflow-x:hidden !important;
}
body.dbp-site{
padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
}
.dbp-header{
position:relative !important;
width:100% !important;
min-height:178px !important;
padding:18px 0 38px !important;
background:#00091f !important;
overflow:visible !important;
}
.dbp-header-inner{
width:min(90vw,1180px) !important;
max-width:1180px !important;
margin:0 auto !important;
padding:0 !important;
}
.dbp-brand img,
.dbp-logo,
.dbp-brand__image{
max-height:58px !important;
width:auto !important;
}
.dbp-before-content--header{
width:min(56vw,660px) !important;
max-width:660px !important;
margin:14px auto -28px !important;
padding:0 !important;
position:relative !important;
z-index:20 !important;
}
.dbp-before-content--header .dbp-new-call-button,
.dbp-before-content--header a[href*='nieuw'],
.dbp-before-content--header a[href*='nieuwe-oproep']{
min-height:44px !important;
font-size:18px !important;
border-radius:12px !important;
}
.dbp-main{
margin:0 !important;
padding:0 0 calc(88px + env(safe-area-inset-bottom)) !important;
background:#f8fafc !important;
min-height:calc(100vh - 178px) !important;
}
.dbp-page-surface,
.dbp-page-shell,
.dbp-content,
.dbp-component-wrap{
width:min(74vw,900px) !important;
max-width:900px !important;
margin:0 auto !important;
background:#fff !important;
border-radius:32px 32px 0 0 !important;
box-shadow:0 16px 42px rgba(4,15,39,.10) !important;
}
.dbp-page-surface{
min-height:calc(100vh - 260px) !important;
padding:34px 42px 80px !important;
box-sizing:border-box !important;
}
.dbp-component{
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
box-shadow:none !important;
background:transparent !important;
}
.dbp-main:before,
.dbp-main:after,
.dbp-page-surface:before,
.dbp-page-surface:after{
display:none !important;
content:none !important;
}
.dbp-bottom-nav{
display:flex !important;
position:fixed !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
top:auto !important;
z-index:2147483000 !important;
height:calc(76px + env(safe-area-inset-bottom)) !important;
min-height:calc(76px + env(safe-area-inset-bottom)) !important;
padding:6px 8px calc(8px + env(safe-area-inset-bottom)) !important;
background:#00091f !important;
transform:none !important;
translate:none !important;
border-top:1px solid rgba(43,232,255,.20) !important;
}
.dbp-bottom-nav ul,
.dbp-bottom-nav .mod-menu{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
width:100% !important;
height:100% !important;
}
}
@media (min-width:1200px){
.dbp-bottom-nav{
display:none !important;
}
}
/* v0.4.31 - mobile only: content module positie 10px extra omhoog */
@media (max-width: 767.98px){
.dbp-main{
margin-top:-10px !important;
}
.dbp-page-surface,
.dbp-page-shell,
.dbp-content,
.dbp-component-wrap,
.dbp-component{
transform:translateY(-20px) !important;
}
}
/* v0.4.33 - mobiel: content overlap header */
@media (max-width: 767.98px){
.dbp-page-surface,
.dbp-page-shell,
.dbp-content,
.dbp-component-wrap,
.dbp-component{
transform: translateY(-40px) !important;
position: relative;
z-index: 25;
}
.dbp-main{
margin-top: -40px !important;
}
.component-area,
main,
#content,
.site-grid{
position: relative;
z-index: 25;
}
}
/* v0.4.34 - mobiel: overlap behouden, tekst/content in kaart lager */
@media (max-width: 767.98px){
/* De kaart blijft 40px omhoog overlappen met de header */
.dbp-page-surface,
.dbp-page-shell,
.dbp-content,
.dbp-component-wrap,
.dbp-component{
transform: translateY(-40px) !important;
position: relative;
z-index: 25;
}
.dbp-main{
margin-top: -40px !important;
}
/* Alleen de inhoud binnen de kaart weer omlaag, zodat titel niet in de header valt */
.dbp-component,
.dbp-component-wrap,
.dbp-content .com-content-article,
.dbp-content .blog,
.dbp-content .item-page,
.dbp-content main,
.dbp-content .moduletable{
padding-top: 34px !important;
}
.dbp-content h1,
.dbp-content .page-header,
.dbp-component h1,
.dbp-component .page-header{
margin-top: 0 !important;
}
}
/* v0.4.45 - Oproepen icon: wit standaard, blauw alleen wanneer geselecteerd */
@media (max-width:1199px){
.dbp-bottom-nav a[data-dbp-nav-key="calls"]::after,
.dbp-bottom-nav a[data-dbp-nav-alias="oproepen"]::after,
.dbp-bottom-nav a[data-dbp-nav-alias="calls"]::after,
.dbp-bottom-nav a[data-dbp-nav-alias="aufrufe"]::after,
.dbp-bottom-nav a[data-dbp-nav-alias="appels"]::after,
.dbp-bottom-nav a[data-dbp-nav-alias="llamadas"]::after,
.dbp-bottom-nav a[href*="oproep"]::after,
.dbp-bottom-nav a[href*="calls"]::after,
.dbp-bottom-nav a[href*="aufrufe"]::after,
.dbp-bottom-nav a[href*="appels"]::after,
.dbp-bottom-nav a[href*="llamadas"]::after{
content:""!important;
width:35px!important;
height:35px!important;
display:block!important;
order:-1!important;
background-image:url("../images/nav/icon-oproepen-white.jpeg")!important;
background-color:transparent!important;
background-size:contain!important;
background-position:center!important;
background-repeat:no-repeat!important;
-webkit-mask-image:none!important;
mask-image:none!important;
border-radius:50%!important;
filter:none!important;
opacity:1!important;
}
.dbp-bottom-nav li.active > a[data-dbp-nav-key="calls"]::after,
.dbp-bottom-nav li.current > a[data-dbp-nav-key="calls"]::after,
.dbp-bottom-nav a[aria-current="page"][data-dbp-nav-key="calls"]::after,
.dbp-bottom-nav li.active > a[data-dbp-nav-alias="oproepen"]::after,
.dbp-bottom-nav li.current > a[data-dbp-nav-alias="oproepen"]::after,
.dbp-bottom-nav li.active > a[data-dbp-nav-alias="calls"]::after,
.dbp-bottom-nav li.current > a[data-dbp-nav-alias="calls"]::after,
.dbp-bottom-nav li.active > a[data-dbp-nav-alias="aufrufe"]::after,
.dbp-bottom-nav li.current > a[data-dbp-nav-alias="aufrufe"]::after,
.dbp-bottom-nav li.active > a[data-dbp-nav-alias="appels"]::after,
.dbp-bottom-nav li.current > a[data-dbp-nav-alias="appels"]::after,
.dbp-bottom-nav li.active > a[data-dbp-nav-alias="llamadas"]::after,
.dbp-bottom-nav li.current > a[data-dbp-nav-alias="llamadas"]::after{
background-image:url("../images/nav/icon-oproepen-color.jpeg")!important;
}
}
/* v0.4.47: readable offline and error pages */
body.dbp-system-page{
min-height:100vh;
background:#00091f radial-gradient(circle at 12% 0,rgba(39,216,255,.18),transparent 28%);
color:#071229;
overflow-x:hidden;
}
.dbp-system-main{
min-height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:clamp(18px,5vw,54px);
}
.dbp-system-card{
width:min(100%,760px);
max-width:100%;
background:#fff;
border-radius:32px;
box-shadow:0 22px 70px rgba(0,0,0,.32);
padding:clamp(24px,6vw,54px);
overflow:hidden;
}
.dbp-system-brand{
display:inline-flex;
align-items:center;
gap:.3em;
margin-bottom:22px;
color:#071229;
font-size:clamp(20px,5vw,34px);
line-height:1;
font-weight:950;
letter-spacing:.05em;
white-space:normal;
max-width:100%;
overflow-wrap:anywhere;
}
.dbp-system-brand span{
color:var(--dbp-cyan,#08d7f8);
}
.dbp-system-kicker{
margin:0 0 8px;
color:var(--dbp-accent,#008cff);
font-weight:850;
letter-spacing:.03em;
text-transform:uppercase;
font-size:clamp(13px,3.4vw,15px);
}
.dbp-system-card h1{
margin:0 0 18px;
max-width:100%;
font-size:clamp(36px,12vw,76px);
line-height:1.02;
color:#071229;
overflow-wrap:anywhere;
word-break:break-word;
}
.dbp-system-message{
max-width:100%;
margin:0 0 28px;
color:#071229;
font-size:clamp(17px,4.8vw,24px);
line-height:1.45;
overflow-wrap:anywhere;
word-break:break-word;
}
.dbp-system-button{
width:auto;
max-width:100%;
}
@media (max-width:520px){
.dbp-system-main{
align-items:flex-start;
padding:18px 14px calc(18px + env(safe-area-inset-bottom));
}
.dbp-system-card{
border-radius:26px;
padding:24px 20px;
}
}
/* v0.4.48: offline/error pages aligned with Divebuddyping app layout */
body.dbp-system-page{
min-height:100vh;
margin:0;
background:#00091f radial-gradient(circle at 10% 0,rgba(39,216,255,.18),transparent 28%);
color:#071229;
overflow-x:hidden;
}
.dbp-system-main{
min-height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:clamp(18px,5vw,54px);
}
.dbp-system-card{
width:min(100%,760px);
max-width:100%;
background:#fff;
border-radius:clamp(28px,5vw,48px);
box-shadow:0 24px 80px rgba(0,0,0,.36);
padding:clamp(26px,6vw,58px);
overflow:hidden;
}
.dbp-system-logo-wrap{
display:flex;
align-items:center;
margin:0 0 clamp(24px,5vw,42px);
}
.dbp-system-logo{
display:block;
max-width:min(100%,440px);
max-height:98px;
width:auto;
height:auto;
object-fit:contain;
}
.dbp-system-brand{
display:inline-flex;
align-items:center;
gap:.3em;
margin:0;
color:#071229;
font-size:clamp(26px,7vw,44px);
line-height:1;
font-weight:950;
letter-spacing:.05em;
max-width:100%;
overflow-wrap:anywhere;
}
.dbp-system-brand span{color:#27d8ff;}
.dbp-system-kicker{
margin:0 0 12px;
color:#1f8fff;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
font-size:clamp(15px,3.8vw,20px);
}
.dbp-system-card h1{
margin:0 0 22px;
max-width:100%;
font-size:clamp(34px,9vw,58px);
line-height:1.08;
color:#071229;
overflow-wrap:normal;
word-break:normal;
hyphens:auto;
}
.dbp-error-page .dbp-system-code{
font-size:clamp(72px,18vw,126px);
line-height:.95;
letter-spacing:-.04em;
}
.dbp-system-message{
max-width:100%;
margin:0 0 34px;
color:#071229;
font-size:clamp(20px,4.8vw,30px);
line-height:1.42;
overflow-wrap:break-word;
word-break:normal;
}
.dbp-system-button{
width:auto;
max-width:100%;
min-height:58px;
padding:16px 34px;
border-radius:24px;
background:linear-gradient(135deg,#1f8fff,#27d8ff)!important;
color:#fff!important;
font-size:clamp(18px,4.2vw,24px);
font-weight:950;
text-decoration:none!important;
box-shadow:0 18px 44px rgba(31,143,255,.32);
text-transform:none;
white-space:normal;
}
@media (max-width:520px){
.dbp-system-main{
align-items:flex-start;
padding:18px 14px calc(18px + env(safe-area-inset-bottom));
}
.dbp-system-card{
border-radius:30px;
padding:28px 22px;
}
.dbp-system-logo{
max-height:76px;
}
.dbp-system-card h1{
font-size:clamp(31px,8.4vw,42px);
}
.dbp-error-page .dbp-system-code{
font-size:clamp(76px,24vw,112px);
}
}
/* Divebuddyping premium offline/error pages v0.4.49 */
html, body.dbp-system-page {
min-height: 100%;
}
body.dbp-system-page {
margin: 0;
color: #06102b;
background:
radial-gradient(circle at 50% 0%, rgba(39,216,255,.28) 0, rgba(39,216,255,.09) 18%, rgba(5,10,36,0) 40%),
radial-gradient(circle at 8% 25%, rgba(0,172,246,.18) 0 2px, transparent 3px),
radial-gradient(circle at 92% 24%, rgba(0,172,246,.20) 0 2px, transparent 3px),
linear-gradient(180deg, #050a24 0%, #060454 48%, #020826 100%);
background-size: auto, 160px 160px, 180px 180px, auto;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow-x: hidden;
}
body.dbp-system-page::before,
body.dbp-system-page::after {
content: "";
position: fixed;
pointer-events: none;
z-index: 0;
}
body.dbp-system-page::before {
inset: 0;
background:
linear-gradient(120deg, transparent 0 58%, rgba(0,172,246,.08) 59%, transparent 62%),
linear-gradient(65deg, transparent 0 64%, rgba(16,224,255,.07) 65%, transparent 68%);
opacity: .85;
}
body.dbp-system-page::after {
left: -20%;
right: -20%;
bottom: -90px;
height: 230px;
background:
radial-gradient(ellipse at 50% 0%, rgba(0,172,246,.32), transparent 65%),
repeating-radial-gradient(ellipse at 50% 100%, rgba(16,224,255,.16) 0 2px, transparent 3px 18px);
opacity: .55;
filter: blur(.2px);
}
.dbp-system-header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 1040px;
margin: 0 auto;
padding: clamp(22px, 5vw, 48px) clamp(22px, 6vw, 56px) 10px;
box-sizing: border-box;
}
.dbp-system-header-logo img {
display: block;
width: min(52vw, 430px);
max-height: 92px;
object-fit: contain;
object-position: left center;
}
.dbp-system-header-logo span {
display: inline-block;
color: #ffffff;
font-weight: 900;
font-size: clamp(1.4rem, 5vw, 3rem);
letter-spacing: .08em;
line-height: 1;
}
.dbp-system-header-logo strong {
color: #27d8ff;
}
.dbp-system-lang {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
min-width: 74px;
border-radius: 24px;
color: #ffffff;
background: rgba(10, 22, 48, .82);
border: 1px solid rgba(255,255,255,.22);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.28);
font-size: 1.25rem;
line-height: 1;
justify-content: center;
}
.dbp-system-lang-arrow {
font-size: 1.1rem;
transform: translateY(-1px);
}
.dbp-system-main {
position: relative;
z-index: 1;
min-height: calc(100vh - 120px);
display: grid;
place-items: center;
padding: clamp(28px, 8vh, 72px) clamp(18px, 5vw, 48px) clamp(42px, 8vh, 82px);
box-sizing: border-box;
}
.dbp-system-card {
width: min(88vw, 760px);
box-sizing: border-box;
margin: 0 auto;
padding: clamp(34px, 7vw, 72px) clamp(26px, 7vw, 72px);
border-radius: clamp(34px, 6vw, 56px);
background: rgba(255,255,255,.97);
box-shadow: 0 28px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.9);
text-align: center;
overflow: hidden;
position: relative;
}
.dbp-system-card::after {
content: "";
position: absolute;
right: -70px;
bottom: -80px;
width: 270px;
height: 270px;
background: url('../images/nav/icon-oproepen-color.jpeg') center/contain no-repeat;
opacity: .035;
pointer-events: none;
}
.dbp-app-icon-badge {
width: clamp(108px, 24vw, 156px);
height: clamp(108px, 24vw, 156px);
margin: 0 auto clamp(28px, 5vw, 44px);
border-radius: 28%;
background: #050a24;
box-shadow: 0 20px 42px rgba(0, 9, 31, .34), 0 0 0 1px rgba(255,255,255,.08) inset;
display: grid;
place-items: center;
overflow: hidden;
}
.dbp-app-icon-badge img {
width: 94%;
height: 94%;
object-fit: cover;
display: block;
}
.dbp-system-card h1 {
margin: 0;
color: #06102b;
font-size: clamp(2.6rem, 9vw, 5.4rem);
line-height: .98;
font-weight: 900;
letter-spacing: -.045em;
overflow-wrap: anywhere;
}
.dbp-error-card h1 {
font-size: clamp(2.1rem, 7vw, 4.2rem);
}
.dbp-system-kicker {
margin: 0 0 18px;
color: #1f8fff;
text-transform: uppercase;
letter-spacing: .10em;
font-size: clamp(1rem, 3vw, 1.35rem);
font-weight: 900;
}
.dbp-system-divider {
width: 150px;
height: 12px;
margin: clamp(22px, 4vw, 34px) auto;
background: linear-gradient(90deg, transparent 0 8%, #00acf6 8% 43%, transparent 43% 47%, #00acf6 47% 53%, transparent 53% 57%, #10e0ff 57% 92%, transparent 92% 100%);
border-radius: 999px;
}
.dbp-system-message-strong {
position: relative;
z-index: 1;
margin: 0 auto 14px;
max-width: 620px;
color: #06102b;
font-size: clamp(1.1rem, 3.2vw, 1.55rem);
line-height: 1.35;
font-weight: 800;
}
.dbp-system-message {
position: relative;
z-index: 1;
margin: 0 auto clamp(28px, 5vw, 48px);
max-width: 620px;
color: #6b7280;
font-size: clamp(1.05rem, 3vw, 1.5rem);
line-height: 1.45;
font-weight: 500;
overflow-wrap: anywhere;
}
.dbp-system-code {
margin: 18px 0 20px;
color: #06102b;
font-size: clamp(4rem, 18vw, 8rem);
line-height: .9;
font-weight: 900;
letter-spacing: -.05em;
}
.dbp-system-button {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
min-width: min(100%, 420px);
border: 0;
border-radius: 999px;
padding: clamp(16px, 3.8vw, 24px) clamp(26px, 6vw, 54px);
color: #ffffff !important;
text-decoration: none !important;
background: linear-gradient(135deg, #1f8fff 0%, #00acf6 52%, #10e0ff 100%);
box-shadow: 0 18px 38px rgba(0,172,246,.32);
font-size: clamp(1.1rem, 3.2vw, 1.55rem);
font-weight: 900;
cursor: pointer;
}
.dbp-system-button span:first-child {
font-size: 1.4em;
line-height: .8;
}
.dbp-system-footnote {
position: relative;
z-index: 1;
margin: clamp(24px, 5vw, 46px) 0 0;
color: #6b7280;
font-size: clamp(.95rem, 2.6vw, 1.2rem);
font-weight: 600;
}
.dbp-system-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.dbp-system-back {
border: 1px solid rgba(6,16,43,.13);
border-radius: 999px;
padding: clamp(14px, 3vw, 20px) clamp(24px, 5vw, 38px);
color: #06102b;
background: #ffffff;
box-shadow: 0 10px 26px rgba(0,0,0,.08);
font-size: clamp(1rem, 2.8vw, 1.25rem);
font-weight: 800;
cursor: pointer;
}
@media (max-width: 520px) {
.dbp-system-header {
padding-top: 22px;
align-items: flex-start;
}
.dbp-system-header-logo img {
width: min(62vw, 330px);
max-height: 70px;
}
.dbp-system-lang {
min-width: 62px;
padding: 9px 11px;
border-radius: 20px;
}
.dbp-system-main {
place-items: start center;
padding-top: 44px;
}
.dbp-system-card {
width: min(90vw, 440px);
}
.dbp-system-button {
width: 100%;
min-width: 0;
}
}
/* v0.4.50 - system page header/background alignment + mobile card positioning */
body.dbp-system-page {
background:
linear-gradient(180deg, #00091f 0 172px, rgba(0,9,31,0) 172px),
radial-gradient(circle at 50% 0%, rgba(39,216,255,.28) 0, rgba(39,216,255,.09) 18%, rgba(5,10,36,0) 40%),
radial-gradient(circle at 8% 25%, rgba(0,172,246,.18) 0 2px, transparent 3px),
radial-gradient(circle at 92% 24%, rgba(0,172,246,.20) 0 2px, transparent 3px),
linear-gradient(180deg, #050a24 0%, #060454 48%, #020826 100%) !important;
background-size: auto, auto, 160px 160px, 180px 180px, auto !important;
}
.dbp-system-header {
background: #00091f !important;
border-radius: 0 !important;
}
.dbp-system-header-logo img {
background: #00091f !important;
}
.dbp-system-main {
align-items: start !important;
place-items: start center !important;
padding-top: clamp(16px, 3vh, 34px) !important;
}
@media (max-width: 520px) {
body.dbp-system-page {
background:
linear-gradient(180deg, #00091f 0 142px, rgba(0,9,31,0) 142px),
radial-gradient(circle at 50% 0%, rgba(39,216,255,.24) 0, rgba(39,216,255,.08) 20%, rgba(5,10,36,0) 44%),
radial-gradient(circle at 8% 25%, rgba(0,172,246,.18) 0 2px, transparent 3px),
radial-gradient(circle at 92% 24%, rgba(0,172,246,.20) 0 2px, transparent 3px),
linear-gradient(180deg, #050a24 0%, #060454 48%, #020826 100%) !important;
background-size: auto, auto, 160px 160px, 180px 180px, auto !important;
}
.dbp-system-header {
padding: 22px 20px 8px !important;
max-width: none !important;
width: 100% !important;
}
.dbp-system-header-logo img {
width: min(58vw, 300px) !important;
max-height: 64px !important;
}
.dbp-system-main {
min-height: auto !important;
padding: 22px 20px 96px !important;
}
.dbp-system-card {
width: min(90vw, 430px) !important;
padding: 32px 26px 34px !important;
border-radius: 34px !important;
}
.dbp-app-icon-badge {
width: 106px !important;
height: 106px !important;
margin-bottom: 24px !important;
}
.dbp-system-card h1 {
font-size: clamp(2.45rem, 11vw, 3.5rem) !important;
line-height: 1.02 !important;
}
.dbp-error-card h1 {
font-size: clamp(2rem, 9vw, 2.85rem) !important;
}
.dbp-system-kicker {
margin-bottom: 14px !important;
font-size: .98rem !important;
}
.dbp-system-code {
margin: 16px 0 18px !important;
font-size: clamp(4.5rem, 20vw, 6rem) !important;
}
.dbp-system-divider {
margin: 20px auto !important;
}
.dbp-system-message-strong {
font-size: 1.12rem !important;
margin-bottom: 12px !important;
}
.dbp-system-message {
font-size: 1.05rem !important;
margin-bottom: 30px !important;
}
.dbp-system-footnote {
margin-top: 28px !important;
font-size: .95rem !important;
}
.dbp-system-button {
padding: 17px 24px !important;
font-size: 1.1rem !important;
}
}
@media (max-height: 760px) and (max-width: 520px) {
.dbp-system-main {
padding-top: 14px !important;
}
.dbp-system-card {
padding-top: 26px !important;
padding-bottom: 28px !important;
}
.dbp-app-icon-badge {
width: 94px !important;
height: 94px !important;
margin-bottom: 18px !important;
}
.dbp-system-card h1 {
font-size: clamp(2.15rem, 10vw, 3rem) !important;
}
.dbp-error-card h1 {
font-size: clamp(1.8rem, 8vw, 2.45rem) !important;
}
.dbp-system-code {
font-size: clamp(3.8rem, 18vw, 5.2rem) !important;
}
.dbp-system-divider {
margin: 16px auto !important;
height: 10px !important;
}
.dbp-system-message,
.dbp-system-message-strong {
line-height: 1.32 !important;
}
}
/* v0.4.51 - language-aware dropdown for offline/error pages (legacy details fallback) */
.dbp-system-lang-switcher {
position: relative;
padding: 0 !important;
min-width: 0 !important;
display: block !important;
}
.dbp-system-lang-switcher summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 74px;
padding: 10px 14px;
border-radius: 24px;
}
.dbp-system-lang-switcher summary::-webkit-details-marker {
display: none;
}
.dbp-system-lang-list {
position: absolute;
right: 0;
top: calc(100% + 10px);
z-index: 20;
min-width: 176px;
margin: 0;
padding: 8px;
list-style: none;
border-radius: 20px;
background: rgba(5, 10, 36, .96);
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 18px 44px rgba(0,0,0,.35);
backdrop-filter: blur(14px);
}
.dbp-system-lang-list a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 14px;
color: #ffffff;
text-decoration: none;
font-size: .95rem;
font-weight: 800;
white-space: nowrap;
}
.dbp-system-lang-list li.is-active a,
.dbp-system-lang-list a:hover,
.dbp-system-lang-list a:focus-visible {
background: rgba(39,216,255,.16);
color: #27d8ff;
}
@media (max-width: 520px) {
.dbp-system-lang-switcher summary {
min-width: 62px;
padding: 9px 11px;
border-radius: 20px;
}
.dbp-system-lang-list {
min-width: 154px;
right: -2px;
}
.dbp-system-lang-list a {
font-size: .88rem;
padding: 9px 10px;
}
}
/* v0.4.52 - robust native language selector for offline/error pages */
.dbp-system-lang-label {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 74px;
height: 48px;
padding: 0 14px;
border-radius: 24px;
color: #ffffff;
background: rgba(10, 22, 48, .82);
border: 1px solid rgba(255,255,255,.22);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.28);
cursor: pointer;
overflow: hidden;
}
.dbp-system-lang-current {
position: relative;
z-index: 1;
font-size: 1.25rem;
line-height: 1;
pointer-events: none;
}
.dbp-system-lang-label .dbp-system-lang-arrow {
position: relative;
z-index: 1;
pointer-events: none;
}
.dbp-system-lang-select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
border: 0;
appearance: auto;
-webkit-appearance: menulist-button;
}
@media (max-width: 520px) {
.dbp-system-lang-label {
min-width: 62px;
height: 44px;
padding: 0 11px;
border-radius: 20px;
}
}
/* v0.4.53: system pages use the normal Joomla mod_languages module in header-actions */
.dbp-system-header .dbp-system-header-actions{margin-left:auto;position:relative;z-index:1000;}
.dbp-system-header .mod-languages{margin:0;}
.dbp-system-header .dbp-lang-details{z-index:1001;}
.dbp-system-header .dbp-lang-list{z-index:1002;}
/* v0.4.55 - compact tablet layout for offline/error system pages */
@media (min-width: 521px) and (max-width: 1100px) {
body.dbp-system-page {
background:
linear-gradient(180deg, #00091f 0 142px, rgba(0,9,31,0) 142px),
radial-gradient(circle at 50% 0%, rgba(39,216,255,.22) 0, rgba(39,216,255,.07) 18%, rgba(5,10,36,0) 42%),
radial-gradient(circle at 8% 25%, rgba(0,172,246,.16) 0 2px, transparent 3px),
radial-gradient(circle at 92% 24%, rgba(0,172,246,.18) 0 2px, transparent 3px),
linear-gradient(180deg, #050a24 0%, #060454 48%, #020826 100%) !important;
background-size: auto, auto, 160px 160px, 180px 180px, auto !important;
}
.dbp-system-header {
width: 100% !important;
max-width: 1060px !important;
padding: 20px 42px 8px !important;
}
.dbp-system-header-logo img {
width: min(38vw, 360px) !important;
max-height: 76px !important;
}
.dbp-system-main {
min-height: auto !important;
padding: 10px 28px 44px !important;
place-items: start center !important;
}
.dbp-system-card {
width: min(78vw, 660px) !important;
padding: 34px 50px 38px !important;
border-radius: 38px !important;
}
.dbp-app-icon-badge {
width: 112px !important;
height: 112px !important;
margin-bottom: 22px !important;
}
.dbp-system-card h1 {
font-size: clamp(2.65rem, 5.2vw, 4.2rem) !important;
line-height: 1 !important;
}
.dbp-error-card h1 {
font-size: clamp(2.05rem, 4.1vw, 3.15rem) !important;
}
.dbp-system-kicker {
margin-bottom: 12px !important;
font-size: clamp(.95rem, 1.7vw, 1.18rem) !important;
}
.dbp-system-code {
margin: 12px 0 16px !important;
font-size: clamp(4.2rem, 10vw, 6.4rem) !important;
}
.dbp-system-divider {
width: 130px !important;
height: 10px !important;
margin: 18px auto 22px !important;
}
.dbp-system-message-strong {
font-size: clamp(1.05rem, 2vw, 1.28rem) !important;
margin-bottom: 10px !important;
}
.dbp-system-message {
font-size: clamp(1rem, 1.9vw, 1.22rem) !important;
margin-bottom: 26px !important;
line-height: 1.36 !important;
}
.dbp-system-button {
min-width: min(100%, 360px) !important;
padding: 15px 34px !important;
font-size: clamp(1.05rem, 2vw, 1.22rem) !important;
}
.dbp-system-footnote {
margin-top: 24px !important;
font-size: .95rem !important;
}
.dbp-system-actions {
gap: 12px !important;
}
.dbp-system-back {
padding: 13px 28px !important;
font-size: 1rem !important;
}
}
@media (min-width: 521px) and (max-width: 1100px) and (max-height: 820px) {
.dbp-system-header {
padding-top: 16px !important;
padding-bottom: 4px !important;
}
.dbp-system-header-logo img {
max-height: 62px !important;
width: min(34vw, 320px) !important;
}
.dbp-system-main {
padding-top: 4px !important;
padding-bottom: 28px !important;
}
.dbp-system-card {
width: min(72vw, 620px) !important;
padding: 26px 44px 30px !important;
border-radius: 34px !important;
}
.dbp-app-icon-badge {
width: 88px !important;
height: 88px !important;
margin-bottom: 16px !important;
}
.dbp-system-card h1 {
font-size: clamp(2.25rem, 4.4vw, 3.35rem) !important;
}
.dbp-error-card h1 {
font-size: clamp(1.8rem, 3.5vw, 2.55rem) !important;
}
.dbp-system-code {
font-size: clamp(3.6rem, 8.6vw, 5.2rem) !important;
margin: 10px 0 12px !important;
}
.dbp-system-divider {
margin: 14px auto 18px !important;
}
.dbp-system-message,
.dbp-system-message-strong {
line-height: 1.28 !important;
}
.dbp-system-message {
margin-bottom: 20px !important;
}
.dbp-system-footnote {
margin-top: 18px !important;
}
}
/* v0.4.56 - CSS-only responsive underwater background for offline/error pages
Basis kleur gelijk aan logo/header achtergrond. Geen fullscreen achtergrondafbeelding. */
body.dbp-system-page {
--dbp-bg-logo: #00091f;
--dbp-bg-deep: #050a24;
--dbp-bg-bottom: #020617;
--dbp-accent: #00acf6;
--dbp-accent-soft: #10e0ff;
position: relative;
isolation: isolate;
min-height: 100svh;
overflow-x: hidden;
background-color: var(--dbp-bg-logo) !important;
background-image:
radial-gradient(circle at 50% -8%, rgba(16,224,255,.24) 0, rgba(0,172,246,.10) 24%, rgba(0,9,31,0) 46%),
radial-gradient(circle at 18% 34%, rgba(0,172,246,.14) 0 2px, transparent 3px),
radial-gradient(circle at 86% 31%, rgba(16,224,255,.16) 0 2px, transparent 3px),
radial-gradient(circle at 12% 72%, rgba(0,172,246,.11) 0 2px, transparent 3px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, var(--dbp-bg-deep) 44%, var(--dbp-bg-bottom) 100%) !important;
background-size: auto, 156px 156px, 190px 190px, 220px 220px, auto !important;
background-repeat: no-repeat, repeat, repeat, repeat, no-repeat !important;
}
body.dbp-system-page::before {
content: "";
position: fixed;
inset: 0 0 auto 0;
height: 38vh;
pointer-events: none;
z-index: -2;
opacity: .42;
filter: blur(1px);
background:
linear-gradient(100deg, transparent 0 42%, rgba(16,224,255,.15) 48%, transparent 56%),
linear-gradient(78deg, transparent 0 52%, rgba(0,172,246,.12) 58%, transparent 66%),
radial-gradient(ellipse at 50% 0%, rgba(39,216,255,.28), transparent 58%);
}
body.dbp-system-page::after {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 34vh;
pointer-events: none;
z-index: -1;
opacity: .22;
background:
radial-gradient(70% 36% at 50% 118%, rgba(0,172,246,.34), transparent 62%),
repeating-radial-gradient(ellipse at 50% 100%, transparent 0 28px, rgba(16,224,255,.22) 30px 32px, transparent 34px 58px);
}
body.dbp-system-page .dbp-system-header {
background: var(--dbp-bg-logo) !important;
}
body.dbp-system-page .dbp-system-header-logo img {
background: var(--dbp-bg-logo) !important;
box-shadow: none !important;
}
@media (max-width: 520px) {
body.dbp-system-page {
background-image:
radial-gradient(circle at 50% -6%, rgba(16,224,255,.20) 0, rgba(0,172,246,.08) 26%, rgba(0,9,31,0) 48%),
radial-gradient(circle at 8% 34%, rgba(0,172,246,.15) 0 2px, transparent 3px),
radial-gradient(circle at 92% 36%, rgba(16,224,255,.15) 0 2px, transparent 3px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, var(--dbp-bg-deep) 46%, var(--dbp-bg-bottom) 100%) !important;
background-size: auto, 150px 150px, 180px 180px, auto !important;
}
body.dbp-system-page::before { height: 30vh; opacity: .32; }
body.dbp-system-page::after { height: 26vh; opacity: .18; }
}
@media (min-width: 521px) and (max-width: 1100px) {
body.dbp-system-page {
background-image:
radial-gradient(circle at 50% -8%, rgba(16,224,255,.22) 0, rgba(0,172,246,.09) 22%, rgba(0,9,31,0) 44%),
radial-gradient(circle at 8% 30%, rgba(0,172,246,.13) 0 2px, transparent 3px),
radial-gradient(circle at 92% 30%, rgba(16,224,255,.15) 0 2px, transparent 3px),
radial-gradient(circle at 16% 76%, rgba(0,172,246,.10) 0 2px, transparent 3px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, var(--dbp-bg-deep) 45%, var(--dbp-bg-bottom) 100%) !important;
background-size: auto, 160px 160px, 190px 190px, 230px 230px, auto !important;
}
}
/* v0.4.57 - sterker zichtbare CSS-only underwater achtergrond
Geen vaste fullscreen afbeelding. Basis blijft #00091f zodat de logo-randen wegvallen. */
body.dbp-system-page{
--dbp-bg-logo:#00091f;
--dbp-bg-deep:#031238;
--dbp-bg-mid:#050a38;
--dbp-bg-bottom:#020617;
--dbp-accent:#00acf6;
--dbp-accent-soft:#10e0ff;
background-color:var(--dbp-bg-logo)!important;
background-image:
radial-gradient(ellipse at 50% -3%, rgba(16,224,255,.48) 0%, rgba(0,172,246,.24) 10%, rgba(0,172,246,.08) 25%, rgba(0,9,31,0) 46%),
radial-gradient(circle at 3% 31%, rgba(0,172,246,.34) 0 3px, transparent 4px),
radial-gradient(circle at 7% 41%, rgba(0,172,246,.24) 0 2px, transparent 3px),
radial-gradient(circle at 96% 30%, rgba(16,224,255,.34) 0 3px, transparent 4px),
radial-gradient(circle at 93% 43%, rgba(16,224,255,.22) 0 2px, transparent 3px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, #061044 38%, var(--dbp-bg-mid) 64%, var(--dbp-bg-bottom) 100%)!important;
background-size:auto, 135px 190px, 155px 230px, 145px 205px, 170px 250px, auto!important;
background-repeat:no-repeat, repeat-y, repeat-y, repeat-y, repeat-y, no-repeat!important;
background-position:center top, left 210px, left 260px, right 205px, right 270px, center top!important;
}
body.dbp-system-page::before{
content:""!important;
position:fixed!important;
inset:0!important;
pointer-events:none!important;
z-index:0!important;
opacity:.95!important;
background:
linear-gradient(104deg, transparent 0 44%, rgba(16,224,255,.20) 48%, rgba(16,224,255,.06) 53%, transparent 60%),
linear-gradient(76deg, transparent 0 49%, rgba(0,172,246,.17) 54%, rgba(0,172,246,.05) 59%, transparent 67%),
radial-gradient(ellipse at 50% 0%, rgba(16,224,255,.30), rgba(16,224,255,.06) 22%, transparent 48%);
filter:blur(.35px)!important;
}
body.dbp-system-page::after{
content:""!important;
position:fixed!important;
left:-14%!important;
right:-14%!important;
bottom:-4vh!important;
height:34vh!important;
pointer-events:none!important;
z-index:0!important;
opacity:.52!important;
background:
radial-gradient(80% 46% at 50% 110%, rgba(0,172,246,.32), transparent 62%),
repeating-radial-gradient(ellipse at 50% 100%, transparent 0 34px, rgba(16,224,255,.26) 36px 38px, transparent 40px 74px),
linear-gradient(168deg, transparent 0 42%, rgba(16,224,255,.15) 43%, transparent 45% 58%, rgba(0,172,246,.12) 60%, transparent 62%);
}
body.dbp-system-page .dbp-system-header,
body.dbp-system-page .dbp-system-main{
position:relative!important;
z-index:2!important;
}
body.dbp-system-page .dbp-system-header{
background:transparent!important;
}
body.dbp-system-page .dbp-system-header-logo img{
background:var(--dbp-bg-logo)!important;
box-shadow:none!important;
}
body.dbp-system-page .dbp-system-card{
position:relative!important;
z-index:2!important;
}
@media (max-width:520px){
body.dbp-system-page{
background-image:
radial-gradient(ellipse at 50% -2%, rgba(16,224,255,.42) 0%, rgba(0,172,246,.18) 12%, rgba(0,172,246,.06) 28%, rgba(0,9,31,0) 50%),
radial-gradient(circle at 3% 32%, rgba(0,172,246,.30) 0 2px, transparent 3px),
radial-gradient(circle at 97% 34%, rgba(16,224,255,.30) 0 2px, transparent 3px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, #061044 42%, var(--dbp-bg-mid) 68%, var(--dbp-bg-bottom) 100%)!important;
background-size:auto, 120px 185px, 135px 205px, auto!important;
background-repeat:no-repeat, repeat-y, repeat-y, no-repeat!important;
background-position:center top, left 170px, right 178px, center top!important;
}
body.dbp-system-page::before{opacity:.68!important;}
body.dbp-system-page::after{height:28vh!important;opacity:.40!important;}
}
@media (min-width:521px) and (max-width:1100px){
body.dbp-system-page{
background-position:center top, left 190px, left 245px, right 185px, right 255px, center top!important;
}
body.dbp-system-page::after{height:30vh!important;opacity:.46!important;}
}
/* v0.4.58 - premium underwater background refinement
Meer richting ontwerpvoorbeeld: zachte lichtstralen, echte bubble-randen en subtiele golf onderin.
Nog steeds CSS-only: geen grote fullscreen JPG/PNG achtergrond. */
body.dbp-system-page{
--dbp-bg-logo:#00091f;
--dbp-bg-ocean:#03133d;
--dbp-bg-deep:#020617;
--dbp-cyan:#10e0ff;
--dbp-blue:#00acf6;
background-color:var(--dbp-bg-logo)!important;
background-image:
/* hoofdlicht bovenin */
radial-gradient(ellipse at 50% -8%, rgba(16,224,255,.58) 0%, rgba(0,172,246,.30) 12%, rgba(0,172,246,.10) 31%, transparent 52%),
/* zachte lichtkolom */
radial-gradient(ellipse at 50% 10%, rgba(44,199,255,.18) 0%, rgba(44,199,255,.07) 19%, transparent 42%),
/* bubbles links: grotere ringbubbels */
radial-gradient(circle at 7% 20%, rgba(255,255,255,.86) 0 2px, rgba(16,224,255,.70) 3px, rgba(0,93,255,.45) 6px, transparent 9px),
radial-gradient(circle at 6% 33%, rgba(255,255,255,.80) 0 1.5px, rgba(16,224,255,.58) 3px, rgba(0,93,255,.35) 7px, transparent 11px),
radial-gradient(circle at 9% 45%, rgba(255,255,255,.70) 0 1px, rgba(16,224,255,.52) 2.5px, rgba(0,93,255,.30) 6px, transparent 10px),
radial-gradient(circle at 5% 58%, rgba(255,255,255,.66) 0 1px, rgba(16,224,255,.48) 2px, rgba(0,93,255,.26) 5px, transparent 8px),
/* bubbles rechts */
radial-gradient(circle at 94% 21%, rgba(255,255,255,.84) 0 2px, rgba(16,224,255,.68) 3px, rgba(0,93,255,.42) 6px, transparent 9px),
radial-gradient(circle at 96% 34%, rgba(255,255,255,.76) 0 1.5px, rgba(16,224,255,.55) 3px, rgba(0,93,255,.33) 7px, transparent 11px),
radial-gradient(circle at 92% 48%, rgba(255,255,255,.70) 0 1px, rgba(16,224,255,.48) 2.5px, rgba(0,93,255,.28) 6px, transparent 10px),
radial-gradient(circle at 95% 60%, rgba(255,255,255,.62) 0 1px, rgba(16,224,255,.44) 2px, rgba(0,93,255,.24) 5px, transparent 8px),
/* zeer subtiele water textuur */
radial-gradient(circle at 20% 70%, rgba(0,172,246,.12), transparent 25%),
radial-gradient(circle at 80% 72%, rgba(16,224,255,.10), transparent 24%),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, #061545 34%, #040c31 67%, var(--dbp-bg-deep) 100%)!important;
background-repeat:no-repeat!important;
background-size:auto!important;
background-attachment:fixed!important;
}
body.dbp-system-page::before{
content:""!important;
position:fixed!important;
inset:0!important;
z-index:0!important;
pointer-events:none!important;
opacity:.92!important;
background:
/* brede lichtwaaier */
conic-gradient(from 198deg at 50% -14%, transparent 0 8deg, rgba(16,224,255,.24) 12deg, transparent 18deg 31deg, rgba(0,172,246,.18) 36deg, transparent 43deg 56deg, rgba(16,224,255,.20) 61deg, transparent 70deg),
linear-gradient(96deg, transparent 0 45%, rgba(16,224,255,.13) 49%, rgba(16,224,255,.04) 54%, transparent 63%),
linear-gradient(83deg, transparent 0 40%, rgba(0,172,246,.10) 47%, rgba(0,172,246,.03) 57%, transparent 68%);
-webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.34) 68%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.34) 68%, transparent 100%);
filter:blur(.15px)!important;
}
body.dbp-system-page::after{
content:""!important;
position:fixed!important;
left:-18%!important;
right:-18%!important;
bottom:-2vh!important;
height:34vh!important;
z-index:0!important;
pointer-events:none!important;
opacity:.62!important;
background:
radial-gradient(70% 36% at 50% 104%, rgba(0,172,246,.30), transparent 70%),
repeating-radial-gradient(ellipse at 50% 112%, transparent 0 38px, rgba(16,224,255,.30) 40px 42px, transparent 44px 82px),
repeating-radial-gradient(ellipse at 50% 116%, transparent 0 55px, rgba(0,93,255,.25) 57px 59px, transparent 61px 112px),
linear-gradient(168deg, transparent 0 40%, rgba(16,224,255,.22) 42%, transparent 45% 58%, rgba(0,172,246,.16) 60%, transparent 63%);
filter:drop-shadow(0 -8px 18px rgba(0,172,246,.18));
}
body.dbp-system-page .dbp-system-card{
box-shadow:0 28px 90px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.50) inset!important;
}
@media (max-width:520px){
body.dbp-system-page{
background-image:
radial-gradient(ellipse at 50% -7%, rgba(16,224,255,.50) 0%, rgba(0,172,246,.24) 13%, rgba(0,172,246,.08) 32%, transparent 54%),
radial-gradient(ellipse at 50% 8%, rgba(44,199,255,.13) 0%, transparent 42%),
radial-gradient(circle at 5% 22%, rgba(255,255,255,.78) 0 1.5px, rgba(16,224,255,.62) 3px, rgba(0,93,255,.38) 6px, transparent 9px),
radial-gradient(circle at 7% 40%, rgba(255,255,255,.66) 0 1px, rgba(16,224,255,.45) 2px, rgba(0,93,255,.25) 5px, transparent 8px),
radial-gradient(circle at 96% 22%, rgba(255,255,255,.76) 0 1.5px, rgba(16,224,255,.58) 3px, rgba(0,93,255,.35) 6px, transparent 9px),
radial-gradient(circle at 94% 42%, rgba(255,255,255,.64) 0 1px, rgba(16,224,255,.43) 2px, rgba(0,93,255,.24) 5px, transparent 8px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, #061545 35%, #040c31 68%, var(--dbp-bg-deep) 100%)!important;
}
body.dbp-system-page::before{opacity:.82!important;}
body.dbp-system-page::after{height:26vh!important;opacity:.54!important;}
}
/* v0.4.65 - normale pagina's: premium underwater achtergrond zonder layout te wijzigen
Gebaseerd op stabiele v0.4.58. Geen grote afbeelding, geen extra top-padding.
Belangrijk: de header wordt transparant zodat de lichtstralen zichtbaar zijn op dezelfde plek als de offline/error pagina. */
html{
background:#00091f!important;
}
body.dbp-site:not(.dbp-system-page){
--dbp-bg-logo:#00091f;
--dbp-bg-ocean:#03133d;
--dbp-bg-deep:#020617;
--dbp-cyan:#10e0ff;
--dbp-blue:#00acf6;
position:relative!important;
isolation:isolate!important;
overflow-x:hidden!important;
background-color:var(--dbp-bg-logo)!important;
background-image:
radial-gradient(ellipse at 50% -8%, rgba(16,224,255,.58) 0%, rgba(0,172,246,.30) 12%, rgba(0,172,246,.10) 31%, transparent 52%),
radial-gradient(ellipse at 50% 10%, rgba(44,199,255,.18) 0%, rgba(44,199,255,.07) 19%, transparent 42%),
radial-gradient(circle at 7% 20%, rgba(255,255,255,.68) 0 1.5px, rgba(16,224,255,.55) 3px, rgba(0,93,255,.33) 6px, transparent 9px),
radial-gradient(circle at 94% 21%, rgba(255,255,255,.68) 0 1.5px, rgba(16,224,255,.55) 3px, rgba(0,93,255,.33) 6px, transparent 9px),
radial-gradient(circle at 20% 72%, rgba(0,172,246,.10), transparent 25%),
radial-gradient(circle at 80% 72%, rgba(16,224,255,.08), transparent 24%),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, #061545 34%, #040c31 67%, var(--dbp-bg-deep) 100%)!important;
background-repeat:no-repeat!important;
background-size:auto!important;
background-attachment:fixed!important;
}
body.dbp-site:not(.dbp-system-page)::before{
content:""!important;
position:fixed!important;
inset:0!important;
z-index:0!important;
pointer-events:none!important;
opacity:.92!important;
background:
conic-gradient(from 198deg at 50% -14%, transparent 0 8deg, rgba(16,224,255,.24) 12deg, transparent 18deg 31deg, rgba(0,172,246,.18) 36deg, transparent 43deg 56deg, rgba(16,224,255,.20) 61deg, transparent 70deg),
linear-gradient(96deg, transparent 0 45%, rgba(16,224,255,.13) 49%, rgba(16,224,255,.04) 54%, transparent 63%),
linear-gradient(83deg, transparent 0 40%, rgba(0,172,246,.10) 47%, rgba(0,172,246,.03) 57%, transparent 68%);
-webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.34) 68%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.34) 68%, transparent 100%);
filter:blur(.15px)!important;
}
body.dbp-site:not(.dbp-system-page)::after{
content:""!important;
position:fixed!important;
left:-18%!important;
right:-18%!important;
bottom:-2vh!important;
height:34vh!important;
z-index:0!important;
pointer-events:none!important;
opacity:.52!important;
background:
radial-gradient(70% 36% at 50% 104%, rgba(0,172,246,.30), transparent 70%),
repeating-radial-gradient(ellipse at 50% 112%, transparent 0 38px, rgba(16,224,255,.25) 40px 42px, transparent 44px 82px),
repeating-radial-gradient(ellipse at 50% 116%, transparent 0 55px, rgba(0,93,255,.22) 57px 59px, transparent 61px 112px),
linear-gradient(168deg, transparent 0 40%, rgba(16,224,255,.18) 42%, transparent 45% 58%, rgba(0,172,246,.13) 60%, transparent 63%);
filter:drop-shadow(0 -8px 18px rgba(0,172,246,.14));
}
/* Laat de body-achtergrond zichtbaar zijn in de header. Layoutmaten blijven van v0.4.58. */
body.dbp-site:not(.dbp-system-page) .dbp-header{
background:transparent!important;
position:relative!important;
z-index:40!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-shell,
body.dbp-site:not(.dbp-system-page) .dbp-main,
body.dbp-site:not(.dbp-system-page) .dbp-before-content,
body.dbp-site:not(.dbp-system-page) .dbp-page-surface,
body.dbp-site:not(.dbp-system-page) .dbp-footer{
position:relative!important;
z-index:2!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
z-index:80!important;
}
@media (max-width:520px){
body.dbp-site:not(.dbp-system-page){
background-image:
radial-gradient(ellipse at 50% -7%, rgba(16,224,255,.50) 0%, rgba(0,172,246,.24) 13%, rgba(0,172,246,.08) 32%, transparent 54%),
radial-gradient(ellipse at 50% 8%, rgba(44,199,255,.13) 0%, transparent 42%),
radial-gradient(circle at 5% 22%, rgba(255,255,255,.62) 0 1.5px, rgba(16,224,255,.50) 3px, rgba(0,93,255,.30) 6px, transparent 9px),
radial-gradient(circle at 96% 22%, rgba(255,255,255,.62) 0 1.5px, rgba(16,224,255,.50) 3px, rgba(0,93,255,.30) 6px, transparent 9px),
linear-gradient(180deg, var(--dbp-bg-logo) 0%, #061545 35%, #040c31 68%, var(--dbp-bg-deep) 100%)!important;
}
body.dbp-site:not(.dbp-system-page)::before{opacity:.82!important;}
body.dbp-site:not(.dbp-system-page)::after{height:26vh!important;opacity:.46!important;}
}
/* v0.4.66 - tablet normal page repair from stable 0.4.65
Doel: mobiel en pc ongemoeid laten, tablet terug naar mobile-first app-layout.
Fixes: geen desktop-sidebar op tablet, donkere underwater achtergrond zichtbaar naast content,
contentkop binnen witte kaart, geen extra witte modulekaart in de component, bottom-nav fixed. */
@media (min-width: 700px) and (max-width: 1199.98px){
html,
body.dbp-site:not(.dbp-system-page){
background-color:#00091f!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-shell{
display:block!important;
grid-template-columns:none!important;
min-height:auto!important;
background:transparent!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar{
display:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-header,
body.dbp-site:not(.dbp-system-page) .dbp-main,
body.dbp-site:not(.dbp-system-page) .dbp-layout,
body.dbp-site:not(.dbp-system-page) .dbp-content,
body.dbp-site:not(.dbp-system-page) .dbp-component{
background:transparent!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-main{
width:100%!important;
max-width:none!important;
margin:0 auto!important;
padding:0 36px calc(112px + env(safe-area-inset-bottom))!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-layout{
display:block!important;
grid-template-columns:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-page-surface{
width:100%!important;
max-width:920px!important;
margin:24px auto 0!important;
padding:clamp(26px,4vw,44px)!important;
min-height:calc(100vh - 300px)!important;
background:#fff!important;
border-radius:34px 34px 0 0!important;
overflow:hidden!important;
box-shadow:0 -14px 42px rgba(0,0,0,.20)!important;
}
/* Voorkom de extra kleine witte kaart met schaduw die de contentkop naast de kaart laat lijken. */
body.dbp-site:not(.dbp-system-page) .dbp-page-surface .dbp-content > .moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-page-surface .dbp-content > .item-page,
body.dbp-site:not(.dbp-system-page) .dbp-page-surface .dbp-content > .com-content-article,
body.dbp-site:not(.dbp-system-page) .dbp-page-surface .dbp-content > .blog{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
overflow:visible!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-page-surface h1{
margin:0 0 28px!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
display:block!important;
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:99999!important;
background:#00091f!important;
background-image:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-footer{
display:none!important;
}
}
/* v0.4.67 - tablet fix: bottom-nav fixed en content volledig binnen de witte kaart
Alleen tabletbreedte. Mobiel en desktop blijven buiten deze media-query. */
@media (min-width:700px) and (max-width:1199.98px){
html,
body.dbp-site:not(.dbp-system-page){
background-color:#00091f!important;
overflow-x:hidden!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-shell{
display:block!important;
grid-template-columns:none!important;
width:100%!important;
max-width:none!important;
min-height:auto!important;
background:transparent!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar{
display:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-header,
body.dbp-site:not(.dbp-system-page) .dbp-main,
body.dbp-site:not(.dbp-system-page) .dbp-layout,
body.dbp-site:not(.dbp-system-page) .dbp-content,
body.dbp-site:not(.dbp-system-page) .dbp-component{
background:transparent!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-main{
display:block!important;
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0 32px calc(96px + env(safe-area-inset-bottom))!important;
min-height:0!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-page-surface{
display:block!important;
width:100%!important;
max-width:920px!important;
margin:22px auto 0!important;
padding:42px 46px 86px!important;
min-height:calc(100vh - 310px)!important;
box-sizing:border-box!important;
background:#fff!important;
border-radius:34px 34px 0 0!important;
overflow:hidden!important;
box-shadow:0 -14px 42px rgba(0,0,0,.20)!important;
transform:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-page-surface > *,
body.dbp-site:not(.dbp-system-page) .dbp-layout,
body.dbp-site:not(.dbp-system-page) .dbp-content,
body.dbp-site:not(.dbp-system-page) .dbp-component{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-layout{
display:block!important;
grid-template-columns:none!important;
gap:0!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-content > .moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-content > .item-page,
body.dbp-site:not(.dbp-system-page) .dbp-content > .com-content-article,
body.dbp-site:not(.dbp-system-page) .dbp-content > .blog,
body.dbp-site:not(.dbp-system-page) .dbp-content article,
body.dbp-site:not(.dbp-system-page) .dbp-content .item-page,
body.dbp-site:not(.dbp-system-page) .dbp-content .com-content-article{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
overflow:visible!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-content h1{
margin:0 0 28px!important;
padding:0!important;
max-width:100%!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-footer{
display:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
display:flex!important;
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
z-index:2147483000!important;
width:100%!important;
height:calc(76px + env(safe-area-inset-bottom))!important;
min-height:calc(76px + env(safe-area-inset-bottom))!important;
padding:6px 8px calc(8px + env(safe-area-inset-bottom))!important;
background:#00091f!important;
background-image:none!important;
transform:none!important;
translate:none!important;
border-top:1px solid rgba(43,232,255,.20)!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav ul,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .mod-menu,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .dbp-bottom-fallback{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
}
}
/* v0.4.68 - tablet: verwijder tweede witte contentlaag
Oorzaak: oudere tabletregels geven .dbp-component-wrap/.dbp-content zelf een witte kaartstijl.
De enige witte kaart moet .dbp-page-surface zijn; de componentinhoud hoort transparant daarin te liggen. */
@media (min-width:700px) and (max-width:1199.98px){
body.dbp-site:not(.dbp-system-page) .dbp-page-surface{
background:#fff!important;
overflow:hidden!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-component-wrap,
body.dbp-site:not(.dbp-system-page) .dbp-content,
body.dbp-site:not(.dbp-system-page) .dbp-component,
body.dbp-site:not(.dbp-system-page) .com-content,
body.dbp-site:not(.dbp-system-page) .com-content-article,
body.dbp-site:not(.dbp-system-page) .item-page,
body.dbp-site:not(.dbp-system-page) article{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
overflow:visible!important;
transform:none!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-content > .moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-component-wrap > .moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-component > .moduletable{
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
padding:0!important;
margin:0!important;
width:100%!important;
max-width:100%!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-content h1,
body.dbp-site:not(.dbp-system-page) .dbp-component h1,
body.dbp-site:not(.dbp-system-page) .item-page h1,
body.dbp-site:not(.dbp-system-page) article h1{
margin:0 0 28px!important;
padding:0!important;
background:transparent!important;
box-shadow:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
display:flex!important;
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
top:auto!important;
z-index:2147483000!important;
transform:none!important;
}
}
/* v0.4.69 - desktop navigation: left icon sidebar, keep mobile/tablet bottom nav unchanged */
@media (min-width:1200px){
body.dbp-site:not(.dbp-system-page){
overflow-x:hidden!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-shell{
display:grid!important;
grid-template-columns:112px minmax(0,1fr)!important;
min-height:calc(100vh - 94px)!important;
background:transparent!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar{
display:block!important;
position:sticky!important;
top:0!important;
align-self:start!important;
min-height:calc(100vh - 94px)!important;
padding:22px 0!important;
background:linear-gradient(180deg,#00091f 0%,#020826 100%)!important;
border-right:1px solid rgba(43,232,255,.16)!important;
box-shadow:16px 0 35px rgba(0,0,0,.12)!important;
z-index:30!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar:empty{
display:block!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar .dbp-desktop-fallback,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar ul.mod-menu,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar ul.menu{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
gap:10px!important;
margin:0!important;
padding:0 8px!important;
list-style:none!important;
width:100%!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li{
list-style:none!important;
margin:0!important;
padding:0!important;
text-align:center!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
min-height:72px!important;
gap:7px!important;
margin:0!important;
padding:9px 4px!important;
border-radius:18px!important;
color:#fff!important;
text-decoration:none!important;
font-size:13px!important;
font-weight:650!important;
line-height:1.15!important;
background:transparent!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.active>a,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.current>a,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a.active{
color:#27d8ff!important;
background:rgba(31,143,255,.18)!important;
box-shadow:inset 3px 0 0 #00acf6!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a::before{
content:""!important;
display:block!important;
width:32px!important;
height:32px!important;
flex:0 0 32px!important;
background-color:currentColor!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:contain!important;
-webkit-mask-repeat:no-repeat!important;
-webkit-mask-position:center!important;
-webkit-mask-size:contain!important;
mask-repeat:no-repeat!important;
mask-position:center!important;
mask-size:contain!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="calls"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(1)>a::before{
width:34px!important;
height:34px!important;
background-image:url('/templates/tpl_divebuddyping/images/nav/icon-oproepen-white.jpeg')!important;
background-color:transparent!important;
-webkit-mask-image:none!important;
mask-image:none!important;
border-radius:50%!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.active>a[data-dbp-nav-key="calls"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.current>a[data-dbp-nav-key="calls"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(1).active>a::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(1).current>a::before{
background-image:url('/templates/tpl_divebuddyping/images/nav/icon-oproepen-color.jpeg')!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="new"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(2)>a::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M32%2018v28M18%2032h28%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2727%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M32%2018v28M18%2032h28%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="map"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(3)>a::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="country"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(4)>a::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="profile"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(5)>a::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E")!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
display:none!important;
}
}
/* v0.4.70 - desktop sidebar transparent: laat dezelfde underwater achtergrond doorlopen onder de icon-navigatie */
@media (min-width:1200px){
body.dbp-site:not(.dbp-system-page) .dbp-sidebar{
background:transparent!important;
border-right:0!important;
box-shadow:none!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar::after{
content:none!important;
display:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a{
background:transparent!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.active>a,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.current>a,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a.active{
background:rgba(31,143,255,.18)!important;
box-shadow:inset 3px 0 0 #00acf6!important;
}
}
/* v0.4.71 - desktop content rustiger centreren
Alleen desktop: de transparante linker iconbalk telt visueel mee, daarom schuiven
CTA en contentkaart iets naar links binnen het scherm. Mobiel/tablet blijven ongemoeid. */
@media (min-width:1200px){
body.dbp-site:not(.dbp-system-page) .dbp-main,
body.dbp-site:not(.dbp-system-page) .dbp-before-content{
transform:translateX(-44px)!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-page-surface{
max-width:820px!important;
margin-left:auto!important;
margin-right:auto!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-before-content .dbp-new-call-button,
body.dbp-site:not(.dbp-system-page) .dbp-before-content a[href$="/nieuw"],
body.dbp-site:not(.dbp-system-page) .dbp-before-content a[href="/nieuw"]{
max-width:720px!important;
}
}
@media (min-width:1600px){
body.dbp-site:not(.dbp-system-page) .dbp-main,
body.dbp-site:not(.dbp-system-page) .dbp-before-content{
transform:translateX(-56px)!important;
}
}
/* v0.4.72 - desktop CTA centreren boven content en iets smaller maken
Alleen desktop: mobiel/tablet blijven exact zoals v0.4.71. */
@media (min-width:1200px){
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header{
width:820px!important;
max-width:820px!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:0!important;
padding-right:0!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header .moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header .mod-custom{
width:100%!important;
display:flex!important;
justify-content:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header .dbp-new-call-button,
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href$="/nieuw"],
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href="/nieuw"],
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href*="nieuwe-oproep"],
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href*="new-call"]{
width:560px!important;
max-width:560px!important;
min-height:50px!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
@media (min-width:1600px){
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header{
width:820px!important;
max-width:820px!important;
}
}
/* v0.4.73 - desktop CTA exact centreren boven de witte contentkaart.
De CTA stond nog onder de globale desktop transform van .dbp-before-content.
Alleen desktop: mobiel/tablet blijven ongemoeid. */
@media (min-width:1200px){
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header{
transform:none!important;
width:820px!important;
max-width:820px!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:0!important;
padding-right:0!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header .moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header .mod-custom{
width:100%!important;
display:flex!important;
justify-content:center!important;
margin-left:0!important;
margin-right:0!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header .dbp-new-call-button,
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href$="/nieuw"],
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href="/nieuw"],
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href*="nieuwe-oproep"],
body.dbp-site:not(.dbp-system-page) .dbp-header .dbp-before-content--header a[href*="new-call"]{
width:540px!important;
max-width:540px!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* v0.4.73 step - offline pagina: watermerk-logo rechtsonder in kaart verwijderen */
body.dbp-offline-page .dbp-system-card::after{
content:none!important;
display:none!important;
background:none!important;
}
/* v0.4.73 step - error/404 pagina: watermerk-logo rechtsonder in kaart verwijderen */
body.dbp-error-page .dbp-system-card::after{
content:none!important;
display:none!important;
background:none!important;
}
/* v0.4.73-offline-language-zindex-fix
Zorgt dat de taalkeuze-dropdown op de offline pagina boven de contentkaart valt. */
body.dbp-offline-page .dbp-system-header{
position:relative!important;
z-index:2147483000!important;
overflow:visible!important;
}
body.dbp-offline-page .dbp-system-header-actions,
body.dbp-offline-page .dbp-system-header .mod-languages,
body.dbp-offline-page .dbp-system-header .dbp-language-switcher,
body.dbp-offline-page .dbp-system-header .dbp-lang-details,
body.dbp-offline-page .dbp-system-header .dbp-language-dropdown{
position:relative!important;
z-index:2147483001!important;
overflow:visible!important;
}
body.dbp-offline-page .dbp-system-header .dbp-lang-list,
body.dbp-offline-page .dbp-system-header .dbp-language-dropdown ul,
body.dbp-offline-page .dbp-system-header .mod-languages ul.lang-inline,
body.dbp-offline-page .dbp-system-header .mod-languages ul.lang-block{
z-index:2147483002!important;
}
body.dbp-offline-page .dbp-system-main,
body.dbp-offline-page .dbp-system-card{
z-index:2!important;
}
/* v0.4.73-error-language-zindex-fix
Zorgt dat de taalkeuze-dropdown op de error/404 pagina boven de contentkaart valt. */
body.dbp-error-page .dbp-system-header{
position:relative!important;
z-index:2147483000!important;
overflow:visible!important;
}
body.dbp-error-page .dbp-system-header-actions,
body.dbp-error-page .dbp-system-header .mod-languages,
body.dbp-error-page .dbp-system-header .dbp-language-switcher,
body.dbp-error-page .dbp-system-header .dbp-lang-details,
body.dbp-error-page .dbp-system-header .dbp-language-dropdown{
position:relative!important;
z-index:2147483001!important;
overflow:visible!important;
}
body.dbp-error-page .dbp-system-header .dbp-lang-list,
body.dbp-error-page .dbp-system-header .dbp-language-dropdown ul,
body.dbp-error-page .dbp-system-header .mod-languages ul.lang-inline,
body.dbp-error-page .dbp-system-header .mod-languages ul.lang-block{
z-index:2147483002!important;
}
body.dbp-error-page .dbp-system-main,
body.dbp-error-page .dbp-system-card{
z-index:2!important;
}
/* v0.4.73 step - system header logo transparantie herstellen
Het headerlogo is een transparante PNG. Eerdere system-page regels gaven het img-element zelf
een vaste donkere achtergrond, waardoor het transparante logo toch als blok werd getoond. */
body.dbp-system-page .dbp-system-header-logo,
body.dbp-system-page .dbp-system-header-logo img{
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
box-shadow:none!important;
}
/* v0.4.76 - vaste navigatie zonder +/Nieuw */
@media(max-width:1199.98px){
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav ul,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .mod-menu,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .dbp-bottom-fallback{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
/* v0.4.80 - tablet bottom-navigation fixed repair
Probleem: op sommige tablets kan de vaste navigatiebalk visueel loskomen van de onderzijde
wanneer de browser/PWA visual viewport tijdens scrollen wijzigt. Deze correctie houdt de
bottom-nav expliciet aan de zichtbare viewport gekoppeld. Mobiel en desktop blijven buiten scope. */
@media (min-width:700px) and (max-width:1199.98px){
:root{
--dbp-visual-viewport-bottom:0px;
}
body.dbp-site:not(.dbp-system-page){
padding-bottom:calc(96px + env(safe-area-inset-bottom) + var(--dbp-visual-viewport-bottom,0px))!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-main{
padding-bottom:calc(112px + env(safe-area-inset-bottom) + var(--dbp-visual-viewport-bottom,0px))!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
display:flex!important;
position:fixed!important;
left:0!important;
right:0!important;
bottom:var(--dbp-visual-viewport-bottom,0px)!important;
top:auto!important;
width:100vw!important;
max-width:none!important;
height:calc(76px + env(safe-area-inset-bottom))!important;
min-height:calc(76px + env(safe-area-inset-bottom))!important;
margin:0!important;
padding:6px 8px calc(8px + env(safe-area-inset-bottom))!important;
z-index:2147483640!important;
background:#00091f!important;
background-image:none!important;
border-top:1px solid rgba(43,232,255,.20)!important;
box-shadow:0 -12px 34px rgba(0,0,0,.30)!important;
box-sizing:border-box!important;
transform:translate3d(0,0,0)!important;
-webkit-transform:translate3d(0,0,0)!important;
backface-visibility:hidden!important;
-webkit-backface-visibility:hidden!important;
contain:layout paint!important;
}
}
/* v0.4.81 - empty before-content / hero wrapper fix
Only reserve CTA/header space when the before-content module position has modules.
Tablet-specific correction: Landen and other pages without the CTA move upward. */
@media (min-width:700px) and (max-width:1199.98px){
body.dbp-site.no-before-content:not(.dbp-system-page) .dbp-header{
min-height:auto!important;
padding-bottom:18px!important;
}
body.dbp-site.no-before-content:not(.dbp-system-page) .dbp-header .dbp-before-content,
body.dbp-site.no-before-content:not(.dbp-system-page) .dbp-header .dbp-before-content--header{
display:none!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
body.dbp-site.no-before-content:not(.dbp-system-page) .dbp-main{
padding-top:0!important;
min-height:auto!important;
}
body.dbp-site.no-before-content:not(.dbp-system-page) .dbp-page-surface{
margin-top:0!important;
}
}
/* v0.4.82 - desktop component width repair
When no right-card module is assigned, do not reserve the desktop aside column.
This lets the component output fill the available width inside the white card. */
@media (min-width:1200px){
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-layout{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
justify-content:stretch!important;
gap:0!important;
}
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content{
width:100%!important;
max-width:none!important;
min-width:0!important;
justify-self:stretch!important;
}
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content > .com-content-article,
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content > .item-page,
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content > .blog,
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content article,
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content .com-content-article,
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-content .item-page{
width:100%!important;
max-width:none!important;
min-width:0!important;
box-sizing:border-box!important;
}
}
/* v0.4.87 - shared desktop content container width.
Desktop white content container width is intentionally shared across main Divebuddyping component pages. */
@media (min-width:1200px){
body.dbp-site.no-right-card:not(.dbp-system-page) .dbp-page-surface{
width:min(92vw,960px)!important;
max-width:960px!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:42px!important;
padding-right:42px!important;
box-sizing:border-box!important;
}
}
/* v0.4.88 - Oproepen wrapper overflow only.
Template no longer controls Oproepen component card/list widths; component owns internal layout. */
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-page-surface{
overflow:visible!important;
}
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-layout{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
justify-content:stretch!important;
gap:0!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
overflow:visible!important;
}
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-content{
width:100%!important;
max-width:none!important;
min-width:0!important;
justify-self:stretch!important;
overflow:visible!important;
}
@media (max-width:699.98px){
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-main{
padding-left:10px!important;
padding-right:10px!important;
}
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-page-surface{
width:100%!important;
max-width:none!important;
padding-left:10px!important;
padding-right:10px!important;
}
}
@media (min-width:700px) and (max-width:1199.98px){
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-main{
padding-left:24px!important;
padding-right:24px!important;
}
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-page-surface{
width:min(94vw,920px)!important;
max-width:920px!important;
padding-left:30px!important;
padding-right:30px!important;
overflow:visible!important;
}
}
/* v0.4.89 - tablet wrapper spacing and shadow visibility.
Tablet only: reduce the gap below before-content and the top padding inside the white surface. */
@media (min-width:700px) and (max-width:1199.98px){
body.dbp-site:not(.dbp-system-page) .dbp-page-surface{
margin-top:10px!important;
padding-top:26px!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-layout,
body.dbp-site:not(.dbp-system-page) .dbp-content{
overflow:visible!important;
}
body.dbp-site.has-before-content:not(.dbp-system-page) .dbp-header .dbp-before-content--header{
margin-bottom:-34px!important;
}
}
@media (min-width:1200px){
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-main{
max-width:1320px!important;
}
body.dbp-site.dbp-calls-page:not(.dbp-system-page) .dbp-page-surface{
overflow:visible!important;
}
}
/* v0.4.86 - normalized mobile content container width.
Mobile content surface padding is intentionally kept small so component cards can use maximum readable width. */
@media (max-width:699.98px){
body.dbp-site:not(.dbp-system-page) .dbp-main{
width:100%!important;
max-width:none!important;
margin:0 auto!important;
padding-left:10px!important;
padding-right:10px!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-page-surface{
width:100%!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:10px!important;
padding-right:10px!important;
border-radius:24px 24px 0 0!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-layout,
body.dbp-site:not(.dbp-system-page) .dbp-content{
width:100%!important;
max-width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
}
/* v0.4.91 - desktop icon mapping for the 4-item nav, with fixed 0.4.89-style mobile nav.
The fixed navigation has four items only: Oproepen, Kaart, Land, Jij. */
:root{
--dbp-nav-icon-map:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M10%2015l13-6%2018%206%2013-6v40l-13%206-18-6-13%206z%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linejoin%3D%27round%27/%3E%3Cpath%20d%3D%27M23%209v40M41%2015v40%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
--dbp-nav-icon-country:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2732%27%20r%3D%2726%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M6%2032h52M32%206c8%208%2012%2017%2012%2026s-4%2018-12%2026M32%206C24%2014%2020%2023%2020%2032s4%2018%2012%2026%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
--dbp-nav-icon-profile:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2720%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27/%3E%3Cpath%20d%3D%27M13%2056c2-13%2010-20%2019-20s17%207%2019%2020%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
}
@media (min-width:1200px){
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="calls"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(1)>a::before{
width:34px!important;
height:34px!important;
background-image:url('/templates/tpl_divebuddyping/images/nav/icon-oproepen-white.jpeg')!important;
background-color:transparent!important;
-webkit-mask-image:none!important;
mask-image:none!important;
border-radius:50%!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.active>a[data-dbp-nav-key="calls"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li.current>a[data-dbp-nav-key="calls"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(1).active>a::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(1).current>a::before{
background-image:url('/templates/tpl_divebuddyping/images/nav/icon-oproepen-color.jpeg')!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="map"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(2)>a::before{
background-image:none!important;
background-color:currentColor!important;
-webkit-mask-image:var(--dbp-nav-icon-map)!important;
mask-image:var(--dbp-nav-icon-map)!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="country"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(3)>a::before{
background-image:none!important;
background-color:currentColor!important;
-webkit-mask-image:var(--dbp-nav-icon-country)!important;
mask-image:var(--dbp-nav-icon-country)!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar a[data-dbp-nav-key="profile"]::before,
body.dbp-site:not(.dbp-system-page) .dbp-sidebar li:nth-child(4)>a::before{
background-image:none!important;
background-color:currentColor!important;
-webkit-mask-image:var(--dbp-nav-icon-profile)!important;
mask-image:var(--dbp-nav-icon-profile)!important;
}
}
@media (max-width:1199.98px){
body.dbp-site:not(.dbp-system-page){
padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-shell{
display:block!important;
grid-template-columns:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-sidebar{
display:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav{
display:flex!important;
align-items:stretch!important;
justify-content:center!important;
position:fixed!important;
left:8px!important;
right:8px!important;
bottom:0!important;
width:auto!important;
height:calc(72px + env(safe-area-inset-bottom))!important;
min-height:calc(72px + env(safe-area-inset-bottom))!important;
padding:5px 8px calc(7px + env(safe-area-inset-bottom))!important;
transform:none!important;
border-top:1px solid rgba(43,232,255,.18)!important;
border-right:0!important;
border-bottom:0!important;
border-left:0!important;
border-radius:0!important;
background:#00091f!important;
background-image:none!important;
box-shadow:0 -10px 30px rgba(0,0,0,.25)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav>.moduletable,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav>div,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav nav,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav ul,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .mod-menu,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .dbp-bottom-fallback{
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav ul,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .mod-menu,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .dbp-bottom-fallback{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
align-items:stretch!important;
gap:4px!important;
list-style:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li{
min-width:0!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .nav-link{
min-width:0!important;
min-height:54px!important;
height:100%!important;
padding:2px 4px!important;
border-radius:14px!important;
font-size:11px!important;
line-height:1.1!important;
color:#fff!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li.active>a,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li.current>a,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a[aria-current="page"]{
color:#14dfff!important;
background:rgba(0,140,255,.14)!important;
box-shadow:none!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav .nav-link::after{
content:""!important;
order:-1!important;
display:block!important;
width:32px!important;
height:32px!important;
flex:0 0 32px!important;
background-color:currentColor!important;
background-repeat:no-repeat!important;
background-position:center!important;
background-size:contain!important;
-webkit-mask-repeat:no-repeat!important;
-webkit-mask-position:center!important;
-webkit-mask-size:contain!important;
mask-repeat:no-repeat!important;
mask-position:center!important;
mask-size:contain!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a[data-dbp-nav-key="calls"]::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li:nth-child(1)>a::after{
width:35px!important;
height:35px!important;
flex-basis:35px!important;
background-image:url('/templates/tpl_divebuddyping/images/nav/icon-oproepen-white.jpeg')!important;
background-color:transparent!important;
-webkit-mask-image:none!important;
mask-image:none!important;
border-radius:50%!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li.active>a[data-dbp-nav-key="calls"]::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li.current>a[data-dbp-nav-key="calls"]::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li:nth-child(1).active>a::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li:nth-child(1).current>a::after{
background-image:url('/templates/tpl_divebuddyping/images/nav/icon-oproepen-color.jpeg')!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a[data-dbp-nav-key="map"]::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li:nth-child(2)>a::after{
background-image:none!important;
background-color:currentColor!important;
-webkit-mask-image:var(--dbp-nav-icon-map)!important;
mask-image:var(--dbp-nav-icon-map)!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a[data-dbp-nav-key="country"]::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li:nth-child(3)>a::after{
background-image:none!important;
background-color:currentColor!important;
-webkit-mask-image:var(--dbp-nav-icon-country)!important;
mask-image:var(--dbp-nav-icon-country)!important;
}
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav a[data-dbp-nav-key="profile"]::after,
body.dbp-site:not(.dbp-system-page) .dbp-bottom-nav li:nth-child(4)>a::after{
background-image:none!important;
background-color:currentColor!important;
-webkit-mask-image:var(--dbp-nav-icon-profile)!important;
mask-image:var(--dbp-nav-icon-profile)!important;
}
}