/* === ZeitloSen – Legal pages (uses existing tokens from 00-vars.css) ===========
- relies on: --sp-text, --sp-body-bg, --sp-border-color, --zl-gold, --zl-link
- dark handled by [data-bs-theme="dark"] and prefers-color-scheme as fallback
- add Page Class "zl-legal-page" on each legal menu item
============================================================================== */
/* Scope + native form/scrollbar colors */
.zl-legal-page { color-scheme: light dark; }
/* Title bar (slim) */
.zl-legal-page .zl-pagebar{
background: var(--sp-section-bg, #F5F7FA);
border-bottom: 1px solid var(--sp-border-color, #E5E7EB);
height: 80px;
display: flex; align-items: center; justify-content: center;
margin: 0 0 18px;
}
.zl-legal-page .zl-pagebar h1{
margin: 0;
font: 600 20px/1.2 "Helvetica Neue", Arial, Helvetica, sans-serif;
color: var(--sp-heading-color, #0A0A0A);
letter-spacing: .01em;
}
/* Document container */
.zl-legal-page .zl-legal{
font: 16px/1.6 "Helvetica Neue", Arial, Helvetica, sans-serif;
color: var(--sp-text, #111827);
max-width: 920px; margin: 0 auto 4rem; padding: 0 1rem;
}
/* Hero / TOC / Sections */
.zl-legal-page .zl-hero{
background: var(--sp-section-bg, #F5F7FA);
border: 1px solid var(--sp-border-color, #E5E7EB);
border-radius: 10px; padding: 1.1rem 1.25rem; margin: 0 0 1.25rem;
}
.zl-legal-page .zl-toc{
background: var(--sp-body-bg, #FFFFFF);
border: 1px solid var(--sp-border-color, #E5E7EB);
border-radius: 10px; padding: 1rem 1.25rem; margin: .5rem 0 1.25rem;
}
.zl-legal-page .zl-toc ol{ margin: .25rem 0; padding-left: 1.25rem; }
.zl-legal-page .zl-box{
background: var(--sp-body-bg, #FFFFFF);
border: 1px solid var(--sp-border-color, #E5E7EB);
border-radius: 10px; padding: 1rem 1.25rem;
}
/* Headings, meta, links */
.zl-legal-page .zl-legal h2{
font-size: 1.25rem; margin: 1.4rem 0 .55rem;
border-left: 4px solid var(--zl-gold); padding-left: .55rem;
color: var(--sp-heading-color, #0A0A0A);
}
.zl-legal-page .zl-legal h3{ font-size: 1rem; margin: 1rem 0 .25rem; color: var(--sp-muted, #6B7280); }
.zl-legal-page .zl-meta,
.zl-legal-page .zl-footer{ color: var(--sp-muted, #6B7280); font-size: .95rem; }
.zl-legal-page .zl-hr{
height: 1px; border: 0;
background: linear-gradient(to right, var(--zl-gold), transparent);
margin: 1rem 0;
}
.zl-legal-page .zl-legal a{
color: var(--zl-link); text-decoration: none; border-bottom: 1px dotted var(--zl-link);
}
.zl-legal-page .zl-legal a:hover{
color: var(--zl-gold); border-bottom-color: currentColor;
}
/* Pagination / prev-next nav volledig uit op legal pages */
.zl-legal-page .pagination,
.zl-legal-page .article-navigation,
.zl-legal-page .pager,
.zl-legal-page .zl-pagenav,
.zl-legal-page [data-zl-nav="prevnext"] { display: none !important; }
/* Mobile type scale */
@media (max-width:640px){ .zl-legal-page .zl-legal{ font-size:15px; } }
/* --------------------------- DARK MODE ------------------------------------ */
/* A) Helix/Bootstrap toggle (preferred): */
[data-bs-theme="dark"] .zl-legal-page {
color-scheme: dark;
}
[data-bs-theme="dark"] .zl-legal-page .zl-pagebar{
background: var(--sp-section-bg, #1e1e1e);
border-bottom-color: var(--sp-border-color, #2a2a2a);
}
[data-bs-theme="dark"] .zl-legal-page .zl-pagebar h1{
color: var(--sp-text, #f2f2f2);
}
[data-bs-theme="dark"] .zl-legal-page .zl-legal{
color: var(--sp-text, #f2f2f2);
}
[data-bs-theme="dark"] .zl-legal-page .zl-hero,
[data-bs-theme="dark"] .zl-legal-page .zl-toc,
[data-bs-theme="dark"] .zl-legal-page .zl-box{
background: #121212;
border-color: var(--sp-border-color, #2a2a2a);
}
[data-bs-theme="dark"] .zl-legal-page .zl-legal h2{
border-left-color: var(--zl-gold);
color: var(--sp-text, #f2f2f2);
}
[data-bs-theme="dark"] .zl-legal-page .zl-meta,
[data-bs-theme="dark"] .zl-legal-page .zl-footer{ color: var(--sp-muted, #b7b7b7); }
[data-bs-theme="dark"] .zl-legal-page .zl-hr{
background: linear-gradient(to right, var(--zl-gold), transparent);
}
[data-bs-theme="dark"] .zl-legal-page .zl-legal a{
color: var(--zl-link);
border-bottom-color: var(--zl-link);
}
[data-bs-theme="dark"] .zl-legal-page .zl-legal a:hover{
color:#fff; border-bottom-color: currentColor;
}
/* B) OS fallback – voor sites zonder explicit Helix toggle */
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme="light"]) .zl-legal-page { color-scheme: dark; }
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-pagebar{
background: var(--sp-section-bg, #1e1e1e);
border-bottom-color: var(--sp-border-color, #2a2a2a);
}
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-legal{ color: var(--sp-text, #f2f2f2); }
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-hero,
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-toc,
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-box{
background:#121212; border-color: var(--sp-border-color, #2a2a2a);
}
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-legal h2{
border-left-color: var(--zl-gold); color: var(--sp-text, #f2f2f2);
}
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-meta,
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-footer{ color: var(--sp-muted, #b7b7b7); }
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-hr{
background: linear-gradient(to right, var(--zl-gold), transparent);
}
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-legal a{
color: var(--zl-link); border-bottom-color: var(--zl-link);
}
:root:not([data-bs-theme="light"]) .zl-legal-page .zl-legal a:hover{
color:#fff; border-bottom-color: currentColor;
}
}
/* ---------------------- Smooth/robust switching --------------------------- */
/* Geen visuele 'hang' bij wisselen: transitions uit op thema-kritische props */
.zl-legal-page, .zl-legal-page * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .zl-legal-page, .zl-legal-page * { transition: none !important; } }
/* High Contrast support */
@media (forced-colors: active) {
.zl-legal-page .zl-box,
.zl-legal-page .zl-hero,
.zl-legal-page .zl-toc { border: 1px solid CanvasText; }
.zl-legal-page .zl-legal a { border-bottom: 1px solid LinkText; }
}
.zl-footer { margin-top:20px; }
/* ==========================================================================
ZeitloSen · RicheyWeb "System – EU e-Privacy Directive"
Complete plugin override (light + dark) — REPLACES previous snippets
Relies on existing tokens from 00-vars.css:
--sp-body-bg, --sp-text, --sp-border-color, --sp-section-bg, --sp-heading-color
--zl-gold, --zl-link
========================================================================== */
/* 0) Tooltips/Popovers altijd boven de modal (fix Option A) */
.tooltip { z-index: 2000 !important; }
.popover { z-index: 2001 !important; }
/* 1) Modal layering + backdrop */
#plg_system_eprivacy_modal.modal { z-index: 1085; } /* boven header/fixed UI */
.modal-backdrop.show { opacity: .35; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .55; }
/* 2) Dialog-afmetingen + centrering */
#plg_system_eprivacy_modal .modal-dialog {
max-width: 760px;
margin: 8vh auto;
}
@media (max-width: 640px){
#plg_system_eprivacy_modal .modal-dialog { margin: 6vh 12px; }
}
/* 3) Paneel-styling (light + dark) */
#plg_system_eprivacy_modal .modal-content {
background: var(--sp-body-bg, #fff);
color: var(--sp-text, #111827);
border: 1px solid var(--sp-border-color, #E5E7EB);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .modal-content {
background: #121212;
color: var(--sp-text, #f2f2f2);
border-color: var(--sp-border-color, #2a2a2a);
}
/* 4) Header/Title + consistente paddings */
#plg_system_eprivacy_modal .modal-header {
padding: 18px 22px;
border-bottom: 1px solid var(--sp-border-color, #E5E7EB);
}
#plg_system_eprivacy_modal .modal-title {
font-weight: 600;
color: var(--sp-heading-color, #0A0A0A);
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .modal-title {
color: var(--sp-text, #f2f2f2);
}
/* 5) Body – leesruimte + scroll bij lange inhoud */
#plg_system_eprivacy_modal .modal-body {
padding: 18px 22px;
line-height: 1.55;
max-height: 66vh;
overflow: auto;
}
/* 6) Footer + Buttons */
#plg_system_eprivacy_modal .modal-footer {
padding: 14px 22px;
border-top: 1px solid var(--sp-border-color, #E5E7EB);
}
#plg_system_eprivacy_modal .btn {
min-height: 40px;
border-radius: 10px;
transition: none;
}
#plg_system_eprivacy_modal .btn-success {
background-color: var(--zl-gold, #d9b96e);
border: none; color: #000;
}
#plg_system_eprivacy_modal .btn-success:hover { filter: brightness(.95); }
#plg_system_eprivacy_modal .btn-danger,
#plg_system_eprivacy_modal .btn-secondary {
background-color: #a0a0a0; border: none;
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .btn-danger,
[data-bs-theme="dark"] #plg_system_eprivacy_modal .btn-secondary {
background-color: #6e6e6e;
}
#plg_system_eprivacy_modal .btn:focus-visible {
outline: 2px solid var(--zl-gold, #d9b96e);
outline-offset: 2px;
}
/* 7) Links in modal */
#plg_system_eprivacy_modal a {
color: var(--zl-link, #7a5e2b);
text-decoration: underline;
text-decoration-thickness: .08em;
text-underline-offset: .15em;
}
#plg_system_eprivacy_modal a:hover { color: var(--zl-gold, #d9b96e); }
/* 8) Details-accordion (titelknop + paneel) */
#plg_system_eprivacy_modal .accordion-button {
border: 1px solid var(--sp-border-color, #E5E7EB);
border-radius: 8px;
padding: .65rem .9rem;
color: inherit;
background: var(--sp-body-bg, #fff);
}
#plg_system_eprivacy_modal .accordion-button:hover {
background: var(--sp-section-bg, #F5F7FA);
}
#plg_system_eprivacy_modal .accordion-button:not(.collapsed) {
background: var(--sp-section-bg, #F5F7FA);
color: inherit;
box-shadow: none;
}
#plg_system_eprivacy_modal .accordion-button:focus {
outline: 2px solid var(--zl-gold, #d9b96e);
outline-offset: 2px;
}
/* Het geopende inhoudspanel (was wit in dark) */
#plg_system_eprivacy_modal .accordion-collapse {
border: none;
}
#plg_system_eprivacy_modal .accordion-body {
background: var(--sp-body-bg, #fff);
color: inherit;
border: 1px solid var(--sp-border-color, #E5E7EB);
border-top: none;
border-radius: 0 0 8px 8px;
padding: .9rem;
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .accordion-button {
border-color: var(--sp-border-color, #2a2a2a);
background: #171717;
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .accordion-button:not(.collapsed) {
background: #171717;
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .accordion-body {
background: #171717;
border-color: var(--sp-border-color, #2a2a2a);
}
/* 9) Consent items (checkbox-lijst) */
#plg_system_eprivacy_modal .form-check { margin-bottom: .45rem; }
#plg_system_eprivacy_modal .form-check-label { line-height: 1.35; }
/* Checkbox styling + accentkleur consistent met brand */
#plg_system_eprivacy_modal .form-check-input {
width: 1.05rem; height: 1.05rem;
margin-top: .3rem;
cursor: pointer;
transition: none;
accent-color: var(--zl-gold, #d9b96e); /* moderne browsers */
border: 1px solid var(--sp-border-color, #D1D5DB);
background-color: #fff;
}
#plg_system_eprivacy_modal .form-check-input:checked {
background-color: var(--zl-gold, #d9b96e);
border-color: var(--zl-gold, #d9b96e);
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .form-check-input {
background-color: #0f0f0f;
border-color: var(--sp-border-color, #2a2a2a);
}
[data-bs-theme="dark"] #plg_system_eprivacy_modal .form-check-input:checked {
background-color: var(--zl-gold, #d9b96e);
border-color: var(--zl-gold, #d9b96e);
}
/* 10) Icoon in header iets subtieler */
#plg_system_eprivacy_modal .modal-header svg,
#plg_system_eprivacy_modal .modal-header i,
#plg_system_eprivacy_modal .modal-header img {
max-height: 54px; opacity: .95;
}
/* 11) Alert-variant (als je BS5 Alert kiest i.p.v. Modal) */
#plg_system_eprivacy_alert {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: 16px; z-index: 1084;
max-width: 980px; width: calc(100% - 24px);
background: var(--sp-body-bg, #fff);
color: var(--sp-text, #111827);
border: 1px solid var(--sp-border-color, #E5E7EB);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0,0,0,.15);
}
[data-bs-theme="dark"] #plg_system_eprivacy_alert {
background: #121212;
color: var(--sp-text, #f2f2f2);
border-color: var(--sp-border-color, #2a2a2a);
}
/* 12) Geen “ghosting” bij themaswitch */
#plg_system_eprivacy_modal, #plg_system_eprivacy_modal * { transition: none !important; }
#plg_system_eprivacy_alert, #plg_system_eprivacy_alert * { transition: none !important; }
/* ===========================================================
ZeitloSen · Legal headings in rem + clamp (schaalbaar)
=========================================================== */
.zl-legal-page .zl-legal h1,
.zl-legal-page .zl-legal h2,
.zl-legal-page .zl-legal h3,
.zl-legal-page .zl-legal h4 {
font-weight: 700;
line-height: 1.25;
margin: 1.1rem 0 .65rem;
}
/* H1 – zelden in body, maar mocht hij voorkomen: */
.zl-legal-page .zl-legal h1 {
font-size: clamp(1.50rem, 1.15rem + 2.4vw, 2.25rem);
letter-spacing: .01em;
}
/* H2 – sectiekoppen (primair in legal) */
.zl-legal-page .zl-legal h2 {
font-size: clamp(1.30rem, 1.05rem + 1.8vw, 1.80rem);
border-left: 4px solid var(--zl-gold);
padding-left: .55rem;
}
/* H3 – subsecties */
.zl-legal-page .zl-legal h3 {
font-size: clamp(1.10rem, .95rem + 1.2vw, 1.40rem);
color: var(--zl-muted);
}
/* H4 – inline blok-/cardtitels (o.a. membership-kaarten) */
.zl-legal-page .zl-legal h4 {
font-size: clamp(1.00rem, .9rem + .8vw, 1.18rem);
}
/* Iets meer verticale lucht direct ná een kop + lijst */
.zl-legal-page .zl-legal h2 + ul,
.zl-legal-page .zl-legal h3 + ul,
.zl-legal-page .zl-legal h4 + ul { margin-top: .35rem; }
/* Tekstregels blijven rustig leesbaar bij vergroting */
.zl-legal-page .zl-legal p,
.zl-legal-page .zl-legal li { line-height: 1.6; }
/* ===========================================================
ZeitloSen · Juridisch Footer Menu (sp-user4) + Footer Align – v7
- Claim 1 regel
- Gouden separator-cirkels tussen items met gelijke ruimte
- Geen witte hoverachtergrond
- Identieke top-border boven legal & footer
=========================================================== */
:root {
--zl-legal-gap: 12px; /* verticale ruimte in legal/footer secties */
--zl-gold: #c7923e; /* ZeitloSen goud */
--zl-copyright: #d9c9a5; /* warme copyrightkleur */
--zl-sep-size: 7px; /* diameter van de scheidings-cirkel */
--zl-sep-gap: 12px; /* ruimte links/rechts van de cirkel */
}
/* === Juridische sectie (sp-user4) === */
#sp-legal {
background: #111827;
color: #fff;
font-size: 14px;
padding: var(--zl-legal-gap) 0;
text-align: center;
box-shadow: none;
border-top: none; /* lijn verwijderen */
}
/* Claim (precies 1 regel, met ellipsis indien te lang) */
#sp-legal .footer-claim { margin-bottom: var(--zl-legal-gap); }
#sp-legal .footer-claim .claim {
margin: 0 auto;
font-size: clamp(0.9rem, 1vw + 0.8rem, 1.1rem);
color: #e5e5e5;
line-height: 1.4;
font-weight: 400;
max-width: 1000px; /* royale breedte; pas aan indien gewenst */
white-space: normal; /* Laat tekst doorbreken naar de volgende regel */
overflow: visible; /* niet meer afgekapt */
text-overflow: ellipsis; /* … aan einde */
}
#sp-legal .footer-claim .claim span { color: var(--zl-gold); font-weight: 500; }
#sp-legal .footer-claim .claim strong { color: #fff; font-weight: 600; }
/* Menu: flex zonder gap – spacing geregeld via separator */
#sp-legal .legal-menu {
display: flex;
flex-wrap: wrap; /* breekt netjes op kleine schermen */
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 0; /* geen auto-gap; we regelen het exact */
}
/* LI en echte “tussen”-separator */
#sp-legal .legal-menu li {
display: flex;
align-items: center;
}
#sp-legal .legal-menu li:not(:first-child)::before {
content: "";
display: inline-block;
width: var(--zl-sep-size);
height: var(--zl-sep-size);
border-radius: 50%;
background: var(--zl-gold);
margin: 0 var(--zl-sep-gap);
flex: 0 0 auto;
}
/* Links – zonder witte hoverachtergrond, subtiele gouden glans */
#sp-legal .legal-menu li a {
color: #e9e9e9;
text-decoration: none;
font-weight: 500;
line-height: 1.6;
position: relative;
padding-inline: 4px;
transition: color .25s ease, text-shadow .25s ease, background-color .01s;
background: transparent !important;
}
#sp-legal .legal-menu li a:hover,
#sp-legal .legal-menu li a:focus,
#sp-legal .legal-menu li:hover > a {
color: var(--zl-gold);
text-shadow: 0 0 6px rgba(199,146,62,.35);
background: transparent !important;
}
/* Actieve link: subtiele gouden stip onder tekst */
#sp-legal .legal-menu li.current a,
#sp-legal .legal-menu li.active a {
color: var(--zl-gold);
font-weight: 600;
}
#sp-legal .legal-menu li.current a::after,
#sp-legal .legal-menu li.active a::after {
content: "";
display: block;
width: 6px; height: 6px;
background: var(--zl-gold);
border-radius: 50%;
margin: 3px auto 0;
}
/* Dark mode */
[data-bs-theme="dark"] #sp-legal {
background: #0f172a;
color: #eaeaea;
border-top: 1px solid rgba(255,255,255,.06); /* zelfde lijn */
}
[data-bs-theme="dark"] #sp-legal .footer-claim .claim { color: #dcd9d6; }
[data-bs-theme="dark"] #sp-legal .legal-menu li a { color: #eaeaea; }
[data-bs-theme="dark"] #sp-legal .legal-menu li a:hover,
[data-bs-theme="dark"] #sp-legal .legal-menu li a:focus {
color: var(--zl-gold);
text-shadow: 0 0 6px rgba(199,146,62,.35);
}
/* === Footer (sp-footer) – identieke bovenlijn en centrering === */
#sp-footer {
background: #111827;
color: #fff;
font-size: 14px;
padding: var(--zl-legal-gap) 0;
text-align: center;
border-top: none; /* lijn verwijderen */
}
#sp-footer .sp-copyright {
display: inline-block;
color: var(--zl-copyright);
font-size: .9rem;
line-height: 1.5;
letter-spacing: 0.2px;
margin: 0;
}
#sp-footer .sp-copyright a {
color: var(--zl-gold);
text-decoration: none;
background: transparent !important;
}
#sp-footer .sp-copyright a:hover {
color: #fff;
text-shadow: 0 0 6px rgba(199,146,62,.35);
background: transparent !important;
}
/* Footer dark mode */
[data-bs-theme="dark"] #sp-footer {
background: #0f172a;
color: #eaeaea;
border-top: none; /* zelfde lijn */
}
[data-bs-theme="dark"] #sp-footer .sp-copyright { color: var(--zl-copyright); }
[data-bs-theme="dark"] #sp-footer .sp-copyright a { color: var(--zl-gold); }
/* === Responsive verfijning === */
@media (max-width: 768px) {
:root { --zl-legal-gap: 10px; } /* iets compacter op phone */
/* kleinere claim op mobiel, maar houdt het 1 regel met ellipsis */
#sp-legal .footer-claim .claim {
font-size: 0.85rem;
line-height: 1.35;
padding: 0 .5rem;
}
/* separator en spacing iets fijner op small */
:root { --zl-sep-size: 6px; --zl-sep-gap: 10px; }
}
/* ===========================================================
ZeitloSen · Legal/Footer – verwijder korte binnenlijnen
en centreer de claim met nette ellipsis
=========================================================== */
/* 1) Verwijder de korte lijnen boven de claim en footer,
behoud de lange lijnen boven de legal- en footer-secties */
#sp-legal .container-inner::before,
#sp-legal .container-inner::after,
#sp-legal .sp-module-content::before,
#sp-legal .sp-module-content::after,
#sp-footer .container-inner,
#sp-legal .container-inner
{
border-top: 0px solid rgba(255,255,255,.06);
}
/* De lange lijn boven de juridische sectie en footer behouden */
#sp-legal,
#sp-footer {
border-top: 1px solid rgba(255,255,255,.06); /* behoud de top-lijn boven legal en footer */
}
/* Als er nog lijnen zijn die je wilt behouden, kun je die hieronder targeten */
/* 2) Claim: altijd gecentreerd en elegant afkappen met ellipsis */
#sp-legal .footer-claim .claim {
display: block;
width: 100%;
text-align: center;
white-space: normal; /* Laat tekst doorbreken naar de volgende regel */
overflow: visible; /* Niet meer afgekapt */
text-overflow: ellipsis; /* … aan einde */
margin: 0 auto;
padding: 0 1rem; /* Voeg wat padding toe om te zorgen voor ruimte rondom de tekst */
}
/* (Optioneel) op hele kleine schermen: iets kleinere claim maar gecentreerd blijven */
@media (max-width: 768px) {
#sp-legal .footer-claim .claim {
font-size: .88rem;
line-height: 1.35;
padding-inline: .5rem; /* Zorgt voor wat ruimte links/rechts */
white-space: normal; /* Laat tekst doorbreken naar de volgende regel */
overflow: visible; /* Zodat de tekst niet afgekapt wordt */
margin: 0 auto; /* Zorg ervoor dat het gecentreerd blijft */
}
}
#sp-bottom .sp-module {
margin-bottom: 30px;
}
@media (max-width: 575.98px) and (orientation: portrait) {
.sp-module.zl-leicht {
margin-top: 15px !important; margin-bottom:15px !important;
}
}
/* ============================================================
ZEITLOSEN · Membership Pro Pricing (OSM)
Container-safe grid · 3-koloms op breed · PNG icons
Badges buiten header (incl. "Gratis") · CTA onderaan (SVG chevron)
Animaties · Mobile & a11y tweaks · Definitieve Light/Dark-fix
Target: #osm-plans-list-columns .osm-pricing-table .osm-plan-*
============================================================ */
/* ---------- GRID (container-safe) ----------
#osm-plans-list-columns { background: var(--sp-body-bg); }
#osm-plans-list-columns .osm-pricing-table{
box-sizing: border-box;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 20px !important;
justify-items: stretch;
align-items: stretch;
margin: 20px 0 36px !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100%;
}
/* reset Bootstrap kolomgedrag binnen de grid
#osm-plans-list-columns .osm-pricing-table > [class*="col-"]{
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 1 kolom op smal, 2 op medium
@media (max-width: 640px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
@media (min-width: 641px) and (max-width: 1199px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
}
}
/* dwing 3 kolommen bij ruime content
@media (min-width: 1400px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
}
} */
/* ---------- KAART ---------- */
#osm-plans-list-columns .osm-plan{
--accent: var(--sp-primary);
position: relative;
background: var(--zl-card-bg, #fff);
color: var(--zl-card-text, var(--sp-text));
border: 1px solid var(--zl-card-border, var(--sp-border-color));
border-radius: var(--zl-radius-xl, 16px);
box-shadow: var(--zl-shadow, 0 2px 12px rgba(0,0,0,.08));
overflow: visible; /* badges mogen buiten de rand */
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (max-width: 575.98px) and (orientation: portrait){
.alert-gold {
margin-top:0px; margin-bottom: 30px; }
#osm-plans-list-columns .osm-plan,
.osm-container { margin-left:10px !important; margin-right: 10px !important; }
}
/* Hover (zonder scale; scherpere tekst) */
#osm-plans-list-columns .osm-plan:hover{
transform: translateY(-6px);
box-shadow: 0 14px 34px rgba(0,0,0,.16),
0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
border-color: color-mix(in srgb, var(--accent) 35%, var(--zl-card-border, var(--sp-border-color)));
.fa-quote-left, .fa-quote-left-alt {
--fa: none; }
}
/* Accentkleur per plan */
#osm-plans-list-columns .osm-plan-1{ --accent: var(--zl-bronze); }
#osm-plans-list-columns .osm-plan-2{ --accent: var(--zl-gold); }
#osm-plans-list-columns .osm-plan-3{ --accent: color-mix(in srgb, var(--zl-gold) 45%, var(--sp-text) 55%); }
/* ---------- HEADER + ICON ---------- */
#osm-plans-list-columns .osm-plan-header{
position: relative;
display: flex;
align-items: center;
min-height: 60px; /* gelijke kophoogte */
padding: 10px 16px 10px 66px; /* ruimte voor icoon links */
background: var(--zl-card-bg) !important; /* override inline */
border-bottom: 1px solid var(--sp-border-color);
border-top-left-radius: var(--zl-radius-xl, 16px);
border-top-right-radius: var(--zl-radius-xl, 16px);
}
/* Headerkleuren per plan (override inline) */
#osm-plans-list-columns .osm-plan-1 .osm-plan-header{ background: #8A5A28 !important; }
#osm-plans-list-columns .osm-plan-2 .osm-plan-header{ background: var(--zl-gold) !important; }
#osm-plans-list-columns .osm-plan-3 .osm-plan-header{
background: linear-gradient(135deg, var(--zl-gold), var(--accent)) !important;
}
#osm-plans-list-columns .osm-plan-title{
margin: 0;
color: #fff;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: .2px;
text-transform: uppercase;
line-height: 1.15;
white-space: normal;
word-break: break-word;
}
/* PNG iconen links in header */
#osm-plans-list-columns .osm-plan-header::before{
content: "";
position: absolute; left: 16px; top: 50%;
transform: translateY(-50%) scale(1);
width: 34px; height: 34px;
background-size: cover; background-position: center; background-repeat: no-repeat;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
transition: transform .22s ease;
}
#osm-plans-list-columns .osm-plan:hover .osm-plan-header::before{
transform: translateY(-50%) scale(1.12);
}
#osm-plans-list-columns .osm-plan-1 .osm-plan-header::before{ background-image: url("/images/membership/zl-freund.png"); }
#osm-plans-list-columns .osm-plan-2 .osm-plan-header::before{ background-image: url("/images/membership/zl-zeitgenosse.png"); }
#osm-plans-list-columns .osm-plan-3 .osm-plan-header::before{ background-image: url("/images/membership/zl-gefahrte.png"); }
/* ---------- BADGES (buiten de header) ---------- */
#osm-plans-list-columns .osm-plan-4 .osm-plan-header::after,
#osm-plans-list-columns .osm-plan-5 .osm-plan-header::after,
#osm-plans-list-columns .osm-plan-6 .osm-plan-header::after{
position: absolute; top: 0; right: 0;
transform: translate(15%, -50%); /* ~15% naar rechts buiten + 50% omhoog */
pointer-events: none; z-index: 3;
display: inline-block; white-space: nowrap;
padding: 6px 12px; border-radius: 999px;
font-size: .72rem; font-weight: 800; letter-spacing: .3px; color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
#osm-plans-list-columns .osm-plan-4 .osm-plan-header::after{ content: "Gratis"; background: color-mix(in srgb, var(--zl-bronze) 75%, #000 25%); }
#osm-plans-list-columns .osm-plan-5 .osm-plan-header::after{ content: "Beliebt"; background: color-mix(in srgb, var(--zl-gold) 88%, #000 12%); }
#osm-plans-list-columns .osm-plan-6 .osm-plan-header::after{ content: "Bester Wert"; background: color-mix(in srgb, var(--zl-gold) 70%, var(--sp-text) 30%); }
/* Houd “Zeitgenosse” waar mogelijk op 1 regel */
@media (min-width: 700px){
#osm-plans-list-columns .osm-plan-2 .osm-plan-title{ white-space: nowrap; }
}
/* ---------- PRIJS ---------- */
#osm-plans-list-columns .osm-plan-price{
background: transparent !important;
padding: 12px 16px 0;
}
#osm-plans-list-columns .osm-plan-price h2{ margin: 0 !important; line-height: 1.1; }
#osm-plans-list-columns .osm-plan-price .price{
font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: var(--accent);
}
#osm-plans-list-columns .osm-plan-price .price sub{
font-size: .92rem; color: var(--zl-muted, var(--zl-card-text)); opacity: 1; margin-left: .35rem; font-weight: 600; vertical-align: baseline;
}
/* ---------- OMSCHRIJVING ---------- */
#osm-plans-list-columns .osm-plan-short-description{
padding: 12px 18px 6px;
color: var(--zl-card-text);
opacity: .92;
font-size: .98rem;
line-height: 1.6;
}
/* ---------- CTA ONDERAAN (SVG chevron) ---------- */
#osm-plans-list-columns .osm-signup-container{
list-style: none; padding: 0 18px 20px; margin: 0; margin-top: auto;
border-bottom-left-radius: var(--zl-radius-xl, 16px);
border-bottom-right-radius: var(--zl-radius-xl, 16px);
}
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup{
position: relative;
display: inline-flex !important; align-items: center; justify-content: center;
width: 100% !important; min-height: 48px;
border: none !important; border-radius: 999px !important;
font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
white-space: nowrap; line-height: 1.1;
padding: .65rem 1.15rem !important; /* subtieler */
padding-right: 2rem !important; /* ruimte voor chevron */
color: #fff !important; background: var(--accent);
box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup:hover{
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,.16);
filter: none;
}
/* SVG-chevron rechts, scherp & gecentreerd */
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup::after{
content: "";
position: absolute; right: 1rem; top: 50%;
width: 1.05em; height: 1.05em; transform: translateY(-50%);
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: .95; transition: transform .2s ease, opacity .2s ease;
}
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup:hover::after,
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup:focus::after{
transform: translateY(-50%) translateX(2px);
opacity: 1;
}
/* 📱 Mobiel-portrait correctie voor chevron */
@media (max-width: 640px){
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup{ padding-right: 2.3rem !important; }
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup::after{
right: 1.2rem; top: 50%; transform: translateY(-50%);
}
}
/* ---------- SHIMMER / HOVER overlay ---------- */
#osm-plans-list-columns .osm-plan:hover::after{
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
background: linear-gradient(120deg, transparent 30%,
color-mix(in srgb, #ffffff 65%, transparent) 50%, transparent 70%);
transform: translateX(-120%); /* animation: zl-shimmer .9s ease forwards; */
}
/* ---------- ANIMATIES ----------
@keyframes zl-shimmer{ to { transform: translateX(120%); } }
@keyframes zl-btn-glow{
0%{ box-shadow:0 6px 20px rgba(0,0,0,.18); }
50%{ box-shadow:0 10px 26px rgba(0,0,0,.24), 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
100%{ box-shadow:0 6px 20px rgba(0,0,0,.18); }
} */
/* ---------- MOBILE TWEAKS ---------- */
@media (max-width: 480px){
#osm-plans-list-columns .osm-plan-header{ padding-left: 60px; }
#osm-plans-list-columns .osm-plan-header::before{ width: 30px; height: 30px; }
/* badges mobiel compacter */
#osm-plans-list-columns .osm-plan-1 .osm-plan-header::after,
#osm-plans-list-columns .osm-plan-2 .osm-plan-header::after,
#osm-plans-list-columns .osm-plan-3 .osm-plan-header::after{
transform: translate(5%, -65%);
font-size: .78rem; padding: 6px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.28);
}
/* iets meer headerhoogte voor badge-overlap */
#osm-plans-list-columns .osm-plan-header{
min-height: 72px; padding-top: 14px; padding-bottom: 10px;
}
/* grotere tikdoelen */
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup{
min-height: 52px; font-size: .95rem;
}
}
/* iPhones met zeer smalle breedte */
@media (max-width: 390px){
#osm-plans-list-columns .osm-plan-header{ min-height: 74px; }
#osm-plans-list-columns .osm-plan-1 .osm-plan-header::after,
#osm-plans-list-columns .osm-plan-2 .osm-plan-header::after,
#osm-plans-list-columns .osm-plan-3 .osm-plan-header::after{
transform: translate(25%, -68%); font-size: .8rem;
}
}
/* ---------- Extra verticale ruimte tussen plans ---------- */
#osm-plans-list-columns .osm-pricing-table{
gap: 40px !important; /* baseline ruimer */
margin-top: 24px !important;
margin-bottom: 48px !important;
}
@media (min-width: 1200px){
#osm-plans-list-columns .osm-pricing-table{
gap: 0 48px !important; margin-top: 32px !important; margin-bottom: 10px !important;
}
}
@media (max-width: 640px){
#osm-plans-list-columns .osm-pricing-table{
gap: 28px !important; margin-top: 20px !important; margin-bottom: 40px !important;
}
}
/* Phone portrait: extra ruim */
@media (max-width: 480px) and (orientation: portrait) {
#osm-plans-list-columns .osm-pricing-table {
gap: 25px !important;
margin-top: 5px !important;
margin-bottom: 10px !important;
}
}
/* ---------- A11Y (verminderde beweging) ---------- */
@media (prefers-reduced-motion: reduce){
#osm-plans-list-columns .osm-plan,
#osm-plans-list-columns .osm-plan *{
animation: none !important; transition: none !important;
}
}
/* ============================================================
Definitieve light/dark fix — site-toggle leidend
- Geen OS-@media die dark overschrijft
- Scoping via data-bs-theme / .theme-dark / .dark
- Subteksten (/Lebenszeit, /Monat) behouden contrast
============================================================ */
/* 0) Container-hint + isolatie (voorkomt iOS auto-invert) */
#osm-plans-list-columns{
color-scheme: light dark;
-webkit-text-size-adjust: 100%;
isolation: isolate;
}
/* 1) SITE = LIGHT (alleen wanneer toggle licht is) */
html[data-bs-theme="light"] #osm-plans-list-columns,
body[data-bs-theme="light"] #osm-plans-list-columns,
:root:not([data-bs-theme="dark"]) #osm-plans-list-columns{
--zl-card-bg: #ffffff;
--zl-card-text: #1f2328;
--zl-card-border: rgba(27,31,36,.12);
--zl-shadow-l: 0 2px 12px rgba(0,0,0,.08);
--zl-muted: #5b616a; /* voor /Monat, /Lebenszeit */
}
/* 2) SITE = DARK (alleen wanneer toggle donker is) */
html[data-bs-theme="dark"] #osm-plans-list-columns,
body[data-bs-theme="dark"] #osm-plans-list-columns,
.theme-dark #osm-plans-list-columns,
.dark #osm-plans-list-columns,
[data-theme="dark"] #osm-plans-list-columns{
--zl-card-bg: #111317;
--zl-card-text: rgba(255,255,255,.92);
--zl-card-border: rgba(255,255,255,.12);
--zl-shadow-l: 0 2px 14px rgba(0,0,0,.4);
--zl-muted: rgba(255,255,255,.72);
}
/* 3) Tokens toepassen op alle kaartdelen (en inline OSM bg uitschakelen) */
#osm-plans-list-columns .osm-plan,
#osm-plans-list-columns .osm-plan-price,
#osm-plans-list-columns .osm-plan-short-description,
#osm-plans-list-columns .osm-signup-container{
background-color: var(--zl-card-bg) !important;
color: var(--zl-card-text) !important;
border-color: var(--zl-card-border) !important;
transition: background-color .2s,color .2s,border-color .2s;
}
#osm-plans-list-columns .osm-plan .osm-plan-price{ background: transparent !important; }
/* 4) Subteksten blijven altijd goed leesbaar */
#osm-plans-list-columns .osm-plan-price .price sub{
color: var(--zl-muted) !important;
opacity: 1 !important;
margin-left: .35rem;
font-weight: 600;
}
/* 5) Headers blijven wit (goud/bronze) */
#osm-plans-list-columns .osm-plan-title{ color:#fff !important; }
/* 6) iOS Smart-Invert/auto-dark failsafe voor expliciet light */
@supports (-webkit-touch-callout:none){
html[data-bs-theme="light"] #osm-plans-list-columns{
background: #fff;
-webkit-filter: none !important;
filter: none !important;
mix-blend-mode: normal !important;
}
}
/* 7) Zorg dat knoppen, badges en headers niet beïnvloed worden door resets */
#osm-plans-list-columns .osm-plan-header,
#osm-plans-list-columns .osm-plan-header::after,
#osm-plans-list-columns .osm-plan .btn.btn-primary.btn-singup{
isolation: isolate;
}
/* Kill leftover white background behind OSM in dark mode */
[data-bs-theme="dark"] #sp-component,
[data-bs-theme="dark"] #sp-component .sp-column,
[data-bs-theme="dark"] #sp-component .osm-container,[data-bs-theme="dark"] #sp-component .row,
[data-bs-theme="dark"] #sp-component [class*="container"],
[data-bs-theme="dark"] #sp-component .sppb-section,
[data-bs-theme="dark"] #sp-component .sppb-row-container {
background: transparent !important;
}
/* Failsafe: ook direct rond het OSM-blok niets laten kleuren */
[data-bs-theme="dark"] #osm-plans-list-columns,
[data-bs-theme="dark"] #osm-plans-list-columns :where(.osm-pricing-table,.row){
background: transparent !important;
}
.osm-pricing-table .btn-singup
{
font-size: 14px;
}
/* ================================================================
ZEITLOSEN · OSMembership Inline + Standalone · v1.4
Accent per plan · Helix module frame · Hausstil goud
================================================================ */
:where(.osm-inline-signup, #osm-signup-page) form {
--accent-freund: var(--zl-bronze);
--accent-zeitgenosse: var(--zl-gold);
--accent-gefaehrte: color-mix(in srgb, var(--zl-gold) 45%, var(--sp-text) 55%);
/* huisstijl goudtinten */
--gold-dark: color-mix(in srgb, var(--zl-gold) 78%, #000 22%);
--light-gold-bg: color-mix(in srgb, var(--zl-gold) 9%, #fff 91%);
--error: var(--gold-dark); /* foutpill achtergrond (donker goud) */
--muted: var(--sp-muted, #6b7280);
font: 16px/1.55 "Helvetica Neue", Arial, sans-serif;
color-scheme: light dark;
margin-top: 1.5rem;
/* === Module-stijl frame === */
border: 1px solid color-mix(in srgb, var(--zl-gold) 18%, #e8e8e8 82%);
border-radius: 10px;
padding: 30px;
background: color-mix(in srgb, #fff 96%, var(--zl-gold) 4%);
box-shadow: 0 2px 10px rgba(0,0,0,.03);
transition: background-color .3s ease, border-color .3s ease;
}
/* === Plan-afhankelijke accenten === */
.osm-container.osm-plan-1 form { --accent: var(--accent-freund); }
.osm-container.osm-plan-2 form { --accent: var(--accent-zeitgenosse); }
.osm-container.osm-plan-3 form { --accent: var(--accent-gefaehrte); }
/* === Module frame in dark mode === */
[data-bs-theme="dark"] :where(.osm-inline-signup, #osm-signup-page) form {
border-color: color-mix(in srgb, var(--zl-gold) 30%, #444 70%);
background: color-mix(in srgb, #111317 90%, var(--zl-gold) 10%);
box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
/* ---------------- Labels ---------------- */
:where(.osm-inline-signup, #osm-signup-page) label {
font-weight: 500;
color: var(--sp-text, #111);
font-size: .95rem;
}
:where(.osm-inline-signup, #osm-signup-page) .form-row:has(.star, .required) label {
font-weight: 700;
}
:where(.osm-inline-signup, #osm-signup-page) .star,
:where(.osm-inline-signup, #osm-signup-page) .required {
color: var(--accent);
font-weight: 700;
}
/* ---------------- Inputs ---------------- */
:where(.osm-inline-signup, #osm-signup-page)
input[type="text"],
:where(.osm-inline-signup, #osm-signup-page)
input[type="password"],
:where(.osm-inline-signup, #osm-signup-page)
input[type="email"],
:where(.osm-inline-signup, #osm-signup-page)
select,
:where(.osm-inline-signup, #osm-signup-page)
textarea {
border: 1px solid var(--sp-border-color, #ccc);
border-radius: 8px;
padding: .55rem .75rem;
font-size: .95rem;
width: 100%;
background: var(--sp-body-bg, #fff);
color: inherit;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
/* Focusring */
:where(.osm-inline-signup, #osm-signup-page)
input:focus,
:where(.osm-inline-signup, #osm-signup-page)
select:focus,
:where(.osm-inline-signup, #osm-signup-page)
textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
outline: none;
}
/* Verplichte velden: zachte goudtint */
:where(.osm-inline-signup, #osm-signup-page)
:is(input, select, textarea).validate\[required\] {
background: var(--light-gold-bg);
}
[data-bs-theme="dark"]
:where(.osm-inline-signup, #osm-signup-page)
:is(input, select, textarea).validate\[required\] {
background: color-mix(in srgb, var(--zl-gold) 16%, #111317 84%);
}
/* ---------------- Bootstrap tooltips ---------------- */
:where(.osm-inline-signup, #osm-signup-page) {
--bs-tooltip-bg: var(--accent);
--bs-tooltip-color: #fff;
}
:where(.osm-inline-signup, #osm-signup-page) ~ .tooltip .tooltip-inner {
background: var(--accent);
color: #fff;
}
:where(.osm-inline-signup, #osm-signup-page) ~ .tooltip .tooltip-arrow::before {
background: var(--accent);
}
/* ---------------- ValidationEngine foutmeldingen (inline pills) --------- */
/* Haal de absolute positionering weg en zet ze netjes onder het veld */
:where(.osm-inline-signup, #osm-signup-page) .formError{
position: static !important;
margin: .4rem 0 0 !important;
z-index: auto !important;
}
/* --- Zet inputs + foutmelding netjes onder elkaar --- */
:where(.osm-inline-signup, #osm-signup-page) .eb-form-control{
display: flex;
flex-direction: column;
gap: .35rem; /* kleine ruimte tussen veld en pill */
}
/* pill altijd onder het veld */
:where(.osm-inline-signup, #osm-signup-page) .eb-form-control > .formError{
order: 2;
margin: 0 !important; /* we regelen de spacing met gap */
}
/* alle andere elementen (input, input-group, select, etc.) eerst */
:where(.osm-inline-signup, #osm-signup-page) .eb-form-control > :not(.formError){
order: 1;
}
/* De ‘pill’ zelf in donker goud, afgerond en leesbaar */
:where(.osm-inline-signup, #osm-signup-page) .formError .formErrorContent{
display: inline-block;
background: var(--error);
color: #fff;
border-radius: 999px;
padding: .45rem .8rem;
font-size: .86rem;
line-height: 1.25;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
max-width: 60ch;
white-space: normal;
}
/* Pijltje volledig uit */
:where(.osm-inline-signup, #osm-signup-page) .formError .formErrorArrow{
display: none !important;
}
/* ---------------- Datenschutz-bericht (alert-info) ---------------- */
:where(.osm-inline-signup, #osm-signup-page)
.osm-privacy-policy-message.alert-info {
background: var(--light-gold-bg) !important;
color: var(--sp-text, #222);
border: 1px solid color-mix(in srgb, var(--zl-gold) 25%, #e8e8e8 75%);
border-radius: 8px;
padding: 1rem 1.25rem;
font-size: .92rem;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zl-gold) 15%, transparent);
}
[data-bs-theme="dark"]
:where(.osm-inline-signup, #osm-signup-page)
.osm-privacy-policy-message.alert-info {
background: color-mix(in srgb, var(--zl-gold) 18%, #111317 82%) !important;
color: rgba(255,255,255,.95);
border-color: color-mix(in srgb, var(--zl-gold) 30%, #333 70%);
}
/* ---------------- Submitknop ---------------- */
:where(.osm-inline-signup, #osm-signup-page)
input[type="submit"].btn-primary {
background: var(--sp-primary);
border: none;
color: #ffffff !important;
font-weight: 700;
text-transform: uppercase;
border-radius: 999px;
padding: .75rem 1.5rem;
box-shadow: 0 4px 14px rgba(0,0,0,.15);
transition: transform .15s ease, box-shadow .15s ease;
}
:where(.osm-inline-signup, #osm-signup-page)
input[type="submit"].btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
/* ---------------- Dark mode fine-tuning ---------------- */
[data-bs-theme="dark"]
:where(.osm-inline-signup, #osm-signup-page)
input,
[data-bs-theme="dark"]
:where(.osm-inline-signup, #osm-signup-page)
select,
[data-bs-theme="dark"]
:where(.osm-inline-signup, #osm-signup-page)
textarea {
background: #121418;
border-color: rgba(255,255,255,.18);
color: rgba(255,255,255,.9);
}
[data-bs-theme="dark"]
:where(.osm-inline-signup, #osm-signup-page)
label {
color: rgba(255,255,255,.95);
}
/* ==============================================================
ZEITLOSEN · OSM Plans – List view (cards)
Works for: #osm-plans-list-default (OSM “Plans List Default”)
No nth-child; plan detection via :has() (title/href/img)
Light & Dark ready
============================================================== */
#osm-plans-list-default {
--gold: var(--zl-gold, #d6b16a);
--bronze: var(--zl-bronze, #b1844b);
--olive: #7a8f45;
--text: var(--sp-text, #222);
--muted: var(--sp-muted, #6b7280);
}
/* ---------- Card / wrapper ---------- */
#osm-plans-list-default .osm-item-wrapper{
border: 1px solid color-mix(in srgb, var(--gold) 16%, #e8e8e8 84%);
border-radius: 12px;
background: color-mix(in srgb, #fff 96%, var(--gold) 4%);
box-shadow: 0 6px 18px rgba(0,0,0,.06);
overflow: hidden;
margin: 18px 0;
}
/* Dark */
[data-bs-theme="dark"] #osm-plans-list-default .osm-item-wrapper{
border-color: color-mix(in srgb, var(--gold) 26%, #333 74%);
background: color-mix(in srgb, #111317 92%, var(--gold) 8%);
box-shadow: 0 8px 24px rgba(0,0,0,.40);
}
/* ---------- Header bar with accent + icon ---------- */
#osm-plans-list-default .osm-item-heading-box{
position: relative;
background: var(--accent, var(--bronze));
color: #fff;
padding: .65rem 3.5rem .65rem 2.75rem;
}
/* plan title */
#osm-plans-list-default .osm-item-title,
#osm-plans-list-default .osm-item-title a{
color:#fff;
text-decoration:none;
font-weight:700;
font-size: 1rem;
}
/* left icon on header */
#osm-plans-list-default .osm-item-heading-box::before{
content:"";
position:absolute;
left: .85rem;
top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
background: var(--icon) center/contain no-repeat;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* badge (e.g. “Beliebt”, “Bester Wert”) — center right */
#osm-plans-list-default .osm-item-heading-box .badge,
#osm-plans-list-default .osm-item-heading-box [class*="badge"]{
position:absolute;
right:.6rem;
top:50%;
transform:translateY(-50%);
border-radius:999px;
padding:.15rem .5rem;
font-weight:700;
}
/* ---------- Plan-specific accent (no nth-child!) ---------- */
/* Freund */
#osm-plans-list-default .osm-item-wrapper:has(.osm-item-title a[title*="Freund"]),
#osm-plans-list-default .osm-item-wrapper:has(.osm-item-title a[href*="freund"]),
#osm-plans-list-default .osm-item-wrapper:has(img[src*="zl-freund"]) {
--accent: var(--bronze);
--icon: url("/images/membership/zl-freund.png");
}
/* Zeitgenosse */
#osm-plans-list-default .osm-item-wrapper:has(.osm-item-title a[title*="Zeitgenosse"]),
#osm-plans-list-default .osm-item-wrapper:has(.osm-item-title a[href*="zeitgenosse"]),
#osm-plans-list-default .osm-item-wrapper:has(img[src*="zl-zeitgenosse"]) {
--accent: var(--gold);
--icon: url("/images/membership/zl-zeitgenosse.png");
}
/* Gefährte */
#osm-plans-list-default .osm-item-wrapper:has(.osm-item-title a[title*="Gefährte"]),
#osm-plans-list-default .osm-item-wrapper:has(.osm-item-title a[href*="gefaehrte"]),
#osm-plans-list-default .osm-item-wrapper:has(img[src*="zl-gefahrte"]) {
--accent: color-mix(in srgb, var(--gold) 45%, #6a5a3a 55%);
--icon: url("/images/membership/zl-gefahrte.png");
}
/* ---------- Body / description ---------- */
#osm-plans-list-default .osm-item-description{
padding: 1rem 1.25rem 1.25rem;
color: var(--text);
}
#osm-plans-list-default .osm-description-details{
color: var(--text);
line-height: 1.5;
}
#osm-plans-list-default .osm-thumb-left{
float:left;
width:72px; height:auto;
margin: .15rem .9rem .4rem 0;
border:0; box-shadow:none; border-radius:8px;
background:#fff;
}
/* ---------- Properties table → pills ---------- */
#osm-plans-list-default .table{
margin:0;
background:transparent;
border:0;
}
#osm-plans-list-default .table td{
border:0;
padding:.25rem .35rem;
vertical-align:middle;
font-size:.92rem;
color:var(--muted);
}
#osm-plans-list-default .osm-plan-property-label{
width:28%;
text-transform:uppercase;
letter-spacing:.02em;
font-weight:700;
}
#osm-plans-list-default .osm-plan-property-value{
text-align:left;
}
#osm-plans-list-default .osm-plan-property-value{
display:inline-block;
padding:.25rem .55rem;
border-radius:999px;
background: color-mix(in srgb, var(--accent) 16%, #fff 84%);
color: #222;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Dark tweaks for pills/text */
[data-bs-theme="dark"] #osm-plans-list-default .osm-plan-property-value{
background: color-mix(in srgb, var(--accent) 22%, #161a20 78%);
color: rgba(255,255,255,.92);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
[data-bs-theme="dark"] #osm-plans-list-default .osm-description-details{
color: rgba(255,255,255,.9);
}
/* ---------- CTA ----------- */
#osm-plans-list-default .osm-taskbar{
padding-top: .75rem;
}
#osm-plans-list-default .osm-taskbar .btn.btn-primary{
--btn-bg: var(--accent);
background: var(--btn-bg);
border:0;
font-weight:700;
border-radius: 999px;
padding:.6rem 1.1rem;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
#osm-plans-list-default .osm-taskbar .btn.btn-primary:hover{
filter: brightness(1.05);
transform: translateY(-1px);
}
#osm-plans-list-default .osm-taskbar .btn.btn-primary:after{
content:"›";
display:inline-block;
margin-left:.45rem;
transform: translateY(-.5px);
}
/* ---------- Small polish ---------- */
#osm-plans-list-default .osm-page-intro-text{
margin: .75rem 0 1rem;
color: var(--muted);
}
#osm-plans-list-default .row{ align-items: center; }
/* ==============================================================
ZEITLOSEN · OSM Plan Detail (Freund / Zeitgenosse / Gefährte)
Accent-fix · Geen dubbele borders · Light/Dark
============================================================== */
#osm-plan-item{
/* basis-tokens */
--gold: var(--zl-gold, #d6b16a);
--bronze: var(--zl-bronze, #b1844b);
--text: var(--sp-text, #222);
--muted: var(--sp-muted, #6b7280);
/* container */
border: 0px solid color-mix(in srgb, var(--gold) 16%, #e8e8e8 84%);
border-radius: 12px;
/* background: color-mix(in srgb, #fff 96%, var(--gold) 4%);
box-shadow: 0 6px 18px rgba(0,0,0,.06); */
overflow: hidden;
}
/* Dark container + betere leesbaarheid */
[data-bs-theme="dark"] #osm-plan-item{
border-color: color-mix(in srgb, var(--gold) 26%, #333 74%);
/* background: color-mix(in srgb, #111317 92%, var(--gold) 8%); */
box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
[data-bs-theme="dark"] #osm-plan-item .osm-item-description,
[data-bs-theme="dark"] #osm-plan-item .osm-description-details,
[data-bs-theme="dark"] .osm-container .osm-item-description{
color: rgba(255,255,255,.93);
background: color-mix(in srgb, var(--sp-section-bg, #1e1e1e) 92%, #000 8%);
}
/* ---------- Header bar + icon ---------- */
#osm-plan-item .osm-item-heading-box{
position:relative;
background: var(--accent, var(--bronze));
color:#fff;
padding:.85rem 1.25rem .85rem 3rem;
}
#osm-plan-item .osm-page-title{
margin:0; color:#fff; font-weight:600;
font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
}
#osm-plan-item .osm-item-heading-box::before{
content:""; position:absolute; left:.9rem; top:50%;
transform: translateY(-50%);
width:22px;height:22px; background: var(--icon) center/contain no-repeat;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* ---------- Robuuste accent-detectie (geen nth-child) ---------- */
/* Freund */
#osm-plan-item:has([alt*="Freund"]),
#osm-plan-item:has(img[src*="zl-freund"]),
#osm-plan-item:has(.osm-item-heading-box a[title*="Freund"]) {
--accent: var(--bronze);
--icon: url("/images/membership/zl-freund.png");
}
/* Zeitgenosse */
#osm-plan-item:has([alt*="Zeitgenosse"]),
#osm-plan-item:has(img[src*="zeitgenosse"]),
#osm-plan-item:has(.osm-item-heading-box a[title*="Zeitgenosse"]) {
--accent: var(--gold);
--icon: url("/images/membership/zl-zeitgenosse.png");
}
/* Gefährte */
#osm-plan-item:has([alt*="Gefährte"]),
#osm-plan-item:has(img[src*="gefahrte"]),
#osm-plan-item:has(.osm-item-heading-box a[title*="Gefährte"]) {
--accent: color-mix(in srgb, var(--gold) 45%, #6a5a3a 55%);
--icon: url("/images/membership/zl-gefahrte.png");
}
/* ---------- Body ---------- */
#osm-plan-item .osm-item-description{ padding:1.1rem 1.25rem 1.25rem; color:var(--text); }
#osm-plan-item .osm-description-details{ line-height:1.55; font-size:1.02rem; color:var(--text); }
#osm-plan-item .osm-description-details > p:first-child{ margin-top:.15rem; }
/* Thumbnail links; verwijder Bootstrap-randjes (voorkomt “dubbele border”) */
#osm-plan-item .osm-thumb-left{ float:left; width:80px; height:auto; margin:.2rem 1rem .6rem 0; border:0; box-shadow:none; border-radius:10px; background:#fff; }
#osm-plan-item .img-thumbnail,
#osm-plan-item .img-polaroid{ border:0 !important; box-shadow:none !important; }
/* ---------- Tabel → pillen, zonder *table-bordered* randen ---------- */
#osm-plan-item .table{ margin:.75rem 0 0; background:transparent; border:0; }
#osm-plan-item .table.table-bordered{ border:0; }
#osm-plan-item .table > :is(thead,tbody,tfoot) > tr > :is(th,td){ border:0; }
#osm-plan-item .osm-plan-property-label{
width:22%; text-transform:uppercase; font-weight:800;
color:var(--muted); letter-spacing:.02em; padding:.5rem .6rem;
}
#osm-plan-item .osm-plan-property-value{
display:inline-block; padding:.35rem .7rem; border-radius:999px;
background: color-mix(in srgb, var(--accent) 16%, #fff 84%);
color:#222; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-bs-theme="dark"] #osm-plan-item .osm-plan-property-value{
background: color-mix(in srgb, var(--accent) 22%, #161a20 78%);
color: rgba(255,255,255,.96);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* ---------- CTA ---------- */
#osm-plan-item .osm-taskbar{ padding:1rem 0 .25rem; }
#osm-plan-item .osm-taskbar .btn.btn-primary{
background:var(--accent); border:0; color:#fff; font-weight:600;
border-radius:999px; padding:.7rem 1.25rem; box-shadow:0 8px 22px rgba(0,0,0,.12);
}
#osm-plan-item .osm-taskbar .btn.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
#osm-plan-item .osm-taskbar .btn.btn-primary::after{ content:"›"; display:inline-block; margin-left:.45rem; transform:translateY(-.5px); }
/* ---------- Lijsten ---------- */
#osm-plan-item ul{ margin:.5rem 0 .75rem 1.25rem; }
#osm-plan-item li{ margin:.2rem 0; }
[data-bs-theme="dark"] joomla-tab>joomla-tab-element,
[data-bs-theme="dark"] .table-bordered>:not(caption)>*>*,
[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*
{
color: rgba(255,255,255,.93);
background: color-mix(in srgb, var(--sp-section-bg, #1e1e1e) 92%, #000 8%);
}
/* Contact: thumbnail echt rechts naast de info houden */
.com-contact__thumbnail {
float: right; /* is er al, maar laten staan */
max-width: 360px; /* of bv. clamp(220px, 33%, 360px) */
margin: 0 0 1rem 1rem; /* ruimte tussen tekst en beeld */
}
.com-contact__thumbnail img {
display: block;
width: 100%;
height: auto; /* maakt 'm responsief */
}
.osm-container form
{
margin: 20px 0px 20px 0px !important;
}
@media (max-width: 767.98px) {
.osm-container form
{
margin: 0px 10px 10px 10px;
}
}
/* =======================================================
ZEITLOSEN · Introbox voor Mitgliedsstufe (Zeitgenosse)
======================================================= */
.osm-intro {
--accent: var(--zl-gold);
border: 1px solid color-mix(in srgb, var(--accent) 18%, #e8e8e8 82%);
border-radius: 10px;
background: color-mix(in srgb, #fff 96%, var(--accent) 4%);
box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
margin-top: 20px;
font-size: 1rem;
line-height: 1.6;
color: var(--sp-text);
transition: background-color .3s ease, border-color .3s ease;
}
/* Kleuraccent per Mitgliedsstufe */
.osm-intro--freund { --accent: var(--zl-bronze); }
.osm-intro--zeitgenosse { --accent: var(--zl-gold); }
.osm-intro--gefaehrte { --accent: color-mix(in srgb, var(--zl-gold) 45%, var(--sp-text) 55%); }
/* Typografie */
.osm-intro p {
margin-bottom: .65rem;
}
.osm-intro strong {
color: var(--accent);
font-weight: 700;
}
.osm-intro em {
font-style: italic;
color: color-mix(in srgb, var(--accent) 55%, var(--sp-text) 45%);
}
/* Donkere modus variant */
[data-bs-theme="dark"] .osm-intro {
border-color: color-mix(in srgb, var(--accent) 30%, #444 70%);
background: color-mix(in srgb, #111317 90%, var(--accent) 10%);
box-shadow: 0 2px 10px rgba(0,0,0,.4);
color: rgba(255,255,255,.95);
}
[data-bs-theme="dark"] .osm-intro strong {
color: color-mix(in srgb, var(--accent) 85%, #fff 15%);
}
[data-bs-theme="dark"] .osm-intro em {
color: color-mix(in srgb, var(--accent) 65%, #fff 35%);
}
/* System message: top-centered, klikbaar, boven alles */
#system-message-container{
position: fixed !important;
top: 16px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: min(720px, calc(100vw - 32px));
z-index: 120000; /* hoger dan tooltips etc. */
pointer-events: none; /* container blokkeert geen kliks */
text-align: center;
}
/* Het Joomla 5 webcomponent */
#system-message-container joomla-alert{
pointer-events: auto; /* wél kliks op alert/close */
display: inline-block;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.15);
padding: 14px 20px;
border: 1px solid #C7923E;
background: #C7923E;
color: #111827;
}
/* Close-knop van */
#system-message-container .joomla-alert--close{
position: absolute;
top: 8px; right: 10px;
opacity: .8;
cursor: pointer;
}
#system-message-container .joomla-alert--close:hover{ opacity: 1; }
/* ===== Fix voor sluitknop in joomla-alert ===== */
#system-message-container joomla-alert {
position: relative;
padding-right: 36px; /* ruimte voor de X */
}
/* eigen stijl voor de close-knop */
#system-message-container .joomla-alert--close {
position: absolute;
top: 8px;
right: 10px;
border: none;
background: none;
color: #111827; /* donkere tekstkleur */
font-size: 20px;
line-height: 1;
opacity: 0.6;
cursor: pointer;
z-index: 2;
}
#system-message-container .joomla-alert--close:hover {
opacity: 1;
color: #C7923E; /* goudaccent bij hover */
}
/* Zorg dat de alert buitenranden mag overlappen */
#system-message-container joomla-alert{
position: relative;
overflow: visible; /* belangrijk: knop kan buiten de box vallen */
padding-right: 16px; /* geen extra ruimte nodig binnenin */
}
/* Ronde, zwevende close-knop rechts-boven BUITEN de alert */
#system-message-container .joomla-alert--close{
position: absolute;
top: -12px; /* hoogte buiten de rand */
right: -12px; /* breedte buiten de rand */
width: 32px;
height: 32px;
border: 0;
border-radius: 9999px;
background: #C7923E; /* ZeitloSen-goud */
color: #111827; /* donkere X */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
opacity: 1; /* volledig zichtbaar */
z-index: 2; /* boven alert */
}
/* Hover/focus-states en betere toegankelijkheid */
#system-message-container .joomla-alert--close:hover{
background: #D3A157; /* iets lichter goud */
}
#system-message-container .joomla-alert--close:focus-visible{
outline: 2px solid #D3A157;
outline-offset: 2px;
}
/* Klein scherm: iets dichter tegen de rand */
@media (max-width: 480px){
#system-message-container .joomla-alert--close{
top: -10px;
right: -10px;
width: 28px;
height: 28px;
font-size: 16px;
}
}
/* === Thema-basis: zorg dat iOS/native repaint correct gebeurt ============ */
:root { color-scheme: light; }
[data-bs-theme="dark"] { color-scheme: dark; }
/* === Hero/Panel "Gold" – thematische tokens ============================== */
:root{
/* licht */
--hero-gold-bg: color-mix(in srgb, #ffffff 96%, var(--zl-gold) 4%);
--hero-gold-border: color-mix(in srgb, var(--zl-gold) 18%, #e8e8e8 82%);
--hero-gold-text: var(--sp-text, #111827);
--hero-gold-heading: var(--sp-heading-color, #0A0A0A);
--hero-gold-shadow: 0 2px 10px rgba(0,0,0,.03);
--hero-gold-link: var(--zl-gold);
--hero-gold-link-hover: var(--zl-gold-hover);
}
[data-bs-theme="dark"]{
/* donker – subtiel warm met goudtint */
--hero-gold-bg: color-mix(in srgb, var(--sp-body-bg, #1E1E1E) 92%, var(--zl-gold) 8%);
--hero-gold-border: color-mix(in srgb, var(--zl-gold) 35%, rgba(255,255,255,.10) 65%);
--hero-gold-text: var(--sp-text, #E5E7EB);
--hero-gold-heading: var(--sp-heading-color, #F9FAFB);
--hero-gold-shadow: 0 10px 28px rgba(0,0,0,.65);
--hero-gold-link: var(--zl-gold);
--hero-gold-link-hover: var(--zl-gold-hover);
}
/* === Component: panel-gold =============================================== */
.panel-gold{
background: var(--hero-gold-bg) !important;
border: 1px solid var(--hero-gold-border) !important;
color: var(--hero-gold-text) !important;
border-radius: 10px;
padding: 24px;
box-shadow: var(--hero-gold-shadow);
transition:
background-color .25s ease,
border-color .25s ease,
color .20s ease,
box-shadow .20s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* typografie in het paneel */
.panel-gold h1,
.panel-gold h2,
.panel-gold h3,
.panel-gold h4{ color: var(--hero-gold-heading) !important; }
.panel-gold a{
color: var(--hero-gold-text);
text-decoration: none;
font-weight: 400;
}
.panel-gold a:hover{ color: var(--hero-gold-bg); text-decoration: underline; }
/* jouw bestaande spacing uit het voorbeeld */
.zl-landing-hero{ margin:0 0 18px; text-align:center; padding:24px 20px; }
/* iOS/WebKit ‘hang’ safeguard: micro nudge triggert repaint na themawissel */
@supports (-webkit-touch-callout: none){
[data-bs-theme] .panel-gold{
will-change: background-color, color, border-color;
/* klein randje helpt WebKit soms om state te verversen */
border-color: color-mix(in srgb, var(--hero-gold-border) 98%, transparent 2%) !important;
}
}
.panel-gold--tight { padding: 16px; }
.panel-gold--no-shadow { box-shadow: none; }
/* ---------- BUTTONS ---------- */
/* Gevulde gouden knop */
.btn-gold {
--_btn-bg: var(--zl-gold);
--_btn-text: #fff;
--_btn-bg-hover: color-mix(in srgb, var(--zl-gold) 88%, #000 12%);
--_btn-bg-active: color-mix(in srgb, var(--zl-gold) 80%, #000 20%);
display: inline-block;
background-color: var(--_btn-bg);
color: var(--_btn-text);
border: 1px solid var(--_btn-bg);
border-radius: 2rem;
padding: .6rem 1.25rem;
font-weight: 500;
text-decoration: none;
transition: background-color .2s ease, transform .12s ease, box-shadow .2s ease, color .2s ease;
}
.btn-gold:hover,
.btn-gold:focus {
background-color: var(--_btn-bg-hover);
border-color: var(--_btn-bg-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.btn-gold:active {
background-color: var(--_btn-bg-active);
border-color: var(--_btn-bg-active);
transform: translateY(0);
}
.btn-gold:disabled,
.btn-gold[disabled] {
opacity: .65;
pointer-events: none;
}
/* Gouden outline-knop */
.btn-gold-outline {
--_btn-border: color-mix(in srgb, var(--zl-gold) 85%, #000 15%);
--_btn-text: color-mix(in srgb, var(--zl-gold) 90%, #000 10%);
--_btn-bg-hover: color-mix(in srgb, #ffffff 92%, var(--zl-gold) 8%);
display: inline-block;
background-color: transparent;
color: var(--_btn-text);
border: 1px solid var(--_btn-border);
border-radius: 2rem;
padding: .55rem 1.15rem;
font-weight: 500;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-gold-outline:hover,
.btn-gold-outline:focus {
background-color: var(--_btn-bg-hover);
color: var(--_btn-text);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* ---------- ALERT ---------- */
.alert-gold {
color-scheme: light dark;
color: color-mix(in srgb, var(--zl-gold) 70%, #000 30%);
background: color-mix(in srgb, #fff 94%, var(--zl-gold) 6%);
border: 1px solid color-mix(in srgb, var(--zl-gold) 35%, #e4e4e4 65%);
border-left-width: 4px;
border-radius: 10px;
padding: .9rem 1.15rem;
}
.alert-gold a { color: color-mix(in srgb, var(--zl-gold) 85%, #000 15%); text-decoration: underline; }
.alert-gold strong { color: color-mix(in srgb, var(--zl-gold) 90%, #000 10%); }
/* ==== ZEITLOSEN | OSM price table verticaal stapelen in #sp-position1/#sp-right/#sp-left ==== */
/* 1) .row neutraliseren (ook als Bootstrap er flex van maakt) */
:is(#sp-position1, #sp-right, #sp-left) .zl-price-table-module .osm-pricing-table {
display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2) Alle grid-kolommen binnen de pricing table full-width + gap eronder */
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-pricing-table > [class^="col-"],
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-pricing-table > [class*=" col-"] {
float: none !important; /* BS3 */
flex: 0 0 100% !important; /* BS4/5 */
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 0 30px 0 !important; /* ruimte tussen kaarten */
}
/* 3) Kaarten automatisch in hoogte */
:is(#sp-position1, #sp-right, #sp-left) .zl-price-table-module .osm-plan {
height: auto !important;
}
/* 4) Sign-up knop 75% breed, gecentreerd, nette vertical align */
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-signup-container li a.btn.btn-primary.btn-singup {
position: relative !important;
width: 75% !important;
margin: 10px auto 20px auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
padding: 14px 40px 10px 16px !important;
line-height: 1 !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* 5) Ribbon/label veilig op small width */
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-plan-recommended .plan-recommended {
position: relative !important;
left: 0; right: 0; top: 0;
display: inline-block;
margin-bottom: 6px;
}
/* 6) Eventueel pijltje/icoon in de knop centreren */
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-signup-container li a.btn.btn-primary.btn-singup::after {
position: absolute !important;
right: 14px;
top: 50%;
transform: translateY(-50%);
}
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-signup-container li a.btn.btn-primary.btn-singup svg,
:is(#sp-position1, #sp-right, #sp-left)
.zl-price-table-module .osm-signup-container li a.btn.btn-primary.btn-singup i {
vertical-align: middle !important;
}
/* Alleen voor dit veld */
.osm-privacy-policy .form-control-label .checkbox{
display: inline-flex; /* zet checkbox + tekst naast elkaar */
align-items: center; /* netjes vertical aligned */
gap: .5rem; /* ruimte tussen vinkje en tekst */
line-height: 1.3;
}
/* voorkom dat de link zelf een nieuwe regel forceert */
.osm-privacy-policy .form-control-label .checkbox a{
display: inline; /* sommige templates zetten dit op block */
white-space: normal; /* mag afbreken als het lang is */
}
/* zet het info-blok onder de tekst (niet onder het vinkje) */
.osm-privacy-policy .eb-form-control{
margin-left: 1.75em; /* zelfde inspringing als de tekst */
margin-top: .25rem;
}
/* klein cosmetisch detail voor uitlijning */
.osm-privacy-policy .form-control-label .checkbox input[type="checkbox"]{
margin: 0; /* haal default margins weg */
}
/* === ZEITLOSEN · MITGLIED WERDEN Landing – complete CSS === */
/* ===== Hero / Intro ===== */
.zl-landing-hero {
margin: 0 0 18px;
text-align: center;
padding: 24px 20px;
}
.zl-landing-headline {
margin: 0 0 .35rem;
font-weight: 800;
letter-spacing: .2px;
}
.zl-landing-sub {
margin: .15rem 0 .9rem;
opacity: .9;
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.zl-landing-cta .btn-gold {
margin-right: .5rem;
}
/* ===== Feature-lijst binnen kaarten ===== */
.zl-features {
list-style: none;
margin: .35rem 18px .5rem 18px;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: .25rem .75rem;
}
.zl-features li {
position: relative;
padding-left: 1.35rem;
line-height: 1.45;
color: var(--zl-card-text, var(--sp-text));
opacity: .95;
}
.zl-features li::before {
content: "";
position: absolute;
left: 0;
top: .15rem;
width: .95rem;
height: .95rem;
background: var(--accent, var(--zl-gold));
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center/contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center/contain;
opacity: .95;
}
/* Donker thema: tekst leesbaar houden */
[data-bs-theme="dark"] .zl-features li {
color: rgba(255,255,255,.92);
}
/* ===== Grid / layout-aanpassingen ===== */
/* Forceer nette kolomopbouw vanaf desktop
@media (min-width: 1200px){
#osm-plans-list-columns .osm-pricing-table {
display: grid !important;
grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
gap: 28px !important;
margin-top: 24px !important;
margin-bottom: 24px !important;
}
}
/* Optioneel: iets eerder 3 kolommen
@media (min-width: 1100px) and (max-width: 1199.98px){
#osm-plans-list-columns .osm-pricing-table {
display: grid !important;
grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
gap: 24px !important;
}
}
/* Tablets ≤ 991px → 2 kolommen, mobiel → 1
@media (max-width: 991.98px){
#osm-plans-list-columns .osm-pricing-table {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
}
}
@media (max-width: 575.98px){
#osm-plans-list-columns .osm-pricing-table {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
} */
/* ===== Kaarten & knoppen consistent in hoogte ===== */
#osm-plans-list-columns .osm-plan {
height: auto !important;
}
/* ===== Vertrauensbox onderaan ===== */
.alert-gold {
border: 1px solid color-mix(in srgb, var(--zl-gold) 60%, #000 5%);
border-radius: 8px;
background: color-mix(in srgb, var(--zl-gold) 15%, #fff 85%);
color: var(--sp-text);
padding: 10px 16px;
font-size: .95rem;
line-height: 1.4;
margin-top: 24px;
text-align: center;
}
.alert-gold a {
color: var(--zl-gold-hover);
text-decoration: underline;
}
[data-bs-theme="dark"] .alert-gold {
background: color-mix(in srgb, var(--zl-gold) 15%, #000 85%);
color: rgba(255,255,255,.9);
border-color: color-mix(in srgb, var(--zl-gold) 40%, #fff 10%);
}
/* ==== PATCH: Empfohlen weg + 3 kolommen zo lang mogelijk ==== */
/* 1) Verberg het losse 'Empfohlen'-lintje boven de kaart */
#osm-plans-list-columns .plan-recommended{
display: none !important;
}
/* 2) Forceer 3 kolommen als default (ook onder 1200px)
#osm-plans-list-columns .osm-pricing-table{
display: grid !important;
grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; /* 220px → 3-up tot ~720px */
gap: 24px !important;
margin-top: 20px !important;
margin-bottom: 24px !important;
}
/* 2b) Als het echt te smal wordt: eerst 2 kolommen...
@media (max-width: 719.98px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
gap: 20px !important;
}
}
/* ...en op phones terug naar 1 kolom
@media (max-width: 479.98px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* (Optioneel) iets compacter op small: paddings van de kaarten
@media (max-width: 719.98px){
#osm-plans-list-columns .osm-plan-price{ padding: 10px 12px 0 !important; }
#osm-plans-list-columns .osm-plan-short-description{ padding: 10px 12px 6px !important; }
.zl-features{ margin: .3rem 12px .5rem 12px; }
}
/* ==== OSM plans: 3 kolommen hard forceren + Bootstrap reset ====
/* 0) Grid-container voluit gebruiken
#osm-plans-list-columns .osm-pricing-table{
display: grid !important;
grid-template-columns: repeat(3, minmax(220px, 1fr)) !important; /* 3-up tot ~720px
gap: 24px !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 1) Maak elk kind een “neutraal” grid-item (BS3/4/5 overrulen)
#osm-plans-list-columns .osm-pricing-table > [class^="col-"],
#osm-plans-list-columns .osm-pricing-table > [class*=" col-"]{
float: none !important; /* BS3
flex: 0 0 auto !important; /* BS4/5
max-width: none !important;
width: auto !important;
display: block !important; /* voorkom inline/flex rare effecten
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* 2) Kaarten zelf mogen niet forceren
#osm-plans-list-columns .osm-plan{
width: auto !important;
max-width: none !important;
height: auto !important;
}
/* 3) Breakpoints – pas alleen terug naar 2 en 1 kolom als het écht moet
@media (max-width: 719.98px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
gap: 20px !important;
}
}
@media (max-width: 479.98px){
#osm-plans-list-columns .osm-pricing-table{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* 4) Extra: verwijder 'Empfohlen' blokje als je dat niet wilt
#osm-plans-list-columns .plan-recommended{ display:none !important; }
/* ===== Fix: 3 kolommen forceren voor OSM plans ===== */
/* 1) Maak de .row.osm-pricing-table een echte GRID (override flex)
#osm-plans-list-columns > .row.osm-pricing-table {
display: grid !important;
grid-template-columns: repeat(3, minmax(230px, 1fr)) !important; /* 3-cols
gap: 24px !important;
margin: 0 !important; /* kill Bootstrap negatieve gutters
width: 100% !important;
box-sizing: border-box !important;
}
/* 2) Neutraliseer alle Bootstrap kolomregels binnen de grid
#osm-plans-list-columns > .row.osm-pricing-table > [class^="col-"],
#osm-plans-list-columns > .row.osm-pricing-table > [class*=" col-"]{
float: none !important; /* BS3
flex: 0 0 auto !important; /* BS4/5
max-width: none !important;
width: auto !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
/* 3) Kaart zelf mag niets forceren
#osm-plans-list-columns .osm-plan{
width: auto !important;
max-width: none !important;
height: auto !important;
}
/* 4) Responsief pas terugschakelen naar 2 → 1 kolom
@media (max-width: 840px){
#osm-plans-list-columns > .row.osm-pricing-table{
grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
}
}
@media (max-width: 520px){
#osm-plans-list-columns > .row.osm-pricing-table{
grid-template-columns: 1fr !important;
}
}
/* Optioneel: "Empfohlen"-badge verbergen
#osm-plans-list-columns .plan-recommended{ display:none !important; }
/* ===== OSM plans: force 3-col grid + kill clearfix pseudo items ===== */
/* 0) Kill the clearfix grid items on this row
#osm-plans-list-columns > .row.osm-pricing-table::before,
#osm-plans-list-columns > .row.osm-pricing-table::after {
content: none !important;
display: none !important;
}
/* 1) Maak de .row echt grid (override Bootstrap flex)
#osm-plans-list-columns > .row.osm-pricing-table{
display: grid !important;
grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
gap: 24px !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 2) Neutraliseer alle Bootstrap col-classes binnen de grid
#osm-plans-list-columns > .row.osm-pricing-table > [class^="col-"],
#osm-plans-list-columns > .row.osm-pricing-table > [class*=" col-"]{
float: none !important; /* BS3
flex: 0 0 auto !important; /* BS4/5
max-width: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
/* 3) Kaart zelf niets forceren
#osm-plans-list-columns .osm-plan{
width: auto !important;
max-width: none !important;
height: auto !important;
}
/* 4) Responsief terugschakelen
@media (max-width: 840px){
#osm-plans-list-columns > .row.osm-pricing-table{
grid-template-columns: repeat(2, minmax(230px,1fr)) !important;
}
}
@media (max-width: 520px){
#osm-plans-list-columns > .row.osm-pricing-table{
grid-template-columns: 1fr !important;
}
} */
/* Optioneel: “Empfohlen”-badge verbergen */
#osm-plans-list-columns .plan-recommended{ display:none !important; }
/* ===== ZEITLOSEN · plan-prijsaanpassingen ===== */
/* Algemene centrering helper */
.zl-centered {
text-align: center !important;
}
/* “Kostenlos” groter, iets meer lucht */
.osm-plan-1 .osm-plan-price .price {
font-size: 1.3rem !important;
font-weight: 600 !important;
color: var(--sp-heading-color, #111827);
}
.osm-plan-1 .osm-plan-price sub {
display: none !important;
}
/* Zeitgenosse “ab 2,00€” beter benadrukken */
.osm-plan-2 .osm-plan-price .price {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: var(--zl-gold, #c7923e);
}
.osm-plan-2 .osm-plan-price sub {
font-size: 0.9rem !important;
color: var(--sp-text, #111827);
opacity: 0.8;
}
/* Gefährte gecentreerd + zelfde stijl */
.osm-plan-3 .osm-plan-price {
text-align: center !important;
}
.osm-plan-3 .osm-plan-price .price {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: var(--zl-bronze, #8A5A28);
}
.osm-plan-3 .osm-plan-price sub {
font-size: 0.9rem !important;
opacity: 0.8;
}
/* === Sidebar proposition: full width & geen Bootstrap gutter === */
/* 0) Laat SP Page Builder/Addon niet inperken */
#sp-right .mod-custom .sppb-addon-content
{ max-width: 100% !important; }
#sp-right .zl-join-landing {max-width: 95% !important; margin-bottom: 20px;}
[data-bs-theme="dark"] #sp-right .zl-join-landing, #sp-left .zl-join-landing {
background: transparent;
}
/* 1) Zet de pricing-rij uit flex naar block, 1 kolom */
#sp-right .zl-join-landing .osm-pricing-table{
display: block !important;
margin: 0 !important;
}
/* 2) Kind-kolommen 100% breed, zonder padding/margin */
#sp-right .zl-join-landing .osm-pricing-table > [class^="col-"],
#sp-right .zl-join-landing .osm-pricing-table > [class*=" col-"]{
float: none !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
/* 3) Ook de generieke .row child-padding in dit blok neutraliseren */
#sp-right .zl-join-landing .row > *{
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* 4) Kaart + knop netjes op volle breedte */
#sp-right .zl-join-landing .osm-plan{ width: 100% !important; }
#sp-right .zl-join-landing .osm-signup-container .btn-singup{ width: 100% !important; }
/* 5) Hero bovenin iets compacter in de sidebar */
#sp-right .zl-landing-hero.panel-gold{ padding: 14px 16px; }
/* ===== Sidebar proposition: knop + features netjes ===== */
/* 1) CTA-knop 75%, gecentreerd, prettige klikhoogte */
:is(#sp-right, #sp-left, #sp-position1)
.osm-plan .osm-signup-container li a.btn.btn-primary.btn-singup{
width: 75% !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
margin: 12px auto 18px auto !important; /* vrij rondom + centreren */
min-height: 46px !important;
line-height: 1 !important;
padding: .7rem 2.25rem .7rem 1rem !important; /* ruimte rechts voor chevron */
border-radius: 999px !important;
}
/* plaats de chevron netjes in het midden rechts */
:is(#sp-right, #sp-left, #sp-position1)
.osm-plan .btn.btn-primary.btn-singup::after{
right: 14px;
top: 50%;
transform: translateY(-50%);
}
/* 2) Features-lijst: vinkje dicht bij de tekst */
#osm-plans-list-columns .zl-features{
list-style: none;
padding: 6px 18px 0;
margin: 0;
}
#osm-plans-list-columns .zl-features li{
position: relative;
margin: .28rem 0;
padding-left: 22px; /* ruimte voor het vinkje */
line-height: 1.5;
}
#osm-plans-list-columns .zl-features li::before{
content: "✓";
position: absolute;
left: 0; /* vlak voor de tekst */
top: 0;
color: var(--zl-gold, #c7923e);
font-weight: 700;
}
/* 3) Zorg dat de CTA-zone niet ‘plakt’ aan de rand */
#osm-plans-list-columns .osm-signup-container{
padding: 0 18px 20px !important;
}
/* ===== Proposition in sidebar: features + CTA fix ===== */
/* 1) Features-lijst: geen extra inspringing, links uitlijnen */
#osm-plans-list-columns .zl-features{
list-style: none;
margin: .35rem 18px .6rem 18px;
padding: 0 !important; /* override globale ol,ul */
padding-left: 0 !important; /* extra zeker */
text-align: left !important; /* ook als .zl-centered erbij staat */
}
#osm-plans-list-columns .zl-features.zl-centered{
text-align: left !important; /* expliciet voor jouw markup */
}
/* Vinkje vlak voor de tekst */
#osm-plans-list-columns .zl-features li{
position: relative;
margin: .28rem 0;
padding-left: 22px; /* ruimte voor het vinkje */
line-height: 1.5;
}
#osm-plans-list-columns .zl-features li::before{
content: "✓";
position: absolute;
left: 0;
top: .2em;
color: var(--zl-gold, #c7923e);
font-weight: 700;
}
/* 2) CTA-knop: 75% breed, gecentreerd en vrij van de randen */
:is(#sp-right, #sp-left, #sp-position1)
.osm-plan .osm-signup-container{
padding: 0 18px 20px !important; /* nette binnenruimte onderin */
}
:is(#sp-right, #sp-left, #sp-position1)
.osm-plan .osm-signup-container li{
display: block; /* zodat de button kan centreren */
}
:is(#sp-right, #sp-left, #sp-position1)
.osm-plan .osm-signup-container li a.btn.btn-primary.btn-singup{
display: flex !important; /* block-level; flex voor verticale centering */
align-items: center !important;
justify-content: center !important;
width: 75% !important;
margin: 12px auto 18px auto !important; /* centreer */
min-height: 46px !important;
line-height: 1 !important;
padding: .7rem 2.25rem .7rem 1rem !important; /* ruimte rechts voor chevron */
border-radius: 999px !important;
}
:is(#sp-right, #sp-left, #sp-position1)
.osm-plan .osm-signup-container li a.btn.btn-primary.btn-singup::after{
right: 14px;
top: 50%;
transform: translateY(-50%);
}
/* ===== Functielijst (tabel) 75% breed, gecentreerd & 1em font ===== */
#osm-plans-list-columns .zl-features {
width: 75% !important; /* maakt de lijst smaller */
margin: 0 auto 1.25rem auto !important; /* centreert horizontaal */
padding: 0 !important;
text-align: left !important;
font-size: 1em !important; /* uniforme tekstgrootte */
}
/* Elke functie: nette uitlijning en ruimte */
#osm-plans-list-columns .zl-features li {
position: relative;
padding-left: 22px !important; /* ruimte voor vinkje */
margin: 0.35rem 0 !important;
line-height: 1.45;
border: none !important;
font-size: 0.8em !important; /* erft 1em van parent */
}
/* Vinkje in goud, strak uitgelijnd */
#osm-plans-list-columns .zl-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.15em;
color: var(--zl-gold, #c7923e);
font-weight: 600;
font-size: 1em;
}
/* ===== Hover zonder gloed maar mét subtiele beweging ===== */
:is(#sp-right, #sp-left, #sp-position1) .osm-plan {
transition: transform 0.25s ease !important;
box-shadow: var(--zl-shadow, 0 2px 12px rgba(0, 0, 0, .08)) !important;
background-color: var(--zl-card-bg, #fff) !important;
}
/* bij hover: kleine 'lift' maar geen highlight */
:is(#sp-right, #sp-left, #sp-position1) .osm-plan:hover {
transform: translateY(-4px) !important; /* lichte beweging omhoog */
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important; /* subtielere diepte */
background-color: var(--zl-card-bg, #fff) !important; /* geen gloed */
/* border-color: var(--zl-card-border, rgba(27, 31, 36, 0.12)) !important; */
border-color: transparent !important;
}
/* Kill shimmer/overlay sitewide */
#osm-plans-list-columns .osm-plan:hover::after {
content: none !important;
animation: none !important;
background: none !important;
}
/* === FIX: header goud + titel wrappen en schalen === */
/* 1) Header voor Zeitgenosse écht goud, ongeacht eerdere regels */
#osm-plans-list-columns .osm-plan.osm-plan-2 .osm-plan-header {
background: var(--zl-gold) !important;
}
/* 2) Ruimte rechts voor het 'Beliebt'-badge */
#osm-plans-list-columns .osm-plan-header {
padding-right: 50px !important; /* badge clear */
}
/* 3) Titel mag wrappen en neemt de beschikbare breedte in */
#osm-plans-list-columns .osm-plan-title {
flex: 1 1 auto;
display: block;
margin: 0;
white-space: normal !important; /* forceer wrappen (overrulet oude nowrap) */
overflow-wrap: anywhere; /* breek lange woorden desnoods */
word-break: normal;
hyphens: auto;
line-height: 1.2;
letter-spacing: .2px;
text-transform: capitalize;
/* responsief font: kleiner op small, iets groter op desktop */
font-size: clamp(0.90rem, 0.78rem + 0.7vw, 1.1rem);
font-weight: 800;
}
/* 4) Op phones: nog iets luchtiger en lichter gewicht */
@media (max-width: 575.98px){
#osm-plans-list-columns .osm-plan-title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: .12px;
}
}
@media (max-width: 360px){
#osm-plans-list-columns .osm-plan-title {
font-size: 0.88rem;
font-weight: 600;
}
}
.zl-landing-cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 10px; /* horizontaal */
row-gap: 20px; /* verticaal */
}
/*
#sp-page-builder .page-content .sppb-section:not(div.sppb-section):first-child
{
margin-top: 30px !important;
}
*/
[data-bs-theme="dark"] #sp-left .sp-module, [data-bs-theme="dark"] #sp-right .sp-module {
background: transparent;
border: 0px solid color-mix(in srgb, var(--accent) 18%, #e8e8e8 82%);
}
[data-bs-theme="dark"] #sp-left .sp-module:first-child, [data-bs-theme="dark"] #sp-right .sp-module:first-child {
background: var(--sp-section-bg);
border: 2px solid var(--zl-gold);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] #sp-left .sp-module, [data-bs-theme="dark"] #sp-right .sp-module
{
border: none !important;
border-radius: 20px !important;
background: transparent !important;
}
#sp-left .sp-module.module-met-border, #sp-right .sp-module.module-met-border
{
--accent: var(--zl-gold);
border: 2px solid var(--zl-gold);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
/* border: 1px solid color-mix(in srgb, var(--accent) 18%, #e8e8e8 82%); */
border-radius: 10px;
background: color-mix(in srgb, #fff 96%, var(--accent) 4%);
/* box-shadow: none; */
padding: 0rem 0rem;
margin-bottom: 1.5rem;
margin-top: 20px;
font-size: 1rem;
line-height: 1.6;
color: var(--sp-text);
transition: background-color .3s ease, border-color .3s ease;
}
[data-bs-theme="dark"] #sp-left .sp-module.module-met-border, [data-bs-theme="dark"] #sp-right .sp-module.module-met-border {
background: var(--sp-section-bg);
border: 2px solid var(--zl-gold);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
/* Zet begleite uns boven de titel */
#osm-plans-list-columns .osm-plan-header {
display: flex;
flex-direction: column; /* stapel kinderen verticaal */
align-items: flex-start; /* links uitlijnen */
}
#osm-plans-list-columns .osm-plan-header span {
order: -1; /* verplaats "begleite uns" boven de h2 */
font-size: 0.875rem; /* kleiner */
color: #fff; /* wit */
text-transform: none; /* geen hoofdletters */
margin-bottom: 0.25rem; /* wat ruimte boven h2 */
}
#osm-plans-list-columns .osm-plan-title {
text-transform: none; /* verwijdert capitalize */
line-height: 1.2;
letter-spacing: .2px;
font-size: clamp(0.90rem, 0.78rem + 0.7vw, 1.1rem);
font-weight: 800;
color: #fff;
}
/* kleine witte subtitel boven de h2 */
.osm-plan-subtitle {
display: block;
font-size: 0.8rem;
color: #fff;
margin-bottom: 0.1rem;
text-transform: none;
}
/* titel: geen auto-capitalisatie */
.osm-plan-title
{
text-transform: none;
color: #fff;
margin: 0;
}
.osm-plan-price .price span.zl-sup {
font-size: 20px;
}
/* kleine geruststellende tekst onder knop */
.zl-btn-note {
display: block;
margin-top: 0.35rem;
font-size: 0.8125rem;
color: var(--zl-grayblue);
text-align: center;
line-height: 1.4;
}
#sp-right .sp-module:first-child
{
margin-top: 30px;
border-radius: 20px;
}
#sp-right .osm-container {
padding: 0px 0px 0px 0px;
}
/* ===== OSM Plans – hover fix: geen "wit streepje", geen witte flits ===== */
/* Basis: definieer hover-lift */
#osm-plans-list-columns .osm-plan { --lift: 6px; }
/* Hoofdgrid: liften + gap compenseren met negatieve marge */
#osm-plans-list-columns .osm-plan:hover {
transform: translateY(calc(-1 * var(--lift)));
margin-bottom: calc(-1 * var(--lift)); /* vult de ruimte op -> geen streepje */
box-shadow: 0 14px 34px rgba(0,0,0,.16),
0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
background-color: var(--zl-card-bg) !important; /* geen wit flash in dark */
border-color: color-mix(in srgb, var(--accent) 35%, var(--zl-card-border, var(--sp-border-color)));
}
/* Schakel eventuele highlight/sweep uit die in dark wit toont */
#osm-plans-list-columns .osm-plan:hover::after { content: none !important; }
/* Sidebars (right/left/position1): NIET liften, alleen iets meer schaduw */
:is(#sp-right, #sp-left, #sp-position1) .osm-plan { --lift: 0px; }
:is(#sp-right, #sp-left, #sp-position1) .osm-plan:hover {
transform: none !important;
margin-bottom: 0 !important;
box-shadow: rgba(0,0,0,.12) 0 4px 18px !important;
background-color: var(--zl-card-bg) !important;
border-color: var(--zl-card-border) !important;
}
/* Neutraliseer oudere template-hover die anders grijze gloed/achtergrond afdwingt */
.osm-pricing-table .osm-plan:hover {
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
background: none;
}
#sp-right .osm-pricing-table .btn-singup {
font-size: 12px;
}
/* ZeitloSen primary button – kill Bootstrap blue on :active/:focus */
.btn-primary,
:where(.osm-inline-signup, #osm-signup-page) input[type="submit"].btn-primary {
/* Eén palet voor alle states */
--bs-btn-color: #fff;
--bs-btn-bg: var(--sp-primary);
--bs-btn-border-color: var(--sp-primary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--zl-gold-hover);
--bs-btn-hover-border-color: var(--zl-gold-hover);
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--zl-gold-hover);
--bs-btn-active-border-color: var(--zl-gold-hover);
--bs-btn-focus-shadow-rgb: 199,146,62; /* gold glow i.p.v. blauw */
}
/* Alle active-varianten dezelfde kleur geven */
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
background-color: var(--bs-btn-active-bg) !important;
border-color: var(--bs-btn-active-border-color) !important;
color: var(--bs-btn-active-color) !important;
}
/* Focusring subtiel goud, geen blauw */
.btn-primary:focus,
.btn-primary:focus-visible {
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sp-primary) 35%, transparent) !important;
outline: 0;
}
/* Optioneel: consistent gedrag binnen OSM-forms */
:where(.osm-inline-signup, #osm-signup-page) input[type="submit"].btn-primary:active,
:where(.osm-inline-signup, #osm-signup-page) input[type="submit"].btn-primary:focus {
background-color: var(--zl-gold-hover) !important;
border-color: var(--zl-gold-hover) !important;
}
/* ===== Center the membership card on small screens =====
@media (max-width: 576px) and (orientation: portrait) {
/* module container centreren
#mod-custom243,
#mod-custom243 .sp-module,
#mod-custom243 .sp-module-content {
display: flex;
justify-content: center;
align-items: center;
background:transparent;
}
/* de card zelf niet te breed maken
#mod-custom243 .osm-plan {
margin: 0 auto;
width: 90%;
max-width: 360px;
}
} */
/* Vervang emoji door eigen SVG */
._access-icon {
font-size: 0 !important; /* emoji verbergen */
line-height: 0 !important;
color: transparent !important;
background-image: url("/plugins/system/zlspeak/media/zlspeak/icons/zeitlosen-icon-flat-gold-black.svg") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 100% !important;
width: 50px !important;
height: 50px !important;
border-radius: 12px !important;
background-color: #000 !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, .35) !important;
opacity: 1 !important;
bottom: 18px !important;
left: 18px !important;
}
/* FIX: geen scheve tegel meer */
._access-icon,
._access-icon.circular {
transform: none !important; /* tilt uit */
}
/* (optioneel) zorg dat het Material-icoon nooit in beeld komt */
._access-icon::before,
._access-icon::after,
._access-icon .material-icons {
content: none !important;
display: none !important;
}
/* ZeitloSen Accessibility Icon – hover + active met subtiele goudglow */
._access-icon {
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
filter 0.25s ease,
background-color 0.25s ease;
will-change: transform, box-shadow, filter;
}
/* Hover: zacht omhoog, iets helderder goud en warme gloed */
._access-icon:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow:
0 8px 20px rgba(0, 0, 0, .45),
0 0 10px color-mix(in srgb, var(--zl-gold, #c7923e) 70%, transparent);
}
/* Active: kort indrukken (terugveren) en iets donkerder */
._access-icon:active {
transform: translateY(0) scale(0.96);
filter: brightness(0.95);
box-shadow:
0 4px 10px rgba(0, 0, 0, .35),
0 0 4px color-mix(in srgb, var(--zl-gold, #c7923e) 40%, transparent);
}
/* Licht thema */
:where(#os_form, .osm-inline-signup, #osm-signup-page)
:is(input, select, textarea)[class*="validate[required"] {
background: #edf7ff;
}
/* Donker thema */
[data-bs-theme="dark"]
:where(#os_form, .osm-inline-signup, #osm-signup-page)
:is(input, select, textarea)[class*="validate[required"] {
background: #0f2a44;
color: #ffffff;
}
/* Herstel native radios in dit formulier */
#os_form input[type="radio"]{
-webkit-appearance: radio !important;
appearance: auto !important;
accent-color: var(--zl-gold, #c7923e); /* kleur van de gevulde stip */
width: 1.05em;
height: 1.05em;
vertical-align: -0.15em;
margin-right: .4em;
}
/* 1) Herstel native checkboxes in dit formulier */
#os_form input[type="checkbox"]{
-webkit-appearance: checkbox !important;
appearance: auto !important;
accent-color: var(--zl-gold, #c7923e);
width: 1.05em;
height: 1.05em;
vertical-align: -0.15em;
margin-right: .4em;
cursor: pointer;
}
/* 2) Labels klikbaar maken */
#os_form label { cursor: pointer; }
/* 3) Validator-bubble mag geen clicks “opeten” */
.formError, .jqv-error, .osm-validation-message {
pointer-events: none; /* laat clicks door naar het checkboxje */
/* (optioneel) z-index: 10; zodat hij niet boven de checkbox zit */
}
/* (optioneel) zet de checkbox iets bovenaan in stacking, voor de zekerheid */
#os_form input[type="checkbox"] { position: relative; z-index: 11; }
/* Zorg dat de validatie-badge geen klikken afvangt */
#os_form .eb-message,
#os_form .eb-message * { pointer-events: none; }
#os_form label, #os_form input { pointer-events: auto; }
/* --- Begin der Leistung veldstijl --- */
/* === ZeitloSen OSM Pflichtfeld-Styling – Begin der Leistung === */
/* Label vet maken (consistent met andere verplichte velden) */
#field_beginderleistung .form-control-label label {
font-weight: 600 !important;
}
/* Achtergrond van de checkbox-vakjes in dezelfde kleur als required fields */
#field_beginderleistung input[type="checkbox"].validate[required],
#field_beginderleistung input[type="checkbox"].required,
#field_beginderleistung input[type="checkbox"]:required {
background-color: var(--light-gold-bg, #f8f5ef) !important; /* zelfde als input-bg */
border: 1px solid var(--zl-gold, #c7923e) !important;
accent-color: var(--zl-gold, #c7923e);
width: 1.1em;
height: 1.1em;
vertical-align: -0.15em;
margin-right: .5em;
cursor: pointer;
border-radius: 3px;
}
/* Tekst kleiner, niet vet */
#field_beginderleistung .eb-form-control {
font-size: 0.85rem;
line-height: 1.4;
color: var(--bs-body-color, #222);
}
/* Zorg dat checkbox + tekst netjes horizontaal aligned blijven */
#field_beginderleistung label {
display: inline-flex;
align-items: flex-start;
gap: .45em;
font-weight: 400;
font-size: 0.90rem
;
}
/* Hover voor visuele feedback */
#field_beginderleistung input[type="checkbox"]:hover {
box-shadow: 0 0 0 2px rgba(199, 146, 62, 0.25);
}
/* Optioneel: validator-bubble geen clickblok */
#field_beginderleistung .formError {
pointer-events: none;
}
/* OSM – foutbubble boven de checkboxgroep "Begin der Leistung" */
#field_beginderleistung { position: relative; }
#field_beginderleistung .formError {
position: absolute !important;
top: -42px !important; /* bubble boven de groep */
left: 0 !important;
right: auto !important;
margin: 0 !important;
z-index: 9;
pointer-events: none; /* blokkeert geen clicks op de checkboxen */
}
#field_beginderleistung .formError .formErrorContent {
background: var(--zl-gold, #c7923e);
color: #fff;
font-weight: 600;
border-radius: 999px;
padding: .35rem .75rem;
box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
#field_beginderleistung .formError .formErrorArrow { display: none; }
/* Optioneel: subtielere focusring i.p.v. fel blauw */
#os_form input[type="radio"]:focus-visible{
outline: 2px solid color-mix(in srgb, var(--zl-gold, #c7923e) 60%, transparent);
outline-offset: 2px;
}
/* Contactpagina – mobiel portret compacter + kleiner beeld */
@media (max-width: 576px) and (orientation: portrait){
/* verlaag de typografie alleen op de contactpagina */
.com-contact.contact{
font-size: 1rem !important; /* ~16px basis i.p.v. ~20px */
line-height: 1.5;
padding-inline: .75rem;
}
/* koppen schalen */
.com-contact .page-header h1{
font-size: clamp(1.25rem, 1rem + 2.5vw, 1.6rem) !important;
margin-bottom: .6rem;
}
.com-contact h2{
font-size: clamp(1.05rem, .95rem + 1.8vw, 1.25rem) !important;
margin: 1rem 0 .5rem;
}
/* thumbnail niet meer floaten; kleiner en gecentreerd */
.com-contact__thumbnail{
float: none !important;
max-width: 320px; /* doelgrootte op phone */
width: 92%;
margin: .5rem auto 1rem !important;
}
.com-contact__thumbnail img{
display:block; width:100%; height:auto; border-radius: 6px;
}
/* adressen en iconrijen iets compacter */
.com-contact__info{ font-size: 1em; }
.com-contact__info .d-flex{ gap:.5rem; }
/* linklijst onderaan: kleinere marges */
.com-contact__links ul,
.com-contact__articles ul{ margin-left: 0; }
}
/* Als ergens inline of hogerop font-size vergroot is (1.25em), neutraliseer dit specifiek */
@media (max-width: 576px) and (orientation: portrait){
.com-contact.contact [style*="font-size"]{ font-size: inherit !important; }
}
.contact .page-header
{
padding-bottom: 10px;
margin: 20px 0 0 0;
}
#subscribe_to_newsletter,
label[for="subscribe_to_newsletter"] {
display: none !important;
visibility: hidden !important;
}
/* Regulärer Abo-Preis veld verbergen */
#osm-regular-amount-container {
display: none !important;
visibility: hidden !important;
}
#osm-regular-amount-container + .row.form-group {
margin-top: 0 !important;
}
/* === Form controls: consistent accent + reliable theme repaint ========== */
/* Let the browser flip native widget styling with the theme */
:root { color-scheme: light; }
[data-bs-theme="dark"] { color-scheme: dark; }
/* One accent variable that updates on theme switch */
:root { --zl-form-accent: color-mix(in srgb, var(--sp-primary) 100%, transparent 0%); }
[data-bs-theme="dark"] { --zl-form-accent: color-mix(in srgb, var(--sp-primary) 100%, transparent 0%); }
/* Apply globally to all radios/checkboxes */
input[type="radio"],
input[type="checkbox"]{
accent-color: var(--zl-form-accent);
}
/* (Optional) Improve focus visibility for accessibility */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible{
outline: 2px solid color-mix(in srgb, var(--zl-form-accent) 70%, transparent);
outline-offset: 2px;
}
/* iOS/WebKit repaint nudge: touching border color helps after theme flips */
@supports (-webkit-touch-callout: none) {
input[type="radio"],
input[type="checkbox"]{
border-color: color-mix(in srgb, var(--zl-form-accent) 5%, currentColor 95%);
}
}
img[src*="-intro.webp"] {
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* KUNENA */
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav
{
font-size: 1em;
}
}
[data-bs-theme="dark"] #kunena.layout .krow.categoryzl-forum-subs {
background: var(--bs-gray-800);
}
[data-bs-theme="dark"] #kunena.layout #kstats .kcol, [data-bs-theme="dark"] #kunena.layout #kwho .kcol {
background: var(--kbase-2);
color: var(--bs-gray-900);
}
[data-bs-theme="dark"] #kunena.layout .krow {
background: var(--kprimary);
color: var(--bs-gray-100);
}
[data-bs-theme="dark"] #kunena.layout .ktable td {
background: var(--bs-gray-800);
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-icon a i {
color: white;
}
[data-bs-theme="dark"] #kunena.layout .ktopic-list-wrap .ktopic-list .kcol-latest-post .kpost-info .date-post {
color: var(--zl-bronze);
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-title .kcat-desc {
color: var(--zl-bronze);
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-stats .kstats-label {
color: var(--zl-bronze);
}
[data-bs-theme="dark"] #kunena.layout .kwho-globalmod, [data-bs-theme="dark"] #kunena.layout .kwho-globalmoderator {
color: var(--zl-link-hover);
}
[data-bs-theme="dark"] #kunena.layout .kwho-guest
{
color: var(--zl-copyright);
}
[data-bs-theme="dark"] #kunena.layout .kfooter-time
{
color: transparent;
}
[data-bs-theme="dark"] #kunena.layout+div a
{
color: transparent;
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-latest-post .klast-post-meta {
color: white;
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-icon a, [data-bs-theme="dark"] #kunena.layout .krow .kcol-icon .kicon-wrap
{
background: transparent;
}
[data-bs-theme="dark"] #kunena.layout .kuser-area
{
background: var(--zl-gold);
}
[data-bs-theme="dark"] #kunena.layout .ktopic-list-wrap .ktopic-list .kcol-subject .ktopic-title-wrap h3 a {
color: var(--zl-gold);
}
[data-bs-theme="dark"] #kunena.layout .ktopic-list-wrap .ktopic-list .ktopic-meta
{
color: wheat;
}
[data-bs-theme="dark"] #kunena.layout #ktopnav .navbar-nav>li>a
{
color: white;
}
[data-bs-theme="dark"] #kunena.layout #postform, [data-bs-theme="dark"] #kunena.layout .ksearch-more-options, [data-bs-theme="dark"] #kunena.layout .ksearch-wrap .ksearch-fields
{
background: var(--bs-gray-800);
}
[data-bs-theme="dark"] #kunena.layout .ksearch-more-options {
margin-top: 0px;
}
[data-bs-theme="dark"] #kunena.layout .nav.nav-tabs>.nav-item .nav-link:hover,
[data-bs-theme="dark"] #kunena.layout .nav.nav-tabs>.nav-item .nav-link:focus,
[data-bs-theme="dark"] #kunena.layout .nav.nav-tabs>.nav-item .nav-link:active {
color: var(--zl-gold-hover);
}
[data-bs-theme="dark"] #kunena.layout .nav.nav-tabs>.nav-item .nav-link:active {
color: var(--zl-gold);
}
[data-bs-theme="dark"] #kunena.layout #postform #iconset_topicList input[type="radio"]+label i {
color: wheat;
}
[data-bs-theme="dark"] #kunena.layout #postform .kpost-attachments-wrap
{
background: var(--bs-gray-600);
}
[data-bs-theme="dark"] #kunena.layout .ktable thead {
background: var(--kprimary);
border: 1px solid var(--kborder-color);
}
#kunena.layout .ktable thead {
background: var(--kprimary);
border: 1px solid var(--kborder-color);
}
[data-bs-theme="dark"] #kunena.layout .kuser-profile-wrap .kuser-profile-inner {
background: #111827;
border: 1px solid var(--zl-gold);
}
[data-bs-theme="dark"] #kunena.layout .ktable {
background: var(--bs-gray-800);
border: 1px solid var(--zl-gold);
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-full {
background: var(--bs-gray-800);
}
[data-bs-theme="dark"] #kunena.layout .nav.nav-tabs>.nav-item .nav-link {
color: var(--zl-bronze);
}
[data-bs-theme="dark"] #kunena.layout .ksearch-wrap fieldset legend {
color: var(--zl-link);
}
[data-bs-theme="dark"] #osm-profile-page joomla-tab[view="tabs"] > div[role="tablist"] > button[role="tab"] {
background: var(--bs-gray-600);
}
#kunena.layout .kwho-moderator {
color: var(--bs-cyan);
}
#kunena.layout+div a
{
color: transparent;
}
#kunena.layout .kfooter-time
{
color: transparent;
}
@media (max-width: 575.98px) and (orientation: portrait) {
#kunena.layout { margin: 0 15px;
}
}
/* Kunena Login Block verbergen */
#kunena.layout .kuser-area {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#kunena.layout #ktopnav .navbar-nav>li>a
{
background: var(--sp-gray-100);
color: var(--sppb-link-color);
}
/* --- ZeitloSen Forum: Scroll-Offset fix voor ankernavigatie --- */
.zl-legal section[id] {
scroll-margin-top: var(--fs-sticky-offset, 80px);
}
#kunena.layout .krow .kcol-title .kcat-desc {
font-size: 0.85em;
}
#kunena.layout div.moderators {
font-size: 0.8em;
}
[data-bs-theme="dark"] #kunena.layout .krow .kcol-title h3 a
{
color: white;
}
#kunena.layout .ksection .ksection-header .ksection-count {
background: wheat;
}
[data-bs-theme="dark"] #kunena.layout .ksection .ksection-header .ksection-count {
color: black;
}
[data-bs-theme="dark"] #kunena.layout select, [data-bs-theme="dark"] #kunena.layout select:focus {
color: white;
}
#kunena.layout select, #kunena.layout select:focus {
background: var(--sp-gray-100);
}
#kunena.layout .alert.alert-info {
background: var(--kbase-2);
border: 1px solid var(--kborder-color);
color: var(--zl-bronze);
}
[data-bs-theme="dark"] #kunena.layout .alert.alert-info {
color: var(--zl-card-bg);
}
#kunena.layout .krow .kcol-title h3 a {
color: var(--zl-link);
}
#kunena.layout .ksection .ksection-header .ksec-desc {
opacity: 1;
}
#kunena.layout .ksection .ksection-header .ksection-count {
font-weight: 600;
letter-spacing: 1px;
}
.mobile-quick-nav ul.menu, .mobile-quick-nav ul.nav
{
border-top: 0px solid var(--sp-border, #ddd);
border-bottom: 0px solid var(--sp-border, #ddd);
}
#sp-header .logo a {
text-decoration: none;
}
/* =========================================
Mobile Quick Nav – FINAL v4 (symmetry fix)
========================================= */
.mobile-quick-nav{
--qq-font-size:1rem; --qq-font-w:700;
--qq-gap:.6rem; /* ruimte rondom de separator */
--qq-ypad:.45rem;
--qq-sep:var(--sp-border-color,#ddd);
position:relative; z-index:5;
}
/* Bar */
.mobile-quick-nav .sp-module-content{
background:var(--sp-body-bg,#fff);
border-radius:.75rem; padding:.35rem .5rem; overflow:visible;
}
/* Flex list (wrap) */
.mobile-quick-nav .mod-menu.menu{
display:flex; flex-wrap:wrap; align-items:center;
gap:.25rem 0; /* alleen verticale gap; horizontaal doen we zelf */
margin: 10px 10px 0px 10px;; padding:0; list-style:none;
}
.mobile-quick-nav .mod-menu.menu>li{
position:relative; display:inline-flex; align-items:center;
/* --- SYMMETRIE-TRUC ---
Bij items die NIET rijstart zijn (.has-sep):
- margin-left = gap vóór de separator
- border-left = de separator zelf
- padding-left = gap ná de separator
*/
}
.mobile-quick-nav .mod-menu.menu>li.has-sep{
margin-left:var(--qq-gap);
border-left:1px solid var(--qq-sep);
padding-left:var(--qq-gap);
}
/* Links (volledig symmetrisch) */
.mobile-quick-nav .mod-menu.menu>li>a{
display:inline-flex; align-items:center;
padding:var(--qq-ypad) var(--qq-gap); /* exact gelijk L/R */
font-size:var(--qq-font-size); font-weight:var(--qq-font-w);
text-decoration:none; color:var(--sp-text,#000);
line-height:1.1; white-space:nowrap;
}
/* Chevron compact, dichter bij label */
.mobile-quick-nav .mod-menu.menu>li.menu-parent>a{
padding-right:calc(var(--qq-gap) + .9rem); /* ruimte voor chevron */
}
.mobile-quick-nav .mod-menu.menu>li.menu-parent>a>.menu-toggler{
position:absolute; right:.4rem; top:58%; transform:translateY(-50%);
width:.9rem; height:.9rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.mobile-quick-nav .mod-menu.menu>li.menu-parent>a>.menu-toggler::before{
content:""; width:.46rem; height:.46rem;
border-right:.15rem solid currentColor; border-bottom:.15rem solid currentColor;
transform:rotate(-45deg); transition:transform .18s ease;
}
.mobile-quick-nav .mod-menu.menu>li.menu-parent[aria-expanded="true"]>a>.menu-toggler::before{ transform:rotate(45deg); }
/* ===== Submenu als overlay onder eigen item ===== */
.mobile-quick-nav .mod-menu.menu>li.menu-parent{ position:relative; }
.mobile-quick-nav .mod-menu.menu>li.menu-parent>ul.mod-menu__sub{
position:absolute !important; top:calc(100% + .35rem); left:0; right:auto;
width:max-content; min-width:100%; max-width:calc(100vw - 2rem);
display:none !important; visibility:hidden; opacity:0; transform:translateY(4px);
padding:.2rem 0; margin:0; list-style:none; z-index:20;
background:var(--sp-body-bg,#fff);
border:1px solid var(--sp-border-color,#ddd); border-radius:.6rem;
box-shadow:0 8px 18px rgba(0,0,0,.08);
transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.mobile-quick-nav .mod-menu.menu>li.menu-parent[aria-expanded="true"]>ul.mod-menu__sub{
display:block !important; visibility:visible; opacity:1; transform:none;
}
/* Subitems: LINKS uitgelijnd, geen extra linker padding uit container */
.mobile-quick-nav .mod-menu.menu>li.menu-parent>ul.mod-menu__sub>li>a{
display:block;
padding:var(--qq-ypad) .75rem; /* kleine, gelijke L/R padding */
text-align:left; /* << links aligned */
white-space:nowrap; /* dropdown groeit mee met langste item */
font-size:var(--qq-font-size); font-weight:var(--qq-font-w);
color:var(--sp-text,#000); text-decoration:none; line-height:1.2;
}
.mobile-quick-nav .mod-menu.menu>li.menu-parent>ul.mod-menu__sub>li+li>a{
border-top:1px solid var(--sp-border-color,#eee);
}
/* Actief in goud – main én sub */
.mobile-quick-nav .mod-menu.menu a.active,
.mobile-quick-nav .mod-menu.menu a.current,
.mobile-quick-nav .mod-menu.menu li.current>a,
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub a.active,
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub a.current,
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub li.current > a{
color:var(--zl-gold,#d4a24f);
}
/* Dark mode */
[data-bs-theme="dark"] .mobile-quick-nav .mod-menu.menu>li.menu-parent>ul.mod-menu__sub{
background:var(--sp-body-bg,#121212); border-color:var(--sp-border-color,#3a3a3a);
box-shadow:0 10px 20px rgba(0,0,0,.35);
}
/* ===== PATCH: chevron links + geen verticale streep + geen rechtermarge ===== */
/* 1) Verwijder separator volledig */
.mobile-quick-nav .mod-menu.menu > li.has-sep{
margin-left: 0 !important;
padding-left: 0 !important;
border-left: none !important;
}
/* 2) Geen (horizontale) extra marges aan items */
.mobile-quick-nav .mod-menu.menu > li{
margin-right: 0 !important;
padding-left:0px;
}
/* 3) Chevron iets meer naar links, en linkpadding daarop afgestemd */
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a{
/* minder ruimte rechts, zodat chevron dichter bij het label zit */
padding-right: calc(var(--qq-gap) + .75rem) !important;
}
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a > .menu-toggler{
/* verder van de rechterrand = optisch meer naar links */
right: .6rem !important; /* was ~.4rem */
}
/* === PATCH: geen rechter padding + geen separators === */
/* 1) Alle main items: rechter padding = 0 */
.mobile-quick-nav .mod-menu.menu > li > a {
padding-right: 0 !important;
}
/* 1a) Parent met chevron: alleen ruimte voor het icoon zelf */
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a {
padding-right: .95rem !important; /* puur voor de chevron */
}
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a > .menu-toggler {
right: .1rem !important; /* iets dichter bij het label */
padding-left: 4px;
}
/* 2) Verwijder verticale scheidingsstrepen, ook als .has-sep wordt gezet */
.mobile-quick-nav .mod-menu.menu > li.has-sep {
margin-left: 0 !important;
padding-left: 0 !important;
border-left: none !important;
}
.mobile-quick-nav ul.menu>li:not(:last-child)::after, .mobile-quick-nav ul.nav>li:not(:last-child)::after
{
content: none;
}.mobile-quick-nav .mod-menu.menu > li.menu-parent > a > .menu-toggler::before {
border-right: .20rem solid currentColor; /* was .15rem */
border-bottom: .20rem solid currentColor; /* was .15rem */
}
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a > .menu-toggler::before {
border-radius: 1px;
}
/* === Hover-gedrag gescheiden: tekst vs chevron === */
/* 1️⃣ Hover op chevron → link blijft neutraal */
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a:hover:has(.menu-toggler:hover) {
color: inherit !important;
text-decoration: none !important;
}
/* 2️⃣ Hover op link (tekst) → chevron blijft standaardkleur */
.mobile-quick-nav .mod-menu.menu > li.menu-parent > a:hover > .menu-toggler::before {
color: inherit !important; /* voorkom goudkleurig meeverven */
border-color: currentColor !important;
}
.mobile-quick-nav ul.menu>li{
padding: 0 0;
}
/* === ACTIVE: goud op main + sub, chevron blijft neutraal === */
/* Main: Joomla geeft vaak .current/.active op of */
.mobile-quick-nav .mod-menu.menu li.current > a,
.mobile-quick-nav .mod-menu.menu li.active > a,
.mobile-quick-nav .mod-menu.menu li.alias-parent-active > a,
.mobile-quick-nav .mod-menu.menu > li > a.current,
.mobile-quick-nav .mod-menu.menu > li > a.active {
color: var(--zl-gold, #d4a24f) !important;
text-decoration: none !important;
}
/* Sub: actieve link in dropdown ook goud */
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub li.current > a,
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub li.active > a,
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub a.current,
.mobile-quick-nav .mod-menu.menu > li.menu-parent > ul.mod-menu__sub a.active {
color: var(--zl-gold, #d4a24f) !important;
text-decoration: none !important;
}
/* Chevron NIET goud wanneer parent actief is */
.mobile-quick-nav .mod-menu.menu li.current > a > .menu-toggler::before,
.mobile-quick-nav .mod-menu.menu li.active > a > .menu-toggler::before,
.mobile-quick-nav .mod-menu.menu li.alias-parent-active > a > .menu-toggler::before {
color: var(--sp-text, #000) !important;
border-right-color: var(--sp-text, #000) !important;
border-bottom-color: var(--sp-text, #000) !important;
}
/* === Radios – ZeitloSen brand (OSM profiel) ======================= */
#osm-profile-page{
--radio-accent: var(--zl-gold, #c7923e);
--radio-bg: #fff;
--radio-bd: rgba(0,0,0,.35);
}
[data-bs-theme="dark"] #osm-profile-page{
--radio-accent: color-mix(in srgb, var(--zl-gold, #c7923e) 80%, #fff 20%);
--radio-bg: #0f1216;
--radio-bd: rgba(255,255,255,.45);
}
/* Bootstrap reset + eigen style */
#osm-profile-page .form-check-input[type=radio]{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
width: 1.1rem; height: 1.1rem;
border-radius: 50%;
border: 2px solid var(--radio-bd);
background: var(--radio-bg);
background-image: none !important;
box-shadow: none;
margin-top: .25em; vertical-align: text-top;
position: relative; display:inline-block;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* de 'dot' */
#osm-profile-page .form-check-input[type=radio]::after{
content:"";
position:absolute; left:50%; top:50%;
width:.55rem; height:.55rem; border-radius:50%;
background: var(--radio-accent);
transform: translate(-50%,-50%) scale(0);
transition: transform .12s ease;
}
/* checked state */
#osm-profile-page .form-check-input[type=radio]:checked{
border-color: var(--radio-accent);
background-color: var(--radio-bg);
}
#osm-profile-page .form-check-input[type=radio]:checked::after{
transform: translate(-50%,-50%) scale(1);
}
/* hover + focus */
#osm-profile-page .form-check-input[type=radio]:hover{
border-color: color-mix(in srgb, var(--radio-accent) 65%, #888 35%);
}
#osm-profile-page .form-check-input[type=radio]:focus-visible{
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--radio-accent) 35%, transparent);
}
/* disabled */
#osm-profile-page .form-check-input[type=radio]:disabled{
opacity:.6; cursor:not-allowed;
}
/* === Fix: 'required'-achtergrond NIET toepassen op radio/checkbox === */
/* Licht */
#osm-profile-page :is(input:not([type=radio]):not([type=checkbox]), select, textarea).validate\[required\]{
background: color-mix(in srgb, var(--zl-gold) 9%, #fff 91%);
}
/* Donker */
[data-bs-theme="dark"] #osm-profile-page :is(input:not([type=radio]):not([type=checkbox]), select, textarea).validate\[required\]{
background: color-mix(in srgb, var(--zl-gold) 16%, #111317 84%);
}
/* Algemene dark form kleuren (laat je bestaande regel staan; deze is compacter) */
[data-bs-theme="dark"] #osm-profile-page :is(input:not([type=radio]):not([type=checkbox]), select, textarea){
background: #121418;
border-color: rgba(255,255,255,.18);
color: rgba(255,255,255,.9);
}
/* Focusring voor alle invoervelden (behoud je accent) */
#osm-profile-page :is(input,select,textarea):focus{
border-color: var(--radio-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--radio-accent) 35%, transparent);
outline: none;
}
#sp-right .zl-ehrenamt-short .eh-card {
margin-right: 0px;
margin-top: 0px;
}
/* ========================================
INTERACTIEVE STERREN (formulier onder artikel)
======================================== */
/* rij + label */
.zl-rating-row {
margin-bottom: 0.4rem;
}
.zl-rating-label {
font-weight: 400;
margin-bottom: 0.1rem;
}
/* klikbare sterren */
.zl-rating-stars {
display: flex;
gap: 0.15rem;
font-size: 2rem; /* grootte van de klik-sterren */
line-height: 1;
}
.zl-rating-stars .zl-star {
cursor: pointer;
display: inline-block;
color: #cccccc; /* lichte grijze ster */
transition: color 0.15s ease-in-out, transform 0.15s ease;
font-family: Arial, sans-serif;
font-weight: normal;
}
/* actieve ster */
.zl-rating-stars .zl-star.is-active {
color: #ffd100 !important; /* JED-geel */
}
/* hover */
.zl-rating-stars .zl-star.is-hover {
color: #ffbf00 !important;
transform: scale(1.1);
}
/* commentveld + knop onder elkaar */
.zl-rating-comment-input {
display: block;
width: 100%;
max-width: 22rem;
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
margin-top: 0.3rem;
background: white;
}
html[data-bs-theme="dark"] .zl-rating-comment-input {
background: white;
color: black;
}
.zl-rating-save {
display: inline-block;
margin-top: 0.4rem; /* zorgt dat hij onder het textarea komt */
padding: 0.4rem 1rem;
font-size: 0.9rem;
border: 1px solid #444;
background: #f7f7f7;
cursor: pointer;
}
/* meta-regel onder het formulier (gemiddelde) */
.zl-rating-meta {
margin-top: 0.4rem;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
/* ========================================
STATISCHE STERREN (HALVE STERREN, GEMIDDELDES)
======================================== */
.zl-stars-static {
display: inline-flex;
align-items: center;
font-size: 1.4rem; /* grotere halve sterren */
line-height: 1;
margin-right: 0.25rem;
vertical-align: middle;
}
.zl-star-static {
position: relative;
display: inline-block;
margin-right: 0.12rem;
}
/* lege ster */
.zl-star-static-empty {
color: #dddddd;
}
/* volle ster */
.zl-star-static-full {
color: #f5b400;
}
/* halve ster: basis grijs, linker helft geel */
.zl-star-static-half {
color: #dddddd;
overflow: hidden;
}
.zl-star-static-half::before {
content: "★";
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #f5b400;
}
/* ========================================
SUMMARY-BLOKKEN (bijv. "279 Gesamteindruck …")
======================================== */
.zl-rating-summary {
margin-top: 0.6rem;
padding: 0.75rem 1rem;
border-radius: 8px;
background: #faf7ef; /* zacht achtergrondje */
border: 1px solid #eee2c5;
font-size: 0.95rem;
}
.zl-rating-summary-row {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.25rem;
}
.zl-rating-summary-row-main {
font-weight: 600;
}
/* hoofdlabel in summary (zoals 279-blok) */
.zl-rating-summary-article strong,
.zl-rating-summary-category strong {
display: block;
margin-bottom: 0.15rem;
}
/* wat compacter */
.zl-rating-summary-article,
.zl-rating-summary-category {
margin-bottom: 0.6rem;
}
/* USER-RATING BLOK (onder het artikel) */
.zl-rating-form {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
background: #fafafa;
border: 1px solid #e1e1e1;
max-width: 26rem;
}
.zl-rating-button {
margin-top: 0.75rem;
}
.zl-rating-form .zl-rating-row {
margin-bottom: 0.4rem;
}
/* label boven elke sterrenrij */
.zl-rating-form .zl-rating-label {
font-weight: 400;
margin-bottom: 0.1rem;
}
.zl-rating-line {
font-size: 0.95rem;
line-height: 1.4;
}
.zl-rating-line-label {
margin-right: 0.2rem;
}
.zl-rating-line-stars {
margin-right: 0.2rem;
}
/* Basis hart-knop */
.zl-fav-btn {
border: none;
background: transparent;
padding: 0.15rem 0.25rem;
margin-left: .3rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-decoration: none;
}
.zl-fav-btn i {
font-size: 1.4rem;
color: var(--zl-grayblue, #6b7280);
transition: color .15s ease, transform .15s ease, text-shadow .15s ease;
}
/* Actieve (favoriet) toestand */
.zl-fav-btn.is-favorite i {
color: var(--sp-primary, #0f766e);
text-shadow: 0 0 4px rgba(15, 118, 110, .35);
}
/* Hover / focus */
.zl-fav-btn:hover i,
.zl-fav-btn:focus-visible i {
transform: scale(1.1);
}
/* Focus-outline */
.zl-fav-btn:focus-visible {
outline: 2px solid rgba(15, 118, 110, .5);
outline-offset: 2px;
}
/* Module container */
.zl-favorites-module {
padding: 0.75rem 0;
}
/* Lijst */
.zl-favorites-list {
margin: 0;
padding: 0;
}
/* Item */
.zl-favorites-item {
border-bottom: 1px solid rgba(148, 163, 184, .25); /* licht grijsblauw lijntje */
padding: 0.4rem 0;
}
/* Link naar artikel */
.zl-favorites-link {
font-weight: 500;
text-decoration: none;
color: var(--zl-body-color, #111827);
}
.zl-favorites-link:hover {
text-decoration: underline;
}
/* Datum */
.zl-favorites-meta {
margin-top: 0.1rem;
}
/* Remove-knop (×) rechts */
.zl-fav-remove {
border: none;
background: transparent;
padding: 0 .15rem;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
color: var(--zl-grayblue, #6b7280);
}
.zl-fav-remove:hover,
.zl-fav-remove:focus-visible {
color: #b91c1c; /* subtiel rood bij hover */
}
/* Lege / guest tekst */
.zl-favorites-empty,
.zl-favorites-guest {
font-size: 0.95rem;
color: var(--zl-grayblue, #6b7280);
}
.zl-artikel-herz {
text-align:right;
}
/* USER-RATING BLOK (onder het artikel) */
.zl-newsletter-form {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
background: #fafafa;
border: 1px solid #e1e1e1;
}
.sppb-btn-primary.sppb-btn-outline
{
color: var(--zl-gold);
display: inline-block;
}
.sppb-btn-primary.sppb-btn-outline:hover {
color: #fff;
background-color: var(--zl-gold-hover);
border-color: var(--zl-card-border);
}
.sppb-addon-optin-forms .sppb-optin-form-details-wrap:not(:empty) {
padding: 0px 0;
}
[data-bs-theme="dark"] .zl-newsletter-form,
[data-bs-theme="dark"] .zl-rating-form {
background: var(--zl-card-border);
}
[data-bs-theme="dark"] .zl-rating-summary {
background: var(--zl-card-bg);
}
/* ============================
DARK MODE – INTERACTIEVE STERREN
============================ */
html[data-bs-theme="dark"] #sp-page-builder .zl-rating-stars span.zl-star {
color: #666666 !important; /* lege ster */
}
html[data-bs-theme="dark"] #sp-page-builder .zl-rating-stars span.zl-star.is-active {
color: #ffd100 !important; /* geselecteerde ster */
}
html[data-bs-theme="dark"] #sp-page-builder .zl-rating-stars span.zl-star.is-hover {
color: #ffbf00 !important; /* hover */
}
/* ============================
DARK MODE – STATISCHE STERREN
============================ */
html[data-bs-theme="dark"] #sp-page-builder .zl-stars-static .zl-star-static-empty,
html[data-bs-theme="dark"] #sp-page-builder .zl-stars-static .zl-star-static-half {
color: #666666 !important; /* lege helft */
}
html[data-bs-theme="dark"] #sp-page-builder .zl-stars-static .zl-star-static-full {
color: #ffd100 !important; /* volle ster */
}
html[data-bs-theme="dark"] #sp-page-builder .zl-stars-static .zl-star-static-half::before {
content: "★";
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
color: #ffd100 !important; /* gele linkerhelft */
}
html[data-bs-theme="dark"] .sp-page-builder .page-content #Artikel-Header {
background: var(--sp-text-invert) !important;
border: 1px solid var(--sp-border, #ddd);
border-radius: var(--sp-border-radius, .75rem);
padding: 40px 10px;
}
.zl-toc .rl_quickindex.card .card-body
{
background: #fdf8f1;
}
[data-bs-theme="dark"] .zl-toc .rl_quickindex.card .card-body
{
background: var(--zl-card-border);
}
.zl-button-pchilfe {
display: inline-block !important;
text-decoration:none;
margin-bottom:10px;
}
.sppb-btn-primary.sppb-btn-outline:active, .sppb-btn-primary.sppb-btn-outline:focus, .sppb-btn-primary.sppb-btn-outline:focus:hover {
color: #fff;
background-color: var(--zl-gold-hover);
border-color: var(--zl-card-border);
}
.zl-gold-background {
background: color-mix(in srgb, #ffffff 96%, var(--zl-gold) 4%);
}
/* Hele kaart klikbaar */
.zl-card-link {
text-decoration: none;
color: inherit;
display: block;
background: transparent !important; /* voorkomt grijs vlak van global a:hover */
border-radius: 18px; /* matcht card radius */
}
/* Zorg dat link ook bij hover/focus geen achtergrond krijgt */
.zl-card-link:hover,
.zl-card-link:focus,
.zl-card-link:active {
background: transparent !important;
}
/* Card */
.zl-support-card {
background: #fff;
border-radius: 18px;
padding: 2rem 1.5rem;
text-align: center;
transition: all .25s ease;
cursor: pointer;
border: 2px solid var(--zl-gold); /* gouden rand */
box-shadow: 0 6px 18px rgba(0,0,0,0.10); /* subtiele basis schaduw */
}
/* Hover: lift + goudachtige schaduw */
.zl-card-link:hover .zl-support-card {
transform: translateY(-4px);
/* fallback (werkt overal) */
box-shadow:
0 0 0 3px rgba(199, 146, 62, 0.35),
0 12px 28px rgba(199, 146, 62, 0.35);
/* upgrade (alleen als color-mix wordt ondersteund) */
box-shadow:
0 0 0 3px color-mix(in srgb, var(--zl-gold) 50%, transparent),
0 12px 28px rgba(199, 146, 62, 0.35);
border-color: var(--zl-gold-hover);
}
/* Afbeelding */
.zl-support-card__media {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.zl-support-card__media img {
max-width: 140px;
height: auto;
}
/* Titel */
.zl-support-card__title {
color: #000;
font-size: 1.4rem;
margin-bottom: 1rem;
}
/* Tekst */
.zl-support-card__intro {
color: #000;
margin-bottom: 1rem;
line-height: 1.5;
}
/* Checklist centreren */
.zl-support-card__checklist {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
text-align: left;
display: inline-block;
}
.zl-support-card__checklist li {
position: relative;
padding-left: 1.3rem;
color: #000;
margin-bottom: .4rem;
}
.zl-support-card__checklist li::before {
content: "✓";
position: absolute;
left: 0;
color: #1da84b;
font-weight: bold;
}
/* Button */
.zl-support-card__btn {
margin-top: 1rem;
display: inline-block;
}
/* ============================
DARK MODE – ZeitloSen Cards
============================ */
[data-bs-theme="dark"] .zl-card-link {
background: transparent !important;
color: var(--sp-text) !important;
}
[data-bs-theme="dark"] .zl-support-card {
background: var(--sp-section-bg); /* donker paneel */
border: 2px solid var(--zl-gold); /* goud blijft goud */
box-shadow: 0 6px 18px rgba(0,0,0,0.45); /* diepe dark schaduw */
}
/* Hover in dark mode */
[data-bs-theme="dark"] .zl-card-link:hover .zl-support-card {
transform: translateY(-4px);
border-color: var(--zl-gold-hover);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--zl-gold) 50%, transparent),
0 14px 32px rgba(199,146,62,0.45); /* warme gouden glow */
}
/* Titel */
[data-bs-theme="dark"] .zl-support-card__title {
color: var(--sp-heading-color);
}
/* Tekstparagraaf */
[data-bs-theme="dark"] .zl-support-card__intro {
color: var(--sp-text);
}
/* Checklist */
[data-bs-theme="dark"] .zl-support-card__checklist li {
color: var(--sp-text);
}
[data-bs-theme="dark"] .zl-support-card__checklist li::before {
color: #4ccf75; /* frisser groen in dark mode */
}
/* Button binnen de kaart */
[data-bs-theme="dark"] .zl-support-card__btn {
color: var(--sp-text-invert) !important;
background: var(--zl-gold) !important;
border-color: var(--zl-gold) !important;
}
[data-bs-theme="dark"] .zl-support-card__btn:hover,
[data-bs-theme="dark"] .zl-support-card__btn:focus {
background: var(--zl-gold-hover) !important;
border-color: var(--zl-gold-hover) !important;
color: var(--sp-text-invert) !important;
}
/* Afbeelding niet dimmen */
[data-bs-theme="dark"] .zl-support-card__media img {
filter: brightness(0.92) contrast(1.05);
}
@media (min-width: 992px) {
#zl-hilfe-angebote .zl-support-card {
display: flex;
flex-direction: column;
min-height: 600px
}
@media (max-width: 899px) and (orientation: landscape) {
#zl-hilfe-angebote .zl-support-card {
min-height: 800px; /* voorbeeld */
}
}
#zl-hilfe-angebote .zl-support-card__btn {
margin-top: auto;
}
}
.zl-cta-box {
padding:2rem;
margin:2rem 0;
border:1px solid var(--sp-border-color);
border-radius:var(--zl-radius-xl);
background:var(--zl-card-bg);
box-shadow:var(--zl-shadow);
min-height: 450px;
}
#mod-custom164 .zl-cta-box {
min-height: auto;
}
.zl-cta-box .sppb-form-check-label
{
line-height: 20px;
font-size: 16px;
text-align: left;
}
.acym_introtext p
{
font-size: 18px;
}
.acym_module.zl-cta-box {
text-align: center;
}
.acym_module_form label
{
display: -webkit-inline-box;
}
@media (max-width: 575.98px) and (orientation: portrait) {
.acym_module_form label
{
display: block;
margin-left: 1rem;
}
}
.acym__users__creation__fields__title
{
text-align: start;
padding-right: 25px;
}
/* Basis: altijd lichte CTA-achtergrond */
.zl-cta-box {
background: white; /* kies je eigen lichte kleur */
color: #111827; /* donkere tekst */
}
.acym_module.zl-cta-box {
background: color-mix(in srgb, #ffffff 96%, var(--zl-gold) 4%);
}
/* Als Bootstrap/Helix dark mode actief is */
[data-bs-theme="dark"] .zl-cta-box, [data-bs-theme="dark"] .acym_module.zl-cta-box
{
background: #000 !important;
color: #FFF !important;
}
/* Fallback: OS dark mode zonder data-bs-theme (iPhone/Safari)
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme]) .zl-cta-box {
background-color: #000 !important;
color: #FFF !important;
}
} */
@media (max-width: 576px) and (orientation: portrait) {
.sppb-addon-content {
margin-inline: 0px;
}
#sp-right .zl-ehrenamt-short .eh-card {
margin-bottom: 30px;
}
}
#sp-bottom .sp-module ul>li {
margin-bottom: 5px;
font-size: 20px;
}
#sp-bottom a {
text-decoration: none;
}
/* ========== Vergleichstabelle Begleitungen (ZeitloSen) ========== */
.zl-plan-compare {
max-width: none;
margin: 1rem auto;
padding: 1.5rem 1.25rem;
background: var(--zl-card-bg, var(--sp-section-bg));
border: 1px solid var(--zl-card-border, var(--sp-border-color));
border-radius: var(--zl-radius-xl, 16px);
box-shadow: var(--zl-shadow, 0 2px 12px rgba(0,0,0,.08));
}
.zl-plan-compare__heading {
margin-top: 0;
margin-bottom: .5rem;
text-align: center;
}
.zl-plan-compare__intro {
margin: 0 0 1.5rem;
text-align: center;
font-size: 0.95rem;
}
/* Wrapper voor horizontaal scrollen op mobiel */
.zl-plan-compare__table-wrapper {
width: 100%;
overflow-x: auto;
}
/* Tabel basis */
.zl-plan-compare__table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
background: var(--sp-section-bg);
border-radius: 12px;
overflow: hidden;
}
.zl-plan-compare__table thead {
background: color-mix(in srgb, var(--sp-section-bg) 60%, var(--sp-primary) 40%);
}
.zl-plan-compare__table th,
.zl-plan-compare__table td {
padding: 0.85rem 0.9rem;
border-bottom: 1px solid var(--sp-border-color);
text-align: center;
vertical-align: middle;
font-size: 0.95rem;
}
.zl-plan-compare__table th {
font-weight: 600;
}
.zl-plan-compare__feature-col {
text-align: left;
width: 40%;
}
/* Zebra-rijen voor leesbaarheid */
.zl-plan-compare__table tbody tr:nth-child(even) {
background: rgba(0,0,0,0.02);
}
[data-bs-theme="dark"] .zl-plan-compare__table tbody tr:nth-child(even) {
background: rgba(255,255,255,0.03);
}
/* Cellen met iconen / tekst */
.zl-plan-compare__table td {
white-space: nowrap;
}
/* Generieke icon-stijl */
.zl-yes,
.zl-no,
.zl-maybe,
.zl-text {
font-weight: 500;
}
/* ✔ / ✘ automatisch genereren */
.zl-yes::before,
.zl-no::before {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 700;
}
/* Groen vinkje */
.zl-yes::before {
content: "✔";
background-color: #e0f8ea;
color: #15803d; /* donkergroen, goede contrast */
}
/* Rood kruis */
.zl-no::before {
content: "✘";
background-color: #fde2e2;
color: #b91c1c; /* donkerrood */
}
/* Tekstvarianten */
.zl-maybe,
.zl-text {
white-space: normal;
}
/* Misschien / “teilweise” subtiel */
.zl-maybe {
color: var(--zl-grayblue);
font-style: italic;
}
/* Legenda onderaan */
.zl-plan-compare__note {
margin-top: 1rem;
font-size: 0.85rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
justify-content: center;
}
.zl-legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.zl-legend-icon {
width: 1rem;
height: 1rem;
border-radius: 999px;
display: inline-block;
}
.zl-legend-icon--yes {
background-color: #15803d;
}
.zl-legend-icon--no {
background-color: #b91c1c;
}
/* Mobiel: iets kleinere type */
@media (max-width: 767.98px) {
.zl-plan-compare {
padding: 1.25rem 0.75rem;
}
.zl-plan-compare__table {
min-width: 520px;
}
.zl-plan-compare__table th,
.zl-plan-compare__table td {
padding: 0.7rem 0.7rem;
font-size: 0.9rem;
}
}
/* Sectiekoppen in de vergelijkingstabel */
.zl-plan-compare__table tr.zl-group th {
background: color-mix(in srgb, var(--sp-section-bg) 55%, var(--sp-primary) 45%);
color: var(--sp-heading-color);
font-weight: 700;
text-align: left;
padding: 0.85rem 0.9rem;
font-size: 0.98rem;
border-bottom: 1px solid var(--sp-border-color);
}
/* Sectiekoppen: icon + beschrijving in ZeitloSen-Stil */
.zl-plan-compare__table tr.zl-group th {
background: color-mix(in srgb, var(--sp-section-bg) 55%, var(--sp-primary) 45%);
border-bottom: 1px solid var(--sp-border-color);
padding: 0.85rem 0.9rem;
}
.zl-group-icon {
font-size: 1.2rem;
margin-right: .5rem;
}
.zl-group-title {
font-weight: 700;
font-size: 1rem;
}
.zl-group-desc {
display: block;
margin-top: .15rem;
font-size: 0.85rem;
line-height: 1.4;
color: var(--zl-grayblue);
}
.zl-wz-section {
scroll-margin-top: 80px;
}
/* Mobile: meer ruimte, grotere tikbare cellen */
@media (max-width: 768px) {
.zl-plan-compare {
padding: 1rem .5rem;
}
.zl-plan-compare__table th,
.zl-plan-compare__table td {
padding: .7rem .5rem;
font-size: .9rem;
}
/* Groepskoppen op mobiel iets compacter */
.zl-group-title {
font-size: .95rem;
}
.zl-group-desc {
font-size: .8rem;
margin-top: .1rem;
}
.zl-group-icon {
font-size: 1.1rem;
}
/* CTA mobile */
.zl-plan-cta p {
font-size: .95rem;
}
.zl-plan-cta-btn {
font-size: 1rem;
padding: .55rem 1.25rem;
}
}
@media (max-width: 576px) and (orientation: portrait) {
#sp-page-builder .sppb-addon.sppb-addon-header.zl-header {
margin-top: 20px !important;
}
#sp-page-builder .sppb-addon.sppb-addon-header.zl-header.zl-header-wichtig {
margin-top: 40px !important;
}
.zl-ehrenamt-short .eh-card {
margin-right: 0px;
}
}
#sp-page-builder .sppb-addon.sppb-addon-header.zl-header.zl-header-wichtig {
margin-top: 40px !important;
}
#unsere-geschichte {
position: relative;
}
#unsere-geschichte::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.80); /* 0.65 = hoe hoger hoe lichter/vager */
pointer-events: none;
z-index: 0;
}
[data-bs-theme="dark"] #unsere-geschichte::before {
background: var(--bs-gray-900);
}
#unsere-geschichte > * {
position: relative;
z-index: 1;
}
.zl-wz-list {
list-style-type: none;
padding-left: 0px;
}
[data-bs-theme="dark"] #sp-component .sppb-section.zl-gold-background {
background: var(--bs-gray-900) !important;
}
/* Basis-CSS aus ursprünglichem Drop-in (leicht angepasst für externe Datei) */
/* Layout */
.zl-faq-layout {
display: grid;
grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
gap: 2.5rem;
margin: 2rem 0;
}
@media (max-width: 768px) {
.zl-faq-layout { grid-template-columns: 1fr; }
}
/* Sidebar */
.zl-faq-sidebar__title {
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.zl-faq-select {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
border-radius: 0.5rem;
border: 1px solid #d1d5db;
}
.zl-faq-contact {
margin-top: 1.75rem;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
background: #f3f4f6;
font-size: 0.9rem;
}
/* FAQ-Grundformat */
.zl-faq-group details {
border-radius: 0.75rem;
background: #f9fafb;
margin-bottom: 0.75rem;
border: 1px solid #e5e7eb;
overflow: hidden;
}
.zl-faq-group summary {
list-style: none;
cursor: pointer;
padding: 0.9rem 1.1rem;
display: flex;
align-items: center;
position: relative;
font-weight: 500;
}
.zl-faq-group summary::after {
content: "+";
position: absolute;
right: 1.1rem;
font-size: 1.2rem;
color: #6b7280;
}
.zl-faq-group details[open] summary::after {
content: "–";
}
.zl-faq-number {
color: #c78b3a;
font-weight: 600;
min-width: 2rem;
}
.zl-faq-body {
padding: 0 1.1rem 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.zl-faq-content a {
color: #c78b3a;
text-decoration: none;
border-bottom: 1px solid rgba(199,139,58,0.4);
}
.zl-faq-content a:hover {
border-bottom-color: rgba(199,139,58,0.9);
}
/* =============================
ZeitloSen Premium FAQ – zusätzliche Styles
============================= */
/* Grundlayout-Hülle */
.zl-faq-premium-shell {
max-width: 1120px;
margin: 0 auto;
padding: 1.5rem 1rem 3.5rem;
}
.zl-faq-premium-header {
margin-bottom: 1.5rem;
}
.zl-faq-premium-title {
font-size: 1.8rem;
margin: 0 0 0.5rem;
}
.zl-faq-premium-intro {
margin: 0;
font-size: 0.98rem;
line-height: 1.6;
max-width: 46rem;
}
/* Globale Toolbar oberhalb der rechten Spalte */
.zl-faq-global-toolbar {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
/* Toolbar auf Gruppenebene direkt unter der Überschrift */
.zl-faq-group-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.75rem;
}
.zl-faq-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
border-radius: 999px;
border: 1px solid rgba(199, 139, 58, 0.6);
background: rgba(199, 139, 58, 0.06);
padding: 0.2rem 0.95rem;
font-size: 0.85rem;
cursor: pointer;
color: #4b5563;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.zl-faq-btn:hover {
background: rgba(199, 139, 58, 0.14);
border-color: rgba(199, 139, 58, 0.9);
color: #111827;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.zl-faq-btn:focus-visible {
outline: 2px solid rgba(199, 139, 58, 0.9);
outline-offset: 2px;
}
/* Scroll-to-Top Button */
#zl-faq-scroll-top {
position: fixed;
right: 1.25rem;
bottom: 1.5rem;
padding: 0.5rem 1.25rem;
border-radius: 999px;
border: none;
font-size: 0.9rem;
font-weight: 500;
background: #c78b3a;
color: #ffffff;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
cursor: pointer;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 999;
}
#zl-faq-scroll-top.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#zl-faq-scroll-top:hover {
background: #e0a955;
}
/* Kleine Harmonisierung der bestehenden FAQ-Optik */
.zl-faq-group details {
transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.zl-faq-group details:hover {
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
border-color: rgba(199, 139, 58, 0.35);
}
/* Dark Mode – warme, ruhige Variante */
:root {
--zl-faq-bg: #f9fafb;
--zl-faq-surface: #ffffff;
--zl-faq-border: #e5e7eb;
--zl-faq-text: #111827;
--zl-faq-muted: #4b5563;
--zl-faq-gold: #c78b3a;
}
[data-bs-theme="dark"] {
--zl-faq-bg: #171719;
--zl-faq-surface: #1f2123;
--zl-faq-border: #3b3f45;
--zl-faq-text: #e5e7eb;
--zl-faq-muted: #9ca3af;
}
.zl-faq-premium-shell {
background-color: transparent;
}
.zl-faq-layout {
color: var(--zl-faq-text);
}
.zl-faq-sidebar {
border-radius: 18px;
padding: 2rem 1.5rem;
text-align: center;
transition: all .25s ease;
cursor: pointer;
border: 2px solid var(--zl-gold); /* gouden rand */
box-shadow: 0 6px 18px rgba(0,0,0,0.10); /* subtiele basis schaduw */
}
.zl-faq-sidebar,
.zl-faq-contact {
background-color: #f3f4f6;
}
.zl-faq-group details {
background-color: var(--zl-faq-surface);
border-color: var(--zl-faq-border);
}
[data-bs-theme="dark"] body {
background-color: var(--zl-faq-bg);
color: var(--zl-faq-text);
}
[data-bs-theme="dark"] .zl-faq-layout {
color: var(--zl-faq-text);
}
[data-bs-theme="dark"] .zl-faq-sidebar,
[data-bs-theme="dark"] .zl-faq-contact {
background-color: #1f2123;
color: var(--zl-faq-text);
}
[data-bs-theme="dark"] .zl-faq-contact p,
[data-bs-theme="dark"] .zl-faq-contact a {
color: var(--zl-faq-text);
}
[data-bs-theme="dark"] .zl-faq-group details {
background-color: var(--zl-faq-surface);
border-color: var(--zl-faq-border);
}
[data-bs-theme="dark"] .zl-faq-body p,
[data-bs-theme="dark"] .zl-faq-body li {
color: var(--zl-faq-text);
}
[data-bs-theme="dark"] .zl-faq-number {
color: var(--zl-faq-gold);
}
[data-bs-theme="dark"] .zl-faq-content a {
color: var(--zl-faq-gold);
}
[data-bs-theme="dark"] #zl-faq-scroll-top {
background-color: #e0a955;
}
[data-bs-theme="dark"] .zl-faq-btn {
border-color: rgba(199, 139, 58, 0.9);
background: rgba(199, 139, 58, 0.16);
color: var(--zl-faq-text);
}
[data-bs-theme="dark"] .zl-faq-btn:hover {
background: rgba(199, 139, 58, 0.24);
}
/* FAQ – Scroll-nach-oben-Button ausblenden */
#zl-faq-scroll-top {
display: none !important;
}
/* FAQ – globale Toolbar oben rechts ausblenden */
.zl-faq-global-toolbar {
display: none !important;
}
/* Weniger Abstand oben in der rechten Spalte,
jetzt wo die globale Toolbar weg ist */
.zl-faq-content {
margin-top: 0rem;
}
/* ============================================================
ZeitloSen Tooltip – Gold, Weiß, KEINE Leerzeile oben
============================================================ */
/* Tooltip nicht transparent */
.tooltip.show { opacity: 1 !important; }
/* Tooltip Hintergrund + Text */
.tooltip-inner{
background-color: var(--zl-gold, #c7a067) !important;
color:#fff !important;
border-radius:10px;
padding:0.85rem 1rem !important;
font-size:0.95rem;
line-height:1.35;
}
/* ALLES binnen tooltip zonder extra margins/paddings */
.tooltip-inner *{
margin:0 !important;
padding:0 !important;
}
/* Lege/erste Zeilen wirklich entfernen */
.tooltip-inner br{
display:none !important;
}
/* Falls Joomla trotzdem ein erstes strong/titel Element erzeugt */
.tooltip-inner strong:first-child,
.tooltip-inner .tooltip-title{
display:none !important;
}
/* Goldener Pfeil (optional, falls je toch wilt) */
.tooltip .tooltip-arrow::before{
border-color: var(--zl-gold, #c7a067) !important;
}
.bs-tooltip-top .tooltip-arrow::before{ border-top-color: var(--zl-gold, #c7a067) !important; }
.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color: var(--zl-gold, #c7a067) !important; }
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before{ border-left-color: var(--zl-gold, #c7a067) !important; }
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before{ border-right-color: var(--zl-gold, #c7a067) !important; }
/* ZeitloSen – Remote-Hilfe Seite (komplette CSS) */
.zl-remote{
max-width: 78ch;
margin: 0 auto;
padding: clamp(8px, 2vw, 20px);
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
line-height: 1.65;
color: var(--sp-text);
scroll-behavior: smooth;
}
/* 3-Schritte-Balk */
.zl-remote__strip{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .75rem;
margin: .5rem 0 1rem;
}
.zl-remote__strip-item{
display: flex;
gap: .75rem;
align-items: center;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: .8rem .9rem;
}
.zl-remote__strip-step{
width: 42px;
height: 42px;
border-radius: 999px;
background: var(--sp-primary);
color: var(--sp-text-invert, #111);
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.1rem;
flex: 0 0 auto;
}
.zl-remote__strip-text{
font-size: 1rem;
line-height: 1.35;
}
/* Intro */
.zl-remote__lead{
font-size: 1.15em;
margin-bottom: 1.2rem;
}
/* Summary box */
.zl-remote__summary{
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.2rem;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
margin: 0rem 0 0rem;
}
.zl-remote__summary--alt{
margin-top: .5rem;
}
.zl-remote__summary-title{
margin-top: 0;
font-size: 1.25em;
}
.zl-remote__summary-list{
margin: .5rem 0 0;
padding-left: 1.1rem;
}
.zl-remote__summary-list li{
margin: .35rem 0;
}
/* STOP-Hinweis */
.zl-remote__stop{
background: color-mix(in srgb, var(--sp-primary) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--sp-primary) 35%, transparent);
border-radius: 12px;
padding: .85rem 1rem;
margin: .8rem 0 1.2rem;
}
.zl-remote__stop--alt{
margin-top: 1rem;
}
/* TOC */
.zl-remote__toc{
background: #fff;
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.2rem;
margin: 1.2rem 0 1.6rem;
}
[data-bs-theme="dark"] .zl-remote__toc{
background: var(--sp-section-bg);
}
.zl-remote__toc-title{
margin-top: 0;
font-size: 1.2em;
}
.zl-remote__toc-list{
margin: .6rem 0 0;
padding-left: 1.2rem;
}
.zl-remote__toc-list li{
margin: .25rem 0;
}
.zl-remote__toc a{
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Sections */
.zl-remote__section{
margin-top: 0rem;
}
.zl-remote__section h2{
font-size: 1.45em;
margin-bottom: .6rem;
}
/* Checklist */
.zl-remote__checklist{
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.2rem;
}
.zl-remote__checklist-list{
margin: 0;
padding-left: 1.3rem;
}
.zl-remote__checklist-list li{
margin: .5rem 0;
}
.zl-remote__hint{
margin-top: .8rem;
font-style: italic;
opacity: .95;
}
/* Notes */
.zl-remote__note{
background: color-mix(in srgb, var(--sp-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--sp-primary) 35%, transparent);
border-radius: 12px;
padding: .9rem 1rem;
margin-top: .9rem;
}
/* Warning box */
.zl-remote__warn{
background: rgba(176, 0, 32, .06);
border: 1px solid rgba(176, 0, 32, .25);
border-radius: 12px;
padding: .9rem 1rem;
margin-top: 1rem;
}
/* Steps */
.zl-remote__steps{
padding-left: 1.3rem;
}
.zl-remote__steps li{
margin: .6rem 0;
}
/* Cards */
.zl-remote__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
margin: .9rem 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-remote__card{
background: var(--sp-section-bg);
}
.zl-remote__card h3{
margin-top: 0;
font-size: 1.2em;
}
.zl-remote__mini{
font-size: .95em;
opacity: .95;
}
/* Start-Block */
.zl-remote__start-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: .9rem;
}
.zl-remote__start-card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-remote__start-card{
background: var(--sp-section-bg);
}
.zl-remote__mini-steps{
padding-left: 1.2rem;
margin: .6rem 0 .8rem;
}
.zl-remote__start-actions{
margin: .2rem 0 .5rem;
}
.zl-remote__start-btn{
width: 100%;
justify-content: center;
font-size: 1rem;
padding: .75rem 1rem;
border-radius: 999px;
}
/* Test-Box */
.zl-remote__test{
margin-top: 1.2rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
}
.zl-remote__test-btn{
border-radius: 999px;
padding: .7rem 1rem;
font-size: 1rem;
}
/* Kontakt */
.zl-remote__contact{
margin-top: 1.2rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
}
.zl-remote__contact-buttons{
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: .7rem;
}
.zl-remote__contact-btn{
border-radius: 999px;
padding: .7rem 1rem;
font-size: 1rem;
}
/* PDF-Box */
.zl-remote__pdf{
margin-top: 1.2rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
}
.zl-remote__pdf-btn{
border-radius: 999px;
padding: .7rem 1rem;
font-size: 1rem;
}
/* Access-Tipps */
.zl-remote__access{
margin-top: 1.2rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: #fff;
border: 1px solid var(--sp-border-color);
}
[data-bs-theme="dark"] .zl-remote__access{
background: var(--sp-section-bg);
}
.zl-remote__access h3{
margin-top: 0;
}
/* Never-Ask Box */
.zl-remote__never{
margin-top: 1.1rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: #fff;
border: 1px solid var(--sp-border-color);
}
[data-bs-theme="dark"] .zl-remote__never{
background: var(--sp-section-bg);
}
.zl-remote__never h3{
margin-top: 0;
}
/* FAQ */
.zl-remote__faq details{
border: 1px solid var(--sp-border-color);
border-radius: 12px;
padding: .7rem .9rem;
margin: .6rem 0;
background: #fff;
}
[data-bs-theme="dark"] .zl-remote__faq details{
background: var(--sp-section-bg);
}
.zl-remote__faq summary{
cursor: pointer;
font-weight: 700;
list-style: none;
}
.zl-remote__faq summary::-webkit-details-marker{
display:none;
}
.zl-remote__faq summary::after{
content: "▸";
float: right;
transition: transform .2s ease;
color: var(--zl-link);
}
.zl-remote__faq details[open] summary::after{
transform: rotate(90deg);
}
/* CTA */
.zl-remote__cta{
margin-top: 1.4rem;
padding: 1.1rem 1.2rem;
border-radius: 14px;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
}
.zl-remote__cta h3{
margin-top: 0;
}
.zl-remote__cta-buttons{
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: .8rem;
}
.zl-remote__cta-btn{
font-size: 1rem;
padding: .7rem 1rem;
border-radius: 999px;
}
/* Back to top */
.zl-remote__top{
margin-top: 1.2rem;
text-align: right;
font-size: .98em;
}
/* Responsive */
@media (max-width: 768px){
.zl-remote__strip{
grid-template-columns: 1fr;
}
.zl-remote__start-grid{
grid-template-columns: 1fr;
}
}
@media (max-width: 576px){
.zl-remote{
padding: 10px;
font-size: 1.05rem;
}
.zl-remote__contact-buttons{
flex-direction: column;
}
.zl-remote__contact-btn,
.zl-remote__start-btn,
.zl-remote__test-btn,
.zl-remote__pdf-btn{
width: 100%;
text-align: center;
}
}
.zl-hilfe-via-internet section[id] {
scroll-margin-top: var(--fs-sticky-offset, 80px);
}
/* ZeitloSen – Remote Subpages (TeamViewer / Chrome / Test) */
.zl-remote-sub{
max-width: 70ch;
margin: 0 auto;
padding: clamp(8px, 2vw, 18px);
font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.18rem);
line-height: 1.65;
color: var(--sp-text);
}
.zl-remote-sub__lead{
font-size: 1.12em;
margin-bottom: 1rem;
}
.zl-remote-sub__box{
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
margin: .9rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.zl-remote-sub__actions{
margin-top: .6rem;
}
.zl-remote-sub__btn{
width: 100%;
justify-content: center;
font-size: 1rem;
padding: .75rem 1rem;
border-radius: 999px;
}
.zl-remote-sub__mini{
margin-top: .6rem;
font-size: .95em;
opacity: .95;
}
.zl-remote-sub__note{
background: color-mix(in srgb, var(--sp-primary) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--sp-primary) 35%, transparent);
border-radius: 12px;
padding: .85rem 1rem;
margin: 1rem 0;
}
.zl-remote-sub__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: .9rem;
margin-top: .6rem;
}
.zl-remote-sub__card{
background: #fff;
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-remote-sub__card{
background: var(--sp-section-bg);
}
.zl-remote-sub__contact{
margin-top: 1rem;
padding: 1rem 1.1rem;
border-radius: 14px;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
}
.zl-remote-sub__contact-buttons{
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: .6rem;
}
@media (max-width: 768px){
.zl-remote-sub__grid{
grid-template-columns: 1fr;
}
.zl-remote-sub__contact-buttons{
flex-direction: column;
}
.zl-remote-sub__btn{
width: 100%;
text-align: center;
}
}
.zl-pagebar h1 {
text-align: center;
}
/* ZeitloSen – PC-Hilfe per Telefon (erweiterte Verbesserungen) */
/* Hinweis oben */
.zl-phone__highlight{
margin-bottom: 1rem;
}
/* Callbox oben */
.zl-phone__callbox{
margin: 1.7rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-phone__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-phone__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-phone__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-phone__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-phone__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* Listen */
.zl-phone__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-phone__list li{
margin: .4rem 0;
}
/* Fakten-Karten */
.zl-phone__facts{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-phone__fact-card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-phone__fact-card{
background: var(--sp-section-bg);
}
.zl-phone__fact-card h3{
margin-top: 0;
font-size: 1.15em;
}
/* Was wir können / nicht */
.zl-phone__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-phone__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-phone__card{
background: var(--sp-section-bg);
}
.zl-phone__card h3{
margin-top: 0;
font-size: 1.15em;
}
/* Alternative CTA für andere Hilfeformen */
.zl-remote__cta-alt{
margin-top: 1.4rem;
padding: 1.1rem 1.2rem;
border-radius: 14px;
background: var(--sp-section-bg);
border: 1px solid var(--sp-border-color);
}
/* Responsive */
@media (max-width: 768px){
.zl-phone__facts,
.zl-phone__grid{
grid-template-columns: 1fr;
}
.zl-phone__callbox-actions{
flex-direction: column;
align-items: stretch;
}
.zl-phone__callbtn{
width: 100%;
text-align: center;
}
}
#sp-page-builder .sppb-addon-header .sppb-addon-title, #sp-page-builder .zl-h3-title .sppb-addon-title {
margin-top: 20px !important;
}
.zl-phone__strip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .75rem;
margin: 1.2rem 0 1rem;
}
/* ZeitloSen – PC-Hilfe per Service-Ticket (Ergänzungen) */
.zl-ticket__highlight{
margin-bottom: 1rem;
}
/* Ticket-Callbox oben */
.zl-ticket__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-ticket__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-ticket__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-ticket__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-ticket__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-ticket__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* Listen & Karten */
.zl-ticket__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-ticket__list li{
margin: .4rem 0;
}
.zl-ticket__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-ticket__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-ticket__card{
background: var(--sp-section-bg);
}
.zl-ticket__card h3{
margin-top: 0;
font-size: 1.15em;
}
/* Responsive */
@media (max-width: 768px){
.zl-ticket__callbox-actions{
flex-direction: column;
align-items: stretch;
}
.zl-ticket__callbtn{
width: 100%;
text-align: center;
}
.zl-ticket__grid{
grid-template-columns: 1fr;
}
}
/* ZeitloSen – Service-Ticket Verbesserungen */
.zl-ticket__highlight{
margin-bottom: 1rem;
}
/* Callbox oben */
.zl-ticket__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-ticket__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-ticket__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-ticket__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
justify-content: center;
}
.zl-ticket__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-ticket__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* Listen und Karten bleiben wie gehabt – hier nur Ergänzung für „status / prio“ Blöcke */
.zl-ticket__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-ticket__list li{
margin: .4rem 0;
}
.zl-ticket__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-ticket__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-ticket__card{
background: var(--sp-section-bg);
}
.zl-ticket__card h3{
margin-top: 0;
font-size: 1.15em;
}
/* Responsive */
@media (max-width: 768px){
.zl-ticket__callbox-actions{
flex-direction: column;
align-items: stretch;
}
.zl-ticket__callbtn{
width: 100%;
text-align: center;
}
.zl-ticket__grid{
grid-template-columns: 1fr;
}
}
/* ZeitloSen – Meine Tickets (kleine Erweiterungen) */
.zl-ticket__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-ticket__list li{
margin: .4rem 0;
}
.zl-ticket__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-ticket__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-ticket__card{
background: var(--sp-section-bg);
}
@media (max-width: 768px){
.zl-ticket__grid{
grid-template-columns: 1fr;
}
}
/* ZeitloSen – Meine Tickets (kleine Erweiterungen) */
.zl-ticket__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-ticket__list li{
margin: .4rem 0;
}
.zl-ticket__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-ticket__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-ticket__card{
background: var(--sp-section-bg);
}
@media (max-width: 768px){
.zl-ticket__grid{
grid-template-columns: 1fr;
}
}
/* ZeitloSen – PC-Hilfe zu Hause (überarbeitete Ergänzungen) */
.zl-home__highlight{
margin-bottom: 1rem;
}
/* Callbox oben */
.zl-home__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-home__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-home__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-home__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-home__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-home__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* Listen */
.zl-home__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-home__list li{
margin: .4rem 0;
}
/* Fakten-Karten – Dauer und Kosten */
.zl-home__facts{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-home__fact-card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-home__fact-card{
background: var(--sp-section-bg);
}
.zl-home__fact-card h3{
margin-top: 0;
font-size: 1.15em;
}
/* Grid für „Grenzen“ */
.zl-home__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-home__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-home__card{
background: var(--sp-section-bg);
}
.zl-home__card h3{
margin-top: 0;
font-size: 1.05em;
}
/* Responsive */
@media (max-width: 992px){
.zl-home__grid{
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px){
.zl-home__callbox-actions{
flex-direction: column;
align-items: stretch;
}
.zl-home__callbtn{
width: 100%;
text-align: center;
}
.zl-home__grid{
grid-template-columns: 1fr;
}
}
/* ZeitloSen – Phishing-Check (Ergänzungen) */
.zl-phish__highlight{
margin-bottom: 1rem;
}
/* Callbox oben */
.zl-phish__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-phish__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-phish__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-phish__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-phish__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-phish__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* Listen */
.zl-phish__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-phish__list li{
margin: .4rem 0;
}
/* Karten und Grids */
.zl-phish__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-phish__grid--two{
grid-template-columns: repeat(2, minmax(0,1fr));
}
.zl-phish__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-phish__card{
background: var(--sp-section-bg);
}
.zl-phish__card h3{
margin-top: 0;
font-size: 1.05em;
}
/* Responsive */
@media (max-width: 992px){
.zl-phish__grid{
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px){
.zl-phish__callbox-actions{
flex-direction: column;
align-items: stretch;
}
.zl-phish__callbtn{
width: 100%;
text-align: center;
}
.zl-phish__grid,
.zl-phish__grid--two{
grid-template-columns: 1fr;
}
}
/* ZeitloSen Phishing-Check */
.zl-phishing__highlight{
margin-bottom: 1rem;
}
/* Callbox */
.zl-phishing__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-phishing__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-phishing__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-phishing__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-phishing__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-phishing__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* ZeitloSen – PC-Hilfe in Ihrer Nähe */
.zl-local__highlight{
margin-bottom: 1rem;
}
/* Callbox */
.zl-local__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-local__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-local__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-local__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-local__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-local__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-local__list li{
margin: .4rem 0;
}
/* Karten */
.zl-local__grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-local__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-local__card{
background: var(--sp-section-bg);
}
.zl-local__card h3{
margin-top: 0;
font-size: 1.15em;
}
/* ZeitloSen – PC-Servicecheck */
.zl-service__highlight{
margin-bottom: 1rem;
}
/* Callbox */
.zl-service__callbox{
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-service__callbox{
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-service__callbox-title{
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-service__callbox-actions{
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
}
.zl-service__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-service__callbox-hinweis{
font-size: .95em;
opacity: .9;
}
/* Listen und Karten */
.zl-service__list{
margin: .3rem 0;
padding-left: 1.2rem;
}
.zl-service__list li{
margin: .4rem 0;
}
.zl-service__grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
margin-top: .6rem;
}
.zl-service__card{
border: 1px solid var(--sp-border-color);
border-radius: 14px;
padding: 1rem 1.1rem;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
[data-bs-theme="dark"] .zl-service__card{
background: var(--sp-section-bg);
}
.zl-service__card h3{
margin-top: 0;
font-size: 1.05em;
}
/* Callbox oben */
.zl-hilfe__callbox {
padding: 1rem 1.2rem;
border-radius: 14px;
border: 1px solid var(--sp-border-color);
background: color-mix(in srgb, var(--sp-primary) 8%, #fff);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .zl-hilfe__callbox {
background: color-mix(in srgb, var(--sp-primary) 15%, var(--sp-section-bg));
}
.zl-hilfe__callbox-title {
margin-top: 0;
margin-bottom: .4rem;
font-size: 1.3em;
}
.zl-hilfe__callbox-actions {
display: flex;
flex-wrap: wrap;
gap: .6rem;
align-items: center;
margin-top: .6rem;
justify-content: center;
}
.zl-hilfe__callbtn{
border-radius: 999px;
padding: .7rem 1.3rem;
font-size: 1rem;
}
.zl-hilfe__callbox-hinweis{
font-size: .95em;
opacity: .9;
padding-top:15px;
}
/* === Digi-Hilfe Karten-Grid (modules) === */
.zl-support-grid.zl-support-grid--modules {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
align-items: stretch;
margin-bottom: 50px;
margin-top: 50px;
}
/* Elk grid-item moet de volle hoogte kunnen innemen */
.zl-support-grid.zl-support-grid--modules .zl-support-grid__item {
height: 100%;
}
/* De mod-custom wrapper binnen elk item mag de hoogte niet breken */
.zl-support-grid.zl-support-grid--modules .zl-support-grid__item .mod-custom.custom {
height: 100%;
}
/* De link vult de volledige hoogte van het grid-item */
.zl-support-grid.zl-support-grid--modules .zl-card-link {
display: block;
height: 100%;
text-decoration: none;
}
/* De kaart zelf wordt een flex-col die meerekt in hoogte */
.zl-support-grid.zl-support-grid--modules .zl-support-card {
display: flex;
flex-direction: column;
height: 100%;
}
/* Media / intro: normale marges */
.zl-support-card__media {
margin-bottom: 0.75rem;
}
.zl-support-card__intro {
margin-bottom: 0.75rem;
}
/* Checklist naar beneden duwen zodat de knop onderaan staat */
.zl-support-grid.zl-support-grid--modules .zl-support-card__checklist {
margin-top: auto;
margin-bottom: 0.75rem;
}
/* Knop mooi links onderaan */
.zl-support-grid.zl-support-grid--modules .zl-support-card__btn {
align-self: flex-start;
}
/* Mobiel: één kolom onder elkaar */
@media (max-width: 767.98px) {
.zl-support-grid.zl-support-grid--modules {
grid-template-columns: 1fr;
}
}
/* CTA-knop netjes in het midden */
.zl-support-grid.zl-support-grid--modules .zl-support-card__btn {
align-self: center !important;
}
/* Panel zelf iets meer als "Karte" stylen */
.zl-remote__cta-alt {
background-color: #f5f7fa;
border: 1px solid var(--sp-border-color);
border-radius: 16px;
padding: 1.5rem 1.75rem;
box-shadow: 0 2px 8px rgba(0,0,0,.03);
margin-top: 1.5rem;
}
.zl-remote__cta-alt h3 {
margin-top: 0;
margin-bottom: .25rem;
}
.zl-remote__cta-alt > p:first-of-type {
margin-bottom: .5rem;
}
/* De knoppenrij als flex-wrap chips, gecentreerd */
.zl-remote__cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .6rem .8rem;
margin-top: .8rem;
margin-bottom: 0; /* laatste p geen extra marge */
}
/* Chip-stijl knoppen in ZeitloSen-look */
.zl-remote__cta-btn {
font-size: .95rem;
padding: .45rem 1.1rem;
border-radius: 999px;
border-width: 1px;
border-color: var(--sp-border-color);
color: var(--zl-link-sec);
background-color: #ffffff;
line-height: 1.2;
white-space: nowrap;
}
/* Hover: goud + witte tekst */
.zl-remote__cta-btn:hover,
.zl-remote__cta-btn:focus {
color: #ffffff;
background-color: var(--zl-gold);
border-color: var(--zl-gold);
}
/* Mobiel: iets grotere tap targets */
@media (max-width: 575.98px) {
.zl-remote__cta-btn {
padding: .55rem 1.1rem;
font-size: 1rem;
}
}
[data-bs-theme="dark"] .zl-remote__cta-btn {
color: var(--zl-shadow);
background-color: var(--zl-card-bg);
}
/* ============================================================
ZeitloSen – Logo links van tekst (pseudo-element)
Sticky class: .header-sticky
============================================================ */
#sp-logo .logo a{
position: relative;
display: inline-block;
text-decoration: none;
}
/* DEFAULT (desktop basis) */
#sp-logo .logo a::before{
content:"";
position:absolute;
right:100%;
margin-right: -10px;
top:50%;
transform: translateY(-49%);
width:125px;
height:125px;
background:url("https://zeitlosen.de/images/imglogos/ZeitloSen%20512x512%20transparent.webp")
no-repeat center / contain;
z-index:2;
pointer-events:none;
transition: width .18s ease, height .18s ease, transform .18s ease, margin-right .18s ease;
}
/* DEFAULT sticky */
.header-sticky #sp-logo .logo a::before{
width:90px;
height:90px;
margin-right:0px;
margin-top:5px;
transform: translateY(-55%);
}
/* ============================================================
≤ 576px — XS (telefoons)
============================================================ */
@media (max-width: 576px){
#sp-logo .logo a::before{
width:40px;
height:40px;
margin-right:-170px;
margin-top:0px;
transform: translateY(-50%);
}
.header-sticky #sp-logo .logo a::before{
width:40px;
height:40px;
margin-right:-170px;
margin-top:0px;
transform: translateY(-50%);
}
}
/* ============================================================
577–767px — SM (grote telefoons)
============================================================ */
@media (min-width: 577px) and (max-width: 767px){
#sp-logo .logo a::before{
width:75px;
height:75px;
margin-right:0px;
margin-top:0px;
transform: translateY(-50%);
}
.header-sticky #sp-logo .logo a::before{
width:75px;
height:75px;
margin-right:0px;
margin-top:0px;
transform: translateY(-48%);
}
}
/* ============================================================
768–991px — MD (tablets / iPad)
============================================================ */
/* Tablet portrait */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 991px){
#sp-logo .logo a::before{
width:50px;
height:50px;
margin-right:-175px;
margin-top:0px;
transform: translateY(-50%);
}
.header-sticky #sp-logo .logo a::before{
width:50px;
height:50px;
margin-right:-175px;
margin-top:0px;
transform: translateY(-50%);
}
}
/* Tablet landscape */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 991px){
#sp-logo .logo a::before{
width:50px;
height:50px;
margin-right:-175px;
margin-top:0px;
transform: translateY(-49%);
}
.header-sticky #sp-logo .logo a::before{
width:50px;
height:50px;
margin-right:-175px;
margin-top:0px;
transform: translateY(-49%);
}
/* Menu compact houden op tablet landscape (nu gescoped, geen desktop-impact) */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span{
line-height:45px;
font-size:15px;
padding:0 5px;
}
}
/* ============================================================
992–1199px — LG (laptop / desktop)
============================================================ */
/* Jouw extra tuning voor portrait >=1024 (valt in deze range) */
@media (orientation: portrait) and (min-width: 1024px) and (max-width: 1199px){
#sp-logo .logo a::before{
width:75px;
height:75px;
margin-right:-200px;
margin-top:0px;
transform: translateY(-49%);
}
.header-sticky #sp-logo .logo a::before{
width:75px;
height:75px;
margin-right:-200px;
margin-top:0px;
transform: translateY(-49%);
}
}
#mod-custom306 #freund-chooser,
#mod-custom306 .osm-intro,
#mod-custom306 .osm-page-title {
display:none;
}
/* ============================================================
Membership Pro (module #mod-custom306)
Labels boven inputs + Bootstrap row/gutters fix
============================================================ */
/* Form is ook een .row -> maak hem block zodat de inner rows niet raar schalen */
#mod-custom306 form#os_form.form.row{
display: block !important;
}
/* Iedere field row: onder elkaar */
#mod-custom306 form#os_form > .row.form-group.form-row{
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
/* kill bootstrap row gutters die je layout “opzij” duwen */
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Directe kolommen 100% breed */
#mod-custom306 form#os_form > .row.form-group.form-row > .col-md-3,
#mod-custom306 form#os_form > .row.form-group.form-row > .col-md-9{
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
/* kill column padding die vaak “verspringing” geeft */
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Labels boven input, links uitlijnen */
#mod-custom306 form#os_form .form-control-label{
text-align: left !important;
margin: 0 0 .25rem 0 !important;
padding: 0 !important;
}
/* Inputs 100% */
#mod-custom306 form#os_form .eb-form-control .form-control{
width: 100% !important;
}
#mod-custom306 :where(.osm-inline-signup, #osm-signup-page) form {
border: none;
}
#mod-custom306 :where(.osm-inline-signup, #osm-signup-page) .form-row:has(.star, .required) label {
font-weight: 500;
font-size: 20px;
margin-bottom: 10px;
}
#mod-custom306 #mitgliedschaftfr-lbl {
display: none;
}
[data-bs-theme="dark"] .sp-module .sp-module-content {
border: 2px solid var(--zl-gold);
box-shadow: none;
border-color: var(--zl-gold);
background: transparent;
border-radius: 18px;
}
[data-bs-theme="dark"] :where(.osm-inline-signup, #osm-signup-page) form {
border-color: color-mix(in srgb, var(--zl-gold) 30%, #444 70%);
background: none;
box-shadow: none;
}
.osm-intro {
--accent: transparent;
border: none;
border-radius: 10px;
background: transparent;
box-shadow: none;
padding: 0.8rem 1.5rem;
margin-bottom: 1.5rem;
margin-top: 0px;
font-size: 1rem;
line-height: 1.6;
color: var(--sp-text);
transition: background-color .3s ease, border-color .3s ease;
}
:where(.osm-inline-signup, #osm-signup-page) form {
--accent-freund: var(--zl-bronze);
--accent-zeitgenosse: var(--zl-gold);
--accent-gefaehrte:
color-mix(in srgb, var(--zl-gold) 45%, var(--sp-text) 55%);
--gold-dark:
color-mix(in srgb, var(--zl-gold) 78%, #000 22%);
--light-gold-bg:
color-mix(in srgb, var(--zl-gold) 9%, #fff 91%);
--error: var(--gold-dark);
--muted: var(--sp-muted, #6b7280);
font: 16px / 1.55 "Helvetica Neue", Arial, sans-serif;
color-scheme: light dark;
margin-top: 1.5rem;
border: 1px solid
color-mix(in srgb, var(--zl-gold) 18%, #e8e8e8 82%);
border-radius: 10px;
padding: 30px;
background: transparent;
box-shadow: none;
transition: background-color .3s ease, border-color .3s ease;
}
.mod-jfilters_filters .jfilters-filters-container {
border-radius: 18px;
}
[data-bs-theme="dark"] #sp-bottom1 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-bottom2 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-bottom3 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-bottom4 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-legal .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-bodem .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-menu .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-breadcrumb .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-top1 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-top2 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-position7 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-position8 .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-search .sp-module .sp-module-content,
[data-bs-theme="dark"] #sp-user1 .sp-module .sp-module-content,
[data-bs-theme="dark"] .offcanvas-inner .sp-module .sp-module-content
{
border: none;
box-shadow: none;
background: transparent;
}
[data-bs-theme="dark"] #sp-top-bar {
background: transparent;
}
[data-bs-theme="dark"] #sp-right .zl-join-landing {
max-width: 100% !important;
margin-bottom: 0px;
}
[data-bs-theme="dark"] .zl-ehrenamt-short .eh-card {
margin-top: 0rem;
border-radius: 18px;
}
[data-bs-theme="dark"] .osm-intro {
border-radius: 18px;
margin-bottom: 0rem;
}
[data-bs-theme="dark"] #sp-right .zl-join-landing {
max-width: 100% !important;
margin-bottom: 0px;
}
#sp-right .zl-join-landing {
max-width: 100% !important;
margin-bottom: 0px;
}
#osm-plans-list-columns .osm-plan-header {
border-top-left-radius: 10px;
}
.zl-ehrenamt-short .eh-card.has-leftband::before {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#sp-left .sp-module.module-zonder-border, #sp-right .sp-module.module-zonder-border {
margin-top: 50px;
border: none;
padding: 0px;
border-radius: 10px;
}
@media (max-width: 575.98px) and (orientation: portrait) {
#sp-main-body, #sp-component, .sp-pagebuilder, .sppb-section, .sppb-container, .sp-module, .sp-module-content {
margin: 0 0 30px 0 !important;
}
}
@media (max-width: 575.98px) and (orientation: portrait) {
#osm-plans-list-columns .osm-plan-1 .osm-plan-header::after, #osm-plans-list-columns .osm-plan-2 .osm-plan-header::after, #osm-plans-list-columns .osm-plan-3 .osm-plan-header::after {
transform: translate(0%, -68%);
}
#osm-plans-list-columns .osm-plan, .osm-container {
margin-left: 0px !important;
margin-right: 0px !important;
}
}
/* ================================
Footer info menu – horizontaal
================================ */
.information-module .mod-menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
/* links */
.information-module .mod-menu > li {
position: relative;
padding: 0 10px;
}
/* | scheiding */
.information-module .mod-menu > li:not(:last-child)::after {
content: "|";
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
color: #ffffff;
opacity: 0.6;
}
/* link basis */
.information-module .mod-menu a {
color: #ffffff;
text-decoration: none;
background: transparent !important;
padding: 0;
margin: 0;
display: inline;
transition: color 0.2s ease;
}
/* hover */
.information-module .mod-menu a:hover,
.information-module .mod-menu a:focus {
color: #c7923e; /* goud */
background: transparent !important;
box-shadow: none !important;
}
/* actieve pagina */
.information-module .mod-menu li.active > a {
color: #c7923e;
background: transparent !important;
box-shadow: none !important;
}
/* Helix / Joomla reset (belangrijk) */
.information-module .mod-menu a::before,
.information-module .mod-menu a::after {
display: none !important;
}
/* =========================================
ZeitloSen – Topics Grid (SPPB RawHTML)
Scope: #topics
- 3/2/1 columns
- cards equal height per row
- CTA gold, no underline, no hover change
- hover: ONLY golden border/glow
========================================= */
#zl-kat-topics {
/* spacing */
--zl-gap-x: clamp(2.4rem, 4vw, 3.6rem);
--zl-gap-y: clamp(2.8rem, 5vw, 4.2rem);
/* typography */
--zl-title: clamp(1.05rem, 1rem + .3vw, 1.25rem);
--zl-textsize: clamp(.9rem, .85rem + .25vw, 1rem);
--zl-ctasize: clamp(.9rem, .85rem + .25vw, 1rem);
/* colors (fallbacks; primary tokens komen uit 00-vars.css) */
--zl-surface: var(--sp-body-bg, #fff);
--zl-text: var(--sp-text, #111);
--zl-border: var(--sp-border-color, rgba(0,0,0,.12));
--zl-gold: #c7923e;
--zl-gold-hover: #d3a157; /* FIX: bestond niet altijd lokaal */
--zl-gold-glow: rgba(199,146,62,.45);
--zl-cta: var(--zl-gold);
}
/* ---------- grid ---------- */
#zl-kat-topics .zl-topic-grid{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: var(--zl-gap-x) !important;
row-gap: var(--zl-gap-y) !important;
align-items: stretch !important;
}
@media (max-width: 1200px){
#zl-kat-topics .zl-topic-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 768px){
#zl-kat-topics .zl-topic-grid{
grid-template-columns: 1fr !important;
padding: 30px 0;
}
}
/* ---------- card ---------- */
#zl-kat-topics a.zl-topic-card{
display: flex !important;
flex-direction: column !important;
height: 100% !important;
background: #fff;
border-radius: 0px;
padding: 0rem 0rem;
text-align: center;
transition: all .25s ease;
cursor: pointer;
color: var(--zl-text);
text-decoration:none;
border: 2px solid var(--zl-gold-glow); /* gouden rand */
box-shadow: 0 6px 18px rgba(0,0,0,0.10); /* subtiele basis schaduw */
}
#zl-kat-topics a.zl-topic-card:hover{
transform: translateY(-4px);
/* fallback (werkt overal) */
box-shadow:
0 0 0 3px rgba(199, 146, 62, 0.35),
0 12px 28px rgba(199, 146, 62, 0.35);
/* upgrade (alleen als color-mix wordt ondersteund) */
box-shadow:
0 0 0 3px color-mix(in srgb, var(--zl-gold) 50%, transparent),
0 12px 28px rgba(199, 146, 62, 0.35);
border-color: var(--zl-gold-glow);
}
/* ---------- media ---------- */
#zl-kat-topics .zl-topic-card__media img{
width: 100%;
height: clamp(90px, 16vw, 130px);
object-fit: cover;
display: block;
}
/* ---------- body ---------- */
#zl-kat-topics .zl-topic-card__body{
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
gap: .6rem;
padding: clamp(1rem, .9rem + .6vw, 1.35rem);
}
/* ---------- title ---------- */
#zl-kat-topics .zl-topic-card__title{
margin: 0;
font-size: var(--zl-title);
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
color: #c7923e;
}
#zl-kat-topics .zl-topic-card__icon svg{
width: 18px;
height: 18px;
fill: currentColor;
display:none;
}
/* ---------- text ---------- */
#zl-kat-topics .zl-topic-card__text{
margin: 0;
font-size: var(--zl-textsize);
line-height: 1.5;
max-width: 46ch;
}
/* ---------- CTA (blijft altijd hetzelfde) ---------- */
#zl-kat-topics .zl-topic-card__cta{
margin-top: auto !important;
font-size: var(--zl-ctasize);
font-weight: 700;
color: var(--zl-cta) !important;
text-decoration: none !important;
}
#zl-kat-topics a.zl-topic-card:hover .zl-topic-card__cta{
color: var(--zl-cta) !important; /* expliciet: geen hover change */
text-decoration: none !important;
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
#zl-kat-topics a.zl-topic-card{ transition: none !important; }
}
#zl-kat-intro .js-finder-searchform {
display:block !important;
margin-top: 25px;
}
@media (max-width: 575.98px) and (orientation: portrait) {
#zl-kat-topics .zl-topic-card__title{
font-size: clamp(1.25rem, 1.25rem + .3vw, 2rem);
}
#zl-kat-topics .zl-topic-card__text{
margin: 0;
font-size: clamp(1.1rem, 1.1rem + .3vw, 2rem);
line-height: 1.4;
max-width: 46ch;
}
#zl-kat-topics .zl-topic-card__cta{
font-size: clamp(1.1rem, 1.1rem + .3vw, 2rem);;
font-weight: 700;
color: var(--zl-cta) !important;
text-decoration: none !important;
}
}
.breadcrumb {
background-color: #fdf8f1;
}
/* === 1) Full-bleed SPPB hero section (100vw) === */
#zl-kat-hero.zl-kat-hero-css {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
overflow: hidden;
}
/* voorkom horizontale scrollbar */
html, body{ overflow-x: hidden; }
/* === 2) Bepaal de hero-hoogte (jouw image is 10:1) === */
#zl-kat-hero.zl-kat-hero-css {
aspect-ratio: 10 / 1;
min-height: 160px; /* zachte ondergrens */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding: 0;
}
@media (max-width: 768px){
#zl-kat-hero.zl-kat-hero-css {
min-height: 200px;
}
}
#zl-kat-hero.zl-kat-hero-css,
#zl-kat-hero.zl-kat-hero-css > .sppb-section,
#zl-kat-hero.zl-kat-hero-css > .sppb-container-inner,
#zl-kat-hero.zl-kat-hero-css .sppb-container-inner{
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
#zl-kat-hero.zl-kat-hero-css {
padding: 0 !important;
}
/* Full-bleed achtergrond band */
.zl-kat-topics-css {
position: relative;
z-index: 0;
}
/* Achtergrond die uit de container “breekt” naar 100vw */
.zl-kat-topics-css::before{
content:"";
position:absolute;
inset: 0;
z-index:-1;
/* full width trick */
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: var(--zl-topics-bg, #FDF8F1); /* kies je kleur */
}
/* optioneel: extra padding in de band */
.zl-kat-topics-css {
padding-block: clamp(24px, 4vw, 64px);
}
.zl-kat-intro-title-css h1 {
margin-top: 0em;
margin-bottom: 0.3em;
}
.zl-kat-intro-text-css {
font-weight: bold;
}
.zl-kat-intro-text-einfacherklaert .sppb-addon-content, .zl-kat-intro-title-css h1 {
color: var(--zl-gold);
}
.zl-kat-intro-text-einfacherklaert .sppb-addon-content {
margin-top: 0.4em;
font-weight: bold;
}
@media (max-width: 575.98px) and (orientation: portrait) {
#sp-search .sp-module.zl-search-form, #sp-search .zl-search-form .mod-finder {
margin: 20px auto 0px !important;
}
.zl-search-form .mod-finder {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.zl-search-form .sp-module-content {
margin: 10px 0 0px 0 !important;
}
}
@media (max-width: 575.98px) and (orientation: portrait) {
#zl-kat-intro .sppb-section {
margin: 0 0 0px 0 !important;
}
.zl-kat-intro-text-css, .zl-kat-intro-text-einfacherklaert .sppb-addon-content, .zl-article-socialshare-bottom {
text-align:center;
}
.zl-kat-intro-title-css h1 {
margin-top: 0.25em;
}
}
@media (max-width: 575.98px) and (orientation: portrait) {
#Artikel-Header h1, .zl-article-title .sppb-addon-title, .zl-article-title h1 {
font-size: 30px !important;
margin: 0 5px 20px 5px !important;
}
}
@media (max-width: 575.98px) and (orientation: portrait) {
.sppb-addon.sppb-teaser-text .sppb-addon-content .zl-teaser-text {
font-size: 20px !important;
line-height: 1.6;
letter-spacing: normal;
text-align: center !important;
text-align-last: center !important;
margin:0 10px;
}
.sp-page-builder .page-content #zl-art-social-share {
margin:30px 0 0 0 !important;
}
.shariff .orientation-horizontal li {
margin-right: 1px !important;
}
}
[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel] {
background: #fdf8f1;
}
.shariff ul {
justify-content: center;
}
span.heading_text {
color: var(--zl-gold);
}
.sppb-addon.sppb-teaser-text .sppb-addon-content .zl-teaser-text {
font-size: 20px !important;
}
/* ZeitloSen – Kategorie Header (SPPB-vrij) */
#zl-katheader.zl-katheader{
padding: clamp(10px, 3vw, 10px) 0 0 0;
}
#zl-katheader .zl-katheader__inner{
max-width: 100%;
margin: 0 auto;
padding: 0 16px 15px 16px;
display: grid;
grid-template-columns: 1.2fr .8fr;
align-items: center;
gap: clamp(18px, 3vw, 36px);
}
/* linker kolom */
#zl-katheader .zl-katheader__title{
margin: 0 0 .45rem 0;
font-weight: 700;
color: var(--zl-gold);
}
#zl-katheader .zl-katheader__lead{
margin: 0 0 .8rem 0;
line-height: 1.55;
max-width: 65ch;
font-weight:bold;
}
#zl-katheader .zl-katheader__accent{
margin: 0 0 1rem 0;
font-weight: 800;
color: var(--zl-gold, #c7923e);
}
/* rechter kolom */
#zl-katheader .zl-katheader__right{
display: flex;
justify-content: flex-end;
}
#zl-katheader .zl-katheader__image{
width: min(400px, 100%);
height: auto;
object-fit: contain;
display: block;
margin-bottom: 10px;
border-radius: 16px;
}
.sp-module.zl-kat-header {
margin-top: 10px !important;
}
/* Mobiel: onder elkaar + centreren */
@media (max-width: 575.98px) and (orientation: portrait) {
#zl-katheader .zl-katheader__inner{
grid-template-columns: 1fr;
text-align: center;
}
#zl-katheader .zl-katheader__right{
justify-content: center;
display:none;
}
#zl-katheader .zl-katheader__lead{
margin-left: auto;
margin-right: auto;
}
#zl-katheader .zl-katheader__search{
display: none;
}
}
.mod-jfilters_filters .jfilters-filters-container {
border-radius: 16px !important;
}
#sp-right .sp-module:first-child {
border-radius: 16px !important;
}
[data-bs-theme="light"] #article-list>li {
background: #ffffff;
}
#jf_results .zl-katheader__search .js-finder-searchform {
display: block !important;
}
/* Alleen voor de accentregel */
.zl-katheader__accent{
display: inline-flex;
align-items: baseline;
gap: .45em; /* ruimte tussen woorden en diamant */
}
/* Maak de diamant dunner door 'm kleiner + lichter te tonen */
.zl-katheader__accent .zl-sep{
font-size: .85em; /* kleiner = optisch dunner */
opacity: 1; /* lichter */
font-weight: 400; /* geen bold */
line-height: 1;
position: relative;
top: -0.02em; /* optioneel: net iets hoger */
}
/* phone portrait */
@media (max-width: 575.98px) and (orientation: portrait) {
.zl-katheader__accent .zl-sep{
font-size: .85em; /* 👈 duidelijk rustiger */
opacity: 1; /* optioneel iets lichter */
}
}
.zl-cta-box{
padding: 2rem;
margin: 2rem 0;
border: 1px solid var(--sp-border-color);
border-radius: var(--zl-radius-xl);
background: var(--zl-card-bg);
box-shadow: var(--zl-shadow);
position: relative;
}
/* subtiele scheiding: hier stopt de intro */
.zl-cta-box::before{
content:"";
display:block;
height:1px;
background: var(--sp-border-color);
margin-bottom: 1rem;
opacity:.7;
}
.zl-cta-title{
margin-bottom: .75rem;
font-size: 1.5rem;
color: var(--sp-heading-color);
}
.zl-cta-text{
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: .75rem;
}
.zl-cta-note{
font-size: .95rem;
opacity: .75;
margin-bottom: 1.25rem;
}
/* mobiel: knoppen onder elkaar */
@media (max-width: 520px){
.zl-cta-actions{
flex-direction: column;
align-items: stretch;
}
.zl-cta-actions .btn{
width: 100%;
}
}
//* ========== Regular Labs Tabs (RLTA) – ZeitloSen CTA tabs ========== */
/* container */
[data-rlta-element="button-list"][role="tablist"]{
display: flex;
gap: .5rem;
justify-content: center;
margin-top: 1rem;
}
/* basis tab button (div role=tab) */
[data-rlta-element="button"][role="tab"]{
cursor: pointer;
user-select: none;
border: 1px solid var(--sp-border-color);
border-radius: .75rem .75rem 0 0;
padding: .65rem 1rem;
background: var(--zl-card-bg);
color: var(--sp-text);
}
/* h3 in de tab (jouw markup) */
[data-rlta-element="button"][role="tab"] > h3[data-rlta-element="heading"]{
margin: 0;
font-size: 1rem;
line-height: 1.2;
font-weight: 700;
}
/* hover */
@media (hover:hover){
[data-rlta-element="button"][role="tab"]:hover{
border-color: var(--zl-gold-hover);
}
}
/* =========================================================
ZEITLOSEN – CTA Tabs (Regular Labs Tabs / RLTA)
Drop-in: zet dit in je laatste bundle (bijv. 99-overrides.css)
Doel: "Kostenlos registrieren" tab met bg #fdf8f1 + tekst gold
========================================================= */
/* 1) Tablist layout (werkt op jouw markup: div role=tablist) */
.zl-cta-box div[role="tablist"][data-rlta-element="button-list"]{
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 1rem;
margin-bottom: 0;
flex-wrap: wrap;
}
/* 2) Basis tab button (div role=tab) */
.zl-cta-box div[role="tab"][data-rlta-element="button"]{
cursor: pointer;
user-select: none;
border: 1px solid var(--sp-border-color);
border-radius: .75rem .75rem 0 0;
padding: .65rem 1rem;
background: var(--zl-card-bg);
color: var(--sp-text);
box-shadow: none;
}
/* 3) Tab heading (h3) */
.zl-cta-box div[role="tab"][data-rlta-element="button"] > h3[data-rlta-element="heading"]{
margin: 0;
font-size: 1rem;
line-height: 1.2;
font-weight: 700;
letter-spacing: .02em;
}
/* 4) Hover (alleen als hover beschikbaar is) */
@media (hover:hover){
.zl-cta-box div[role="tab"][data-rlta-element="button"]:hover{
border-color: var(--zl-gold-hover);
}
}
/* 5) Open/active state (voor alle tabs) */
.zl-cta-box div[role="tab"][data-rlta-element="button"][data-rlta-state="open"],
.zl-cta-box div[role="tab"][data-rlta-element="button"][aria-selected="true"]{
border-color: var(--zl-gold);
box-shadow: 0 -1px 0 0 var(--zl-gold) inset;
}
/* 6) JOUW TAB: Kostenlos registrieren (force bg; RL gebruikt vaak background: ...) */
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren{
background: #fdf8f1 !important;
background-color: #fdf8f1 !important;
border-color: var(--sp-border-color);
}
/* tekstkleur voor heading in deze tab */
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren > h3{
color: var(--zl-gold);
}
/* 7) Active/open + registrieren tab: behoud bg + gold */
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[data-rlta-state="open"],
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[aria-selected="true"]{
background: #fdf8f1 !important;
background-color: #fdf8f1 !important;
border-color: var(--zl-gold);
box-shadow: 0 -1px 0 0 var(--zl-gold) inset;
}
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[data-rlta-state="open"] > h3,
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[aria-selected="true"] > h3{
color: var(--zl-gold);
}
/* 8) Als RL skin pseudo-elements gebruikt die over de bg heen tekenen: neutraliseren */
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren::before,
.zl-cta-box div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren::after{
background: transparent !important;
}
/* 9) Panel styling (optioneel, maar past bij je box) */
.zl-cta-box div[role="tabpanel"][data-rlta-element="panel"]{
border: 1px solid var(--sp-border-color);
border-top: none;
border-radius: 0 0 var(--zl-radius-xl) var(--zl-radius-xl);
padding: 1.25rem;
background: var(--zl-card-bg);
}
/* 10) Mobiel: tabs full width (rustiger, betere tappability) */
@media (max-width: 520px){
.zl-cta-box div[role="tablist"][data-rlta-element="button-list"]{
flex-direction: column;
align-items: stretch;
}
.zl-cta-box div[role="tab"][data-rlta-element="button"]{
width: 100%;
text-align: center;
}
}
/* =========================================================
ZEITLOSEN – OSMembership signup form (Plan 1) tweaks
Doel:
- "Freund:in" (h2.osm-page-title) weg
- submit-label visueel: "Kostenlos registrieren"
NB: knoptekst is visueel (CSS), bronwaarde blijft bestaan.
========================================================= */
/* ---------- 1) Titel "Freund:in" weg (meerdere veilige selectors) ---------- */
/* Meest direct: jouw markup heeft #osm-signup-page en h2.osm-page-title */
#osm-signup-page h2.osm-page-title{
display: none !important;
}
/* Fallbacks (als class ontbreekt of iets anders rendert) */
#osm-signup-page > h2,
.osm-container.osm-container-j4 > h2.osm-page-title,
.osm-container.osm-container-j4.osm-plan-1 > h2.osm-page-title{
display: none !important;
}
/* Als er toch een rule met display blijft winnen, forceer ook "visibility/height" */
#osm-signup-page h2.osm-page-title{
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* ---------- 2) Submit-knop: "Jetzt beitreten" -> "Kostenlos registrieren" ---------- */
/* Replaced-elements (input) ondersteunen geen ::before/::after betrouwbaar,
daarom overlayen we tekst op de container .form-actions */
#osm-signup-page .form-actions{
position: relative;
display: flex;
justify-content: center; /* past bij je layout */
align-items: center;
gap: .5rem;
}
/* Maak de originele labeltekst onzichtbaar, maar laat de knop zelf bestaan/klikbaar */
#osm-signup-page .form-actions input#btn-submit{
color: transparent !important; /* verbergt value */
text-shadow: none !important;
}
/* Zorg dat de knop “ruimte” houdt (anders wordt hij smal omdat tekst transparent is) */
#osm-signup-page .form-actions input#btn-submit{
min-width: 260px;
padding-inline: 1.25rem;
}
/* Overlay-tekst bovenop de knop */
#osm-signup-page .form-actions::after{
content: "Kostenlos registrieren";
position: absolute;
/* centreer precies boven de submit knop */
left: 50%;
transform: translateX(-50%);
/* match de knophoogte automatisch */
pointer-events: none;
font-weight: 700;
color: var(--sp-text, #111);
line-height: 1;
}
/* Plaats overlay verticaal midden op de knop:
we gebruiken de knophoogte via padding (meestal voldoende) */
#osm-signup-page .form-actions{
padding-block: .25rem;
}
/* Mobiel: knop full width + overlay netjes mee */
@media (max-width: 520px){
#osm-signup-page .form-actions{
width: 100%;
}
#osm-signup-page .form-actions input#btn-submit{
width: 100%;
min-width: 0;
}
#osm-signup-page .form-actions::after{
left: 50%;
transform: translateX(-50%);
}
}
/* ---------- 3) Extra scope (als jouw module wrapper wél klopt) ---------- */
/* Deze regels zijn “bonus”: als .zl-cta-tabs om de boel heen zit, wint dat nog netter. */
.zl-cta-tabs #osm-signup-page h2.osm-page-title{ display: none !important; }
.zl-cta-tabs #osm-signup-page .form-actions::after{ content: "Kostenlos registrieren"; }
/* === ZL: Zurück-zum-Artikel knop (secundair) === */
.zl-btn-back-article{
background: transparent;
color: var(--zl-gold);
border: 1px solid var(--zl-gold);
border-radius: 2rem;
padding: .6rem 1.25rem;
font-weight: 500;
text-decoration: none;
transition:
background-color .2s ease,
color .2s ease,
box-shadow .2s ease,
transform .12s ease;
}
.zl-btn-back-article:hover,
.zl-btn-back-article:focus{
background: color-mix(in srgb, var(--zl-gold) 12%, transparent);
color: var(--zl-gold);
box-shadow: 0 2px 6px rgba(0,0,0,.08);
transform: translateY(-1px);
}
.zl-btn-back-article:active{
background: color-mix(in srgb, var(--zl-gold) 18%, transparent);
transform: translateY(0);
}
/* === ZL: Fix hover-contrast voor secundaire terugknop === */
a.zl-btn-back-article,
a.zl-btn-back-article:hover,
a.zl-btn-back-article:focus,
a.zl-btn-back-article:active{
color: var(--zl-gold) !important;
text-decoration: none;
}
/* Hover-achtergrond subtiel, geen wit-op-licht */
a.zl-btn-back-article:hover,
a.zl-btn-back-article:focus{
background-color: color-mix(in srgb, var(--zl-gold) 14%, transparent);
border-color: var(--zl-gold);
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
/* Active state iets sterker, maar nog steeds leesbaar */
a.zl-btn-back-article:active{
background-color: color-mix(in srgb, var(--zl-gold) 22%, transparent);
}
/* ZL CTA Tabs: zorg dat de bovenrand van de actieve registratietab zichtbaar blijft */
.zl-cta-box [data-rlta-element="button-list"] >
div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[data-rlta-state="open"],
.zl-cta-box [data-rlta-element="button-list"] >
div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[aria-selected="true"]{
border-top: 2px solid var(--zl-gold) !important; /* <- bovenrand expliciet */
border-left-color: var(--zl-gold) !important;
border-right-color: var(--zl-gold) !important;
border-bottom: none !important; /* tab blijft 'open' naar panel toe */
box-shadow: none !important; /* voorkom dat inset-shadow optisch verstoort */
}
/* optioneel: heel subtiele top highlight (geeft 'kaartje' effect) */
.zl-cta-box [data-rlta-element="button-list"] >
div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[data-rlta-state="open"]{
background-color: #fdf8f1 !important;
}
@media (max-width: 575.98px) and (orientation: portrait) {
:where(.osm-inline-signup, #osm-signup-page) form
{ padding: 15px 0 15px 0; }
[data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=panel] {
padding: 15px 1.25em;
}
#mod-custom164 [data-rlta-element=container][data-rlta-state=ready][data-rlta-type=accordions] > [data-rlta-element=panel] {
padding: 15px 5px;
}
#mod-custom164 .osm-container form {
margin: 5px 0px 5px 0px !important;
border:none;
}
#mod-custom164 .row>*
{
padding-right: calc(var(--bs-gutter-x) * .1);
padding-left: calc(var(--bs-gutter-x) * .1);
}
#mod-custom164 .row {
margin-right: calc(-.1 * var(--bs-gutter-x));
margin-left: calc(-.1 * var(--bs-gutter-x));
}
}
[data-bs-theme="light"] .zl-cta-box, [data-bs-theme="light"] .acym_module.zl-cta-box
{
background: #FFF !important;
color: #000 !important;
}
[data-bs-theme="dark"] .list-group-item, [data-bs-theme="dark"] [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=panels]>[data-rlta-element=panel],
[data-bs-theme="dark"] .zl-cta-box [data-rlta-element="button-list"] > div[role="tab"][data-rlta-element="button"].zl-cta-tab-registrieren[data-rlta-state="open"]
{
background-color: color-mix(in srgb,var(--sp-section-bg) 96%,#000 4%)!important;
}
[data-bs-theme="light"] .list-group-item
{
background-color: var(--bs-list-group-bg);
}
[data-bs-theme="dark"] [data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=tabs]>[data-rlta-element=button-list]>[data-rlta-element=button]
{
background-color: color-mix(in srgb,var(--sp-section-bg) 96%,#000 4%)!important;
}
[data-bs-theme="light"] input:-internal-autofill-selected
{
background-color: #edf7ff !important;
}
/* === ZL Filter Hint – zonder border === */
.zl-filter-hint{
display: flex;
align-items: flex-start;
gap: .5rem;
padding: .5rem .6rem;
margin: .75rem .5rem .25rem;
font-size: .85rem;
line-height: 1.45;
color: var(--zl-grayblue);
background: color-mix(in srgb, var(--zl-gold) 4%, #ffffff 96%);
border: none;
border-radius: .4rem;
}
/* info-icoon rustig */
.zl-filter-hint__icon{
font-size: .9rem;
color: var(--zl-gold);
margin-top: .1rem;
opacity: .8;
}
/* tekst */
.zl-filter-hint__text{
font-weight: 400;
}
[data-bs-theme="dark"] .zl-filter-hint{
background: var(--sp-section-bg);
}
/* === ZL search meta links naast zoekmodule === */
#sp-top2 .sp-column{
display: flex;
align-items: center; /* verticale uitlijning */
justify-content: flex-end; /* geheel rechts houden */
gap: .75rem; /* ruimte tussen tekst en zoekveld */
}
/* tekst links */
#sp-top2 .zl-search-meta{
font-size: .9rem;
line-height: 1.2;
color: var(--zl-grayblue);
white-space: nowrap; /* één regel */
opacity: .9;
}
/* zoekmodule zelf */
#sp-top2 .mod-finder{
flex: 0 0 auto;
}
/* === Tablet & mobiel: weer boven elkaar === */
@media (max-width: 992px){
#sp-top2 .sp-column{
flex-direction: column;
align-items: stretch;
gap: .25rem;
}
#sp-top2 .zl-search-meta{
white-space: normal;
text-align: center;
}
}
#sp-top2 .zl-search-meta strong{
color: var(--zl-gold);
font-weight: 600;
}
[data-bs-theme="dark"] #sp-page-builder h3.zl-topic-card__title,
[data-bs-theme="dark"] #sp-page-builder p.zl-topic-card__text
{
color: #000 !important;
}
[data-bs-theme="dark"] #sp-page-builder span.zl-topic-card__cta
{
color: var(--zl-gold)!important;
}
.zl-article-count {
margin: 1.25rem 0 0.75rem;
font-weight: 500;
color: var(--sp-heading-color);
}
.zl-article-count strong {
color: var(--zl-gold);
}
/* === ZL HERO TYPOGRAFIE – RUST & BALANS === */
/* Hoofdkop */
.zl-hero-title{
font-size: clamp(2rem, 3.2vw, 2.6rem);
line-height: 1.25;
font-weight: 600;
margin-bottom: 1rem;
color: var(--sp-heading-color);
}
/* Intro-tekst: één gewicht, geen trucjes */
.zl-hero-intro{
font-size: 1.15rem;
line-height: 1.65;
font-weight: 400;
margin-bottom: 1.25rem;
color: var(--sp-text);
}
/* Artikel-aantal: subtiel accent */
.zl-hero-meta{
font-size: 1.15rem;
line-height: 1.65;
margin-bottom: 1.25rem;
}
.zl-hero-meta strong{
font-weight: 600;
color: var(--zl-gold);
}
/* Welkom-zin: klein en warm, niet dominant */
.zl-hero-welcome{
font-size: 1.15rem;
font-weight: 600;
color: var(--sp-text);
margin-top: .5rem;
}
/* Drop caps expliciet UIT */
.zl-hero-intro::first-letter{
all: unset;
}
/* === ZL – Mitglied werden: Schritte & Vorteile === */
.zl-membership-steps {
max-width: 760px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
color: var(--sp-text);
}
/* Koppen */
.zl-membership-steps h2 {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--sp-heading-color);
}
.zl-membership-steps h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 2.5rem 0 1rem;
color: var(--sp-heading-color);
}
/* Intro-tekst */
.zl-membership-steps p {
font-size: 1.05rem;
line-height: 1.65;
margin-bottom: 1.25rem;
}
/* Stappenlijst */
.zl-steps {
list-style: none;
padding: 0;
margin: 1.75rem 0 2.5rem;
counter-reset: zl-step;
}
.zl-steps li {
counter-increment: zl-step;
position: relative;
padding-left: 3rem;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.zl-steps li::before {
content: counter(zl-step);
position: absolute;
left: 0;
top: 0.15rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--zl-gold);
color: #fff;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
}
/* Voordelenlijst */
.zl-benefits {
list-style: none;
padding: 0;
margin: 1.5rem 0 2rem;
}
.zl-benefits li {
position: relative;
padding-left: 1.75rem;
margin-bottom: 0.4rem;
line-height: 1.6;
}
.zl-benefits li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
font-size: 3rem;
line-height: 0.6;
color: var(--zl-gold);
}
/* Hulp-opmerking */
.zl-help-note {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--sp-border-color);
font-size: 0.95rem;
color: var(--zl-grayblue);
}
/* Mobiel iets compacter */
@media (max-width: 576px) {
.zl-membership-steps {
padding: 2rem 1rem;
}
.zl-membership-steps h2 {
font-size: 1.4rem;
}
}
/* === ZL FAQ (ruhig, großes Klickziel, barrierearm) === */
.zl-faq{
max-width: 900px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
color: var(--sp-text);
}
.zl-faq h2{
font-size: 1.7rem;
line-height: 1.25;
font-weight: 650;
margin: 0 0 .75rem;
color: var(--sp-heading-color);
}
.zl-faq-intro{
margin: 0 0 1.5rem;
font-size: 1.05rem;
line-height: 1.65;
color: var(--zl-grayblue);
}
.zl-faq-list{
display: grid;
gap: .85rem;
}
/* Card */
.zl-faq-item{
border: 1px solid var(--sp-border-color);
border-radius: 16px;
background: #fff;
box-shadow: 0 1px 10px rgba(0,0,0,.04);
overflow: hidden;
}
/* Summary = groot klikvlak */
.zl-faq-item > summary{
list-style: none;
cursor: pointer;
padding: 1.05rem 1.1rem 1.05rem 3.1rem; /* groot klikvlak */
font-weight: 650;
color: var(--sp-heading-color);
position: relative;
user-select: none;
line-height: 1.35;
}
/* Remove default marker */
.zl-faq-item > summary::-webkit-details-marker{ display: none; }
/* Plus/minus (rustig) */
.zl-faq-item > summary::before{
content: "+";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
display: grid;
place-items: center;
background: #fffaf3;
border: 1px solid color-mix(in srgb, var(--zl-gold) 35%, var(--sp-border-color) 65%);
color: var(--zl-gold);
font-weight: 800;
line-height: 1;
}
.zl-faq-item[open] > summary::before{
content: "–";
}
/* Subtiele hover (geen “knipperen”) */
.zl-faq-item > summary:hover{
background: color-mix(in srgb, #fffaf3 55%, #ffffff 45%);
}
/* Focus ring voor toetsenbord */
.zl-faq-item > summary:focus{ outline: none; }
.zl-faq-item > summary:focus-visible{
outline: 3px solid color-mix(in srgb, var(--zl-gold) 28%, transparent 72%);
outline-offset: 2px;
border-radius: 14px;
}
/* Content */
.zl-faq-content{
padding: 1.1rem 1.1rem 1.1rem 3.1rem;
font-size: 1.02rem;
line-height: 1.65;
color: var(--sp-text);
}
.zl-faq-content p{
margin: .35rem 0 0;
}
.zl-faq-link{
margin-top: .75rem;
}
/* Links iets rustiger dan standaard */
.zl-faq a{
color: var(--zl-link);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.zl-faq a:hover{
color: var(--zl-link-hover);
}
/* Outro */
.zl-faq-outro{
margin: 1.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--sp-border-color);
font-size: 1rem;
line-height: 1.65;
color: var(--zl-grayblue);
}
/* Mobiel */
@media (max-width: 576px){
.zl-faq{ padding: 2rem 1rem; }
.zl-faq-item > summary{ padding-left: 2.85rem; }
.zl-faq-content{ padding-left: 2.85rem; }
.zl-faq-item > summary::before{ left: .85rem; }
}
[data-bs-theme="dark"] .zl-faq-item > summary, [data-bs-theme="dark"] .zl-faq-item > summary:hover
{
background: #000;
}
[data-bs-theme="dark"] .zl-faq-content
{
background: var(--bs-gray-900);
}
#mitglied-werden {
padding-top: 20px;
}
.zl-meta-note {
font-size: 1rem;
margin-top: .5rem;
color: var(--sp-text);
font-weight: 500;
}
.zl-meta-note strong {
font-weight: 600;
}
@media (max-width: 575.98px) and (orientation: portrait) {
.com-finder>*+*, .com-finder__results>*+* {
margin-top: 0.2em;
}
#sp-right .sp-module.jfilters-rubriken, #sp-right .sp-module.jfilters-geraete {
margin-top: 20px !important;
}
}
/* === mod_zl_related — ZeitloSen premium (no-underline, strong card hover) === */
.zl-related{
margin: 0 0 1.25rem 0;
color: var(--sp-text);
}
.zl-related__title{
margin: 50px 0 30px 10px;
line-height: 1.25;
color: var(--sp-heading-color);
font-weight: 800;
font-size: clamp(1.05rem, 1vw + .9rem, 1.25rem);
}
/* ✅ echte marge tussen titel en links (zet op body wrapper) */
.zl-related__body{
margin-top: .85rem;
}
.zl-related__list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap: 12px;
grid-template-columns: 1fr;
}
@media (min-width: 576px){
.zl-related__list{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.zl-related__item{ margin:0; }
/* Card */
.zl-related__link{
display:flex;
align-items:center;
justify-content:space-between;
gap:.75rem;
padding: .75rem 1rem;
border-radius: var(--zl-radius-xl, .75rem);
background: var(--zl-card-bg, var(--sp-section-bg));
border: 1px solid var(--zl-card-border, var(--sp-border-color));
box-shadow: var(--zl-shadow, 0 2px 12px rgba(0,0,0,.08));
color: var(--zl-link);
text-decoration: none; /* ✅ geen underline */
font-weight: 700;
line-height: 1.25;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
will-change: transform;
}
[data-bs-theme="light"] .zl-related__link{
background: var(--zl-card-bg, var(--sp-section-bg));
}
.zl-related__name{
min-width:0;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden;
text-overflow: ellipsis;
}
.zl-related__footer{
margin: 20px 0 40px 10px;
}
/* ✅ sterke hover op de HELE kaart, geen underline */
@media (hover: hover) and (pointer: fine){
.zl-related__link:hover,
.zl-related__link:focus-visible{
background: color-mix(in srgb, var(--sp-primary) 12%, var(--zl-card-bg));
border-color: color-mix(in srgb, var(--sp-primary) 45%, var(--zl-card-border));
box-shadow: 0 10px 28px rgba(0,0,0,.14);
transform: translateY(-2px);
outline: none;
color: var(--zl-link-hover);
}
}
.zl-related__link:active{
transform: translateY(0);
}
/* Chevron */
.zl-related__chev{
flex:0 0 auto;
opacity: .7;
font-size: 1.2rem;
line-height: 1;
}
/* Mobile compacter */
@media (max-width: 575.98px){
.zl-related__body{ margin-top: .75rem; }
.zl-related__link{
padding: .7rem .9rem;
border-radius: .65rem;
}
.zl-related__name{
-webkit-line-clamp: 3;
}
}
.zl-dossier-box{
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:12px;
padding:14px 16px;
margin:16px 0;
font-size:.98rem;
}
#zl-dossiers .zl-faq
{
max-width: none;
}
.zl-dossiers {
margin: 1rem 0;
}
.zl-dossiers__list {
margin: 0;
padding-left: 1.25rem;
}
.zl-dossiers__item + .zl-dossiers__item {
margin-top: 0.25rem;
}
.zl-dossiers__link {
text-decoration: none;
}
.zl-dossiers__link:hover,
.zl-dossiers__link:focus {
text-decoration: underline;
}
.zl-dossiers--debug {
white-space: normal;
}
.zl-dossiers__debug-line {
margin-top: 0.25rem;
}
@media (max-width: 575.98px) and (orientation: portrait) {
#zl-dossiers h1, #zl-dossiers h2 { text-align:center; }
[id^="kat-"] {
scroll-margin-top: 115px;
}
}
[id^="kat-"] {
scroll-margin-top: 95px;
}
.blogzl-wegweiser .category-desc.clearfix {
display: grid;
grid-template-columns: 1fr 300px;
gap: 28px;
align-items: normal;
padding: 30px 26px;
margin-top:20px;
background:none;
}
.blogzl-wegweiser .category-desc.clearfix > .zl-category-intro-text {
grid-column: 1;
grid-row: 1;
max-width: 680px;
font-size: 1.25rem;
line-height: 1.50;
}
.blogzl-wegweiser .category-desc.clearfix > img {
grid-column: 2;
grid-row: 1;
width: 100%;
max-width: 275px;
height: auto;
border-radius: 14px;
justify-self: center;
margin: 25px 20px 0px 20px;
}
.blogzl-wegweiser .category-desc.clearfix > .zl-category-intro-text p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.blogzl-wegweiser .category-desc.clearfix {
display: block;
padding: 18px;
border:none;
margin-top:0px;
}
.blogzl-wegweiser .category-desc.clearfix > img {
display:none;
}
.blogzl-wegweiser .category-desc.clearfix > .zl-category-intro-text {
margin-left: 10px;
margin-right: 10px;
}
}
.tags a {
background: #f3f3f3;
border: 1px solid #ddd;
border-radius: 999px;
padding: 6px 14px;
}
/* =========================================================
Joomla category list cards
========================================================= */
/* =========================================================
Joomla category list cards
========================================================= */
/* =========================================================
Joomla category list cards
========================================================= */
.categories-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.categories-list .category {
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-radius: 14px;
padding: 20px;
transition: all 0.2s ease;
}
.categories-list .category:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.categories-list .category h3,
.categories-list .category-title {
color: var(--zl-primary, #c7963c);
font-size: 1.35rem;
margin-bottom: 12px;
}
.categories-list .category p {
margin: 0;
line-height: 1.6;
}
/* =========================================================
ZeitloSen Wegweiser overview grid
========================================================= */
/* De grid moet onder eventuele intro-floats beginnen */
.category-desc > .zl-wegweiser-grid,
.zl-wegweiser-grid {
clear: both;
width: 100%;
max-width: none;
}
/* 4 kaarten over de volledige beschikbare breedte */
.zl-wegweiser-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin-top: 32px;
align-items: stretch;
}
/* Kaart volledig klikbaar en even hoog */
.zl-wegweiser-card {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
padding: 18px;
border: 1px solid #ddd6c8;
border-radius: 14px;
background: #f7f8fb;
text-decoration: none;
color: inherit;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.zl-wegweiser-card:visited,
.zl-wegweiser-card:hover,
.zl-wegweiser-card:focus {
text-decoration: none;
color: inherit;
}
.zl-wegweiser-card:hover,
.zl-wegweiser-card:focus {
background: #fff7e6;
border-color: #d8b46a;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.zl-wegweiser-card img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 12px;
margin-bottom: 14px;
}
.zl-wegweiser-card h2 {
font-size: 1.15rem;
line-height: 1.25;
margin: 0 0 8px;
color: #9b6427;
text-decoration: none;
}
.zl-wegweiser-card p {
margin: 0;
font-size: 0.96rem;
line-height: 1.5;
color: #222;
text-decoration: none;
}
.zl-wegweiser-card p:last-child {
flex-grow: 1;
}
/* Tablet */
@media (max-width: 991px) {
.zl-wegweiser-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobiel */
@media (max-width: 575px) {
.article-details.zl-wegweiser
{
margin: 1.5rem;
}
.zl-wegweiser-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.zl-wegweiser-card {
padding: 16px;
}
}
.zl-wegweiser .article-list .article {
background: #ffffff;
border: 1px solid #ead9b5;
border-radius: 14px;
padding: 1.35rem 1.45rem;
margin: 1rem 1.4rem;
transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.zl-wegweiser .article-list .article:hover {
background: #fdf8f1;
border-color: #dcc28b;
box-shadow: 0 4px 14px rgba(90, 65, 25, 0.08);
}
.zl-wegweiser .article-list .article a::after {
content: none !important;
}
.zl-wegweiser .article-list .article .article-header h2 {
margin: 0 0 0.7rem 0;
font-size: 1.25rem;
line-height: 1.3;
}
.zl-wegweiser .article-list .article .article-header h2 a {
color: #222;
text-decoration: none;
border-bottom: 2px solid #d6a94a;
}
.zl-wegweiser .article-list .article .article-header h2 a:hover {
color: #7a5514;
border-bottom-color: #a87818;
}
.zl-wegweiser .article-list .article .tags {
margin: 0 0 1rem 0;
padding: 0;
}
.zl-wegweiser .article-list .article .tags li {
margin: 0 0.35rem 0.4rem 0;
}
.zl-wegweiser .article-list .article .tags a {
display: inline-block;
padding: 0.22rem 0.7rem;
border: 1px solid #d8c08a;
border-radius: 999px;
background: #fffdf7;
color: #25303a;
font-size: 0.85rem;
line-height: 1.2;
text-decoration: none;
}
.zl-wegweiser .article-list .article .tags a:hover {
background: #ead39b;
border-color: #c79f4f;
color: #111;
}
.zl-wegweiser .article-list .article .article-introtext p {
margin-bottom: 0.75rem;
line-height: 1.55;
}
.zl-wegweiser .article-list .article .article-info {
margin-top: 0.8rem;
font-size: 0.85rem;
opacity: 0.82;
}
.zl-wegweiser .article-list .article .readmore {
margin-top: 0.9rem;
}
.zl-wegweiser .article-list .article .readmore a {
display: inline-block;
font-weight: 600;
color: #6f4b12;
text-decoration: none;
border-bottom: 2px solid #d6a94a;
}
.zl-wegweiser .article-list .article .readmore a:hover {
color: #3f2a08;
border-bottom-color: #9f7117;
}
/* =========================================================
ZeitloSen - Joomla tagpagina's
Voor pagina's zoals /tags-list/pflege
Scope: com_tags tag-category
========================================================= */
/* Hoofdcontainer tagpagina */
.com-tags-tag.tag-category {
max-width: 980px;
margin: 0 auto;
}
/* Eventuele lege tag-description neutraliseren */
.com-tags-tag.tag-category .com-tags-tag__description.category-desc:empty {
display: none;
}
/* =========================================================
Filterblok
========================================================= */
.com-tags-tag.tag-category .com-tags-tags__filter {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: stretch;
margin: 1.2rem 0 1.4rem;
padding: 1rem;
background: #fff7e6;
border: 1px solid #ead9b5;
border-radius: 14px;
}
/* Zoekveld */
.com-tags-tag.tag-category .com-tags-tags__filter input[type="text"] {
min-width: 240px;
flex: 1 1 260px;
height: 42px;
padding: 0.55rem 0.8rem;
border: 1px solid #d8c08a;
border-radius: 10px;
background: #fffdf7;
color: #222;
font-size: 0.95rem;
}
/* Focus zoekveld */
.com-tags-tag.tag-category .com-tags-tags__filter input[type="text"]:focus {
outline: none;
border-color: #c79f4f;
box-shadow: 0 0 0 3px rgba(199, 159, 79, 0.18);
}
/* Knoppen algemeen */
.com-tags-tag.tag-category .com-tags-tags__filter .btn {
height: 42px;
padding: 0.55rem 1rem;
border-radius: 10px;
border: 1px solid #c79f4f;
font-weight: 600;
line-height: 1.2;
box-shadow: none;
}
/* Filterknop */
.com-tags-tag.tag-category .com-tags-tags__filter .btn-primary {
background: #d6a94a;
color: #111;
border-color: #c79f4f;
}
/* Hover/focus filterknop */
.com-tags-tag.tag-category .com-tags-tags__filter .btn-primary:hover,
.com-tags-tag.tag-category .com-tags-tags__filter .btn-primary:focus {
background: #bd8f2d;
border-color: #a87818;
color: #fff;
}
/* Zurücksetzen-knop */
.com-tags-tag.tag-category .com-tags-tags__filter .btn-secondary {
background: #f5efe2;
color: #333;
border-color: #d8c08a;
}
/* Hover/focus Zurücksetzen-knop */
.com-tags-tag.tag-category .com-tags-tags__filter .btn-secondary:hover,
.com-tags-tag.tag-category .com-tags-tags__filter .btn-secondary:focus {
background: #ead39b;
color: #111;
border-color: #c79f4f;
}
/* Honeypot veld verbergen als Joomla/plugin dit zichtbaar rendert */
.com-tags-tag.tag-category form input[name="my_address"] {
display: none !important;
}
/* =========================================================
Resultatenlijst tagpagina
========================================================= */
/* Lijst reset */
.com-tags-tag.tag-category .com-tags-tag__category {
display: grid;
gap: 1rem;
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
/* Resultaattegel */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item {
position: relative;
min-height: 76px;
padding: 0;
background: #ffffff !important;
border: 1px solid #ead9b5 !important;
border-radius: 14px;
list-style: none;
cursor: pointer;
overflow: hidden;
color: inherit !important;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
/* Bootstrap list-group defaults neutraliseren binnen tagpagina */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item.list-group-item-action {
width: 100%;
color: inherit !important;
text-align: inherit;
background-color: #ffffff !important;
}
/* Bootstrap grijze hover expliciet onderdrukken */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item-action:hover,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item-action:focus,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item-action:active {
background-color: #fdf8f1 !important;
color: inherit !important;
}
/* Hover/focus resultaattegel: donkerder goud */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item:hover,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item:focus-within {
background: #fdf8f1 !important;
border-color: #dcc28b !important;
box-shadow: 0 4px 14px rgba(90, 65, 25, 0.08);
}
/* Titel reset */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 {
margin: 0;
font-size: 1.25rem;
line-height: 1.35;
font-weight: 600;
}
/* De echte link vult de hele tegel */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
padding: 1.15rem 1.25rem;
color: #6f4b12 !important;
text-decoration: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
}
/* Geen pseudo-overlay en geen extra underline */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a::after,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a::before {
content: none !important;
display: none !important;
}
/* Hover/focus linkkleur */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item:hover h3 a,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item:focus-within h3 a,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a:hover,
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a:focus {
color: #3f2a08 !important;
text-decoration: none !important;
background: transparent !important;
background-image: none !important;
}
/* Focus zichtbaar houden voor toetsenbordgebruik */
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a:focus-visible {
outline: 3px solid rgba(199, 159, 79, 0.45);
outline-offset: -4px;
border-radius: 12px;
}
/* =========================================================
Mobiel
========================================================= */
@media (max-width: 640px) {
.com-tags-tag.tag-category {
max-width: 100%;
}
.com-tags-tag.tag-category .com-tags-tags__filter {
padding: 0.85rem;
}
.com-tags-tag.tag-category .com-tags-tags__filter input[type="text"] {
flex-basis: 100%;
min-width: 0;
width: 100%;
}
.com-tags-tag.tag-category .com-tags-tags__filter .btn {
flex: 1 1 auto;
}
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item {
min-height: 72px;
}
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 {
font-size: 1.1rem;
}
.com-tags-tag.tag-category .com-tags-tag__category .list-group-item h3 a {
padding: 1rem;
}
}
.com-tags-tag.tag-category .com-tags-tag__description.category-desc {
display: none;
}
/* =========================================================
FIX: Wegweiser grid over volledige breedte binnen category-desc
Werkt bij Joomla/Helix layouts met grid, flex of float
========================================================= */
.category-desc > .zl-wegweiser-grid {
grid-column: 1 / -1 !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
clear: both !important;
}
/* Als category-desc als CSS grid werkt */
.category-desc.clearfix > .zl-wegweiser-grid {
grid-column: 1 / -1 !important;
}
/* Als category-desc als flex werkt */
.category-desc.clearfix {
flex-wrap: wrap;
}
/* Wegweiser grid zelf */
.category-desc > .zl-wegweiser-grid.zl-wegweiser-grid,
.zl-wegweiser-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px;
margin-top: 32px;
align-items: stretch;
}
/* Kaarten even hoog */
.zl-wegweiser-card {
display: flex;
flex-direction: column;
height: 100%;
min-width: 0;
padding: 18px;
border: 1px solid #ddd6c8;
border-radius: 14px;
background: #f7f8fb;
text-decoration: none;
color: inherit;
transition:
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.zl-wegweiser-card:hover,
.zl-wegweiser-card:focus,
.zl-wegweiser-card:visited {
text-decoration: none;
color: inherit;
}
.zl-wegweiser-card:hover,
.zl-wegweiser-card:focus {
background: #fff7e6;
border-color: #d8b46a;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.zl-wegweiser-card img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 12px;
margin-bottom: 14px;
}
.zl-wegweiser-card h2 {
font-size: 1.15rem;
line-height: 1.25;
margin: 0 0 8px;
color: #9b6427;
text-decoration: none;
}
.zl-wegweiser-card p {
margin: 0;
font-size: 0.96rem;
line-height: 1.5;
color: #222;
text-decoration: none;
flex-grow: 1;
}
/* Tablet */
@media (max-width: 991px) {
.category-desc > .zl-wegweiser-grid.zl-wegweiser-grid,
.zl-wegweiser-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Mobiel */
@media (max-width: 575px) {
.category-desc > .zl-wegweiser-grid.zl-wegweiser-grid,
.zl-wegweiser-grid {
grid-template-columns: 1fr !important;
gap: 18px;
}
.zl-wegweiser-card img {
display: none;
}
.zl-wegweiser-card {
padding: 16px;
}
}
.zl-wegweiser-suche {
margin-left: 1rem;
}
.float-zl-wegweiser-article-intro-img {
display: none;
}