/** * Globale contentbreedte: standaard volle breedte, optioneel compact (lege containers). * Klasse op : .vitaal-layout-compact = smalle layout (huidige max-widths). * Zonder die klasse = volle breedte. * * Nieuwe pagina's: wrap content in .vitaal-content-shell (of data-vitaal-shell). */ :root { --vitaal-shell-max: none; --vitaal-shell-max-md: none; --vitaal-shell-max-sm: none; --vitaal-shell-pad-x: 1.5rem; } html.vitaal-layout-compact { --vitaal-shell-max: 1400px; --vitaal-shell-max-md: 1200px; --vitaal-shell-max-sm: 960px; } /* Canonieke shell voor huidige én toekomstige pagina's */ .vitaal-content-shell, [data-vitaal-shell] { width: 100%; max-width: var(--vitaal-shell-max); margin-left: auto; margin-right: auto; box-sizing: border-box; } /* * Globale page-shells overschrijven zodat ze de CSS-variabelen volgen. * Compact = begrensd; standaard (geen klasse) = volle breedte. */ .container, .site-header, .xmatrix-wrapper, .xmatrix-container, .xmatrix-center-slogan-wrapper, .cards-section-inner, .cards-header, .roadmap-container, .roadmap-timeline-container, .roadmap-header, .smart-start-container, .strategy-header, .taken-overview-container, .instructie-container, .kennisbank-container, .commissies-container, .verbeterbord-header, .team-filters, .kpi-dashboard-header, .kpi-cards-container, .kpi-analysis-container, .kpi-ideas-container, .kpi-section-container, .kpi-charts-container, .comparison-container, .processen-header, .processen-container, .processen-content, .academie-header, .academie-container, .academie-courses, .section-header-content, .content-section, .course-header, .course-container, .course-content, .lesson-header, .lesson-container, .lesson-content, .vitaal-page-shell, .vitaal-page-wrap, .xmatrix-action-guide-panel { max-width: var(--vitaal-shell-max) !important; } /* Middelbrede shells (voorheen ~1200px) */ .smart-start-container, .strategy-header, .instructie-container, .commissies-container, .lesson-content, .vitaal-page-wrap, .gebruikersbeheer-page .container, body.gebruikersbeheer-page .container { max-width: var(--vitaal-shell-max-md) !important; } /* Compactere shells (voorheen ~960px) — alleen in compact-modus begrensd */ .taken-overview-container { max-width: var(--vitaal-shell-max-sm) !important; } /* Inline page wraps die nog style="max-width:…" gebruiken */ .vitaal-page-wrap { max-width: var(--vitaal-shell-max-md) !important; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Quadrant focus mag meeschalen */ .quadrant-focus-slot .xmatrix-quadrant.quadrant-focused { max-width: var(--vitaal-shell-max) !important; } /* Extra ademruimte aan de randen bij volle breedte */ html:not(.vitaal-layout-compact) .container, html:not(.vitaal-layout-compact) .xmatrix-wrapper, html:not(.vitaal-layout-compact) .site-header, html:not(.vitaal-layout-compact) .vitaal-content-shell, html:not(.vitaal-layout-compact) .vitaal-page-wrap, html:not(.vitaal-layout-compact) .taken-overview-container, html:not(.vitaal-layout-compact) .instructie-container, html:not(.vitaal-layout-compact) .kennisbank-container, html:not(.vitaal-layout-compact) .commissies-container { padding-left: max(var(--vitaal-shell-pad-x), env(safe-area-inset-left, 0px)); padding-right: max(var(--vitaal-shell-pad-x), env(safe-area-inset-right, 0px)); } /* ——— Zwevende toggle (alleen desktop/tablet) ——— */ .vitaal-layout-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 1001; display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; padding: 0; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 14px; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%); color: #fff; cursor: pointer; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32), 0 0 0 1px rgba(15, 23, 42, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .vitaal-layout-toggle:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(15, 23, 42, 0.08); } .vitaal-layout-toggle:focus-visible { outline: 3px solid rgba(14, 165, 233, 0.55); outline-offset: 3px; } .vitaal-layout-toggle-icon { display: inline-flex; width: 1.15rem; height: 1.15rem; align-items: center; justify-content: center; } .vitaal-layout-toggle-icon svg { width: 100%; height: 100%; display: block; } .vitaal-layout-toggle-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } html.vitaal-layout-compact .vitaal-layout-toggle { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); } /* Mobiel: altijd volle breedte, geen layout-toggle */ @media (max-width: 768px) { .vitaal-layout-toggle { display: none !important; } html.vitaal-layout-compact { --vitaal-shell-max: none; --vitaal-shell-max-md: none; --vitaal-shell-max-sm: none; } } /* Print: geen toggle */ @media print { .vitaal-layout-toggle { display: none !important; } }