:root {
/* MindDoc-geinspireerd palet */
--bg: #f4ebe4; /* warm beige-roze achtergrond */
--bg-soft: #f9f2eb; /* iets lichter voor cards */
--bg-cream: #fdf8f2; /* lichtst, voor lichte secties */
--teal-900: #1f4a4a; /* donkerste teal */
--teal-800: #2e5e5e;
--teal-700: #3f7878; /* primair teal */
--teal-600: #5a9090; /* lichtere accent */
--teal-500: #7eb1b1; /* heel licht */
--teal-100: #d8e8e6; /* mint hint */
--coral-700: #c95c3f; /* diepere koraal voor tekst op licht */
--coral-600: #ec7c5f; /* primair koraal */
--coral-500: #f29478; /* lichter */
--coral-100: #fadcc9; /* zacht koraal */
--ink: #2e2e3a; /* donker antraciet voor headings */
--ink-soft: #4a4a55; /* body */
--muted: #6c6c76; /* secundair */
--line: #e4d9cf; /* zachte lijnen */
--white: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
body {
font-family: 'Outfit', system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ───── TYPO ───── */
h1, h2, h3, h4 { font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(36px, 5vw, 56px); }
h2 { font-size: clamp(28px, 3.5vw, 42px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }
p { color: var(--ink-soft); }
/* ───── LAYOUT ───── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
section { padding: 72px 0; position: relative; }
@media (max-width: 720px) { section { padding: 52px 0; } }
/* ───── ORGANISCHE BLOB ACHTERGRONDEN ───── */
.blob-deco {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.6;
}
.blob-1 { top: -80px; right: -120px; width: 480px; height: 480px;
background: radial-gradient(circle at 40% 40%, var(--bg-soft) 0%, transparent 70%);
border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%; }
.blob-2 { bottom: -100px; left: -150px; width: 420px; height: 420px;
background: radial-gradient(circle at 60% 60%, var(--coral-100) 0%, transparent 65%);
border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
opacity: 0.35; }
.container, section > * { position: relative; z-index: 1; }
/* ALIASES voor scan-modal (gebruikt oude var-namen) */
:root {
--cyan-800: var(--teal-800);
--cyan-700: var(--teal-700);
--cyan-50: var(--bg-soft);
--magenta-700: var(--coral-700);
--magenta-600: var(--coral-600);
--magenta-100: var(--coral-100);
--magenta-50: #fef4ef;
}
/* ───── NAV ───── */
.nav {
position: sticky; top: 0; z-index: 50;
background: var(--bg);
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner {
max-width: 1280px; margin: 0 auto; padding: 14px 28px;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.nav-logo { display: flex; align-items: center; gap: 0; }
.nav-logo img { height: 48px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
color: var(--ink-soft); transition: all 0.15s;
}
.nav-links a:hover { background: var(--bg-soft); color: var(--ink); }
.nav-direct {
display: inline-flex; align-items: center;
padding: 9px 14px; border-radius: 999px;
font-size: 14.5px; font-weight: 500;
color: var(--ink-soft); text-decoration: none; transition: all 0.15s;
}
.nav-direct:hover { background: var(--bg-soft); color: var(--ink); }
/* Dropdown structure */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 14px; border-radius: 999px;
background: transparent; border: none; cursor: pointer;
font-family: inherit; font-size: 14.5px; font-weight: 500;
color: var(--ink-soft); transition: all 0.15s;
}
.nav-dropdown-trigger:hover { background: var(--bg-soft); color: var(--ink); }
.nav-dropdown-trigger .nav-caret {
transition: transform 0.2s ease;
color: var(--muted);
}
.nav-dropdown.open .nav-dropdown-trigger {
background: var(--bg-soft); color: var(--ink);
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); color: var(--ink); }
.nav-dropdown-panel {
position: absolute; top: calc(100% + 8px); left: 0;
min-width: 260px;
background: var(--white);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(46, 46, 58, 0.12), 0 2px 8px rgba(46, 46, 58, 0.06);
padding: 8px;
opacity: 0; visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 51;
}
.nav-dropdown.open .nav-dropdown-panel {
opacity: 1; visibility: visible;
transform: translateY(0);
}
.nav-dropdown-item {
display: block; width: 100%;
padding: 12px 14px; border-radius: 10px;
background: transparent; border: none; cursor: pointer;
font-family: inherit; text-align: left;
color: var(--ink); transition: background 0.12s;
text-decoration: none;
}
.nav-dropdown-item:hover { background: var(--bg-soft); }
.nav-dropdown-item strong {
display: block;
font-size: 14.5px; font-weight: 600;
color: var(--ink);
margin-bottom: 2px;
}
.nav-dropdown-item span {
display: block;
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.35;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-lang {
background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.nav-lang:hover { border-color: var(--teal-700); color: var(--teal-700); }
.nav-cta {
background: var(--teal-700); color: var(--bg-cream);
padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
transition: all 0.15s; cursor: pointer; border: none; font-family: inherit;
white-space: nowrap;
}
.nav-cta:hover { background: var(--teal-800); }
.nav-mobile-toggle {
display: none; background: none; border: none; cursor: pointer;
padding: 8px; color: var(--ink); position: relative; z-index: 102;
}
.nav-mobile-toggle .icon-close { display: none; }
body.mobile-menu-open .nav-mobile-toggle .icon-open { display: none; }
body.mobile-menu-open .nav-mobile-toggle .icon-close { display: block; }
@media (max-width: 900px) {
.nav-mobile-toggle { display: flex; }
.nav-lang, .nav-cta { display: none; }
/* Mobile overlay panel */
.nav-links {
position: fixed;
top: 0; left: 0; right: 0;
height: 100vh; height: 100dvh;
background: var(--bg);
padding: 84px 24px 32px;
flex-direction: column;
align-items: stretch;
gap: 0;
overflow-y: auto;
overscroll-behavior: contain;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
body.mobile-menu-open .nav-links {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
body.mobile-menu-open { overflow: hidden; }
/* Dropdowns in mobile: accordion style */
.nav-dropdown { position: static; border-bottom: 1px solid var(--line); }
.nav-dropdown:first-of-type { border-top: 1px solid var(--line); }
.nav-direct {
width: 100%; border-radius: 0;
padding: 18px 4px; font-size: 17px; color: var(--ink);
border-bottom: 1px solid var(--line);
}
.nav-direct:hover { background: transparent; color: var(--ink); }
.nav-dropdown-trigger {
width: 100%;
justify-content: space-between;
padding: 18px 4px;
border-radius: 0;
font-size: 17px;
color: var(--ink);
}
.nav-dropdown-trigger:hover,
.nav-dropdown.open .nav-dropdown-trigger {
background: transparent;
color: var(--ink);
}
.nav-dropdown-trigger .nav-caret {
width: 14px; height: 14px;
}
.nav-dropdown-panel {
position: static;
min-width: 0;
box-shadow: none;
background: transparent;
padding: 0 0 12px 4px;
opacity: 1;
visibility: visible;
transform: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease;
display: block;
}
.nav-dropdown.open .nav-dropdown-panel {
max-height: 600px;
}
.nav-dropdown-item {
padding: 14px 12px;
border-radius: 10px;
}
.nav-dropdown-item:hover { background: var(--bg-soft); }
/* CTA en lang knop binnen mobile panel */
.nav-mobile-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.nav-mobile-actions .nav-cta-mobile {
display: block;
width: 100%;
background: var(--teal-700); color: var(--bg-cream);
padding: 16px 22px; border-radius: 999px;
font-size: 16px; font-weight: 600;
text-align: center;
border: none; cursor: pointer; font-family: inherit;
}
.nav-mobile-actions .nav-cta-mobile:hover { background: var(--teal-800); }
.nav-mobile-actions .nav-lang-mobile {
background: transparent; border: 1px solid var(--line);
color: var(--ink-soft);
padding: 12px 22px; border-radius: 999px;
font-size: 14px; font-weight: 500;
cursor: pointer; font-family: inherit;
align-self: center;
}
}
@media (min-width: 901px) {
.nav-mobile-actions { display: none; }
}
/* ───── HERO ───── */
.hero {
padding: 80px 0 100px;
overflow: hidden;
}
.hero-grid {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: 60px; align-items: center;
}
.hero-eyebrow {
font-size: 12px; font-weight: 600; color: var(--coral-700);
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 24px;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--coral-700); }
.hero-text {
font-size: 19px; line-height: 1.55; color: var(--ink-soft);
max-width: 540px; margin-bottom: 36px;
}
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
background: var(--teal-700); color: var(--bg-cream);
padding: 16px 32px; border-radius: 999px; font-weight: 600; font-size: 15px;
transition: all 0.15s; display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; border: none; font-family: inherit;
}
.btn-primary:hover { background: var(--teal-800); transform: translateY(-1px); }
.btn-secondary {
background: transparent; color: var(--ink); padding: 16px 24px;
font-weight: 600; font-size: 15px; cursor: pointer; border: none;
font-family: inherit; display: inline-flex; align-items: center; gap: 8px;
border-bottom: 2px solid var(--teal-700);
border-radius: 0;
transition: color 0.15s;
}
.btn-secondary:hover { color: var(--teal-700); }
.btn-coral {
background: var(--coral-600); color: var(--white);
}
.btn-coral:hover { background: var(--coral-700); }
/* Hero visual: organische cirkel met klaver + drijvende info-blobs */
.hero-visual {
position: relative; min-height: 460px;
display: flex; align-items: center; justify-content: center;
}
.hero-circle {
width: 420px; height: 420px;
background: var(--teal-700);
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
position: relative;
box-shadow: 0 30px 70px -30px rgba(31, 74, 74, 0.4);
}
.hero-circle::before {
content: ""; position: absolute; inset: -16px;
border: 2px dashed var(--teal-500); border-radius: 50%;
opacity: 0.4;
}
.hero-phone {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 200px; height: auto;
filter: drop-shadow(0 20px 40px rgba(15, 30, 35, 0.25));
}
.hero-bubble {
position: absolute;
padding: 18px 22px;
border-radius: 28px;
box-shadow: 0 12px 40px -15px rgba(46, 46, 58, 0.18);
background: var(--white);
display: flex; align-items: center; gap: 14px;
}
.hero-bubble strong { font-size: 15px; font-weight: 600; color: var(--ink); display: block; }
.hero-bubble small { font-size: 12px; color: var(--muted); }
.hero-bubble-1 { top: 28px; right: -10px;
border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; padding: 22px 28px; }
.hero-bubble-2 { bottom: 40px; left: -30px;
border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; padding: 22px 28px; }
.hero-bubble-3 {
bottom: -10px; right: 30px;
background: var(--coral-600); color: var(--white);
border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%;
padding: 18px 26px;
}
.hero-bubble-3 strong { color: var(--white); font-size: 28px; font-weight: 700; }
.hero-bubble-3 small { color: rgba(255,255,255,0.85); font-size: 10px; letter-spacing: 1.2px; }
.hero-bubble-icon {
width: 36px; height: 36px; border-radius: 50%;
background: var(--coral-100); color: var(--coral-700);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hero-bubble-icon svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { min-height: 380px; }
.hero-circle { width: 320px; height: 320px; }
.hero-clover { width: 140px; height: 140px; }
.hero-phone { width: 160px; }
}
/* ───── VIER RAPPORTEN (brug druk → waarom) ───── */
.reports-bridge { scroll-margin-top: 90px; }
.reports-list {
max-width: 940px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.report-row {
display: grid;
grid-template-columns: 44px 1fr minmax(120px, auto);
gap: 22px;
align-items: start;
background: var(--white);
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px 26px;
transition: transform .2s ease, box-shadow .2s ease;
}
.report-row:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31,74,74,0.08); }
.report-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--teal-700);
color: var(--white);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.report-icon svg { width: 20px; height: 20px; }
.report-body { min-width: 0; }
.report-title { font-weight: 700; color: var(--ink); font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.report-body p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.report-source {
font-size: 12px; color: var(--muted);
text-align: right; line-height: 1.5;
padding-top: 3px;
}
.report-source a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.reports-throughline {
max-width: 940px;
margin: 28px auto 0;
padding: 18px 26px;
background: var(--teal-100);
border-radius: 16px;
text-align: center;
font-size: 15px; color: var(--teal-900);
line-height: 1.55;
}
.reports-throughline strong { color: var(--coral-700); }
@media (max-width: 720px) {
.report-row { grid-template-columns: 40px 1fr; padding: 18px 20px; gap: 16px; }
.report-source { grid-column: 1 / -1; text-align: left; padding-top: 4px; }
}
/* ───── WAAROM (twee-koloms tekst+stat) ───── */
.waarom {
background: var(--bg-soft);
border-radius: 40px;
margin: 0 28px;
max-width: 1200px;
margin-left: auto; margin-right: auto;
}
.waarom-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 60px; align-items: center;
}
.waarom-text h2 { margin-bottom: 20px; }
.waarom-text h2 em { font-style: normal; color: var(--coral-700); }
.waarom-text p { font-size: 17px; line-height: 1.65; margin-bottom: 16px; }
.waarom-text p.waarom-sources {
font-size: 12px; color: var(--muted);
line-height: 1.5;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-style: italic;
}
.waarom-stats {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
min-width: 0;
}
.waarom-grid > *, .waarom-stats > *, .science-frameworks > *,
.practice-cards > *, .skills-grid > *, .levels > *, .pressures > *,
.pillars-grid > *, .pro-grid > *, .audiences > *, .process-grid > *,
.gesprek-grid > *, .scan-cards > *, .modules-grid > * { min-width: 0; }
.science-framework h3 { overflow-wrap: break-word; hyphens: auto; }
.stat-card {
background: var(--white); padding: 32px 24px;
border-radius: 24px;
text-align: left;
}
.stat-card .stat-num {
font-size: 44px; font-weight: 700; color: var(--coral-700);
line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em;
}
.stat-card .stat-label {
font-size: 14px; color: var(--ink-soft); line-height: 1.4;
}
.stat-card .stat-source {
font-size: 11px; color: var(--muted); margin-top: 12px;
padding-top: 12px; border-top: 1px solid var(--line);
font-style: italic;
}
.stat-card.teal { background: var(--teal-700); }
.stat-card.teal .stat-num { color: var(--white); }
.stat-card.teal .stat-label { color: rgba(255,255,255,0.85); }
.stat-card.teal .stat-source { color: rgba(255,255,255,0.6); border-top-color: rgba(255,255,255,0.15); }
@media (max-width: 900px) {
.waarom-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* Drukpunten: vier kaartjes onder de waarom-grid */
.pressures {
margin-top: 60px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.pressure {
background: var(--white); padding: 24px 22px;
border-radius: 20px;
border: 1px solid var(--line);
}
.pressure-icon {
width: 40px; height: 40px;
background: var(--coral-100); color: var(--coral-700);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.pressure h4 {
font-size: 15px; font-weight: 700; color: var(--ink);
margin-bottom: 6px; letter-spacing: -0.2px;
}
.pressure p {
font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px 0;
}
.pressure-source {
display: block;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 11px; color: var(--muted);
line-height: 1.45;
letter-spacing: 0.1px;
}
.pressure-source a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
}
.pressure-source a:hover { border-bottom-color: var(--muted); }
@media (max-width: 900px) {
.pressures { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.pressures { grid-template-columns: 1fr; }
}
/* ───── SECTION HEADER (eyebrow + h2 + lead) ───── */
.section-header {
max-width: 720px;
margin: 0 auto 50px;
text-align: center;
}
.section-header.left { text-align: left; margin-left: 0; }
.section-header .eyebrow {
display: inline-block;
font-size: 12px; font-weight: 600;
color: var(--coral-700);
text-transform: uppercase; letter-spacing: 2px;
margin-bottom: 16px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header h2 em { font-style: normal; color: var(--coral-700); }
.section-header .lead { font-size: 17px; color: var(--ink-soft); line-height: 1.6; }
/* ───── PILLARS (4-koloms tegels MindDoc-stijl) ───── */
.pillars-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.pillar-card {
background: var(--teal-700); color: var(--white);
border-radius: 24px;
padding: 28px 26px 32px;
aspect-ratio: 3 / 4;
display: flex; flex-direction: column; justify-content: space-between;
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(31, 74, 74, 0.4); }
.pillar-card.coral { background: var(--coral-600); }
.pillar-card.cream { background: var(--bg-cream); color: var(--ink); }
.pillar-card.dark-teal { background: var(--teal-900); }
.pillar-icon {
width: 64px; height: 64px;
background: rgba(255,255,255,0.15); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.pillar-card.cream .pillar-icon { background: var(--coral-100); }
.pillar-icon svg { width: 30px; height: 30px; color: currentColor; }
.pillar-card h3 {
color: inherit; font-size: 22px; font-weight: 700;
line-height: 1.15; margin-bottom: 8px;
}
.pillar-card.cream h3 { color: var(--ink); }
.pillar-card p {
color: inherit; opacity: 0.9; font-size: 14px; line-height: 1.5;
}
.pillar-card.cream p { color: var(--ink-soft); opacity: 1; }
@media (max-width: 900px) {
.pillars-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.pillars-grid { grid-template-columns: 1fr; }
.pillar-card { aspect-ratio: auto; }
}
/* ───── SCAN-AANBOD (twee grote kaarten) ───── */
.scan-offer {
background: var(--bg-soft);
border-radius: 40px;
margin: 0 auto;
max-width: 1200px;
}
.scan-cards {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px;
}
.scan-card {
background: var(--white);
border-radius: 28px;
padding: 36px 32px;
display: flex; flex-direction: column;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.scan-card.featured { background: var(--teal-700); color: var(--white); }
.scan-card.featured h3, .scan-card.featured .scan-card-meta strong { color: var(--white); }
.scan-card.featured .scan-card-meta { color: rgba(255,255,255,0.85); }
.scan-card.featured p { color: rgba(255,255,255,0.9); }
.scan-card-tag {
align-self: flex-start;
background: var(--coral-100); color: var(--coral-700);
padding: 6px 14px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
margin-bottom: 18px;
}
.scan-card.featured .scan-card-tag {
background: rgba(255,255,255,0.2); color: var(--white);
}
.scan-card h3 { font-size: 26px; margin-bottom: 12px; }
.scan-card p { font-size: 15px; margin-bottom: 24px; flex-grow: 1; }
.scan-card-meta {
display: flex; gap: 22px; margin-bottom: 22px;
font-size: 13px; color: var(--ink-soft);
}
.scan-card-meta strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.scan-card .btn-primary { align-self: flex-start; }
.scan-card.featured .btn-primary { background: var(--coral-600); }
.scan-card.featured .btn-primary:hover { background: var(--coral-700); }
@media (max-width: 720px) {
.scan-cards { grid-template-columns: 1fr; }
}
/* ───── 10 VAARDIGHEDEN (grid) ───── */
.skills-grid {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.skill-card {
background: var(--white);
border-radius: 22px;
padding: 24px 20px;
transition: all 0.2s;
cursor: pointer;
position: relative;
display: flex; flex-direction: column;
}
.skill-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -16px rgba(46, 46, 58, 0.15); }
.skill-icon {
position: absolute; top: 18px; right: 16px;
width: 40px; height: 40px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: var(--teal-700);
background: var(--teal-100);
}
.skill-icon svg { width: 20px; height: 20px; }
.skill-num {
font-size: 11px; font-weight: 700;
color: var(--muted);
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.skill-card h4 {
font-size: 16px; font-weight: 700;
line-height: 1.25; color: var(--ink);
margin-bottom: 8px;
letter-spacing: -0.2px;
padding-right: 48px;
}
.skill-card p {
font-size: 13px; color: var(--ink-soft);
line-height: 1.5; margin-bottom: 12px;
}
.skill-card .skill-domain {
margin-top: auto; align-self: flex-start;
font-size: 9.5px; color: var(--muted);
text-transform: uppercase; letter-spacing: 1px;
font-weight: 700;
padding: 4px 10px; border-radius: 100px;
background: var(--bg-soft);
}
/* Domein-kleuren voor icoon en chip */
.skill-card.emotioneel .skill-icon { background: var(--coral-100); color: var(--coral-700); }
.skill-card.sociaal .skill-icon { background: var(--teal-100); color: var(--teal-700); }
.skill-card.cognitief .skill-icon { background: #e6e0f0; color: #5a4e80; }
.skill-card.emotioneel .skill-domain { background: var(--coral-100); color: var(--coral-700); }
.skill-card.sociaal .skill-domain { background: var(--teal-100); color: var(--teal-900); }
.skill-card.cognitief .skill-domain { background: #e6e0f0; color: #5a4e80; }
@media (max-width: 1000px) {
.skills-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.skills-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.skills-grid { grid-template-columns: 1fr; }
}
/* ───── SKILL DETAIL SECTIE ───── */
.skill-detail {
margin-top: 48px;
background: var(--white);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 12px 40px -20px rgba(46, 46, 58, 0.12);
scroll-margin-top: 100px;
display: none;
position: relative;
}
.skill-detail.visible { display: grid; grid-template-columns: 360px 1fr; }
/* Scroll-offset onder fixed nav voor anchor-links binnen wetenschap */
#raamwerken, #praktijk, #onderzoek, #bronnen {
scroll-margin-top: 100px;
}
/* Linkerkolom: sticky aside */
.skill-detail-aside {
padding: 44px 40px 36px;
background: var(--bg-soft);
position: relative;
display: flex; flex-direction: column;
}
.skill-detail-aside::after {
content: '';
position: absolute;
top: 36px; bottom: 36px; right: 0;
width: 3px;
border-radius: 2px;
background: var(--teal-700);
opacity: 0.5;
}
.skill-detail.emotioneel .skill-detail-aside::after { background: var(--coral-700); }
.skill-detail.sociaal .skill-detail-aside::after { background: var(--teal-700); }
.skill-detail.cognitief .skill-detail-aside::after { background: #5a4e80; }
.skill-detail-icon {
width: 72px; height: 72px;
border-radius: 20px;
display: flex; align-items: center; justify-content: center;
background: var(--teal-100); color: var(--teal-700);
margin-bottom: 20px;
}
.skill-detail-icon svg { width: 36px; height: 36px; }
.skill-detail.emotioneel .skill-detail-icon { background: var(--coral-100); color: var(--coral-700); }
.skill-detail.sociaal .skill-detail-icon { background: var(--teal-100); color: var(--teal-700); }
.skill-detail.cognitief .skill-detail-icon { background: #e6e0f0; color: #5a4e80; }
.skill-detail-domain {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.6px;
color: var(--muted);
margin-bottom: 8px;
}
.skill-detail.emotioneel .skill-detail-domain { color: var(--coral-700); }
.skill-detail.sociaal .skill-detail-domain { color: var(--teal-700); }
.skill-detail.cognitief .skill-detail-domain { color: #5a4e80; }
.skill-detail h3 {
font-size: 30px; font-weight: 700;
color: var(--ink);
letter-spacing: -0.6px;
line-height: 1.15;
margin: 0 0 22px 0;
}
.skill-detail-intro {
font-size: 16px; line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 28px 0;
font-weight: 400;
letter-spacing: -0.1px;
}
.skill-detail-intro::first-letter {
color: var(--ink);
font-weight: 600;
}
.skill-detail-close {
position: absolute;
top: 20px; right: 20px;
z-index: 2;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--white);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--ink-soft);
transition: all 0.15s;
padding: 0;
}
.skill-detail-close:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.skill-detail-close svg { width: 14px; height: 14px; }
/* Rechterkolom: secties */
.skill-detail-main {
padding: 44px 48px;
}
.skill-detail-sections {
display: flex; flex-direction: column;
gap: 28px;
}
.skill-detail-section {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
align-items: start;
}
.skill-detail-section-num {
font-size: 13px; font-weight: 700;
color: var(--teal-700);
letter-spacing: 1.2px;
padding-top: 4px;
border-top: 2px solid var(--teal-700);
margin-top: 2px;
}
.skill-detail.emotioneel .skill-detail-section-num {
color: var(--coral-700); border-top-color: var(--coral-700);
}
.skill-detail.sociaal .skill-detail-section-num {
color: var(--teal-700); border-top-color: var(--teal-700);
}
.skill-detail.cognitief .skill-detail-section-num {
color: #5a4e80; border-top-color: #5a4e80;
}
.skill-detail-section h4 {
font-size: 15px; font-weight: 700;
color: var(--ink);
margin: 0 0 8px 0;
letter-spacing: -0.1px;
line-height: 1.3;
}
.skill-detail-section p {
font-size: 14.5px; line-height: 1.65;
color: var(--ink-soft);
margin: 0;
}
@media (max-width: 900px) {
.skill-detail.visible { grid-template-columns: 1fr; }
.skill-detail-aside {
padding: 32px 28px 24px;
}
.skill-detail-aside::after {
top: auto; bottom: 0; right: 28px; left: 28px;
width: auto; height: 3px;
}
.skill-detail-main { padding: 32px 28px; }
.skill-detail h3 { font-size: 24px; }
.skill-detail-icon { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 14px; }
.skill-detail-icon svg { width: 28px; height: 28px; }
.skill-detail-section { grid-template-columns: 36px 1fr; gap: 12px; }
.skill-detail-section-num { font-size: 12px; }
}
/* ───── FOR WHOM (drie doelgroep-kaarten) ───── */
.audiences {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.audience-card {
background: var(--white);
border-radius: 28px;
padding: 36px 28px;
display: flex; flex-direction: column;
transition: all 0.2s;
}
.audience-card:hover { transform: translateY(-3px); }
.audience-icon {
width: 64px; height: 64px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 22px;
background: var(--coral-100); color: var(--coral-700);
}
.audience-card:nth-child(2) .audience-icon { background: var(--teal-100); color: var(--teal-700); }
.audience-card:nth-child(3) .audience-icon { background: #e6e0f0; color: #5a4e80; }
.audience-icon svg { width: 30px; height: 30px; }
.audience-card h3 { margin-bottom: 10px; font-size: 22px; }
.audience-card p { font-size: 15px; margin-bottom: 20px; flex-grow: 1; }
.audience-card .audience-link {
color: var(--teal-700); font-weight: 600; font-size: 14px;
display: inline-flex; align-items: center; gap: 6px;
border-bottom: 2px solid var(--teal-700);
align-self: flex-start; padding-bottom: 2px;
}
@media (max-width: 900px) {
.audiences { grid-template-columns: 1fr; }
}
/* ───── PROCESS (4 stappen) ───── */
.process-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.process-step {
text-align: left;
}
.process-num {
font-size: 13px; color: var(--coral-700); font-weight: 700;
letter-spacing: 2px; margin-bottom: 12px;
}
.process-step h4 {
font-size: 19px; margin-bottom: 8px; font-weight: 700; color: var(--ink);
}
.process-step p { font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) {
.process-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
.process-grid { grid-template-columns: 1fr; }
}
/* ───── FAQ-BLOK ───── */
.faq-block {
background: var(--bg-soft);
border-radius: 24px;
padding: 28px 32px;
display: flex; align-items: center; gap: 24px;
margin-top: 50px;
}
.faq-icon {
width: 56px; height: 56px;
background: var(--coral-100); color: var(--coral-700);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 26px; font-weight: 700;
}
.faq-text { flex-grow: 1; }
.faq-text strong { display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.faq-text p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.faq-block .btn-primary { flex-shrink: 0; }
@media (max-width: 720px) {
.faq-block { flex-direction: column; text-align: center; padding: 24px; }
}
/* ───── GESPREKSSTARTER ───── */
.gesprek {
background: var(--bg-soft);
border-radius: 40px;
margin: 0 auto;
max-width: 1200px;
}
.gesprek-grid {
display: grid; grid-template-columns: 1fr 1.1fr;
gap: 60px; align-items: center;
}
.gesprek-text h2 { margin-bottom: 20px; }
.gesprek-text h2 em { font-style: normal; color: var(--coral-700); }
.gesprek-text p { font-size: 17px; line-height: 1.65; margin-bottom: 16px; }
.gesprek-text p:last-of-type { margin-bottom: 0; }
.gesprek-cards {
display: flex; flex-direction: column; gap: 14px;
}
.gesprek-card {
background: var(--white);
border-radius: 22px;
padding: 22px 24px;
display: flex; align-items: flex-start; gap: 16px;
transition: transform 0.15s;
}
.gesprek-card:hover { transform: translateX(4px); }
.gesprek-card-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--coral-100); color: var(--coral-700);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.gesprek-card-icon svg { width: 22px; height: 22px; }
.gesprek-card:nth-child(2) .gesprek-card-icon { background: var(--teal-100); color: var(--teal-700); }
.gesprek-card:nth-child(3) .gesprek-card-icon { background: #e6e0f0; color: #5a4e80; }
.gesprek-card-body strong {
display: block; font-size: 16px; font-weight: 700;
color: var(--ink); margin-bottom: 4px; letter-spacing: -0.2px;
}
.gesprek-card-body p {
font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin: 0;
}
@media (max-width: 900px) {
.gesprek-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ───── PROFESSIONALS / DASHBOARD ───── */
.pro-section {
background: var(--teal-900);
color: var(--white);
padding: 80px 0;
border-radius: 40px;
margin: 0 auto;
max-width: 1200px;
}
#professionals { padding: 20px 0; }
.pro-section .container { color: var(--white); }
.pro-section .eyebrow { color: rgba(255,255,255,0.7); }
.pro-section h2 { color: var(--white); margin-bottom: 16px; }
.pro-section h2 em { color: var(--coral-500); font-style: normal; }
.pro-section .lead { color: rgba(255,255,255,0.85); }
.pro-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 50px; align-items: center; margin-top: 50px;
}
.pro-text h3 {
font-size: 22px; color: var(--white);
margin-bottom: 20px; letter-spacing: -0.4px;
}
.pro-features {
list-style: none; padding: 0; margin: 0 0 24px 0;
display: flex; flex-direction: column; gap: 10px;
}
.pro-features li {
font-size: 15px; color: rgba(255,255,255,0.9);
padding-left: 26px; position: relative; line-height: 1.5;
}
.pro-features li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 16px; height: 16px;
background: var(--coral-600);
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.pro-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-role {
padding: 6px 14px; border-radius: 99px;
background: rgba(255,255,255,0.1);
font-size: 13px; color: rgba(255,255,255,0.9);
font-weight: 500;
}
/* Dashboard mockup */
.dashboard-mock {
background: var(--white); color: var(--ink);
border-radius: 20px; padding: 24px;
box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.dash-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 18px;
padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.dash-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.dash-meta { font-size: 12px; color: var(--muted); }
.dash-stats {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
margin-bottom: 22px;
}
.dash-stat {
background: var(--bg-soft); border-radius: 12px;
padding: 12px 14px;
}
.dash-stat-label {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--muted); margin-bottom: 4px;
}
.dash-stat-val { font-size: 22px; font-weight: 700; color: var(--teal-900); letter-spacing: -0.5px; }
.dash-bars { display: flex; flex-direction: column; gap: 10px; }
.dash-bar {
display: grid; grid-template-columns: 110px 1fr 40px;
gap: 12px; align-items: center;
}
.dash-bar-label { font-size: 13px; color: var(--ink); }
.dash-bar-track {
height: 8px; background: var(--bg-soft); border-radius: 99px; overflow: hidden;
}
.dash-bar-fill {
height: 100%; background: linear-gradient(90deg, var(--coral-500), var(--coral-600));
border-radius: 99px;
}
.dash-bar-val {
font-size: 13px; font-weight: 700; color: var(--ink-soft);
text-align: right; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
.pro-grid { grid-template-columns: 1fr; gap: 30px; }
.pro-section { border-radius: 24px; padding: 50px 0; }
}
@media (max-width: 560px) {
.dash-bar { grid-template-columns: 80px 1fr 30px; gap: 8px; }
.dash-bar-label { font-size: 12px; }
}
/* Quickscan/Deepscan-uitlegkaarten op de scanpagina */
.scan-uitleg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 44px; }
.su-kaart { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; }
.su-chip {
display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
color: var(--teal-900); background: var(--teal-100); border-radius: 99px; padding: 5px 13px; margin-bottom: 12px;
}
.su-kaart h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.su-kaart p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; }
@media (max-width: 720px) { .scan-uitleg-grid { grid-template-columns: 1fr; } }
/* Dashboard-badge (in ontwikkeling) */
.dash-badge {
display: inline-block; margin: 10px 0 2px;
font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
color: var(--teal-900); background: var(--coral-100);
border-radius: 99px; padding: 6px 16px;
}
/* Rustiger niveau-secties op de Onderwijs-pagina */
.niveau-sectie { padding: 44px 0; }
.niveau-sectie .section-header {
text-align: left; max-width: 1000px; margin: 0 auto 26px;
}
.niveau-sectie .section-header h2 { font-size: 27px; }
.niveau-sectie .section-header .lead { margin-left: 0; max-width: 720px; font-size: 16px; }
.niveau-sectie .eyebrow {
display: inline-block; padding: 5px 13px; border-radius: 99px; margin-bottom: 12px;
}
#vo .eyebrow { background: var(--coral-100); color: var(--coral-700); }
#mbo .eyebrow { background: var(--teal-100); color: var(--teal-900); }
#hbo .eyebrow { background: #e6e0f0; color: #5a4e80; }
.niveau-sectie .levels { max-width: 1000px; justify-content: flex-start; }
.level .module-skills, .level .audience-link { margin-top: auto; }
.level .audience-link { padding-top: 12px; }
.level ul + .module-skills { margin-top: auto; }
.levels {
display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
max-width: 1000px; margin: 0 auto;
}
.level {
flex: 1 1 300px; max-width: 320px;
background: var(--white); padding: 24px 20px;
border-radius: 22px;
display: flex; flex-direction: column;
border-top: 4px solid var(--coral-500);
}
.level.vo { border-top-color: var(--coral-600); }
.level.mbo { border-top-color: var(--teal-600); }
.level.hbo { border-top-color: var(--teal-700); }
.level.prof { border-top-color: var(--ink); }
.level-tag {
display: inline-block;
font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
color: var(--muted); margin-bottom: 12px;
}
.level h3 {
font-size: 19px; font-weight: 700; line-height: 1.2;
color: var(--ink); margin-bottom: 12px; letter-spacing: -0.3px;
}
.level > p {
font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
margin-bottom: 18px;
}
.level h4 {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.6px; color: var(--muted);
margin-bottom: 8px;
}
.level ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.level ul li {
font-size: 13px; color: var(--ink); line-height: 1.4;
padding-left: 14px; position: relative;
}
.level ul li::before {
content: "·"; position: absolute; left: 4px;
color: var(--coral-600); font-weight: 700;
}
@media (max-width: 720px) {
.levels > .level { max-width: none; flex-basis: 100%; }
}
/* ───── MODULES ───── */
#vo, #mbo, #hbo, #downloads { scroll-margin-top: 90px; }
.modules-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
max-width: 1100px; margin: 0 auto;
}
.module-card {
background: var(--white); border-radius: 22px; padding: 24px 22px;
border: 1px solid var(--line); border-top: 4px solid var(--teal-700);
display: flex; flex-direction: column;
}
.module-card.power { border-top-color: var(--coral-600); }
.module-card.slim { border-top-color: var(--teal-600); }
.module-card.reset { border-top-color: var(--teal-800); }
.module-card.dtv { border-top-color: var(--coral-700); }
.module-card.stage { border-top-color: #E0A32E; }
.module-naam { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.2px; margin-bottom: 3px; }
.module-meta {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--coral-700); margin-bottom: 12px;
}
.module-card > p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 16px; }
.module-skills { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.module-skill {
font-size: 11px; font-weight: 600; background: var(--teal-100); color: var(--teal-900);
border-radius: 100px; padding: 4px 10px;
}
.modules-voetnoot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 24px; }
/* ───── TRAININGEN ───── */
.trainings {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.training {
background: var(--white);
border-radius: 22px;
padding: 28px 24px;
display: flex; flex-direction: column;
border: 1px solid var(--line);
position: relative;
transition: transform 0.15s, box-shadow 0.15s;
}
.training:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}
.training.featured {
border-color: var(--coral-600);
box-shadow: 0 10px 24px rgba(236,124,95,0.12);
}
.training-badge {
position: absolute; top: -10px; right: 18px;
background: var(--coral-600); color: var(--white);
padding: 4px 12px; border-radius: 99px;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
}
.training { overflow: hidden; }
.training-ribbon {
position: absolute; left: -12%; right: -12%; top: 42%;
transform: rotate(-6deg);
background: var(--teal-900); color: var(--white);
text-align: center; padding: 10px 0;
font-size: 14px; font-weight: 800; letter-spacing: 1.6px;
text-transform: uppercase;
box-shadow: 0 6px 18px rgba(31,74,74,0.25);
pointer-events: none; z-index: 2;
}
.training-ribbon span { opacity: 0.95; }
.training-level {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.6px; color: var(--coral-700);
margin-bottom: 14px;
}
.training h3 {
font-size: 19px; font-weight: 700; color: var(--ink);
margin-bottom: 10px; letter-spacing: -0.3px;
}
.training-tagline {
font-size: 14px; color: var(--ink-soft); line-height: 1.5;
margin-bottom: 18px;
}
.training-meta {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
padding: 14px; background: var(--bg-soft);
border-radius: 12px; margin-bottom: 18px;
}
.training-meta-item {
display: flex; flex-direction: column; gap: 2px;
}
.training-meta-item small {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
color: var(--muted);
}
.training-meta-item strong {
font-size: 13px; font-weight: 700; color: var(--ink);
}
.training ul {
list-style: none; padding: 0; margin: 0 0 22px 0;
display: flex; flex-direction: column; gap: 6px;
flex: 1;
}
.training ul li {
font-size: 13.5px; color: var(--ink); line-height: 1.4;
padding-left: 18px; position: relative;
}
.training ul li::before {
content: "✓"; position: absolute; left: 0;
color: var(--coral-600); font-weight: 700;
}
.training-foot {
display: flex; justify-content: space-between; align-items: center;
padding-top: 16px; border-top: 1px solid var(--line);
}
.training-price {
font-size: 22px; font-weight: 700; color: var(--ink);
letter-spacing: -0.3px;
}
.training-price small {
font-size: 11px; font-weight: 500; color: var(--muted);
display: block; margin-top: 2px;
}
.training-btn {
padding: 10px 16px; border-radius: 10px;
background: var(--teal-700); color: var(--white);
text-decoration: none; font-size: 13px; font-weight: 600;
transition: background 0.15s;
}
.training-btn:hover { background: var(--teal-900); }
@media (max-width: 900px) {
.trainings { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.trainings { grid-template-columns: 1fr; }
}
/* ───── LES-MODAL ───── */
.les-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(31, 74, 74, 0.5);
display: none; align-items: center; justify-content: center; padding: 24px;
}
.les-overlay.visible { display: flex; }
.les-modal {
background: var(--white); border-radius: 24px; position: relative;
max-width: 980px; width: 100%; max-height: 88vh; overflow: auto;
display: grid; grid-template-columns: 320px 1fr;
box-shadow: 0 24px 60px rgba(46,46,58,0.25);
}
.les-modal-aside {
background: var(--cream); border-radius: 24px 0 0 24px; padding: 44px 34px;
}
.les-modal-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--coral-700); margin-bottom: 14px; }
.les-modal-aside h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; }
.les-modal-aside h3 em { color: var(--coral-700); font-style: normal; }
.les-modal-intro { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }
.les-modal-meta { margin-top: 22px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-700); line-height: 1.7; }
.les-modal-main { padding: 44px 40px; }
.les-modal-section { display: grid; grid-template-columns: 48px 1fr; gap: 18px; margin-bottom: 32px; }
.les-modal-section:last-child { margin-bottom: 0; }
.les-modal-num { font-size: 13px; font-weight: 700; color: var(--coral-700); border-top: 2px solid var(--coral-600); padding-top: 6px; }
.les-modal-section h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.les-modal-section p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.les-dl-rij { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.les-dl-btn {
display: inline-flex; align-items: center; gap: 9px;
background: var(--teal-700); color: var(--white) !important;
border-radius: 100px; padding: 13px 24px;
font-size: 13.5px; font-weight: 600; text-decoration: none;
transition: background .15s;
}
.les-dl-btn:hover { background: var(--teal-900); }
.les-dl-btn.ppt { background: var(--coral-600); }
.les-dl-btn.ppt:hover { background: var(--coral-700); }
.les-dl-btn small { font-weight: 500; opacity: 0.85; }
.les-modal-close {
position: absolute; top: 16px; right: 16px; z-index: 2;
width: 36px; height: 36px; border-radius: 50%;
background: var(--white); border: 1px solid var(--line); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-soft); transition: all .15s;
}
.les-modal-close:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.les-modal-close svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
.les-modal { grid-template-columns: 1fr; }
.les-modal-aside { border-radius: 24px 24px 0 0; padding: 26px 22px; }
.les-modal-main { padding: 24px 22px; }
}
/* ───── IMPLEMENTATIE ───── */
.impl-fasen {
display: flex; align-items: stretch;
margin-bottom: 28px;
}
.impl-fase {
flex: 1 1 0; position: relative; padding: 0 7px;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.impl-fase::before, .impl-fase::after {
content: ""; position: absolute; top: 15px; height: 2px; background: var(--teal-700); opacity: 0.35;
}
.impl-fase::before { left: 0; right: calc(50% + 25px); }
.impl-fase::after { left: calc(50% + 25px); right: 0; }
.impl-fase:first-child::before, .impl-fase:last-child::after { display: none; }
.impl-num {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
background: var(--teal-700); color: var(--white); font-weight: 700; font-size: 14px;
margin-bottom: 14px; position: relative; z-index: 1;
}
.impl-kaart {
background: var(--white); border: 1px solid var(--line); border-radius: 18px;
padding: 16px 14px; flex: 1; width: 100%;
}
.impl-kaart h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.impl-wk { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-700); }
.impl-kaart p { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }
@media (max-width: 900px) {
.impl-fasen { flex-direction: column; gap: 18px; }
.impl-fase { flex-direction: row; align-items: flex-start; text-align: left; padding: 0; }
.impl-fase::before { display: none; }
.impl-fase::after {
left: 15px; right: auto; top: 38px; bottom: -18px; width: 2px; height: auto;
}
.impl-fase:last-child::after { display: none; }
.impl-num { margin: 0 14px 0 0; }
}
/* ───── DOWNLOADS ───── */
.dl-filters {
display: flex; justify-content: center; align-items: flex-end; gap: 22px; flex-wrap: wrap;
margin: 30px 0 52px; padding-top: 34px;
border-top: 1px solid var(--line);
}
.dl-select-wrap {
display: flex; flex-direction: column; gap: 8px;
}
.dl-filter-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted); padding-left: 4px;
}
.dl-select {
font-family: inherit; cursor: pointer;
appearance: none; -webkit-appearance: none;
background: var(--white); border: 1px solid var(--line);
border-radius: 100px; padding: 9px 40px 9px 18px;
font-size: 14px; font-weight: 600; color: var(--ink-soft);
min-width: 170px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f7878' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
transition: border-color .18s ease, box-shadow .18s ease;
}
.dl-select:hover { border-color: var(--teal-600); color: var(--teal-900); }
.dl-select:focus { outline: none; border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-100, #d8e8e6); }
.dl-select.dl-actief { background-color: var(--teal-700); border-color: var(--teal-700); color: var(--white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
.dl-filters { flex-direction: column; align-items: stretch; }
.dl-select { width: 100%; }
}
.download.dl-hidden { display: none; }
/* Zoekveld in de materialen-filterbalk */
.startpakketten { margin: 34px 0 6px; }
.startpakketten h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); }
.sp-lead { font-size: 14px; color: var(--ink-soft); margin: 6px 0 16px; max-width: 640px; }
.sp-kaart {
background: var(--white); border: 1px solid var(--line); border-radius: 18px;
padding: 10px 24px; border-top: 4px solid var(--teal-700); max-width: 720px;
}
.sp-lijst { list-style: none; counter-reset: sp; margin: 2px 0 0; padding: 0; }
.sp-lijst li { counter-increment: sp; border-bottom: 1px solid var(--line); }
.sp-lijst li:last-child { border-bottom: none; }
.sp-lijst li {
display: flex; align-items: center; gap: 12px; padding: 10px 2px;
font-size: 14px; font-weight: 600; color: var(--ink);
}
.sp-lijst li::before {
content: counter(sp);
flex: 0 0 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
background: var(--teal-100); color: var(--teal-900);
}
.sp-naam { flex: 1; }
.sp-niv-tag {
display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
color: var(--teal-900); background: var(--teal-100); border-radius: 100px; padding: 2px 9px;
vertical-align: 1px;
}
.sp-dl {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
font-size: 12.5px; font-weight: 700; color: var(--teal-900);
background: var(--teal-100); border-radius: 100px; padding: 6px 0;
width: 118px; text-decoration: none; white-space: nowrap;
}
.sp-dl:hover { background: var(--coral-100); color: var(--coral-700); }
.sp-pijl { font-size: 12px; }
.sp-keuze {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 12px 2px 10px; border-bottom: 1px solid var(--line);
}
.sp-keuze-lbl {
font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
color: var(--ink-soft); margin-right: 6px;
}
.sp-keuze button {
font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--teal-900);
background: none; border: 1.5px solid var(--line); border-radius: 100px;
padding: 5px 14px; cursor: pointer; white-space: nowrap;
}
.sp-keuze button:hover { border-color: var(--teal-700); }
.sp-keuze button.actief { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }
@media (max-width: 560px) { .sp-keuze-lbl { flex: 1 0 100%; margin: 0; } }
.sp-rij { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.sp-rij .sp-kaart { flex: 1 1 460px; }
.leerling-strook {
flex: 1 1 280px; background: var(--teal-900); border-radius: 18px;
padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
position: relative; overflow: hidden;
}
.leerling-strook::before {
content: ""; position: absolute; right: -70px; top: -70px;
width: 200px; height: 200px; border-radius: 50%; background: rgba(63, 120, 120, 0.45);
}
.leerling-strook::after {
content: ""; position: absolute; left: -50px; bottom: -80px;
width: 160px; height: 160px; border-radius: 50%; background: rgba(236, 124, 95, 0.16);
}
.leerling-strook > div { position: relative; z-index: 1; }
.leerling-strook h3 { font-size: 18px; font-weight: 800; color: var(--white); letter-spacing: -0.2px; }
.leerling-strook p { font-size: 13.5px; color: var(--teal-100); margin-top: 6px; line-height: 1.6; }
.ls-knoppen { display: flex; flex-direction: column; gap: 9px; }
.ls-knoppen a {
display: flex; align-items: center; justify-content: space-between;
font-size: 13.5px; font-weight: 700; border-radius: 12px; padding: 11px 16px;
text-decoration: none; color: var(--white); background: rgba(255, 255, 255, 0.12);
}
.ls-knoppen a::after { content: "\2192"; font-size: 14px; opacity: 0.8; }
.ls-knoppen a:hover { background: rgba(255, 255, 255, 0.22); }
.ls-knoppen a.ls-primair { background: var(--coral-600); }
.ls-knoppen a.ls-primair:hover { background: var(--coral-700); }
.dl-teller { font-size: 13.5px; font-weight: 600; color: var(--teal-700); margin: -36px 0 36px; text-align: center; }
.donker-cta {
background: var(--teal-900); border-radius: 18px; padding: 34px 36px;
display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
position: relative; overflow: hidden;
}
.donker-cta::before {
content: ""; position: absolute; right: -70px; top: -90px;
width: 220px; height: 220px; border-radius: 50%; background: rgba(63, 120, 120, 0.45);
}
.donker-cta::after {
content: ""; position: absolute; left: -60px; bottom: -100px;
width: 180px; height: 180px; border-radius: 50%; background: rgba(236, 124, 95, 0.16);
}
.dc-tekst { position: relative; z-index: 1; flex: 1 1 340px; }
.donker-cta h2 { font-size: 24px; font-weight: 800; color: var(--white); letter-spacing: -0.3px; }
.donker-cta p { font-size: 14.5px; color: var(--teal-100); margin-top: 8px; max-width: 520px; line-height: 1.6; }
.dc-knoppen { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.dc-knoppen a {
font-size: 14px; font-weight: 700; border-radius: 100px; padding: 12px 22px;
text-decoration: none; color: var(--white); background: rgba(255, 255, 255, 0.12); white-space: nowrap;
}
.dc-knoppen a:hover { background: rgba(255, 255, 255, 0.22); }
.dc-knoppen a.dc-primair { background: var(--coral-600); }
.dc-knoppen a.dc-primair:hover { background: var(--coral-700); }
.dl-licentie {
font-size: 13px; color: var(--muted); margin-top: 10px;
}
.dl-zoek-wrap { flex: 1; min-width: 180px; }
.dl-zoek { width: 100%; background-image: none !important; padding-right: 16px; }
.dl-zoek::placeholder { color: var(--muted); }
/* Posterkaarten met twee formaten */
.download.download-duo { cursor: default; }
.download.download-duo:hover { transform: none; }
.dl-formaten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dl-formaten a {
font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 99px;
background: var(--teal-100); color: var(--teal-900); text-decoration: none;
transition: background 0.15s; white-space: nowrap;
}
.dl-formaten a:hover { background: var(--teal-500); color: var(--white); }
.dl-varianten { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dl-variant { display: flex; align-items: center; gap: 8px; }
.dl-var-label { width: 38px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: var(--muted); }
.dl-variant a {
font-size: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: 99px;
background: var(--teal-100); color: var(--teal-900); text-decoration: none; transition: background 0.15s; white-space: nowrap;
}
.dl-variant a:hover { background: var(--teal-500); color: var(--white); }
.dl-groep { margin-bottom: 44px; }
.dl-groep.dl-hidden { display: none; }
.dl-groep-kop {
font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--teal-700); margin: 0 0 18px; padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.downloads {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.download {
background: var(--white);
border-radius: 18px;
padding: 20px;
display: flex; gap: 16px;
border: 1px solid var(--line);
transition: transform 0.15s, border-color 0.15s;
text-decoration: none; color: inherit;
}
/* Gelijke kaarthoogtes: tekst bovenin, meta en knoppen onderin uitgelijnd */
.download > div:last-child {
display: flex; flex-direction: column; flex: 1; min-width: 0;
}
.download > div:last-child p {
flex: 1 0 auto;
}
.download:hover {
transform: translateY(-2px);
border-color: var(--coral-600);
}
.download-icon {
flex: 0 0 48px; height: 48px;
background: var(--coral-100); color: var(--coral-700);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
}
.download-icon svg {
width: 26px; height: 26px;
stroke: var(--coral-700); fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.download h4 {
font-size: 15px; font-weight: 700; color: var(--ink);
margin-bottom: 4px; letter-spacing: -0.2px;
}
.download p {
font-size: 13px; color: var(--ink-soft); line-height: 1.45;
margin-bottom: 8px;
}
.download-meta {
display: flex; gap: 8px; flex-wrap: wrap;
font-size: 11px; color: var(--muted);
}
.download-meta span:not(:last-child)::after {
content: " ·"; margin-left: 4px; color: var(--line);
}
.downloads-cta {
margin-top: 30px; text-align: center;
}
@media (max-width: 900px) {
.downloads { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.downloads { grid-template-columns: 1fr; }
}
.science {
background: var(--bg-soft);
border-radius: 40px;
margin: 0 auto;
max-width: 1200px;
}
.science-frameworks {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 36px;
}
.science-framework {
background: var(--white);
border-radius: 22px;
padding: 26px 22px;
display: flex; flex-direction: column;
}
.science-framework .num {
font-size: 12px; font-weight: 700;
color: var(--coral-700); letter-spacing: 2px;
margin-bottom: 12px;
}
.science-framework h3 {
font-size: 19px; margin-bottom: 6px;
letter-spacing: -0.3px;
}
.science-framework .tag {
display: inline-block;
font-size: 10px; font-weight: 700;
color: var(--teal-700); background: var(--teal-100);
padding: 4px 10px; border-radius: 999px;
letter-spacing: 1px;
margin-bottom: 14px;
align-self: flex-start;
}
.science-framework p {
font-size: 14px; line-height: 1.55; margin-bottom: 12px;
flex-grow: 1;
}
.science-framework .source {
font-size: 11px; color: var(--muted);
font-style: italic;
padding-top: 12px;
border-top: 1px solid var(--line);
line-height: 1.45;
}
.science-framework .source a { color: var(--teal-700); font-style: normal; font-weight: 500; }
.science-framework .source a:hover { text-decoration: underline; }
/* Praktijk-blok: hoe levensvaardigheden in de praktijk worden ingezet */
.practice-block {
background: var(--bg-soft);
border-radius: 28px;
padding: 44px 40px;
margin-bottom: 36px;
}
.practice-block-header {
margin-bottom: 28px;
max-width: 720px;
}
.practice-block-eyebrow {
font-size: 11px; font-weight: 700;
color: var(--coral-700);
letter-spacing: 1.8px;
text-transform: uppercase;
margin-bottom: 10px;
}
.practice-block-header h3 {
font-size: 28px;
letter-spacing: -0.5px;
color: var(--ink);
margin-bottom: 10px;
}
.practice-block-header h3 em {
font-style: normal; color: var(--coral-700);
}
.practice-block-header p {
font-size: 15px; line-height: 1.55;
color: var(--ink-soft);
}
.practice-cards {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.practice-card {
background: var(--white);
border-radius: 20px;
padding: 24px 22px;
display: flex; flex-direction: column;
}
.practice-card .num {
font-size: 12px; font-weight: 700;
color: var(--coral-700); letter-spacing: 2px;
margin-bottom: 10px;
}
.practice-card .tag {
display: inline-block;
font-size: 10px; font-weight: 700;
color: var(--teal-700); background: var(--teal-100);
padding: 4px 10px; border-radius: 999px;
letter-spacing: 1px;
margin-bottom: 12px;
align-self: flex-start;
}
.practice-card h4 {
font-size: 17px; margin-bottom: 6px;
letter-spacing: -0.2px;
color: var(--ink);
}
.practice-card p {
font-size: 13.5px; line-height: 1.5;
color: var(--ink-soft);
margin-bottom: 12px;
flex-grow: 1;
}
.practice-card .source {
font-size: 11px; color: var(--muted);
font-style: italic;
padding-top: 10px;
border-top: 1px solid var(--line);
line-height: 1.45;
}
.practice-card .source a {
color: var(--teal-700); font-style: normal; font-weight: 500;
}
.practice-card .source a:hover { text-decoration: underline; }
/* Evidence-blok */
.science-evidence {
background: #2e2e3a; color: var(--white);
border-radius: 28px;
padding: 50px 44px;
margin-bottom: 36px;
}
.science-evidence h3 {
color: var(--white); font-size: 26px;
text-align: center; margin-bottom: 36px;
max-width: 600px; margin-left: auto; margin-right: auto;
}
.science-evidence h3 em { color: var(--coral-500); font-style: normal; }
/* Insight-blok: kern-inzicht uit Slotboom & Gravesteijn review */
.science-insight {
background: var(--white);
border-radius: 28px;
padding: 44px 48px;
margin-bottom: 36px;
display: grid;
grid-template-columns: 220px 1fr;
gap: 36px;
align-items: start;
}
.science-insight-eyebrow {
font-size: 11px; font-weight: 700;
color: var(--teal-700);
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 14px;
}
.science-insight-head h3 {
font-size: 24px; font-weight: 700;
color: var(--ink);
line-height: 1.2;
letter-spacing: -0.4px;
margin: 0;
}
.science-insight-body p {
font-size: 15px; line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 14px 0;
}
.science-insight-body p:last-of-type { margin-bottom: 0; }
.science-insight-body strong { color: var(--ink); font-weight: 600; }
.science-insight-source {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 12px;
color: var(--muted);
font-style: italic;
}
@media (max-width: 780px) {
.science-insight {
grid-template-columns: 1fr;
gap: 20px;
padding: 32px 28px;
}
.science-insight-head h3 { font-size: 20px; }
}
.science-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.science-stat strong {
font-size: 44px; font-weight: 800;
color: var(--coral-500); line-height: 1;
letter-spacing: -1.5px;
display: block; margin-bottom: 10px;
}
.science-stat span {
font-size: 13px;
color: rgba(255,255,255,0.88); line-height: 1.5;
display: block;
}
.science-stat small {
font-size: 11px; color: rgba(255,255,255,0.55);
line-height: 1.45; margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.15);
display: block; font-style: italic;
}
.science-stat small a { color: rgba(255,255,255,0.85); }
/* Citaat */
.science-quote {
text-align: center;
max-width: 720px;
margin: 0 auto 36px;
padding: 0 20px;
}
.science-quote .mark {
font-size: 64px; line-height: 0.6;
color: var(--coral-600); font-family: Georgia, serif;
margin-bottom: 8px;
}
.science-quote blockquote {
font-size: 20px; font-weight: 500;
color: var(--ink); line-height: 1.45;
letter-spacing: -0.3px;
margin-bottom: 14px;
}
.science-quote cite {
font-style: normal; font-size: 13px; color: var(--muted);
}
/* Bronnenlijst */
/* ───── EFFECT EN METEN (kennisblok) ───── */
.science-effect {
background: var(--white);
border-radius: 28px;
padding: 50px 44px;
margin-bottom: 36px;
scroll-margin-top: 90px;
}
.science-effect h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; }
.science-effect h3 em { color: var(--coral-700); font-style: normal; }
.science-effect h5 {
font-size: 16px; font-weight: 700; color: var(--teal-900);
margin: 26px 0 8px;
}
.science-effect p { font-size: 15px; color: var(--ink-soft); line-height: 1.7; max-width: 860px; }
.science-effect .effect-note { font-size: 13px; color: var(--muted); margin-top: 18px; }
.effect-extra { display: none; }
.effect-extra.visible { display: block; }
.science-references {
background: var(--white);
border-radius: 22px;
padding: 28px 32px;
}
.science-references h4 {
font-size: 13px; font-weight: 700;
color: var(--teal-700); letter-spacing: 1.5px;
text-transform: uppercase; margin-bottom: 18px;
}
.science-ref-groups {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 36px;
}
.science-ref-group h5 {
font-size: 12px; font-weight: 700;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 1.2px;
margin: 0 0 12px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.science-ref-list {
list-style: none;
padding-left: 0; margin: 0;
columns: 2; column-gap: 32px;
}
.science-ref-list li {
font-size: 12px; color: var(--ink-soft);
line-height: 1.55; margin-bottom: 12px;
break-inside: avoid;
}
.science-ref-list li:last-child { margin-bottom: 0; }
.science-ref-list li em { color: var(--ink); font-style: italic; }
.science-ref-list li a {
color: var(--teal-700);
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
}
.science-ref-list li a:hover { border-bottom-color: var(--teal-700); }
/* Praktijk-uitklap: extra voorbeelden onder de 4 hoofdcards */
.practice-extra-block {
margin-top: 28px;
border-top: 1px solid var(--line);
padding-top: 28px;
text-align: center;
}
.practice-extra-intro {
font-size: 14px;
color: var(--muted);
max-width: 640px;
margin: 0 auto 20px;
line-height: 1.55;
}
.practice-extra-content { display: none; text-align: left; }
.practice-extra-content.visible { display: block; }
.practice-extra-category {
margin-top: 28px;
}
.practice-extra-category:first-child { margin-top: 4px; }
.practice-extra-category-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.practice-extra-category-head h4 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
color: var(--ink);
margin: 0;
}
.practice-extra-category-head .count {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.practice-extra-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
.practice-extra-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--surface);
border-radius: 8px;
border: 1px solid var(--line);
}
.practice-extra-item-head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.practice-extra-item-name {
font-weight: 600;
color: var(--ink);
font-size: 14px;
overflow-wrap: anywhere;
}
.practice-extra-item-tag {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--teal-700);
background: rgba(45, 122, 122, 0.08);
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
}
.practice-extra-item-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
.practice-extra-item a {
font-size: 12px;
color: var(--teal-700);
text-decoration: none;
margin-top: 2px;
align-self: flex-start;
}
.practice-extra-item a:hover { text-decoration: underline; }
.practice-extra-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.practice-extra-toggle:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.practice-extra-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.practice-extra-toggle.expanded svg { transform: rotate(180deg); }
/* Uitklap-mechaniek voor lange bronnenlijst */
.science-ref-primary { position: relative; }
.science-ref-primary.has-fade::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 80px;
background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white) 85%);
pointer-events: none;
}
.science-ref-extra {
display: none;
margin-top: 14px;
}
.science-ref-extra.visible { display: block; }
.science-ref-toggle {
margin-top: 22px;
display: inline-flex; align-items: center; gap: 8px;
height: 40px; padding: 0 20px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink);
font-family: inherit;
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.science-ref-toggle:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.science-ref-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; }
.science-ref-toggle.expanded svg { transform: rotate(180deg); }
@media (max-width: 1080px) {
.science-frameworks { grid-template-columns: 1fr 1fr; }
.practice-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
.science-frameworks { grid-template-columns: 1fr 1fr; }
.practice-cards { grid-template-columns: 1fr 1fr; }
.science-stats { grid-template-columns: 1fr 1fr; }
.science-ref-list { columns: 1; }
.science-ref-groups { grid-template-columns: 1fr; gap: 24px; }
.science-evidence { padding: 36px 28px; }
.science-evidence h3 { font-size: 22px; }
.practice-extra-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.science-frameworks { grid-template-columns: 1fr; }
.practice-cards { grid-template-columns: 1fr; }
.science-stats { grid-template-columns: 1fr; }
.science { padding: 60px 0; }
.practice-block { padding: 32px 24px; }
.practice-extra-toggle { min-height: 44px; padding: 0 22px; }
.practice-extra-item { padding: 12px; }
.practice-extra-category-head { flex-wrap: wrap; row-gap: 4px; }
}
.final-cta {
background: var(--teal-700);
color: var(--white);
border-radius: 40px;
margin: 0 28px;
max-width: 1200px;
margin-left: auto; margin-right: auto;
padding: 70px 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta h2 { color: var(--white); margin-bottom: 14px; }
.final-cta p { color: rgba(255,255,255,0.85); font-size: 17px; max-width: 540px; margin: 0 auto 30px; }
.final-cta .btn-primary { background: var(--coral-600); }
.final-cta .btn-primary:hover { background: var(--coral-700); }
.final-cta::before {
content: ""; position: absolute;
bottom: -120px; right: -120px;
width: 380px; height: 380px;
background: var(--teal-800);
border-radius: 50%;
}
.final-cta::after {
content: ""; position: absolute;
top: -80px; left: -100px;
width: 280px; height: 280px;
background: var(--teal-600);
border-radius: 50%;
opacity: 0.35;
}
.final-cta > * { position: relative; z-index: 1; }
/* ───── FOOTER ───── */
.footer-wave {
height: 100px; width: 100%;
background: #346b6e;
border-radius: 60% 40% 0 0 / 100% 100% 0 0;
margin-top: 80px;
position: relative;
}
footer {
background: #346b6e; color: var(--white);
padding: 20px 0 50px;
}
.footer-inner {
max-width: 1200px; margin: 0 auto; padding: 0 28px;
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 50px;
}
.footer-brand img { height: 48px; width: auto; margin-bottom: 16px; opacity: 0.95; }
.footer-brand p { color: rgba(255,255,255,0.8); font-size: 14px; max-width: 280px; }
.footer-col h5 {
font-size: 14px; font-weight: 600; color: var(--white);
margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.75); transition: color 0.15s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
max-width: 1200px; margin: 50px auto 0;
padding: 24px 28px 0;
border-top: 1px solid rgba(255,255,255,0.15);
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: rgba(255,255,255,0.6);
}
.footer-bottom .domain-switch { display: flex; gap: 8px; align-items: center; }
.footer-bottom .domain-switch a {
padding: 4px 12px; border-radius: 999px;
background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9);
font-weight: 500;
}
.footer-bottom .domain-switch a.active {
background: var(--coral-600); color: var(--white);
}
@media (max-width: 900px) {
.footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
}
/* ── SCAN MODAL ─────────────────────────────────── */
.scan-modal { position: fixed; inset: 0; z-index: 100; background: rgba(15, 19, 31, 0.6); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.25s ease; }
.scan-modal.open { display: flex; opacity: 1; }
.scan-modal-card { background: var(--white); border-radius: 24px; width: 100%; max-width: 720px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(15, 19, 31, 0.4); overflow: hidden; transform: translateY(10px); transition: transform 0.25s ease; }
.scan-modal.open .scan-modal-card { transform: translateY(0); }
.scan-modal-header { padding: 22px 28px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.scan-modal-header-meta { display: flex; flex-direction: column; gap: 4px; }
.scan-modal-tag { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--coral-700); }
.scan-modal-title { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; }
.scan-modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: all 0.15s; font-family: inherit; flex-shrink: 0; }
.scan-modal-close:hover { background: var(--bg); color: var(--ink); }
.scan-modal-close svg { width: 16px; height: 16px; }
.scan-progress { height: 4px; background: var(--line); position: relative; flex-shrink: 0; }
.scan-progress-bar { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, var(--cyan-700), var(--magenta-600)); transition: width 0.3s ease; border-radius: 0 4px 4px 0; }
.scan-modal-body { padding: 36px 28px 28px; overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; }
.scan-question-num { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.scan-question-text { font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: -0.4px; margin-bottom: 30px; }
.scan-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* Audience-keuze: 3 grote tegels */
.scan-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.scan-audience-card {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 24px 16px;
border: 1.5px solid var(--line); background: var(--white); border-radius: 18px;
cursor: pointer; transition: all 0.15s;
font-family: inherit; text-align: center;
}
.scan-audience-card:hover {
border-color: var(--teal-700);
background: var(--bg-soft);
transform: translateY(-2px);
}
.scan-audience-card.selected {
border-color: var(--teal-700);
background: var(--bg-soft);
}
.scan-audience-icon {
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-bottom: 6px;
background: var(--coral-100); color: var(--coral-700);
}
.scan-audience-icon svg { width: 28px; height: 28px; }
.scan-audience-card:nth-child(2) .scan-audience-icon { background: var(--teal-100); color: var(--teal-700); }
.scan-audience-card:nth-child(3) .scan-audience-icon { background: #e6e0f0; color: #5a4e80; }
.scan-audience-name { font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; }
.scan-audience-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
@media (max-width: 560px) {
.scan-audience-grid { grid-template-columns: 1fr; }
.scan-audience-card { flex-direction: row; align-items: center; text-align: left; padding: 16px 18px; gap: 14px; }
.scan-audience-icon { margin-bottom: 0; width: 44px; height: 44px; flex-shrink: 0; }
.scan-audience-icon svg { width: 22px; height: 22px; }
}
.scan-option { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1.5px solid var(--line); background: var(--white); border-radius: 12px; cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: left; font-size: 15px; color: var(--ink); }
.scan-option:hover { border-color: var(--cyan-700); background: var(--cyan-50); }
.scan-option.selected { border-color: var(--cyan-700); background: var(--cyan-50); color: var(--cyan-700); font-weight: 600; }
.scan-option-dot { width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; flex-shrink: 0; transition: all 0.15s; position: relative; }
.scan-option.selected .scan-option-dot { border-color: var(--cyan-700); background: var(--cyan-700); }
.scan-option.selected .scan-option-dot::after { content: ""; position: absolute; inset: 4px; background: var(--white); border-radius: 50%; }
.scan-modal-footer { padding: 18px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-shrink: 0; background: var(--bg); }
.scan-btn-secondary { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.scan-btn-secondary:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-soft); }
.scan-btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.scan-btn-primary { background: var(--cyan-700); color: var(--white); border: none; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.scan-btn-primary:hover:not(:disabled) { background: var(--cyan-800); }
.scan-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
/* Resultaatscherm */
.scan-result { display: flex; flex-direction: column; }
.scan-result-header { text-align: center; margin-bottom: 24px; }
.scan-result-header h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 6px; color: var(--ink); }
.scan-result-header p { color: var(--ink-soft); font-size: 15px; }
.scan-result-spider { background: var(--bg-soft); border-radius: 18px; padding: 24px; margin-bottom: 24px; aspect-ratio: 1; max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; }
.scan-result-spider svg { width: 100%; height: 100%; display: block; }
.scan-result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.scan-result-stat { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.scan-result-stat-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.scan-result-stat-list { display: flex; flex-direction: column; gap: 10px; }
.scan-result-stat-list li { font-size: 14px; color: var(--ink); list-style: none; display: flex; align-items: flex-start; gap: 10px; }
.scan-result-stat-list li .stat-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scan-result-stat-list li strong { font-weight: 600; line-height: 1.3; }
.scan-result-stat-list li .stat-info { font-size: 12px; color: var(--ink-soft); line-height: 1.35; font-style: italic; }
.scan-result-stat-list li .stat-score { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 13px; flex: 0 0 auto; white-space: nowrap; padding-top: 1px; display: inline-flex; align-items: center; gap: 7px; }
.stat-schaal { font-size: 12px; font-weight: 600; color: var(--teal-900); background: var(--teal-100); border-radius: 100px; padding: 4px 11px; }
.stat-schaal.laag { background: var(--coral-100); color: var(--coral-700); }
.scan-result-stat-list li .stat-score .stat-score-num { font-weight: 600; color: var(--muted); font-size: 12.5px; }
.scan-result-stat-list .stat-icon { flex: 0 0 18px; display: inline-flex; align-items: center; padding-top: 2px; }
.scan-result-stat-list .stat-icon svg { display: block; }
.scan-result-stat.strong { background: #ecf6f0; border-color: #d0e8dc; }
.scan-result-stat.strong .scan-result-stat-label { color: #3a8268; }
.scan-result-stat.growth { background: var(--magenta-50); border-color: var(--magenta-100); }
.scan-result-stat.growth .scan-result-stat-label { color: var(--magenta-700); }
.scan-result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.scan-result-actions button, .scan-result-actions a { font-family: inherit; font-size: 14px; font-weight: 500; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; }
.scan-result-actions button:hover, .scan-result-actions a:hover { border-color: var(--cyan-700); color: var(--cyan-700); }
.scan-result-actions .primary { background: var(--cyan-700); color: var(--white); border-color: var(--cyan-700); }
.scan-result-actions .primary:hover { background: var(--cyan-800); border-color: var(--cyan-800); color: var(--white); }
/* Reflectie-blok onder het spinnenweb */
.scan-result-reflect {
background: var(--bg-soft);
border-radius: 16px;
padding: 20px 22px;
margin-bottom: 22px;
}
.scan-result-reflect-q {
font-size: 15px; font-weight: 600; color: var(--ink);
margin-bottom: 8px; letter-spacing: -0.2px;
}
.scan-result-reflect-p {
font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0;
}
/* Opnieuw-link onder de hoofdacties */
.scan-result-restart { text-align: center; margin-top: 14px; }
.scan-link { background: none; border: none; padding: 6px 10px; font-family: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: color 0.15s; }
.scan-link:hover { color: var(--cyan-700); text-decoration: underline; }
/* Mail-formulier */
.scan-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; max-width: 460px; margin-left: auto; margin-right: auto; width: 100%; }
.scan-form-field { display: flex; flex-direction: column; gap: 6px; }
.scan-form-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.scan-form-optional { font-weight: 400; color: var(--muted); }
.scan-form input[type="text"], .scan-form input[type="email"] { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 15px; background: var(--white); color: var(--ink); transition: border-color 0.15s; }
.scan-form input:focus { outline: none; border-color: var(--cyan-700); }
.scan-form-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); cursor: pointer; line-height: 1.45; }
.scan-form-checkbox input { margin-top: 3px; flex-shrink: 0; }
.scan-form-error { background: var(--magenta-50); color: var(--magenta-700); padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid var(--magenta-100); }
.scan-form-note { text-align: center; font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 460px; margin: 16px auto 0; }
/* PDF: keuze printen vs downloaden, twee tegels naast elkaar */
.scan-pdf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; max-width: 460px; margin-left: auto; margin-right: auto; }
.scan-pdf-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1.5px solid var(--line); background: var(--white); border-radius: 14px; cursor: pointer; transition: all 0.15s; font-family: inherit; text-align: center; }
.scan-pdf-card:hover { border-color: var(--cyan-700); background: var(--cyan-50); transform: translateY(-2px); }
.scan-pdf-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.scan-pdf-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.scan-pdf-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 560px) {
.scan-pdf-choice { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.scan-modal { padding: 0; align-items: stretch; }
.scan-modal-card { max-width: 100%; max-height: 100vh; border-radius: 0; }
.scan-modal-body { padding: 28px 20px 24px; }
.scan-modal-header { padding: 16px 20px 14px; }
.scan-modal-footer { padding: 14px 20px; }
.scan-question-text { font-size: 19px; }
.scan-result-stats { grid-template-columns: 1fr; }
}
/* Print: alleen resultaatscherm, schoon op A4 */
@media print {
body.scan-open > *:not(.scan-modal) { display: none !important; }
body.scan-open .scan-modal { position: static; background: white; backdrop-filter: none; padding: 0; display: block; }
body.scan-open .scan-modal-card { box-shadow: none; max-width: 100%; max-height: none; border-radius: 0; }
body.scan-open .scan-modal-header-meta::before { content: "mijnlifeskills.nl · "; }
body.scan-open .scan-modal-close, body.scan-open .scan-progress, body.scan-open .scan-modal-footer, body.scan-open .scan-result-actions { display: none !important; }
.scan-result-spider { background: var(--bg-soft) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-inside: avoid; }
.scan-result-stat { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.nav, footer, .footer-wave, .skip-link { display: none !important; }
}
/* ───── MEERPAGINA-AANVULLINGEN ───── */
:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; }
.pro-section :focus-visible, footer :focus-visible { outline-color: var(--coral-500); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--teal-900); color: var(--white); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
.nav-direct.active { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
.nav-cta { display: inline-flex; align-items: center; }
.footer-skills { max-width: 1200px; margin: 40px auto 0; padding: 0 28px; font-size: 12.5px; color: rgba(255,255,255,0.65); line-height: 1.7; }
.h2-stijl { font-size: clamp(28px, 3.5vw, 42px); }
a.skill-card { color: inherit; }
.skill-card-titel { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.2px; padding-right: 48px; }
.skill-pagina { padding: 60px 0 80px; }
.crumb { margin-bottom: 18px; font-size: 14px; }
.crumb a { color: var(--teal-700); font-weight: 600; }
.skill-detail-naam { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 22px 0; }
.sds-kop { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px 0; letter-spacing: -0.1px; line-height: 1.3; }
.skill-pagina .faq-block { margin-top: 36px; }
.skill-verder { margin-top: 36px; background: var(--white); border-radius: 22px; padding: 26px 28px; }
a.module-skill:hover { background: var(--teal-700); color: var(--white); }
.skill-prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; font-weight: 600; font-size: 14px; flex-wrap: wrap; }
.skill-prevnext a { color: var(--teal-700); }
.hub-cards { grid-template-columns: repeat(3, 1fr); }
a.audience-card { color: inherit; }
@media (max-width: 900px) { .hub-cards { grid-template-columns: 1fr; } }
.tekst-pagina p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; max-width: 68ch; color: var(--ink-soft); }
.tekst-pagina .sds-kop { font-size: 18px; margin: 28px 0 8px; }
/* ───── FAQ (uitklapbare vragen) ───── */
.faq-lijst { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.faq-lijst details { background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.faq-lijst summary { cursor: pointer; padding: 16px 44px 16px 20px; font-weight: 600; color: var(--ink); list-style: none; position: relative; font-size: 15.5px; }
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--teal-700); font-size: 20px; font-weight: 600; line-height: 1; }
.faq-lijst details[open] summary::after { content: '\2212'; }
.faq-lijst details p { padding: 0 20px 16px; margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; max-width: none; }
.begrip-kop { font-size: 19px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; letter-spacing: -0.2px; }
/* Verticale fasen-tijdlijn op de Aanpak-pagina */
.fasenlijn { max-width: 940px; margin: 0 auto; }
.flijn-item { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; position: relative; padding-bottom: 22px; }
.flijn-item:last-child { padding-bottom: 0; }
.flijn-rail { position: relative; display: flex; justify-content: center; }
.flijn-rail::before { content: ''; position: absolute; top: 0; bottom: -22px; width: 2px; background: var(--teal-100); left: 50%; transform: translateX(-50%); }
.flijn-item:last-child .flijn-rail::before { display: none; }
.flijn-num {
position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
background: var(--teal-700); color: var(--white); font-weight: 800; font-size: 17px;
display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--bg);
}
.flijn-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; }
.flijn-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.flijn-kop h3 { font-size: 21px; font-weight: 700; color: var(--ink); }
.flijn-wk { font-size: 12.5px; font-weight: 700; color: var(--coral-700); background: var(--coral-100); border-radius: 99px; padding: 4px 12px; white-space: nowrap; }
.flijn-lead { font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; }
.flijn-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.flijn-grid h4 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--teal-700); margin-bottom: 7px; }
.flijn-wie ul { list-style: none; }
.flijn-wie li { font-size: 14px; color: var(--ink-soft); line-height: 1.55; padding-left: 16px; position: relative; margin-bottom: 5px; }
.flijn-wie li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-600); }
.flijn-klaar { background: var(--bg-soft); border-radius: 12px; padding: 12px 16px; align-self: start; }
.flijn-klaar h4 { color: var(--groen-700, #3d7a55); }
.flijn-klaar p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 760px) {
.flijn-item { grid-template-columns: 40px 1fr; gap: 0 12px; }
.flijn-num { width: 32px; height: 32px; font-size: 15px; }
.flijn-card { padding: 18px 18px; }
.flijn-grid { grid-template-columns: 1fr; }
}
/* Fase-details op de Aanpak-pagina */
.fase-details { margin-top: 34px; max-width: 940px; margin-left: auto; margin-right: auto; }
.fase-details summary { display: flex; align-items: center; gap: 12px; }
.fase-chip {
flex: none; width: 28px; height: 28px; border-radius: 50%;
background: var(--teal-700); color: var(--white);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
}
.fase-wk { margin-left: auto; padding-right: 26px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fase-kop {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
color: var(--teal-700); margin: 4px 20px 6px; padding: 0;
}
.fase-details ul.fase-lijst { margin: 0 20px 12px; padding-left: 20px; }
.fase-details ul.fase-lijst li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin-bottom: 4px; }
.fase-details .fase-klaar { background: var(--bg-soft); border-radius: 0 0 13px 13px; padding: 12px 20px; margin-top: 4px; }
.fase-details .fase-klaar strong { color: var(--teal-800); }