/* ============================================================================
Talent Take Over · gedeeld DESIGNSYSTEEM (huisstijl De Borne)
----------------------------------------------------------------------------
Eén bron voor de look-and-feel van álle pagina's. Laad ná tto.css:
Stijl = teal-dominant, magenta als enige accent, cyaan als licht accent,
grote vette display-koppen, donkere editorial-banden, schuine randen,
haarlijn-lijsten, veel witruimte. Volwassen, rustig, herkenbaar.
============================================================================ */
:root{
--ink:#0b2b34; --teal:#0e7490; --teal-deep:#0a3f4e; --teal-deeper:#072d39;
--magenta:#e0216f; --cyan:#22c5de; --paper:#fbfaf7; --paper-2:#f3efe8;
--line:#e7e2d8; --muted:#51616b; --wrap:1080px;
}
/* ── Basis & ritme ───────────────────────────────────────────────────────── */
.tto-light{ background:var(--paper) !important; color:var(--ink); }
h1,h2,h3,h4{ letter-spacing:-.02em; line-height:1.08; color:var(--ink); }
.u-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.u-sec{ padding:clamp(60px,9vw,112px) 0; }
.u-head{ margin-bottom:clamp(34px,5vw,52px); }
.u-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:.78rem; font-weight:800; letter-spacing:.16em;
text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.u-eyebrow::before{ content:""; width:30px; height:2px; background:currentColor; opacity:.6; }
.u-eyebrow.on-dark{ color:var(--cyan); }
.u-title{ font-size:clamp(1.9rem,4vw,2.9rem); font-weight:900; color:var(--ink); }
.u-title.on-dark{ color:#fff; }
.u-lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted); max-width:640px; margin-top:18px; }
.u-lead.on-dark{ color:#bfe6ef; }
/* ── Knoppen ─────────────────────────────────────────────────────────────── */
.u-btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800;
font-size:1rem; padding:15px 26px; border-radius:14px; border:2px solid transparent;
transition:transform .15s, box-shadow .2s, background .15s; cursor:pointer; }
.u-btn:hover{ transform:translateY(-2px); }
.u-btn--teal{ background:var(--teal); color:#fff; box-shadow:0 12px 28px -10px rgba(14,116,144,.6); }
.u-btn--teal:hover{ background:#0c6275; }
.u-btn--magenta{ background:var(--magenta); color:#fff; box-shadow:0 12px 28px -10px rgba(224,33,111,.55); }
.u-btn--light{ background:#fff; color:var(--teal-deep); }
.u-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.u-btn--ghost:hover{ background:rgba(255,255,255,.12); }
.u-btn--outline{ background:#fff; color:var(--teal); border-color:var(--teal); }
/* ── Hero (diep teal + schuine onderrand) ────────────────────────────────── */
.u-hero{ position:relative; color:#fff; overflow:hidden;
background:linear-gradient(155deg,#0c4658 0%,#0a3f4e 55%,#072d39 100%);
padding:clamp(64px,11vw,128px) 0 clamp(120px,16vw,200px); }
.u-hero::before{ content:""; position:absolute; top:-80px; right:-60px; width:360px; height:360px;
background:radial-gradient(circle at 50% 50%,rgba(34,197,222,.18),transparent 62%); pointer-events:none; }
.u-hero::after{ content:""; position:absolute; left:8%; bottom:14%; width:220px; height:220px;
background:radial-gradient(circle at 50% 50%,rgba(224,33,111,.16),transparent 62%); pointer-events:none; }
.u-hero .u-wrap{ position:relative; z-index:2; }
.u-hero h1{ font-size:clamp(2.6rem,7vw,5rem); font-weight:900; line-height:1; letter-spacing:-.035em; color:#fff; }
.u-hero h1 em{ font-style:normal; color:var(--cyan); }
.u-hero h1 .mg{ color:var(--magenta); }
.u-hero-sub{ font-size:clamp(1.05rem,1.7vw,1.25rem); color:#bfe6ef; max-width:600px; margin:24px 0 34px; line-height:1.65; }
.u-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.u-brandrow{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.u-brandrow img{ height:54px; border-radius:12px; background:#fff; padding:6px; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
.u-brandrow span{ font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.u-angle{ position:absolute; left:0; right:0; bottom:-1px; height:90px; z-index:1;
background:var(--paper); clip-path:polygon(0 100%,100% 100%,100% 36%,0 100%); }
/* ── Donkere editorial-band ──────────────────────────────────────────────── */
.u-band{ background:linear-gradient(160deg,#0a3f4e,#072d39); color:#fff; position:relative; }
/* ── Kaarten ─────────────────────────────────────────────────────────────── */
.u-cards{ display:grid; gap:22px; }
.u-cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.u-cards.cols-2{ grid-template-columns:repeat(2,1fr); }
.u-cards.cols-4{ grid-template-columns:repeat(4,1fr); }
.u-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
border-radius:22px; padding:28px; text-decoration:none; color:inherit; position:relative; overflow:hidden;
transition:transform .18s, box-shadow .2s, border-color .2s; }
.u-card:hover{ border-color:#bcd9e0; }
.u-card h3{ font-size:1.25rem; font-weight:900; margin-bottom:10px; }
.u-card p{ color:var(--muted); font-size:.97rem; line-height:1.6; }
.u-card .u-go{ margin-top:auto; padding-top:20px; font-weight:800; color:var(--teal); display:inline-flex; align-items:center; gap:8px; }
.u-card .u-go .arr{ transition:transform .18s; }
.u-card:hover .u-go .arr{ transform:translateX(5px); }
/* tick-lijst binnen kaarten/secties */
.u-ticks{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.u-ticks li{ position:relative; padding-left:24px; color:var(--ink); font-size:.92rem; font-weight:600; }
.u-ticks li::before{ content:""; position:absolute; left:0; top:8px; width:11px; height:11px; border-radius:50%; background:var(--teal); }
/* ── Stappen (genummerd) ─────────────────────────────────────────────────── */
.u-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; }
.u-step{ counter-increment:s; padding:24px 22px 8px 0; border-top:3px solid var(--teal); margin-right:1px; }
.u-step .sn{ font-size:1.5rem; font-weight:900; color:var(--teal); letter-spacing:-.03em; margin-bottom:10px; }
.u-step .sn::before{ content:counter(s,decimal-leading-zero); }
.u-step h4{ font-size:1.04rem; font-weight:900; margin-bottom:6px; }
.u-step p{ color:var(--muted); font-size:.92rem; line-height:1.5; }
/* ── Haarlijn-lijst (op donker) ──────────────────────────────────────────── */
.u-list{ display:grid; }
.u-row{ display:grid; grid-template-columns:48px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.u-row:first-child{ padding-top:0; } .u-row:last-child{ border-bottom:0; }
.u-row .ic{ font-size:1.5rem; line-height:1; }
.u-row h4{ font-size:1.1rem; font-weight:900; color:#fff; margin-bottom:6px; }
.u-row p{ color:#a9cdd6; font-size:.95rem; line-height:1.6; }
/* ── Feature-kaart op donker ─────────────────────────────────────────────── */
.u-feature{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:30px; }
.u-feature h3{ color:#fff; } .u-feature p{ color:#bfe6ef; }
.u-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.u-chips span{ background:rgba(255,255,255,.08); color:#bfe6ef; font-size:.78rem; font-weight:700; padding:6px 13px; border-radius:999px; }
/* ── Callout (linkerrand-accent) ─────────────────────────────────────────── */
.u-callout{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line);
border-radius:16px; padding:24px 26px; }
.u-callout .u-icobox{ background:#eafaff; color:var(--teal); border-color:#d3eef5; }
.u-callout.cyan .u-icobox{ background:#e6fbff; color:#0a8aa3; border-color:#bfeaf3; }
.u-callout.magenta .u-icobox{ background:#fdeef6; color:var(--magenta); border-color:#f3c2d6; }
.u-callout h3{ font-size:1.05rem; font-weight:900; margin-bottom:8px; }
.u-callout p{ color:var(--muted); font-size:.94rem; line-height:1.6; }
.u-callout code{ background:var(--paper-2); padding:2px 7px; border-radius:6px; font-size:.86rem; color:var(--teal); font-weight:700; }
/* ── Footer ──────────────────────────────────────────────────────────────── */
.u-footer{ background:#072d39; color:#9fc3cd; display:grid; grid-template-columns:auto auto;
align-items:center; justify-content:center; column-gap:18px; text-align:left; padding:26px 24px; }
.u-footer img{ height:46px; width:auto; border-radius:12px; background:#fff; padding:6px; margin:0; grid-row:1 / 3; }
.u-footer strong{ color:#fff; display:block; font-size:1.05rem; }
.u-footer p{ margin:0; font-size:.92rem; line-height:1.4; }
.u-footer-credit{ grid-column:1 / -1; margin-top:18px; padding-top:14px;
border-top:1px solid rgba(255,255,255,.10); text-align:center; font-size:.82rem; color:#7ea6b1; }
.u-footer-credit a{ color:#22c5de; text-decoration:none; font-weight:700; }
.u-footer-credit a:hover{ text-decoration:underline; }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
.u-cards.cols-3,.u-cards.cols-4{ grid-template-columns:1fr 1fr; }
.u-steps{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
.u-cards.cols-2,.u-cards.cols-3,.u-cards.cols-4{ grid-template-columns:1fr; }
.u-steps{ grid-template-columns:1fr; }
}
/* ── Icoon-systeem (één lijnstijl, vervangt emoji) ───────────────────────── */
.ico{width:1.4em;height:1.4em;display:inline-block;vertical-align:middle;stroke:currentColor;
stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.u-icobox{width:48px;height:48px;border-radius:13px;background:#eafaff;color:var(--teal);
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #d3eef5}
.u-icobox .ico{width:24px;height:24px}
/* ── Rundown — genummerde redactionele lijst (licht) ─────────────────────── */
.u-rundown{border-top:1px solid var(--line)}
.u-rd{display:grid;grid-template-columns:108px 1fr auto;gap:28px;align-items:center;
padding:30px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .18s,padding .18s}
.u-rd:hover{background:#fff;padding-left:20px;padding-right:20px}
.u-rd-num{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.05em;color:#dcd5c8;transition:color .18s}
.u-rd:hover .u-rd-num{color:var(--teal)}
.u-rd-body h3{font-size:1.45rem;font-weight:900;margin-bottom:7px}
.u-rd-body p{color:var(--muted);max-width:580px;font-size:1rem}
.u-rd-tags{margin-top:12px;color:var(--ink);font-size:.85rem;font-weight:700;opacity:.6}
.u-rd-go{white-space:nowrap;font-weight:800;color:var(--teal);display:inline-flex;align-items:center;gap:8px;font-size:.95rem}
.u-rd-go .arr{transition:transform .18s}
.u-rd:hover .u-rd-go .arr{transform:translateX(5px)}
/* ── Numlist — genummerde haarlijn-lijst (licht óf op donker) ────────────── */
.u-numlist{border-top:1px solid var(--line)}
.u-nr{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.u-nr-n{width:42px;height:42px;border-radius:12px;background:#eafaff;color:var(--teal);border:1px solid #d3eef5;
display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:900;flex-shrink:0}
.u-nr h4{font-size:1.08rem;font-weight:900;margin-bottom:5px}
.u-nr p{color:var(--muted);font-size:.94rem;line-height:1.55}
.u-numlist.on-dark,.u-numlist.on-dark .u-nr{border-color:rgba(255,255,255,.14)}
.u-numlist.on-dark .u-nr-n{background:rgba(34,197,222,.13);color:var(--cyan);border-color:rgba(34,197,222,.32)}
.u-numlist.on-dark h4{color:#fff}
.u-numlist.on-dark p{color:#a9cdd6}
/* ── Didactische onderdelen (voor ~10-jarigen) ───────────────────────────── */
/* "In het kort" — korte samenvatting per onderdeel */
.u-recap{ background:#eafaff; border:1px solid #cfeaf2; border-radius:16px; padding:20px 24px; margin:26px 0; }
.u-recap .rh{ display:inline-flex; align-items:center; gap:9px; font-size:.76rem; font-weight:800;
letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:12px; }
.u-recap .rh .ico{ width:18px; height:18px; }
.u-recap ul{ margin:0; padding-left:20px; }
.u-recap li{ font-size:1rem; line-height:1.6; color:var(--ink); font-weight:600; margin-bottom:5px; }
.u-recap li:last-child{ margin-bottom:0; }
.u-recap p{ font-size:1rem; line-height:1.6; color:var(--ink); }
.u-recap.on-dark{ background:rgba(34,197,222,.09); border-color:rgba(34,197,222,.28); }
.u-recap.on-dark .rh{ color:var(--cyan); }
.u-recap.on-dark li, .u-recap.on-dark p{ color:#dbeef3; }
/* "Denk na / Doe" — actieve vraag of opdracht (warme, opvallende kleur) */
.u-think{ display:flex; gap:14px; align-items:flex-start; background:#fff7e0; border:1px solid #f3e2a8;
border-radius:14px; padding:16px 20px; margin:22px 0; }
.u-think .ico{ color:#b07a00; width:24px; height:24px; flex-shrink:0; margin-top:1px; }
.u-think p{ color:#7a5600; font-size:1rem; line-height:1.55; font-weight:600; }
.u-think b{ color:#5e4300; }
/* "Check jezelf" — interactieve mini-vraag voor de bezoeker (zie tto-check.js) */
.u-check{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:24px 0; }
.u-check-lbl{ display:inline-flex; align-items:center; gap:9px; font-size:.76rem; font-weight:800;
letter-spacing:.12em; text-transform:uppercase; color:var(--magenta); margin-bottom:12px; }
.u-check-lbl .ico{ width:18px; height:18px; }
.u-check-q{ font-size:1.08rem; font-weight:800; color:var(--ink); margin-bottom:16px; line-height:1.4; }
.u-check-opts{ display:grid; gap:10px; }
.u-check-opts button{ text-align:left; background:#fff; border:1.5px solid var(--line); color:var(--ink);
border-radius:12px; padding:13px 16px; font-size:1rem; font-weight:600; cursor:pointer; font-family:inherit;
line-height:1.45; transition:border-color .15s, background .15s, transform .1s; }
.u-check-opts button:hover:not(:disabled){ border-color:var(--cyan); background:#f6fdff; }
.u-check-opts button:disabled{ cursor:default; }
.u-check-opts button.correct{ background:#f0fbf4; border-color:#86d6a3; color:#15803d; }
.u-check-opts button.wrong{ background:#fdf2f6; border-color:#f3a8c4; color:#991b1b; }
.u-check-fb{ display:none; margin-top:14px; padding:14px 16px; border-radius:12px; font-size:.97rem; line-height:1.6; font-weight:600; }
.u-check-fb.show{ display:block; }
.u-check-fb.good{ background:#f0fbf4; border:1px solid #bfe6cd; color:#166534; }
.u-check-fb.bad{ background:#fdf2f6; border:1px solid #f3c2d6; color:#8a1245; }
/* op donker (binnen .u-band of expliciet .on-dark) */
.u-band .u-check, .u-check.on-dark{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.u-band .u-check-q, .u-check.on-dark .u-check-q{ color:#fff; }
.u-band .u-check-opts button, .u-check.on-dark .u-check-opts button{ background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.18); color:#eaf6f9; }
.u-band .u-check-opts button:hover:not(:disabled), .u-check.on-dark .u-check-opts button:hover:not(:disabled){
border-color:var(--cyan); background:rgba(34,197,222,.12); }
.u-band .u-check-opts button.correct, .u-check.on-dark .u-check-opts button.correct{ background:#f0fbf4; border-color:#86d6a3; color:#15803d; }
.u-band .u-check-opts button.wrong, .u-check.on-dark .u-check-opts button.wrong{ background:#fdf2f6; border-color:#f3a8c4; color:#991b1b; }
/* uitleg bij een moeilijk woord (inline, rustig) */
.uitleg{ color:var(--muted); font-weight:600; }
.u-band .uitleg, .u-recap.on-dark .uitleg{ color:#9fc3cd; }
/* ── Leesbaarheid voor ~10-jarigen: grotere, ruimere lopende tekst ───────── */
.u-lead{ line-height:1.55; }
.u-card p, .u-nr p, .u-row p, .u-note p, .u-note ul, .u-feature p,
.u-callout p, .u-items span, .u-comp li, .u-quote{ line-height:1.7; }
.u-card p, .u-nr p, .u-row p, .u-note p, .u-feature p, .u-callout p,
.u-items span, .u-comp li{ font-size:1rem; }
.u-ticks li{ font-size:1rem; line-height:1.5; }
/* ── Status-stip (vervangt ⏳-badge) ─────────────────────────────────────── */
.u-statusdot{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:#9a6a00}
.u-statusdot::before{content:"";width:8px;height:8px;border-radius:50%;background:#e0a000;box-shadow:0 0 0 3px rgba(224,160,0,.18)}
@media(max-width:680px){
.u-rd{grid-template-columns:64px 1fr;gap:16px;row-gap:4px}
.u-rd-num{font-size:2.2rem}
.u-rd-go{grid-column:2}
}