/* Campaigo huisstijl. Waarden uit het Campaigo design system (tokens.json, v1, 6-11-2026).
   Pagina's gebruiken alleen de variabelen hieronder, nooit losse kleurcodes. */

@font-face { font-family: "Outfit"; src: url("/merk/fonts/Outfit-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/merk/fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/merk/fonts/DMSans-Variable-Italic.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }

:root {
  --veer: cubic-bezier(.34, 1.56, .64, 1); /* speelse overshoot voor beweging */
  color-scheme: light;
  --surface: #fffcfa; --surface-warm: #fff9f4; --surface-raised: #ffffff;
  --line: #ede5ed; --line-strong: #e7dffd;
  --ink: #35255e; --ink-soft: #61566b; --ink-muted: #70677c;
  --purple: #7958f5; --purple-hover: #6440e8; --purple-strong: #6440e8; --purple-deep: #4e318d;
  --purple-soft: #ede4ff; --purple-wash: #f5f0ff; --on-purple: #ffffff;
  --coral: #ff7895; --coral-strong: #b8365f; --coral-soft: #ffe8e6;
  --mint: #75dccc; --mint-strong: #1f7560; --mint-soft: #ddf8ef;
  --sun: #ffd66b; --sun-strong: #8a5f10; --sun-soft: #fff0c2;
  --on-accent: #35255e;
  --danger: #b4232f; --danger-soft: #fde7ea; --on-danger: #ffffff; --wordmark-go: #7958f5;
  --focus: #6440e8;

  --font-display: "Outfit", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-section-sm: 72px; --space-section: 104px;

  --radius-tail: 4px; --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 28px; --radius-pill: 999px;

  --shadow-xs: 0 7px 22px rgba(87,65,200,0.06);
  --shadow-sm: 0 10px 28px rgba(62,45,105,0.14);
  --shadow-md: 0 14px 40px rgba(90,65,126,0.10);
  --shadow-lg: 0 24px 70px rgba(78,49,141,0.12);
  --shadow-xl: 0 25px 60px rgba(71,49,111,0.16);
  --shadow-cta: 0 12px 28px rgba(121,88,245,0.24);
  --scrim: rgba(53,37,94,0.45);

  --gradient-glow: linear-gradient(130deg, #e1d8ff 5%, #ffd5db 51%, #fff0bc 100%);
  --gradient-cta: linear-gradient(105deg, #7958f5 0%, #9c55c8 55%, #b04f92 100%);
  --gradient-post-warm: linear-gradient(150deg, #ffcfb1 0%, #f1a9b8 62%, #be96df 100%);
  --gradient-post-fresh: linear-gradient(155deg, #a7eae1 0%, #cde5a4 100%);

  --container-max: 1210px; --gutter-sm: 20px; --measure: 680px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #161028; --surface-warm: #1c1533; --surface-raised: #241b3f;
    --line: #362c57; --line-strong: #4a3d78;
    --ink: #f6f1ff; --ink-soft: #cfc6e2; --ink-muted: #ada3c2;
    --purple-hover: #6644ee; --purple-strong: #b9a6ff; --purple-deep: #d6cbff;
    --purple-soft: #2e2459; --purple-wash: #2a2150;
    --coral-strong: #ff9db2; --coral-soft: #3b1e36;
    --mint-strong: #86e6d4; --mint-soft: #143430;
    --sun-strong: #ffd66b; --sun-soft: #372c14;
    --danger: #ff7a86; --danger-soft: #3a161e; --on-danger: #35255e; --wordmark-go: #b9a6ff;
    --focus: #b9a6ff;
    --shadow-xs: 0 7px 22px rgba(0,0,0,0.30);
    --shadow-sm: 0 10px 28px rgba(0,0,0,0.40);
    --shadow-md: 0 14px 40px rgba(0,0,0,0.40);
    --shadow-lg: 0 24px 70px rgba(0,0,0,0.45);
    --shadow-xl: 0 25px 60px rgba(0,0,0,0.50);
    --shadow-cta: 0 12px 28px rgba(121,88,245,0.35);
    --scrim: rgba(0,0,0,0.6);
  }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Wat verborgen is, blijft verborgen, ook als een klasse (zoals bij knoppen) een andere display zet. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.66; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: var(--purple-strong); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
img, video { max-width: 100%; }
strong { font-weight: 800; }
code { font-size: 0.92em; background: var(--purple-wash); color: var(--purple-deep); padding: 0.1rem 0.4rem; border-radius: var(--radius-xs); overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(34px, 6vw, 44px); line-height: 1.08; letter-spacing: -0.055em; margin: 0 0 var(--space-4); }
h2 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.04em; margin: 0 0 var(--space-3); }
h3 { font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; margin: var(--space-6) 0 var(--space-1); }
p { margin: 0 0 var(--space-4); }
ol, ul { padding-left: 1.3rem; margin: 0 0 var(--space-4); }
ol li, ul li { margin-bottom: var(--space-2); }
li::marker { color: var(--purple-strong); font-weight: 800; }
ul.kaal { list-style: none; padding: 0; }

/* ---------- Kop en voet ---------- */
.kop { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.kop__binnen { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-7); height: 69px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.kop nav { display: flex; align-items: center; gap: var(--space-2); }
.kop nav a { font-weight: 800; font-size: 14px; color: var(--ink); text-decoration: none; padding: 10px 14px; border-radius: var(--radius-pill); }
/* Alleen de gewone links: de paarse knoppen (Aanmelden, Mijn studio) houden hun eigen hover, anders valt de witte tekst weg. */
.kop nav a:not(.knop):hover { background: var(--purple-wash); }
.kop nav a.knop { color: var(--on-purple); padding: 11px 18px; font-size: 13px; margin: 0 0 0 var(--space-2); }

.cg-wordmark { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.055em; line-height: 1; white-space: nowrap; color: var(--ink); text-decoration: none; display: inline-block; padding-right: 0.055em; font-size: 28px; }
.cg-wordmark:hover { text-decoration: none; }
.cg-wordmark__go { color: var(--wordmark-go); }
.cg-wordmark__dot { color: var(--coral); display: inline-block; }
.cg-wordmark--white, .cg-wordmark--white .cg-wordmark__go { color: var(--on-purple); }
.cg-wordmark--white .cg-wordmark__dot { color: var(--sun); }

.voet { border-top: 1px solid var(--line); background: var(--surface-warm); margin-top: var(--space-16); }
.voet__binnen { max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-muted); }
.voet nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.voet a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.voet a:hover { color: var(--purple-strong); text-decoration: underline; }
body > main { flex: 1 0 auto; width: 100%; }
.voet .cg-wordmark { font-size: 24px; color: var(--ink); text-decoration: none; }

/* ---------- Appvlak (studio, aanmelden, inloggen) ---------- */
.vlak { max-width: 44rem; margin: 0 auto; padding: var(--space-12) var(--space-7) 0; }
.vlak > h1:first-child, .vlak > p:first-child + h1 { margin-top: 0; }
.vlak > h2, .vlak form > h2 { margin-top: var(--space-10); }
.klein { font-size: 14px; color: var(--ink-muted); }
.en { color: var(--ink-muted); font-size: 13px; border-top: 1px solid var(--line); margin-top: var(--space-8); padding-top: var(--space-4); }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; }

section { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-5) 0; }
section > :last-child { margin-bottom: 0; }
section h2 { margin-top: 0; }

/* Meldingen: altijd woord plus kleur, nooit kleur alleen */
.fout, .let-op, .gelukt { position: relative; border-radius: var(--radius-md); padding: 14px 18px 14px 40px; margin: var(--space-4) 0; color: var(--ink); }
.fout::before, .let-op::before, .gelukt::before { position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 11px/1 var(--font-sans); }
.fout { background: var(--danger-soft); }
.fout::before { content: "!"; background: var(--danger); color: var(--on-danger); }
.let-op { background: var(--sun-soft); }
.let-op::before { content: "!"; background: var(--sun); color: var(--on-accent); }
.gelukt { background: var(--mint-soft); }
.gelukt::before { content: "\2713"; background: var(--mint); color: var(--on-accent); }
.fout > :last-child, .let-op > :last-child, .gelukt > :last-child { margin-bottom: 0; }
div.let-op p, div.fout p, div.gelukt p { margin: 0 0 var(--space-2); }

/* Knoppen: elke actie is een pil */
button, a.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-5) var(--space-2) 0 0; padding: 14px 24px; border: 0; border-radius: var(--radius-pill); font: 800 15px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; background: var(--purple); color: var(--on-purple); box-shadow: var(--shadow-cta); transition: transform .2s, box-shadow .2s, background-color .2s, color .2s; }
button:hover, a.knop:hover { background: var(--purple-hover); transform: translateY(-3px); text-decoration: none; }
button:active, a.knop:active { transform: translateY(-1px) scale(.96); }
.pijl { display: inline-block; transition: translate .3s var(--veer); }
.knop:hover .pijl { translate: 3px -3px; }
.knop:hover .pijl--rechts { translate: 5px 0; }
button.nee, a.knop.nee { background: var(--surface-raised); color: var(--purple-strong); box-shadow: inset 0 0 0 2px var(--line-strong); }
button.nee:hover, a.knop.nee:hover { background: var(--purple-soft); }
button.gevaar { background: var(--danger); color: var(--on-danger); box-shadow: none; }
button.gevaar:hover { background: var(--danger); filter: brightness(0.92); }
button[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
.knoppen button, .knoppen .knop { margin: 0; }
.knoppen form { margin: 0; }
.knoppen.klein button { padding: 9px 16px; font-size: 13px; }

/* Formulieren */
label { display: block; margin: var(--space-5) 0 var(--space-2); font-weight: 800; font-size: 14px; }
input[type=email], input[type=text], input[type=search], input[type=date], input[type=file], input[type=datetime-local], textarea, select {
  width: 100%; padding: 13px 16px; font: 500 16px/1.4 var(--font-sans); color: var(--ink); background: var(--surface-raised);
  border: 2px solid var(--line-strong); border-radius: var(--radius-md); transition: border-color .2s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input[type=datetime-local] { max-width: 100%; width: auto; }
input[type=file] { padding: 10px; }
input[type=radio], input[type=checkbox] { accent-color: var(--purple); width: 18px; height: 18px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-lg); margin: var(--space-4) 0; padding: var(--space-4) var(--space-5) var(--space-5); background: var(--surface-raised); }
legend { float: left; width: 100%; font-weight: 800; padding: 0; margin: var(--space-2) 0 var(--space-1); line-height: 1.4; }
legend + * { clear: both; }
label.keuze { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 600; margin: var(--space-3) var(--space-5) 0 0; }
label.vink { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; }
label.vink input { margin-top: 0.3rem; flex: none; }
fieldset .uitleg { display: none; margin-top: var(--space-3); }
fieldset .uitleg.toon, fieldset:has(input[value=nee]:checked) .uitleg, fieldset:has(input[value=weetniet]:checked) .uitleg { display: block; }
details.hoe { margin-top: var(--space-2); font-size: 15px; }
details.hoe summary { cursor: pointer; color: var(--purple-strong); font-weight: 700; }
.leeg-laten { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.adres { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.adres input { flex: 1 1 14rem; }
.adres button { margin: 0; }

/* Posts in de studio */
.post { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.post:first-of-type { border-top: 0; }
.media { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 0 0 auto; }
.media.breed { flex: 1 1 100%; }
.voorbeeld { flex: 0 0 72px; width: 72px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); background: var(--purple-wash); }
.voorbeeld.video { flex: 0 1 16rem; width: 100%; max-width: 16rem; height: auto; max-height: 24rem; object-fit: contain; background: #161028; }
.instellingen { margin: var(--space-1) 0; padding-left: 1.1rem; }
.post .info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.post p { margin: var(--space-1) 0; }
.post label { margin: var(--space-3) 0 var(--space-1); font-size: 14px; }

/* Badge en kicker (status in de studio, kopjes op de productpagina) */
.cg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); font: 800 12px/1.2 var(--font-sans); white-space: nowrap; background: var(--line); color: var(--ink-soft); }
.cg-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cg-badge--purple { background: var(--purple-soft); color: var(--purple-strong); }
.cg-badge--mint { background: var(--mint-soft); color: var(--mint-strong); }
.cg-badge--mint::before { background: var(--mint); }
.cg-badge--sun { background: var(--sun-soft); color: var(--sun-strong); }
.cg-badge--coral { background: var(--coral-soft); color: var(--coral-strong); }
.cg-badge--danger { background: var(--danger-soft); color: var(--danger); }
.kicker { font: 900 12px/1.2 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--purple-strong); margin: 0 0 var(--space-3); }

/* ---------- Automatische gesprekken: voorbeeld, chat en tabel ---------- */
.telefoon { display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 20px); background: var(--purple-wash); }
.bel { align-self: flex-start; max-width: 100%; padding: 10px 14px; border-radius: 18px; background: var(--surface-raised); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bel small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-muted); }
.bel-knoppen { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-2); }
.bel-knoppen span { display: block; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--purple-soft); color: var(--purple-strong); font-weight: 800; font-size: 14px; text-align: center; }
.tel-notitie { align-self: center; font-size: 13px; color: var(--ink-muted); text-align: center; }
.chat { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.chat-rij { display: flex; }
.chat-rij.uit { justify-content: flex-end; }
.chat-rij .bel { max-width: 85%; background: var(--purple-wash); }
.chat-rij.uit .bel { background: var(--purple-soft); }
.tabel { overflow-x: auto; margin-top: var(--space-4); }
.tabel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel th, .tabel td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---------- Productpagina en hulp (houder = brede kolom) ---------- */
.houder { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-7); }
.cg-hl { position: relative; display: inline-block; color: var(--purple-strong); z-index: 0; }
.cg-hl::after { content: ""; position: absolute; left: 3%; right: -1%; height: 0.15em; bottom: -0.03em; border-radius: 100% 40% 70% 40%; background: var(--sun); transform: rotate(-2deg); z-index: -1; }
.cg-eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong); background: var(--surface-raised); border-radius: var(--radius-pill); color: var(--purple-deep); font: 800 13px/1.2 var(--font-sans); padding: 10px 15px; box-shadow: var(--shadow-xs); }
.cg-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }

.held { position: relative; overflow: hidden; background: var(--surface-warm); padding: var(--space-16) 0 var(--space-section-sm); text-align: center; }
.held__tekst { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 0 var(--space-7); }
.held h1 { font-size: clamp(44px, 7.3vw, 96px); line-height: 1.02; letter-spacing: -0.07em; margin: var(--space-6) 0 var(--space-5); }
.lead { font-size: 19px; line-height: 1.65; color: var(--ink-soft); max-width: var(--measure); margin: 0 auto; }
.held .knoppen { justify-content: center; margin-top: var(--space-7); }
.held .knop { padding: 17px 28px; font-size: 16px; }
.held__beeld { position: relative; height: 360px; max-width: 900px; margin: var(--space-12) auto 0; }
.held__blob { position: absolute; inset: 30px 120px 20px; background: var(--gradient-glow); border-radius: 48% 52% 48% 42% / 51% 47% 53% 49%; transform: rotate(-3deg); }
.held__baan { position: absolute; left: 50%; top: 50%; width: 640px; height: 270px; border: 2px dashed var(--line-strong); border-radius: 50%; transform: translate(-50%, -50%) rotate(-8deg); }
.laag { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.held__vonk { position: absolute; width: 64px; opacity: .8; }
.held__vonk--l { left: 8%; top: 40px; transform: rotate(-14deg); }
.held__vonk--r { right: 8%; top: 20px; transform: scaleX(-1) rotate(-10deg); }

.cg-post { position: absolute; width: 230px; background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-xl); text-align: left; }
.cg-post__kop { display: flex; align-items: center; gap: 7px; margin: 2px 2px 12px; font: 800 12px/1.2 var(--font-sans); color: var(--ink); }
.cg-post__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--sun); }
.cg-post__avatar--mint { background: var(--mint); }
.cg-post__meer { margin-left: auto; color: var(--ink-muted); }
.cg-post__beeld { position: relative; height: 200px; border-radius: var(--radius-md); overflow: hidden; background: var(--gradient-post-warm); }
.cg-post__beeld--fris { background: var(--gradient-post-fresh); }
.cg-post__zon { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--sun); top: 34px; left: 26px; }
.cg-post__beeld--fris .cg-post__zon { background: var(--coral); width: 52px; height: 52px; top: auto; bottom: 34px; left: 30px; }
.cg-post__kopregel { position: absolute; left: 16px; right: 16px; bottom: 18px; font: 900 27px/1 var(--font-display); letter-spacing: -0.05em; color: var(--on-accent); }
.cg-post__beeld--fris .cg-post__kopregel { top: 22px; bottom: auto; text-align: center; font-size: 21px; line-height: 1.06; }
.cg-post__hart { display: inline-block; }
.cg-post__voet { display: flex; justify-content: space-between; margin: 12px 4px 2px; font: 800 12px/1.2 var(--font-sans); color: var(--ink); }
.cg-post--a { left: 70px; top: 40px; transform: rotate(-8deg); }
.cg-post--b { right: 70px; top: 20px; transform: rotate(7deg); }

.cg-prompt { position: absolute; left: 0; right: 0; margin: 0 auto; top: 110px; width: 360px; max-width: 86vw; z-index: 3; transform: rotate(-1deg); background: var(--surface-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); padding: 20px 22px; text-align: left; }
.cg-prompt__top { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); font: 900 14px/1.2 var(--font-display); letter-spacing: -0.02em; }
.cg-prompt__status { display: inline-flex; align-items: center; gap: 5px; font: 800 12px/1.2 var(--font-sans); color: var(--mint-strong); letter-spacing: 0; }
.cg-prompt__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.cg-prompt__woorden { font-size: 19px; font-weight: 800; line-height: 1.36; letter-spacing: -0.03em; margin: 0 0 var(--space-4); }
.cg-prompt__denkt { display: none; gap: 5px; align-items: center; width: max-content; background: var(--purple-wash); border-radius: var(--radius-sm); padding: 13px 15px; margin: 0; }
.cg-prompt__denkt i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.cg-prompt__antwoord { background: var(--purple-wash); border-radius: var(--radius-sm); padding: 10px 13px; font-size: 14px; line-height: 1.45; color: var(--purple-deep); margin: 0; }

.cg-sticker { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-pill); padding: 10px 15px 10px 11px; box-shadow: var(--shadow-sm); font: 900 12px/1.2 var(--font-sans); white-space: nowrap; }
.cg-sticker i { display: inline-grid; place-items: center; border-radius: 50%; width: 23px; height: 23px; font-size: 11px; font-style: normal; background: var(--coral); color: var(--on-accent); }
.cg-sticker--mint i { background: var(--mint); }
.cg-sticker--zon i { background: var(--sun); }
.cg-sticker--1 { left: 30px; top: 0; transform: rotate(-8deg); }
.cg-sticker--2 { right: 20px; top: 270px; transform: rotate(8deg); }
.cg-sticker--3 { left: 190px; bottom: 0; transform: rotate(-5deg); }

.lint { background: var(--purple); color: var(--on-purple); overflow: hidden; padding: 15px 0; transform: rotate(-1deg); margin: 0 -20px; }
.lint__binnen { display: flex; width: max-content; white-space: nowrap; font: 800 18px/1.2 var(--font-display); letter-spacing: -0.01em; }
.lint__binnen span { margin-right: 28px; }
.lint__binnen span:nth-child(even) { color: var(--sun); }

.blok { padding: var(--space-section) 0; }
.blok--warm { background: var(--surface-warm); }
.blokkop { max-width: 760px; margin: 0 auto var(--space-10); text-align: center; }
.blokkop h2 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -0.06em; margin: 0 0 var(--space-4); }
.blokkop p { font-size: 17px; color: var(--ink-soft); margin: 0 auto; max-width: 630px; }
.accent { color: var(--purple-strong); }
.accent--coral { color: var(--coral-strong); }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.film-blok { align-items: center; }
.film { display: block; justify-self: center; width: 100%; max-width: 320px; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); background: var(--purple-deep); }
@media (min-width: 861px) { .film-blok--links .film { order: -1; } }
/* Film 12 onder de drie stappen: liggend op een computer, staand op een telefoon (studioFilm in website.ts). */
.studio-film { margin-top: var(--space-20); text-align: center; }
.studio-film .titel { max-width: 760px; margin: 0 auto var(--space-8); }
.film--liggend { max-width: 960px; aspect-ratio: 16 / 9; margin: 0 auto; }
.studio-film .film:not(.film--liggend) { display: none; margin: 0 auto; }
@media (max-width: 700px) {
  .studio-film { margin-top: var(--space-16); }
  .studio-film .film--liggend { display: none; }
  .studio-film .film:not(.film--liggend) { display: block; }
}
.held__gratis { margin: var(--space-4) 0 0; }
.stap { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 29px 27px 27px; min-height: 280px; background: var(--purple-soft); }
.stap--coral { background: var(--coral-soft); }
.stap--mint { background: var(--mint-soft); }
.stap__nr { font: 900 12px/1.2 var(--font-sans); letter-spacing: .1em; color: var(--purple-deep); text-transform: uppercase; }
.stap h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.048em; margin: 6px 0 10px; }
.stap p { font-size: 15px; color: var(--ink-soft); max-width: 260px; margin: 0 0 84px; } /* nooit onder het teken rechtsonder */
.stap__teken { position: absolute; right: 26px; bottom: 26px; width: 80px; height: 80px; border-radius: var(--radius-xl); display: grid; place-items: center; background: var(--surface-raised); box-shadow: var(--shadow-sm); font: 900 36px/1 var(--font-display); color: var(--purple-strong); transform: rotate(9deg); }
.stap--coral .stap__teken { color: var(--coral-strong); transform: rotate(-11deg); }
.stap--mint .stap__teken { color: var(--mint-strong); }

.kaart { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 25px; background: var(--surface-raised); margin: 0; transition: transform .2s, box-shadow .2s; }
.kaart:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.kaart__icoon { width: 54px; height: 54px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 24px; margin-bottom: var(--space-5); background: var(--purple-soft); color: var(--purple-strong); }
.kaart--coral .kaart__icoon { background: var(--coral-soft); color: var(--coral-strong); }
.kaart--mint .kaart__icoon { background: var(--mint-soft); color: var(--mint-strong); }
.kaart--zon .kaart__icoon { background: var(--sun-soft); color: var(--sun-strong); }
.kaart h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.04em; margin: 0 0 7px; }
.kaart p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.lijst-check { list-style: none; padding: 0; }
.lijst-check li { position: relative; padding-left: 34px; margin-bottom: var(--space-3); }
.lijst-check li::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-soft); color: var(--mint-strong); font: 900 12px/1 var(--font-sans); }

.slot { position: relative; overflow: hidden; background: var(--gradient-cta); color: var(--on-purple); border-radius: var(--radius-xl); padding: var(--space-20) var(--space-10); text-align: center; }
.slot h2 { color: var(--on-purple); font-size: clamp(36px, 5.5vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -0.06em; margin: 0 0 var(--space-4); }
.slot p { color: var(--on-purple); font-size: 17px; max-width: 560px; margin: 0 auto; }
.slot .knop { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-sm); margin-top: var(--space-7); }
.slot .knop:hover { background: var(--surface-raised); }
.slot__zon { position: absolute; width: 180px; right: -40px; top: -40px; opacity: .9; }
@media (max-width: 630px) { .slot__zon { width: 110px; right: -38px; top: -38px; } }

.titel { font-size: clamp(32px, 4vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -0.06em; margin: 0 0 var(--space-4); }
.held--klein { padding-bottom: var(--space-12); }
.held--klein h1 { font-size: clamp(40px, 6vw, 72px); }
.hulpbeeld { margin: var(--space-5) 0 var(--space-6); }
.hulpbeeld img { display: block; width: auto; max-width: 100%; max-height: 520px; height: auto; }
.slot .knoppen { justify-content: center; }
.slot .knoppen .knop { margin-top: var(--space-3); }
.leestekst { max-width: var(--measure); margin: 0 auto; }
.leestekst h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.05em; margin: var(--space-12) 0 var(--space-3); }
.leestekst h3 { margin-top: var(--space-6); }
.leestekst figure { margin: var(--space-5) 0; }
.leestekst figure img { border-radius: var(--radius-md); border: 1px solid var(--line); }
.leestekst figcaption { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-2); }
.vraag { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.vraag summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.vraag summary::after { content: "+"; color: var(--purple-strong); font: 800 22px/1 var(--font-display); }
.vraag[open] summary::after { content: "\2212"; }
.vraag p { margin: var(--space-3) 0 0; color: var(--ink-soft); }

/* Hulp: Zo werkt je dashboard. Op een computer is de schermafbeelding breder dan de tekst. */
.hulp-inhoud { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.leestekst .hulp-scherm { margin: var(--space-6) 0 var(--space-8); }
.leestekst .hulp-scherm img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
@media (min-width: 1000px) { .leestekst .hulp-scherm { position: relative; left: 50%; width: min(960px, 100vw - 80px); transform: translateX(-50%); } }
/* Telefoon: het beeld is 390 x 720; vaste maat vooraf, zodat de pagina niet verschuift als het later laadt (sprong naar een onderwerp). */
@media (max-width: 640px) { .leestekst .hulp-scherm img { width: min(100%, 325px); height: auto; aspect-ratio: 390 / 720; max-height: none; margin: 0 auto; } }
.hulp-telefoons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.hulp-telefoons img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md); }

/* ---------- Prijzen (/prijzen, website-prijzen.ts) ---------- */
.blok--prijzen { padding-top: var(--space-8); }
.prijs-oprichters { max-width: 760px; margin: 0 auto var(--space-12); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--sun-soft); text-align: center; }
.prijs-oprichters p { margin: 0; }
.prijs-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.prijs-kaart { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 34px 28px 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.prijs-kaart--aanrader { border: 2px solid var(--purple); box-shadow: var(--shadow-lg); }
.prijs-kaart__label { position: absolute; top: -14px; left: 26px; }
.prijs-kaart h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.048em; margin: 0 0 6px; }
.prijs-kaart__voor { min-height: 3.3em; margin: 0 0 var(--space-5); font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.prijs-kaart__prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.prijs-kaart__bedrag { font: 800 54px/1 var(--font-display); letter-spacing: -0.06em; color: var(--ink); }
.prijs-kaart__per { font-weight: 700; color: var(--ink-soft); }
.prijs-kaart .klein { margin: var(--space-2) 0 0; }
.prijs-kaart .knop { align-self: stretch; margin: var(--space-6) 0; }
.prijs-kaart__basis { margin: 0 0 var(--space-3); font-weight: 800; }
.prijs-kaart .lijst-check { margin: 0; }
.prijs-kaart .lijst-check li { font-size: 15px; line-height: 1.55; }
.prijs-altijd { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: var(--space-10) 0 0; padding: 0; list-style: none; }
.prijs-altijd li { padding: 9px 16px; border-radius: var(--radius-pill); background: var(--purple-wash); color: var(--purple-deep); font: 800 13px/1.2 var(--font-sans); }
.prijs-vragen { max-width: var(--measure); margin: 0 auto; }
@media (max-width: 980px) {
  .prijs-raster { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; gap: var(--space-10); }
  .prijs-kaart__voor { min-height: 0; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 860px) {
  .raster, .raster--2 { grid-template-columns: 1fr; }
  .held__beeld { height: 330px; }
  .cg-post--a { left: -20px; } .cg-post--b { right: -20px; }
  .cg-sticker--3 { left: 10px; } .cg-sticker--2 { right: 0; }
  .held__baan { width: 92vw; }
  .blok { padding: var(--space-section-sm) 0; }
}
@media (max-width: 630px) {
  .kop__binnen, .houder, .vlak, .voet__binnen, .held__tekst { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  .kop nav a:not(.knop) { display: none; }
  .vlak { padding-top: var(--space-8); }
  section { padding: var(--space-5); }
  .cg-post { width: 170px; } .cg-post__beeld { height: 150px; } .cg-post__kopregel { font-size: 21px; }
  .cg-post--a { top: 70px; } .cg-post--b { top: 60px; }
  .cg-prompt { top: 150px; width: 300px; }
  .held__beeld { height: 410px; }
  .cg-prompt__woorden { font-size: 17px; }
  .cg-sticker--1 { left: 4px; } .cg-sticker--2 { top: 112px; right: 2px; } .cg-sticker--3 { display: none; }
  .held__blob { inset: 40px 10px 20px; }
  .slot { padding: var(--space-12) var(--space-5); border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  button:hover, a.knop:hover, .kaart:hover { transform: none; }
}

/* ---------- Beweging ----------
   Alleen voor wie beweging toestaat: de klasse "beweeg" op <html> zet pagina.ts alleen dan, en alles staat
   ook nog in de media query. Zonder JavaScript of met "minder beweging" is de pagina stil en volledig zichtbaar.
   campaigo.js zet de klassen voor de collage (speelt, denkt, beantwoord, akkoord, online), het onthullen
   bij scrollen (op, zien) en het stilzetten buiten beeld (rust). Alleen transform en opacity, voor soepelheid. */
@media (prefers-reduced-motion: no-preference) {
  /* Kop van de pagina: woord voor woord, daarna trekt de gele streep zich */
  .beweeg .held .cg-eyebrow { animation: cg-val .6s var(--veer) both; }
  .beweeg .held .cg-eyebrow::before, .cg-prompt__status::before { animation: cg-puls 2.2s ease-out 1.2s infinite; }
  .beweeg .held h1 .w { display: inline-block; animation: cg-woord .8s var(--veer) both; animation-delay: calc(.12s + var(--i) * .07s); }
  .beweeg .held .cg-hl::after { transform-origin: left center; animation: cg-streep .55s cubic-bezier(.65, 0, .35, 1) .85s both; }
  .beweeg .held .lead { animation: cg-op .7s ease-out .55s both; }
  .beweeg .held .knoppen { animation: cg-op .7s ease-out .7s both; }

  /* Collage: komt binnen, daarna dobbert alles zachtjes */
  .beweeg .held__blob { animation: cg-groei 1s var(--veer) .35s both, cg-blob 14s ease-in-out 1.4s infinite alternate; }
  .beweeg .held__baan { animation: cg-in .8s ease-out .6s both, cg-baan 18s ease-in-out 1.4s infinite alternate; }
  .beweeg .held__vonk { animation: cg-plop .7s var(--veer) 1.1s both, cg-twinkel 3.4s ease-in-out 1.8s infinite; }
  .beweeg .held__vonk--r { animation-delay: 1.25s, 2.6s; }
  .beweeg .cg-post--a { animation: cg-binnen-l .9s var(--veer) .85s both, cg-dobber 6s ease-in-out 1.8s infinite; }
  .beweeg .cg-post--b { animation: cg-binnen-r .9s var(--veer) 1s both, cg-dobber 7s ease-in-out 2.4s infinite; }
  .beweeg .cg-prompt { animation: cg-plop .7s var(--veer) 1.25s both; }
  .beweeg .cg-sticker { animation: cg-plop .6s var(--veer) both, cg-zweef 5s ease-in-out infinite; }
  .beweeg .cg-sticker--1 { animation-delay: 1.6s, 2.2s; }
  .beweeg .cg-sticker--2 { animation-delay: 1.8s, 2.6s; }
  .beweeg .cg-sticker--3 { animation-delay: 2s, 3s; }

  /* Het verhaal in de collage (campaigo.js): typen, nadenken, antwoorden, akkoord, online */
  .beweeg .speelt .cg-prompt__woorden .t { opacity: 0; }
  .beweeg .speelt .cg-prompt__woorden .t.aan { opacity: 1; }
  .cg-prompt__woorden .t { position: relative; }
  .cg-prompt__woorden .t.cursor::after { content: ""; position: absolute; right: -3px; top: .1em; width: 2px; height: 1.05em; border-radius: 1px; background: var(--purple); animation: cg-knipper .8s steps(1) infinite; }
  .beweeg .speelt:not(.beantwoord) .cg-prompt__antwoord { display: none; }
  .beweeg .denkt .cg-prompt__denkt { display: flex; animation: cg-plop .4s var(--veer) both; }
  .beweeg .denkt .cg-prompt__denkt i { animation: cg-stip 1s ease-in-out infinite; }
  .beweeg .denkt .cg-prompt__denkt i:nth-child(2) { animation-delay: .15s; }
  .beweeg .denkt .cg-prompt__denkt i:nth-child(3) { animation-delay: .3s; }
  .beweeg .beantwoord .cg-prompt__antwoord { transform-origin: left top; animation: cg-plop .5s var(--veer) both; }
  .beweeg .speelt:not(.akkoord) .cg-sticker--2, .beweeg .speelt:not(.online) .cg-sticker--3 { opacity: 0; animation: none; }
  .beweeg .speelt.akkoord .cg-sticker--2, .beweeg .speelt.online .cg-sticker--3 { animation: cg-plop .6s var(--veer) both, cg-zweef 5s ease-in-out .6s infinite; }
  .beweeg .online .cg-post--a .cg-post__hart { color: var(--coral-strong); animation: cg-hart .6s var(--veer) both; }
  .cg-zweefhart { position: absolute; left: 14px; bottom: 26px; color: var(--coral-strong); font-size: 15px; pointer-events: none; animation: cg-hartje 1.6s ease-out both; }

  /* Lint loopt rond; het puntje van het woordmerk stuitert bij aanwijzen */
  .beweeg .lint__binnen { animation: cg-lint 38s linear infinite; }
  .cg-wordmark:hover .cg-wordmark__dot { animation: cg-stuiter .7s var(--veer); }

  /* Onthullen bij scrollen (campaigo.js zet "op" en daarna "zien") */
  .beweeg .op:not(.zien) { opacity: 0; }
  .beweeg .op.zien { animation: cg-omhoog .8s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .beweeg .stap.zien .stap__teken { animation: cg-plop .7s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 90ms + .35s); }
  .beweeg .lijst-check li.zien::before { animation: cg-plop .5s var(--veer) backwards; animation-delay: calc(var(--i, 0) * 90ms + .25s); }
  .stap__teken, .kaart__icoon { transition: rotate .45s var(--veer), scale .45s var(--veer); }
  .stap:hover .stap__teken { rotate: -16deg; scale: 1.08; }
  .kaart:hover .kaart__icoon { rotate: -10deg; scale: 1.1; }

  /* Slot: de zon draait, het verloop golft */
  .beweeg .slot { background-size: 180% 180%; animation: cg-verloop 12s ease-in-out infinite alternate; }
  .beweeg .slot.op.zien { animation: cg-omhoog .8s var(--veer) both, cg-verloop 12s ease-in-out .8s infinite alternate; }
  .beweeg .slot__zon { animation: cg-draai 40s linear infinite; }

  /* Studio: een melding dat iets gelukt is, komt vrolijk binnen */
  .beweeg .gelukt { animation: cg-val .6s var(--veer) both; }

  /* Buiten beeld staat alles stil (scheelt rekenwerk op telefoons) */
  .rust, .rust * { animation-play-state: paused !important; }
}

@keyframes cg-woord { from { opacity: 0; translate: 0 .45em; rotate: 7deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-streep { from { transform: rotate(-2deg) scaleX(0); } to { transform: rotate(-2deg) scaleX(1); } }
@keyframes cg-val { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes cg-op { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes cg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-omhoog { from { opacity: 0; translate: 0 34px; rotate: -1.5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-groei { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes cg-plop { 0% { opacity: 0; scale: .3; } 100% { opacity: 1; scale: 1; } }
@keyframes cg-binnen-l { from { opacity: 0; translate: -70px 50px; rotate: -14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-binnen-r { from { opacity: 0; translate: 70px 50px; rotate: 14deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes cg-dobber { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes cg-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes cg-twinkel { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 1.18; rotate: 12deg; } }
@keyframes cg-blob { 0% { border-radius: 48% 52% 48% 42% / 51% 47% 53% 49%; } 50% { border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%; } 100% { border-radius: 55% 45% 42% 58% / 58% 44% 56% 42%; } }
@keyframes cg-baan { from { transform: translate(-50%, -50%) rotate(-8deg); } to { transform: translate(-50%, -50%) rotate(-3deg); } }
@keyframes cg-puls { 0% { box-shadow: 0 0 0 0 rgba(117, 220, 204, .7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(117, 220, 204, 0); } }
@keyframes cg-knipper { 50% { opacity: 0; } }
@keyframes cg-stip { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -5px; opacity: 1; } }
@keyframes cg-hart { 0% { scale: 1; } 40% { scale: 1.7; } 100% { scale: 1; } }
@keyframes cg-hartje { from { opacity: 1; translate: 0 0; scale: .6; } to { opacity: 0; translate: var(--x, 0px) -90px; scale: 1.3; } }
@keyframes cg-lint { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cg-stuiter { 0%, 100% { translate: 0 0; } 35% { translate: 0 -9px; } 65% { translate: 0 1px; } }
@keyframes cg-verloop { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes cg-draai { to { rotate: 360deg; } }

/* ---------- Dashboard: de schil en gedeelde onderdelen (Campaigo dashboard, 9-11-2026) ----------
   :where() houdt de terugzetregels zwak, zodat elke klasse hieronder er gewoon overheen gaat. */
:where(.app) section { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
:where(.app) button, :where(.app) a.knop { margin: 0; }
:where(.app) label { margin: 0; }
:where(.app) h1, :where(.app) h2, :where(.app) h3, :where(.app) p { margin: 0; }
:where(.app) ul, :where(.app) ol { margin: 0; }
:where(.app) .fout, :where(.app) .let-op, :where(.app) .gelukt { margin: 0; }
:where(.app) form { margin: 0; }
body:has(.app) { background: var(--surface-warm); }

.app { flex: 1 0 auto; display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); background: var(--surface-warm); }
.app__inhoud { flex: 1 1 0; min-width: 0; padding: var(--space-5) var(--space-6) var(--space-8); }
.app__binnen { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); }
.app__voet { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
.app__voet a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.app__voet a:hover { color: var(--purple-strong); text-decoration: underline; }
.app__voet span { margin-left: auto; }

.zijbalk { flex: 0 0 264px; position: sticky; top: var(--space-4); height: calc(100vh - var(--space-8)); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 24px 16px 16px; background: var(--surface-raised); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.zijbalk__merk { padding: 0 var(--space-2); }
.zijbalk__account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-warm); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.zijbalk__avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--sun); color: var(--on-accent); display: grid; place-items: center; font: 900 16px/1 var(--font-display); text-decoration: none; }
.zijbalk__wie { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zijbalk__wie strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zijbalk__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; color: var(--ink-muted); }
.zijbalk__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.zijbalk__status i.is-kapot { background: var(--danger); }
.zijbalk__groep { display: flex; flex-direction: column; gap: var(--space-1); }
.zijbalk__kopje { padding: 0 14px var(--space-1); font: 900 11px/1.2 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }
.zijbalk__link { display: flex; align-items: center; gap: var(--space-3); padding: 11px 14px; border-radius: var(--radius-md); font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--ink-soft); text-decoration: none; transition: background-color .2s, color .2s; }
.zijbalk__link > span:first-of-type { flex: 1; }
.zijbalk__link:hover { background: var(--purple-wash); color: var(--purple-strong); }
.zijbalk__link.is-actief { background: var(--purple-soft); color: var(--purple-strong); }
.zijbalk__teller { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--sun); color: var(--on-accent); font: 800 12px/22px var(--font-sans); text-align: center; }
.zijbalk__actief { font: 800 11px/1.2 var(--font-sans); color: var(--mint-strong); }
.zijbalk__ruimte { flex: 1 0 var(--space-2); }
.zijbalk__pauze { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--purple-wash); display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.zijbalk__pauze strong { font: 700 16px/1.25 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.zijbalk__pauze.is-aan { background: var(--sun-soft); color: var(--ink); }
.zijbalk__pauze form, .zijbalk__pauze > .knop { margin-top: var(--space-1); }
button.zijbalk__uit { width: 100%; justify-content: flex-start; padding: var(--space-1) 14px; background: none; box-shadow: none; color: var(--ink-muted); font: 700 13px/1.4 var(--font-sans); }
button.zijbalk__uit:hover { background: none; color: var(--purple-strong); transform: none; }

.bovenbalk, .onderbalk { display: none; }
.onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; align-items: center; justify-content: space-around; padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--surface-raised); border-top: 1px solid var(--line); }
.onderbalk__link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; min-height: 48px; justify-content: center; font: 700 11px/1.2 var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.onderbalk__link.is-actief { color: var(--purple-strong); font-weight: 800; }
.onderbalk__teller { position: absolute; top: -2px; right: 8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--sun); color: var(--on-accent); font: 800 11px/18px var(--font-sans); text-align: center; }
.onderbalk__nieuw { width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; background: var(--purple); color: var(--on-purple); display: grid; place-items: center; font-size: 26px; text-decoration: none; box-shadow: var(--shadow-cta); }
.meer { padding: var(--space-2) var(--space-5); gap: 0; }
.meer__rij { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; font-weight: 800; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.meer__rij:first-child { border-top: 0; }
.meer__rij > span:first-of-type { flex: 1; }
.meer__pijl { color: var(--purple-strong); }

/* Kop van een scherm */
.s-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.s-kop__tekst { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s-kicker { font: 900 12px/1.2 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--purple-strong); }
.s-titel { font-weight: 800; font-size: clamp(32px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.055em; }
.s-titel--groot { font-size: clamp(34px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.06em; }
.s-lead { font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 640px; }
.s-terug { font-size: 14px; font-weight: 800; text-decoration: none; }
.s-h2 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.04em; }
.s-h3 { font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -0.03em; }

/* Bouwblokken */
.s-kaart { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.s-kaart--schaduw { box-shadow: var(--shadow-xs); }
.s-vlak { border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; position: relative; overflow: hidden; }
.s-vlak--paars { background: var(--purple-soft); }
.s-vlak--wash { background: var(--purple-wash); }
.s-vlak--coral { background: var(--coral-soft); }
.s-vlak--mint { background: var(--mint-soft); }
.s-vlak--zon { background: var(--sun-soft); }
.s-sectie { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.s-sectiekop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.s-sectiekop a { font-size: 14px; font-weight: 800; text-decoration: none; }
.s-rij { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.s-breed { flex: 1.3 1 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.s-smal { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.s-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 300px), 100%), 1fr)); gap: var(--space-5); align-items: start; }
.s-stapel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.s-regel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.s-tekst { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.s-meta { font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.s-leeg { padding: var(--space-6); border-radius: var(--radius-lg); border: 2px dashed var(--line-strong); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.s-leeg strong { font: 700 18px/1.25 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.s-leeg .knop, .s-leeg .knoppen { margin-top: var(--space-2); }
.s-getal { font: 800 40px/1.05 var(--font-display); letter-spacing: -0.05em; }
.s-duim { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--gradient-post-warm); }
.s-duim--fris { background: var(--gradient-post-fresh); }
.s-duim--groot { width: 64px; height: 80px; }
.s-hulpvak { font-size: 15px; line-height: 1.6; }
.s-hulpvak ul { padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }

/* Knoppen: formaten bovenop knop, nee en gevaar */
:is(button, a.knop).knop--klein { font-size: 13px; padding: 11px 18px; }
:is(button, a.knop).knop--groot { font-size: 16px; padding: 18px 30px; }
:is(button, a.knop).knop--blok { display: flex; width: 100%; }
:is(button, a.knop).knop--spook { background: transparent; color: var(--purple-strong); box-shadow: none; padding-left: var(--space-3); padding-right: var(--space-3); }
:is(button, a.knop).knop--spook:hover { background: var(--purple-wash); transform: none; }

/* Chips, tekstvak voor Claude en voorstellen */
.cg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--purple-deep); font: 800 13px/1.2 var(--font-sans); cursor: pointer; text-decoration: none; box-shadow: none; transition: background-color .2s, color .2s, border-color .2s; }
.cg-chip:hover, .cg-chip[aria-pressed="true"], .cg-chip[aria-current="true"] { background: var(--purple); border-color: var(--purple); color: var(--on-purple); transform: none; text-decoration: none; }
.cg-input { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-raised); border: 2px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 8px 8px 20px; box-shadow: var(--shadow-lg); transition: border-color .2s; }
.cg-input:focus-within { border-color: var(--focus); }
.cg-input__spark { color: var(--purple); font-size: 18px; flex: none; }
.cg-input input.cg-input__field { flex: 1; min-width: 0; width: auto; border: 0; border-radius: 0; background: transparent; outline: none; font: 700 16px/1.4 var(--font-sans); color: var(--ink); padding: 10px 0; }
.cg-input input.cg-input__field::placeholder { color: var(--ink-muted); font-weight: 500; }
button.cg-input__send { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--purple); color: var(--on-purple); font-size: 20px; box-shadow: none; display: grid; place-items: center; }
button.cg-input__send:hover { background: var(--purple-hover); transform: rotate(-8deg); }
.cg-input-hint { font-size: 12px; color: var(--ink-muted); margin: var(--space-2) 0 0 var(--space-5); }
.s-claude { max-width: 760px; width: 100%; }

/* Formulieren binnen het dashboard */
.s-veld { display: flex; flex-direction: column; gap: 6px; }
.s-veld label, .s-label { font-size: 14px; font-weight: 800; }
.s-schakel { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; transition: background-color .2s; accent-color: auto; }
input[type=checkbox].s-schakel { width: 52px; height: 30px; }
.s-schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-xs); transition: transform .2s; }
.s-schakel:checked { background: var(--purple); }
.s-schakel:checked::after { transform: translateX(22px); }
.s-keuze { display: inline-flex; flex-wrap: wrap; padding: var(--space-1); gap: var(--space-1); border-radius: var(--radius-pill); background: var(--purple-wash); }
.s-keuze label { margin: 0; }
.s-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s-keuze span { display: block; min-width: 64px; padding: 10px var(--space-4); border-radius: var(--radius-pill); font: 800 14px/1.2 var(--font-sans); text-align: center; color: var(--ink-soft); cursor: pointer; }
.s-keuze input:checked + span { background: var(--surface-raised); color: var(--purple-strong); box-shadow: var(--shadow-xs); }
.s-keuze input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Tabel in een kaart die zelf scrollt */
.s-tabel { overflow-x: auto; border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--line); }
.s-tabel table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.s-tabel th { text-align: left; padding: var(--space-4); font: 800 12px/1.2 var(--font-sans); color: var(--ink-muted); }
.s-tabel td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); }

/* Post in een lijst: beeld links, tekst en knoppen rechts */
.s-post { display: flex; flex-wrap: wrap; gap: 18px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.s-post__beeld { position: relative; width: 128px; height: 160px; flex: none; border-radius: var(--radius-md); overflow: hidden; background: var(--gradient-post-warm); }
.s-post__beeld img, .s-post__beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-post__teller { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font: 800 10px/1.4 var(--font-sans); }
.s-post__info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }

/* Beweging: kaarten komen rustig binnen; alleen transform en opacity */
@media (prefers-reduced-motion: no-preference) {
  .beweeg .app__binnen > * { animation: cg-op .5s ease-out both; }
}

/* Laptop: de hele zijbalk moet zonder scrollen passen, ook Instellingen en Uitloggen */
@media (max-height: 1000px) and (min-width: 901px) {
  .zijbalk { gap: var(--space-3); padding-top: 18px; padding-bottom: var(--space-3); }
  .zijbalk__link { padding: 8px 14px; }
  .zijbalk__pauze { padding: var(--space-3); }
  .zijbalk__pauze > span { display: none; }
}

/* Telefoon: zijbalk weg, boven- en onderbalk erbij */
@media (max-width: 900px) {
  .app { display: block; padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
  .zijbalk { display: none; }
  .bovenbalk { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--gutter-sm) 0; }
  .bovenbalk .cg-wordmark { font-size: 24px; }
  .onderbalk { display: flex; }
  .app__inhoud { padding: var(--space-5) var(--gutter-sm) var(--space-6); }
  .app__binnen { gap: var(--space-6); }
  .app__voet span { margin-left: 0; }
  .zijbalk__pauze { background: var(--surface-raised); border: 1px solid var(--line); }
  button.zijbalk__uit { justify-content: center; }
  .s-kaart, .s-vlak { padding: var(--space-5); }
}


/* ---------- Dashboard: vandaag ---------- */
/* ---------- Dashboard: Vandaag, Maken en de postpagina ---------- */

/* Vandaag: de vraag bovenaan */
.s-claude input.cg-input__field { text-overflow: ellipsis; }
.s-vandaag-vraag { gap: var(--space-4); padding: var(--space-8); }
.s-vandaag-vraag > :not(.s-vandaag-ster) { position: relative; }
.s-vandaag-ster { position: absolute; right: -18px; top: -30px; font: 900 180px/1 var(--font-display); color: var(--purple); opacity: .12; pointer-events: none; }

/* Vandaag: eerste stappen */
.s-vandaag-stap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.s-vandaag-stap__nr { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--surface-raised); color: var(--ink); display: grid; place-items: center; font: 900 15px/1 var(--font-display); }
.s-vandaag-stap__tekst { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Lijsten: deze week, en klaargezet op Maken */
.s-vandaag-lijst { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.s-vandaag-rij { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 10px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; transition: background-color .2s; }
.s-vandaag-rij:hover { background: var(--purple-wash); }
.s-vandaag-rij--kort { grid-template-columns: 40px minmax(0, 1fr) auto; }
.s-vandaag-rij--wacht { background: var(--purple-wash); }
.s-vandaag-rij--leeg { border: 2px dashed var(--line-strong); }
.s-vandaag-rij__tekst { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.s-vandaag-rij__tekst strong { font-size: 14px; line-height: 1.35; }
.s-vandaag-dag { text-align: center; }
.s-vandaag-dag span { display: block; font: 800 11px/1.2 var(--font-sans); color: var(--ink-muted); }
.s-vandaag-dag strong { font: 800 22px/1.1 var(--font-display); }
.s-vandaag-plus { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--purple-soft); color: var(--purple-strong); display: grid; place-items: center; font: 800 20px/1 var(--font-sans); }

/* Hoe gaat het en net binnen */
.s-vandaag-label { font-size: 14px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.s-vandaag-woord { font: 800 30px/1.1 var(--font-display); letter-spacing: -0.05em; }
.s-vandaag-binnen { display: flex; gap: var(--space-4); align-items: center; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); min-width: 0; }
.s-vandaag-binnen__tekst { flex: 1; gap: 6px; overflow-wrap: anywhere; }
.s-vandaag-bubbel { width: 64px; height: 64px; flex: none; border-radius: var(--radius-md); background: var(--sun-soft); color: var(--ink); display: grid; place-items: center; }

.s-maken-link { font-size: 13px; font-weight: 800; text-decoration: none; }

/* Maken: de stappen rechts */
.s-maken-stappen { list-style: none; padding: 0; counter-reset: stap; display: flex; flex-direction: column; gap: var(--space-4); }
.s-maken-stappen li { counter-increment: stap; position: relative; margin: 0; padding-left: 44px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.s-maken-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-raised); color: var(--ink); display: grid; place-items: center; font: 900 15px/1 var(--font-display); }
.s-maken-stappen strong { color: var(--ink); font-size: 15px; }

/* Postpagina: zo ziet het eruit */
.s-maken-voorbeeld { width: 100%; max-width: 480px; background: var(--surface-raised); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: var(--space-3); }
.s-maken-account { display: flex; align-items: center; gap: var(--space-2); font: 800 13px/1.2 var(--font-sans); overflow-wrap: anywhere; }
.s-maken-account .zijbalk__avatar { width: 28px; height: 28px; font-size: 13px; }
.s-maken-media { display: grid; gap: var(--space-2); }
.s-maken-media--meer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-maken-item { position: relative; min-width: 0; }
.s-maken-item--video { grid-column: 1 / -1; }
.s-maken-item img, .s-maken-item video { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: var(--radius-md); background: var(--purple-wash); }
/* Een story staat rechtop in beeld (9:16), zoals op een telefoon. */
.s-maken-voorbeeld--story .s-maken-item img, .s-maken-voorbeeld--story .s-maken-item video { aspect-ratio: 9 / 16; max-width: 320px; max-height: none; margin-inline: auto; }
.s-maken-leeg { height: 240px; border-radius: var(--radius-md); background: var(--gradient-post-warm); }
.s-maken-bijschrift { margin: 0 var(--space-1) var(--space-1); font-size: 14px; line-height: 1.5; }

/* Postpagina: wanneer en tekst aanpassen */
.s-maken-tijdveld input[type=datetime-local] { width: 100%; }
.s-maken-midden { text-align: center; }
.s-maken-tijd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--purple-wash); font-size: 14px; font-weight: 700; }
.s-maken-tijd svg { flex: none; }
.s-maken-aanpassen { display: block; }
.s-maken-aanpassen summary { font-family: var(--font-display); color: var(--ink); cursor: pointer; }
.s-maken-aanpassen__binnen { margin-top: var(--space-4); }

/* Bevestiging na goedkeuren */
.s-maken-klaar { align-items: center; text-align: center; gap: 18px; padding: var(--space-12) var(--space-7); }
.s-maken-klaar .s-lead { max-width: 420px; }
.s-maken-vink { width: 120px; height: 120px; border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-md); display: grid; place-items: center; transform: rotate(9deg); font: 900 56px/1 var(--font-display); color: var(--ink); }
.s-maken-klaar__knoppen { width: 100%; max-width: 340px; margin-top: 10px; }

/* Telefoon */
@media (max-width: 480px) {
  .s-vandaag-vraag { padding: var(--space-5); }
  .s-vandaag-rij { grid-template-columns: 44px 40px minmax(0, 1fr); row-gap: var(--space-1); }
  .s-vandaag-rij .cg-badge { grid-column: 3; justify-self: start; }
  .s-vandaag-rij--kort { grid-template-columns: 40px minmax(0, 1fr); }
  .s-vandaag-rij--kort .cg-badge { grid-column: 2; }
  .s-maken-klaar { padding: var(--space-10) var(--space-5); }
}


/* ---------- Dashboard: planning ---------- */
/* Planning: weekraster, maandraster en ideeënbak. Alleen tokens. */
.s-planning-legenda { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin-right: var(--space-1); }
.s-planning-pijl { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font-size: 18px; text-decoration: none; }
.s-planning-pijl:hover { background: var(--purple-wash); color: var(--purple-strong); text-decoration: none; }

/* Het raster scrolt op de telefoon binnen zijn eigen vak, de pagina niet. */
.s-planning-vak { overflow-x: auto; border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.s-planning-raster { min-width: 1060px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 14px; }
.s-planning-dag { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 420px; padding: 6px; border-radius: var(--radius-lg); }
.s-planning-los { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--space-3); align-items: start; }
.s-planning-dag.is-vandaag, .s-planning-cel.is-vandaag { background: var(--purple-wash); }
.s-planning-dag__kop { display: flex; align-items: baseline; gap: 6px; }
.s-planning-dag__naam { font-size: 12px; font-weight: 800; color: var(--ink-muted); }
.is-vandaag .s-planning-dag__naam, .s-planning-dag__vandaag { color: var(--purple-strong); }
.s-planning-dag__nummer { font: 700 24px/1.1 var(--font-display); }
.s-planning-dag__vandaag { margin-left: auto; font-size: 11px; font-weight: 800; }

.s-planning-post { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 6px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-xs); overflow-wrap: anywhere; }
.s-planning-post--wacht { border: 2px solid var(--sun); }
.s-planning-post__beeld { height: 108px; border-radius: var(--radius-sm); overflow: hidden; background: var(--gradient-post-warm); }
.s-planning-post__beeld img, .s-planning-post__beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-planning-post__titel { font-size: 13px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.s-planning-post__titel a { color: inherit; text-decoration: none; }
.s-planning-post__titel a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.s-planning-post__titel a:hover { color: var(--purple-strong); }
a.knop.s-planning-post__actie { position: relative; z-index: 1; white-space: normal; text-align: center; padding: 9px 10px; }

.s-planning-leeg { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.s-planning-leeg__nieuw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-height: 104px; padding: 10px; border-radius: var(--radius-md); border: 2px dashed var(--line-strong); color: var(--ink-soft); font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; }
.s-planning-leeg__nieuw:hover { background: var(--purple-wash); color: var(--purple-strong); text-decoration: none; }
.s-planning-leeg__plus { font-size: 22px; line-height: 1; color: var(--purple-strong); }
.s-planning-leeg__claude { align-self: center; font-size: 12px; font-weight: 800; text-decoration: none; }
.s-planning-leeg__claude:hover { text-decoration: underline; }
/* Staat er al een post op die dag, dan blijft er een kleine knop over voor nog een post. */
.s-planning-dag:has(.s-planning-post) .s-planning-leeg__nieuw { min-height: 0; flex-direction: row; padding: 6px; font-size: 12px; }
.s-planning-dag:has(.s-planning-post) .s-planning-leeg__plus { font-size: 16px; }
.s-planning-dag:has(.s-planning-post) .s-planning-leeg__claude { display: none; }

/* Maand */
.s-planning-maand { min-width: 760px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); padding: 14px; }
.s-planning-maand > .s-planning-dag__naam { padding: var(--space-1) var(--space-2); }
.s-planning-cel { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; min-height: 96px; padding: var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--line); overflow-wrap: anywhere; }
.s-planning-cel--buiten { border: 0; }
.s-planning-cel__dag { font: 700 16px/1.2 var(--font-display); color: var(--ink); text-decoration: none; }
.s-planning-cel__dag:hover { color: var(--purple-strong); }
.s-planning-maandpost { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: 6px; border-radius: var(--radius-xs); background: var(--surface-warm); color: var(--ink); text-decoration: none; }
.s-planning-maandpost:hover { background: var(--purple-soft); text-decoration: none; }
.s-planning-maandpost__titel { font-size: 12px; line-height: 1.3; font-weight: 800; }
/* Soort post (foto, carrousel, Reel, story): een teken voor het woord, in plum. Geen kleur, want kleur is de status. */
.s-soort-teken { display: inline-block; vertical-align: -3px; margin-right: 5px; color: var(--ink); }

/* Ideeënbak */
.s-planning-idee { display: flex; gap: var(--space-3); min-width: 0; padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-warm); overflow-wrap: anywhere; }
.s-planning-idee__info { flex: 1 1 0; }
.s-planning-nieuw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.s-planning-nieuw__titel { flex: 1 1 260px; min-width: 0; }

/* Ritme (besluit 30): terugkomers, zelf in de app, wat opvalt en de beste momenten. */
.visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-planning-post--terug { border: 2px dashed var(--sun); background: var(--surface-warm); }
.s-planning-post__beeld--terug { height: 64px; display: grid; place-items: center; background: var(--sun-soft); color: var(--ink); font: 700 28px/1 var(--font-display); }
.s-planning-post--zelf { border: 2px dashed var(--line-strong); background: var(--purple-wash); }
.s-planning-post--terug form, .s-planning-post--zelf form { position: relative; z-index: 1; }
.s-planning-maandpost--terug { background: var(--sun-soft); }
.s-planning-maandpost--zelf { background: var(--purple-wash); }
.s-opvalt { border-color: var(--sun); }
.s-opvalt__lijst { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.2em; margin: 0; color: var(--ink); }
.s-momenten-kaart summary { cursor: pointer; font-family: var(--font-display); color: var(--ink); }
.s-momenten { min-width: 640px; width: 100%; border-collapse: separate; border-spacing: 4px; padding: 10px; }
.s-momenten th { font-size: 12px; font-weight: 800; color: var(--ink-muted); text-align: left; padding: 4px 6px; }
.s-moment { position: relative; min-width: 76px; padding: 8px; border-radius: var(--radius-sm); vertical-align: top; color: var(--ink); }
.s-moment strong { display: block; font-size: 13px; }
.s-moment .s-meta { display: block; font-size: 11px; }
.s-moment--sterk { background: var(--mint-soft); }
.s-moment--gewoon { background: var(--surface-warm); }
.s-moment--zwak { background: var(--coral-soft); }
.s-moment--leeg { background: transparent; border: 1px dashed var(--line); }


/* ---------- Dashboard: merk ---------- */
/* Mijn merk. Alleen tokens. Formuliervelden blijven gewone velden, dus alles werkt zonder JavaScript. */
.s-merk-stand { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 18px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.s-merk-stand__kop { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; font-weight: 800; }
.s-merk-stand__getal { color: var(--purple-strong); }
.s-merk-balk { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 10px; border: 0; border-radius: var(--radius-pill); background: var(--purple-soft); overflow: hidden; }
.s-merk-balk::-webkit-progress-bar { background: var(--purple-soft); border-radius: var(--radius-pill); }
.s-merk-balk::-webkit-progress-value { background: var(--purple); border-radius: var(--radius-pill); }
.s-merk-balk::-moz-progress-bar { background: var(--purple); border-radius: var(--radius-pill); }

.s-merk-formulier { gap: var(--space-6); }
.s-merk-groep { border: 0; margin: 0; padding: 0; background: none; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.s-merk-groep legend { float: none; margin: 0 0 var(--space-2); }
.s-merk-keuzes { gap: var(--space-6); align-items: flex-start; }
.s-merk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.s-merk-chip { position: relative; margin: 0; }
.s-merk-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s-merk-chip input:checked + .cg-chip { background: var(--purple); border-color: var(--purple); color: var(--on-purple); }
.s-merk-chip input:checked + .cg-chip::before { content: "\2713"; }
.s-merk-chip input:focus-visible + .cg-chip { outline: 3px solid var(--focus); outline-offset: 3px; }

.s-merk-letterlijk { margin: 0; padding: var(--space-4); max-height: 340px; overflow-y: auto; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-xs); color: var(--ink); font: 400 13px/1.55 var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }

.s-merk-kleuren { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.s-merk-kleur { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.s-merk-kleur__kiezer { width: 44px; height: 44px; padding: 0; border: 2px solid var(--line-strong); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.s-merk-kleur:has(input[type=checkbox]:not(:checked)) .s-merk-kleur__kiezer { opacity: .45; }
.s-merk-kleur__kiezer::-webkit-color-swatch-wrapper { padding: 0; }
.s-merk-kleur__kiezer::-webkit-color-swatch { border: 0; border-radius: 50%; }
.s-merk-kleur__kiezer::-moz-color-swatch { border: 0; border-radius: 50%; }
.s-merk-kleur__aan { display: flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 700; color: var(--ink-soft); }

.s-merk-posts { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; border-radius: var(--radius-md); border: 1px solid var(--line); }
.s-merk-post { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); font-weight: 500; border-top: 1px solid var(--line); cursor: pointer; }
.s-merk-post:first-child { border-top: 0; }
.s-merk-post:hover { background: var(--purple-wash); }
.s-merk-post input { flex: none; margin-top: 2px; }
.s-merk-post__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.s-merk-post__begin { font-size: 14px; line-height: 1.4; color: var(--ink); }


/* ---------- Dashboard: resultaten ---------- */
/* ---------- Scherm Resultaten ---------- */
.s-kaart.s-resultaten-kort { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
.s-resultaten-kort__teken { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); background: var(--sun); color: var(--on-accent); display: grid; place-items: center; font-size: 18px; }
.s-resultaten-kort__zin { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 760px; }
.s-resultaten-kort__zin strong { color: var(--ink); }

.s-vlak.s-resultaten-tegel { gap: var(--space-1); }
.s-resultaten-tegel__label { font-size: 14px; font-weight: 800; color: var(--ink); }
.s-resultaten-tegel__sub { font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--ink-soft); }
.s-getal.s-resultaten-onbekend { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.03em; padding: var(--space-2) 0; }

/* Staafjes per week. De hoogte komt uit een klasse in stappen van 5%; de echte waarde staat er als tekst bij. */
.s-resultaten-staven { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-4); }
.s-resultaten-staaf { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s-resultaten-staaf__spoor { height: 170px; padding-top: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1); font-size: 14px; }
.s-resultaten-staaf__balk { display: block; height: var(--deel); min-height: 0; flex: none; border-radius: var(--radius-xs) var(--radius-xs) var(--radius-tail) var(--radius-tail); background: var(--line-strong); }
.s-resultaten-staaf--laatste .s-resultaten-staaf__balk { background: var(--purple); }
.s-resultaten-staaf__label { font-size: 12px; line-height: 1.3; color: var(--ink-muted); }
.s-resultaten-staaf--laatste .s-resultaten-staaf__label { font-weight: 800; color: var(--purple-strong); }

.s-resultaten-deel-0 { --deel: 0%; } .s-resultaten-deel-5 { --deel: 5%; } .s-resultaten-deel-10 { --deel: 10%; } .s-resultaten-deel-15 { --deel: 15%; }
.s-resultaten-deel-20 { --deel: 20%; } .s-resultaten-deel-25 { --deel: 25%; } .s-resultaten-deel-30 { --deel: 30%; } .s-resultaten-deel-35 { --deel: 35%; }
.s-resultaten-deel-40 { --deel: 40%; } .s-resultaten-deel-45 { --deel: 45%; } .s-resultaten-deel-50 { --deel: 50%; } .s-resultaten-deel-55 { --deel: 55%; }
.s-resultaten-deel-60 { --deel: 60%; } .s-resultaten-deel-65 { --deel: 65%; } .s-resultaten-deel-70 { --deel: 70%; } .s-resultaten-deel-75 { --deel: 75%; }
.s-resultaten-deel-80 { --deel: 80%; } .s-resultaten-deel-85 { --deel: 85%; } .s-resultaten-deel-90 { --deel: 90%; } .s-resultaten-deel-95 { --deel: 95%; }
.s-resultaten-deel-100 { --deel: 100%; }

/* Wat werkte: geen foto beschikbaar, dus het kleurvlak uit het ontwerp met de eerste woorden */
.s-kaart.s-resultaten-top { padding: var(--space-3); gap: 10px; border-radius: var(--radius-lg); }
.s-resultaten-beeld { display: flex; align-items: flex-end; min-height: 170px; padding: var(--space-4); border-radius: var(--radius-md); font: 900 22px/1.15 var(--font-display); letter-spacing: -0.05em; overflow-wrap: anywhere; color: var(--on-accent); }
.s-resultaten-beeld--fris { background: var(--gradient-post-fresh); }
.s-resultaten-beeld--warm { background: var(--gradient-post-warm); }
.s-resultaten-beeld--paars { background: var(--purple-soft); color: var(--ink); }
.s-resultaten-feiten { font-size: 13px; line-height: 1.5; }
.s-resultaten-link { font-size: 14px; font-weight: 800; text-decoration: none; }

.s-resultaten-rijpost { display: flex; align-items: center; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
.s-resultaten-rijpost a { color: var(--ink); text-decoration: none; }
.s-resultaten-rijpost a:hover { color: var(--purple-strong); text-decoration: underline; }

.s-kaart.s-resultaten-rapport { gap: var(--space-3); }
.s-resultaten-rapport summary { cursor: pointer; font: 700 19px/1.25 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.s-resultaten-rapport .tekst { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* Op de telefoon: 13 weken als liggende balkjes, en de tabel als kaartjes */
@media (max-width: 640px) {
  .s-resultaten-staven { gap: var(--space-3); }
  .s-resultaten-staven--veel { grid-auto-flow: row; gap: var(--space-2); }
  .s-resultaten-staven--veel .s-resultaten-staaf { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
  .s-resultaten-staven--veel .s-resultaten-staaf__label { grid-row: 1; grid-column: 1; }
  .s-resultaten-staven--veel .s-resultaten-staaf__spoor { grid-row: 1; grid-column: 2; height: auto; padding-top: 0; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--space-2); }
  .s-resultaten-staven--veel .s-resultaten-staaf__balk { height: 14px; width: var(--deel); max-width: calc(100% - 64px); flex: 0 0 auto; }

  .s-tabel.s-resultaten-tabel table, .s-tabel.s-resultaten-tabel tbody { display: block; min-width: 0; }
  .s-tabel.s-resultaten-tabel thead { display: none; }
  .s-tabel.s-resultaten-tabel tr { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-top: 1px solid var(--line); }
  .s-tabel.s-resultaten-tabel tr:first-child { border-top: 0; }
  .s-tabel.s-resultaten-tabel td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: 0; border: 0; }
  .s-tabel.s-resultaten-tabel td[data-label="Post"] { padding-bottom: var(--space-2); }
  .s-tabel.s-resultaten-tabel td:not([data-label="Post"])::before { content: attr(data-label); font-size: 13px; color: var(--ink-muted); }
}


/* ---------- Dashboard: media ---------- */
/* ---------- Scherm Foto's en video's ---------- */
.s-vlak.s-media-upload { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.s-media-upload__teken { width: 72px; height: 72px; flex: none; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-sm); color: var(--purple-strong); display: grid; place-items: center; transform: rotate(-6deg); }
.s-media-upload__tekst { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* De teller in de balk staat in CSS, zodat "2 gekozen" ook zonder JavaScript klopt. */
.s-media-form { counter-reset: gekozen; display: flex; flex-direction: column; gap: var(--space-5); }
.s-media-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--space-4); }

label.s-media-kaart { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--surface-raised); border: 2px solid var(--line); box-shadow: var(--shadow-xs); font-weight: 400; cursor: pointer; transition: border-color .2s; }
label.s-media-kaart:has(input:checked) { border-color: var(--purple); }
.s-media-beeld { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--purple-wash); }
.s-media-beeld img, .s-media-beeld video { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-media-info { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-1); font-size: 13px; line-height: 1.3; min-width: 0; }
.s-media-status { padding: 0 var(--space-1) var(--space-1); }

input[type=checkbox].s-media-vink { appearance: none; -webkit-appearance: none; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; margin: 0; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-raised); box-shadow: var(--shadow-xs); display: grid; place-items: center; cursor: pointer; }
input[type=checkbox].s-media-vink:checked { background: var(--purple); border-color: var(--purple); counter-increment: gekozen; }
input[type=checkbox].s-media-vink:checked::after { content: "\2713"; color: var(--on-purple); font: 900 14px/1 var(--font-sans); }
input[type=checkbox].s-media-vink:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.s-media-balk { position: sticky; bottom: var(--space-4); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); border-radius: var(--radius-xl); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); }
.s-media-balk__teller::before { content: counter(gekozen) " gekozen"; font-size: 15px; }
button.s-media-claude { background: transparent; color: var(--surface); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--surface) 45%, transparent); }
button.s-media-claude:hover { background: color-mix(in srgb, var(--surface) 14%, transparent); transform: none; }
button.s-media-wissen { background: transparent; color: var(--surface); box-shadow: none; }
button.s-media-wissen:hover { background: transparent; color: var(--surface); text-decoration: underline; transform: none; }
/* Zonder :has blijft de balk gewoon staan. */
@supports selector(:has(*)) {
  .s-media-balk { display: none; }
  .s-media-form:has(input:checked) .s-media-balk { display: flex; }
}

@media (max-width: 900px) {
  .s-media-balk { bottom: calc(96px + env(safe-area-inset-bottom)); padding-left: var(--space-5); }
}


/* ---------- Dashboard: uploadvenster, nieuwe post en slepen (10-11-2026) ---------- */
/* Uploadvenster: een <dialog> boven het dashboard. Zonder JavaScript opent de uploadpagina in een nieuw tabblad. */
.s-venster { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: var(--space-6); border: 0; border-radius: var(--radius-xl); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-xl); overflow-y: auto; }
.s-venster[open] { display: flex; flex-direction: column; gap: var(--space-4); }
.s-venster::backdrop { background: var(--scrim); }
.s-venster__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
button.s-venster__dicht { width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; background: var(--purple-wash); color: var(--ink); box-shadow: none; font: 500 26px/1 var(--font-sans); }
button.s-venster__dicht:hover { background: var(--purple-soft); transform: none; }
.s-venster__voet { justify-content: flex-end; }
.s-sleepvak { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--purple-wash); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.s-sleepvak:hover, .s-sleepvak.is-erboven { border-color: var(--purple); background: var(--purple-soft); }
.s-sleepvak:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.s-sleepvak .s-media-upload__teken { width: 60px; height: 60px; }
.s-sleepvak__knop { display: inline-flex; padding: 11px 18px; border-radius: var(--radius-pill); background: var(--purple); color: var(--on-purple); font: 800 13px/1.2 var(--font-sans); box-shadow: var(--shadow-cta); }
.s-uploadlijst { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.s-uploadlijst:empty { display: none; }
.s-uploadlijst li { margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-warm); border: 1px solid var(--line); }
.s-uploadlijst__duim { grid-row: span 3; width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; background: var(--gradient-post-warm); }
.s-uploadlijst__naam { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-uploadlijst__status { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.s-uploadlijst__status.is-mis { color: var(--danger); font-weight: 700; }
.s-uploadlijst__status.is-klaar { color: var(--mint-strong); font-weight: 800; }
.s-uploadlijst .s-regel { grid-column: 2; }

/* Nieuwe post */
.s-nieuw-stap { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--purple-soft); color: var(--purple-strong); font: 900 14px/1 var(--font-display); vertical-align: 3px; }
.s-nieuw-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: var(--space-3); }
.s-nieuw-rooster:empty { display: none; }
label.s-nieuw-tegel { position: relative; display: block; margin: 0; border-radius: var(--radius-md); cursor: pointer; }
.s-nieuw-beeld { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--purple-wash); box-shadow: inset 0 0 0 3px transparent; }
.s-nieuw-beeld img, .s-nieuw-beeld video { display: block; width: 100%; height: 100%; object-fit: cover; }
label.s-nieuw-tegel:has(input:checked) .s-nieuw-beeld { outline: 3px solid var(--purple); outline-offset: -3px; }
input[type=checkbox].s-nieuw-vink { appearance: none; -webkit-appearance: none; position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; margin: 0; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface-raised); box-shadow: var(--shadow-xs); display: grid; place-items: center; cursor: pointer; }
input[type=checkbox].s-nieuw-vink:checked { background: var(--purple); border-color: var(--purple); }
input[type=checkbox].s-nieuw-vink:checked::after { content: "\2713"; color: var(--on-purple); font: 900 13px/1 var(--font-sans); }
input[type=checkbox].s-nieuw-vink:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Met JavaScript staat er het volgnummer op het vinkje. */
.s-nieuw-nr { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: var(--on-purple); display: none; place-items: center; font: 900 13px/1 var(--font-sans); pointer-events: none; }
.s-nieuw-nr:not(:empty) { display: grid; }
.s-nieuw-soort { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--surface); font: 800 11px/1.6 var(--font-sans); }
.s-meta.is-mis { color: var(--danger); font-weight: 700; }
.s-nieuw-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.s-nieuw-knoppen button { flex: 1 1 180px; }
.s-nieuw-zij { position: sticky; top: var(--space-4); }
.s-nieuw-voorbeeld { position: relative; display: grid; place-items: center; min-height: 220px; border-radius: var(--radius-md); background: var(--purple-wash); overflow: hidden; }
.s-nieuw-voorbeeld img, .s-nieuw-voorbeeld video { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.s-nieuw-voorbeeld p { padding: var(--space-5); text-align: center; }
.s-nieuw-voorbeeld--story { aspect-ratio: 9 / 16; max-width: 280px; margin-inline: auto; }
.s-nieuw-voorbeeld--story img, .s-nieuw-voorbeeld--story video { height: 100%; max-height: none; }

/* Maken: zelf maken, en op de postpagina een ander moment */
.s-kaart.s-maken-zelf { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.s-maken-zelf__tekst { flex: 1 1 260px; gap: var(--space-1); }
.s-maken-ander summary { cursor: pointer; }
.s-maken-ander__binnen { margin-top: var(--space-3); }

/* Planning: slepen naar een andere dag */
[data-sleep-post] { cursor: grab; }
[data-sleep-post]:active { cursor: grabbing; }
[data-sleep-post].is-gesleept { opacity: .45; }
[data-sleep-dag].is-doel { background: var(--purple-wash); box-shadow: inset 0 0 0 2px var(--purple); }
.s-planning-tip { display: none; }
@media (pointer: fine) { .s-planning-tip { display: inline; margin-left: var(--space-2); } }

/* Korte melding onderin, bijvoorbeeld na slepen, met Ongedaan maken */
.s-melding { position: fixed; left: 50%; bottom: var(--space-6); z-index: 50; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); width: max-content; max-width: calc(100vw - 32px); padding: 10px 10px 10px 20px; border-radius: var(--radius-lg); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 700; line-height: 1.4; }
.s-melding button { padding: 8px 14px; font-size: 13px; background: var(--surface); color: var(--ink); box-shadow: none; }
.s-melding button:hover { background: var(--purple-soft); color: var(--ink); transform: none; }
.s-melding.is-fout { background: var(--danger); color: var(--on-danger); }

@media (max-width: 900px) {
  .s-nieuw-zij { position: static; }
  .s-melding { bottom: calc(104px + env(safe-area-inset-bottom)); }
  .s-venster { padding: var(--space-5); }
}


/* ---------- Dashboard: codewoorden ---------- */
/* Scherm Codewoorden en de pagina's van Gesprekken (Contacten, Kennisbank). Alleen tokens; wordt samengevoegd in campaigo.css. */

/* Zo werkt het: drie stappen */
.s-codewoorden-stappen { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4); }
.s-codewoorden-stap { display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px; border-radius: var(--radius-lg); background: var(--purple-soft); font-size: 14px; line-height: 1.45; }
.s-codewoorden-stap--coral { background: var(--coral-soft); }
.s-codewoorden-stap--mint { background: var(--mint-soft); }
.s-codewoorden-nr { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface-raised); color: var(--purple-strong); display: grid; place-items: center; font: 900 18px/1 var(--font-display); }
.s-codewoorden-stap--coral .s-codewoorden-nr { color: var(--coral-strong); }
.s-codewoorden-stap--mint .s-codewoorden-nr { color: var(--mint-strong); }

/* Kaart van een codewoord */
.s-codewoorden-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.s-codewoorden-woord { max-width: 100%; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--purple); color: var(--on-purple); font: 900 24px/1.2 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.s-codewoorden-woord--klein { padding: 6px 12px; background: var(--line); color: var(--ink-soft); font-size: 15px; }
.s-codewoorden-einde { margin-left: auto; }
.s-codewoorden-post { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-warm); }
.s-codewoorden-post__teken { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); background: var(--purple-soft); color: var(--purple-strong); display: grid; place-items: center; }
.s-codewoorden-post__tekst { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.s-codewoorden-bel { align-self: flex-start; max-width: 90%; padding: 14px 18px; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-tail); background: var(--purple-wash); font-size: 14px; line-height: 1.5; }
.s-codewoorden-reacties .cg-badge { white-space: normal; overflow-wrap: anywhere; }

/* Echte aantallen */
.s-codewoorden-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.s-codewoorden-cijfer { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius-md); }
.s-codewoorden-cijfer--mint { background: var(--mint-soft); }
.s-codewoorden-cijfer--wash { background: var(--purple-soft); }
.s-codewoorden-cijfer--zon { background: var(--sun-soft); }
.s-codewoorden-cijfer strong { font: 800 26px/1.1 var(--font-display); letter-spacing: -0.04em; }
.s-codewoorden-cijfer span { font: 700 12px/1.3 var(--font-sans); color: var(--ink-soft); }

/* Gestopt: compact */
.s-codewoorden-gestopt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 14px 18px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.s-codewoorden-gestopt__link { text-decoration: none; }
.s-codewoorden-gestopt__tekst { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }

/* Overzicht (11-11-2026): stappen inklapbaar, Goed om te weten met kopjes */
.s-hoe { align-self: flex-start; }
.s-hoe summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 16px; border-radius: var(--radius-pill); background: var(--purple-wash); color: var(--purple-strong); font-weight: 800; font-size: 14px; }
.s-hoe[open] summary { margin-bottom: var(--space-4); }
.s-weten { gap: var(--space-4); }
.s-weten__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.s-weten__lijst li { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; }
.s-weten__lijst li > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-weten__lijst strong { font-size: 15px; line-height: 1.35; }
.s-weten__lijst span:not(.s-weten__teken) { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.s-weten__teken { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); color: var(--sun-strong); }
.s-codewoorden-kaart { gap: var(--space-4); }

/* Sjabloon kiezen (11-11-2026): gegroepeerd, met een mini-voorbeeld, hele kaart klikbaar, knop onderaan */
.s-maatwerk { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding: var(--space-5) var(--space-6); }
.s-maatwerk__tekst { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-maatwerk__tekst strong { font: 700 19px/1.25 var(--font-display); letter-spacing: -0.03em; }
.s-maatwerk__tekst .s-tekst { margin: 0; }
.s-sjablonen { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); align-items: stretch; }
.s-sjabloon { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-xs); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.s-sjabloon:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); text-decoration: none; }
.s-sjabloon:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.s-sjabloon__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-2); }
.s-sjabloon__tekst .s-tekst, .s-sjabloon__tekst .s-meta { margin: 0; }
.s-sjabloon__tekst .s-meta strong { color: var(--ink); }
.s-sjabloon__knop { align-self: flex-start; margin: auto var(--space-2) 0; display: inline-flex; padding: 11px 18px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--purple-strong); box-shadow: inset 0 0 0 2px var(--line-strong); font: 800 13px/1.2 var(--font-sans); transition: background-color .2s; }
.s-sjabloon:hover .s-sjabloon__knop { background: var(--purple-soft); }
.s-mini { min-height: 196px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--purple-wash); font-size: 13px; line-height: 1.4; }
.s-mini__reactie { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 12px 7px 8px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line); }
.s-mini__avatar { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--line-strong); }
.s-mini__bel { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--surface-raised); }
.s-mini__bel--zij { align-self: flex-end; background: var(--purple); color: var(--on-purple); }
.s-mini__knop { display: block; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--purple-soft); color: var(--purple-strong); font-weight: 800; font-size: 12px; text-align: center; }
.s-mini__notitie { align-self: center; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); font-size: 11px; font-weight: 700; text-align: center; }

/* Nieuw codewoord, het formulier (11-11-2026): genummerde stappen, uitleg per veld, voorbeeld ernaast */
.s-sjabloon-form { gap: var(--space-6); }
.s-stap { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.s-stap + .s-stap { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.s-stap legend { display: flex; align-items: center; gap: var(--space-3); padding: 0; margin-bottom: var(--space-4); font: 700 19px/1.25 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.s-stap__nr { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--purple-soft); color: var(--purple-strong); font: 900 16px/1 var(--font-display); }
.s-stap .s-veld .s-meta { margin-top: -2px; }
.s-versies { gap: var(--space-3); }
.s-versies .s-veld { gap: 4px; }
.s-veld label.s-versies__label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
button.s-invoegen { align-self: flex-start; margin: 2px 0 0; padding: 6px 12px; background: var(--purple-wash); color: var(--purple-strong); box-shadow: none; font-size: 12px; }
button.s-invoegen:hover { background: var(--purple-soft); transform: none; }
.s-sjabloon-tip { margin: 0; }
.s-sjabloon-form .knoppen { margin-top: 0; }
.s-sjabloon-zij .s-kaart { gap: var(--space-3); }
@media (min-width: 1000px) { .s-sjabloon-zij { position: sticky; top: var(--space-4); max-height: calc(100vh - var(--space-8)); overflow-y: auto; } }

/* Onder welke post: tegels met het plaatje (11-11-2026). Gewone keuzerondjes, onzichtbaar maar met het toetsenbord te gebruiken */
.s-postkeuze { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; }
.s-postkeuze legend { padding: 0; margin-bottom: 6px; }
.s-postkeuze__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.s-postkeuze__optie { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 10px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font-weight: 400; transition: box-shadow .15s, background-color .15s; }
.s-postkeuze__optie:hover { box-shadow: inset 0 0 0 2px var(--line-strong); }
.s-postkeuze__optie input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.s-postkeuze__optie:has(input:checked) { background: var(--purple-wash); box-shadow: inset 0 0 0 3px var(--purple); }
.s-postkeuze__optie:has(input:checked)::after { content: "\2713"; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: var(--on-purple); font: 900 12px/1 var(--font-sans); }
.s-postkeuze__optie:has(input:focus-visible) { outline: 3px solid var(--purple); outline-offset: 2px; }
.s-postkeuze__beeld { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--purple-wash); color: var(--purple-strong); }
.s-postkeuze__beeld img, .s-postkeuze__beeld video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-postkeuze__teken { display: grid; place-items: center; opacity: .8; }
.s-postkeuze__tekst { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; min-width: 0; }
.s-postkeuze__tekst strong { font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.s-postkeuze__tekst span { font-size: 12px; line-height: 1.3; color: var(--ink-muted); }
.s-postkeuze__meer { margin-top: var(--space-3); }
.s-postkeuze__meer summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--purple-strong); }
.s-codewoorden-post__teken { position: relative; overflow: hidden; }
.s-codewoorden-post__teken img, .s-codewoorden-post__teken video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Pagina van één codewoord (11-11-2026): balk met de stand, tijdlijn in drie stappen, testvak */
.s-balk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--sun-soft); }
.s-balk--loopt { background: var(--mint-soft); }
.s-balk--gestopt { background: var(--surface-warm); border: 1px solid var(--line); }
.s-balk__tekst { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s-balk__tekst strong { font: 700 21px/1.25 var(--font-display); letter-spacing: -0.03em; }
.s-balk__tekst p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.s-balk .knoppen { margin: 0; }
.s-balk__let-op { flex: 1 1 100%; margin: 0; padding: 14px 18px; list-style: none; border-radius: var(--radius-md); background: var(--surface-raised); display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 1.55; }
.s-balk__let-op li { position: relative; margin: 0; padding-left: 28px; }
.s-balk__let-op li::before { content: "!"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--on-accent); font: 900 11px/1 var(--font-sans); }
button.s-tekstknop { padding: 12px 10px; background: none; box-shadow: none; color: var(--ink-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
button.s-tekstknop:hover { background: none; color: var(--danger); transform: none; }

.s-tijdlijn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.s-tijdlijn > li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); margin: 0; }
.s-tijdlijn > li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: calc(8px - var(--space-8)); width: 2px; border-radius: 2px; background: var(--line-strong); }
.s-tijdlijn__nr { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--purple-soft); color: var(--purple-strong); font: 900 18px/1 var(--font-display); }
.s-tijdlijn__nr--coral { background: var(--coral-soft); color: var(--coral-strong); }
.s-tijdlijn__nr--mint { background: var(--mint-soft); color: var(--mint-strong); }
.s-tijdlijn__inhoud { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: 7px; }
.s-tijdlijn__titel { margin: 0; font: 700 18px/1.3 var(--font-display); letter-spacing: -0.02em; }

/* Een reactie onder een post, zoals op Instagram */
.s-ig-reactie { display: flex; align-items: flex-start; gap: 10px; width: min(100%, 400px); padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-warm); border: 1px solid var(--line); }
.s-ig-reactie--antwoord { margin-left: var(--space-6); width: min(100% - var(--space-6), 400px - var(--space-6)); }
.s-ig-reactie p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.s-ig-reactie strong { margin-right: 4px; }
.s-ig-reactie__avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--line-strong); }
.s-ig-reactie__avatar--jij { background: var(--sun); }

/* De DM zoals de ontvanger hem ziet */
.s-dm { width: min(100%, 400px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--purple-wash); overflow: hidden; }
.s-dm__kop { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-raised); border-bottom: 1px solid var(--line); font-size: 15px; }
.s-dm__avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sun); }
.s-dm__chat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.s-dm__chat--los { padding: 0; width: min(100%, 400px); }
.s-dm__chat .bel { max-width: 88%; font-size: 15px; line-height: 1.5; }
.s-dm__chat .bel--uit { align-self: flex-end; background: var(--purple); color: var(--on-purple); }
.s-dm__chat .bel-knoppen small { margin-top: 2px; font-weight: 600; }
.s-dm__chat .tel-notitie { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface-raised); font-size: 12px; font-weight: 700; }
.s-dm__versies { align-self: stretch; }
.s-dm__versies summary { cursor: pointer; padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--purple-strong); }
.s-dm__versies .s-dm__chat { padding: var(--space-2) 0 0; }

@media (max-width: 480px) {
  .s-tijdlijn > li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
  .s-tijdlijn > li:not(:last-child)::after { left: 15px; top: 40px; }
  .s-tijdlijn__nr { width: 32px; height: 32px; font-size: 16px; }
  .s-tijdlijn__inhoud { padding-top: 4px; }
  .s-dm__chat { padding: var(--space-3); }
  .s-dm__chat .bel { max-width: 94%; }
  .s-ig-reactie--antwoord { margin-left: var(--space-3); width: min(100% - var(--space-3), 400px); }
}
.s-lijst { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* Gesprekken, contacten en kennisbank */
.s-gesprekken-lijst { gap: 0; }
.s-gesprekken-rij, .s-gesprekken-kennis { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4) 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.s-gesprekken-rij:first-child, .s-gesprekken-kennis:first-child { border-top: 0; padding-top: 0; }
.s-gesprekken-rij:last-child, .s-gesprekken-kennis:last-child { padding-bottom: 0; }


/* ---------- Dashboard: instellingen ---------- */
/* Scherm Instellingen en hulp. Alleen tokens; wordt samengevoegd in campaigo.css. */

.s-instellingen-account { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-warm); border: 1px solid var(--line); }
.s-instellingen-logo { width: 48px; height: 48px; flex: none; border-radius: var(--radius-md); background: var(--gradient-post-warm); color: var(--on-accent); display: grid; place-items: center; }
.s-instellingen-wie { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
a.knop.knop--spook.s-instellingen-weg { color: var(--danger); }
button.s-instellingen-kopieer[hidden] { display: none; }
/* Een Instagram-naam kan 30 tekens lang zijn en staat in de knop. */
.s-instellingen-bevestig form { min-width: 0; max-width: 100%; }
.s-instellingen-bevestig button { overflow-wrap: anywhere; }

/* Jij hebt de regie */
.s-instellingen-regie { display: flex; align-items: flex-start; gap: 14px; }
.s-instellingen-regie > .s-stapel { flex: 1; gap: var(--space-2); }
.s-instellingen-teken { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; }
.s-instellingen-teken--mint { background: var(--mint-soft); color: var(--mint-strong); }
.s-instellingen-teken--zon { background: var(--sun-soft); color: var(--sun-strong); }
.s-instellingen-lijn { height: 1px; background: var(--line); }

/* Hulp */
.s-instellingen-hulplijst { display: flex; flex-direction: column; margin-top: var(--space-1); }
.s-instellingen-hulplink { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--line-strong); font-size: 14px; font-weight: 800; text-decoration: none; }

/* ---------- Dashboard: lessen bij Mijn merk (besluit 26) ---------- */
/* Eigen blok achteraan, zodat het niet botst met het werk aan Maken en Planning. */
.s-lessen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.s-les { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--purple-wash); border: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; }
.s-les__tekst { margin: 0; font-weight: 700; line-height: 1.4; color: var(--ink); }
.s-les p.s-meta { margin: 0; }
.s-les__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.s-les__voet form { margin: 0; }

/* ---------- Dashboard: Wat werkt bij jou op Resultaten (besluit 26) ---------- */
.s-werkt { gap: var(--space-3); }
.s-werkt--paars { border-top: 6px solid var(--purple); }
.s-werkt--coral { border-top: 6px solid var(--coral); }
.s-werkt--mint { border-top: 6px solid var(--mint); }
.s-werkt--zon { border-top: 6px solid var(--sun); }
.s-werkt__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-werkt__lijst li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.s-werkt__lijst li:first-child { border-top: 0; padding-top: 0; }
.s-werkt__lijst strong { font-weight: 800; color: var(--ink); text-align: right; }
.s-werkt p.s-meta { margin: 0; }

/* ---------- Ingelogd op een openbare pagina (hulp, product): de weg terug naar het dashboard ---------- */
.kop__ingelogd { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.kop__ingelogd::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
@media (max-width: 630px) { .kop__ingelogd { display: none; } }

/* Wisselen tussen de twee hulppagina's */
.hulp-tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); margin-top: var(--space-6); border-radius: var(--radius-pill); background: var(--purple-wash); }
.hulp-tabs a { padding: 10px var(--space-4); border-radius: var(--radius-pill); font: 800 14px/1.2 var(--font-sans); color: var(--ink-soft); text-decoration: none; }
.hulp-tabs a:hover { color: var(--purple-strong); }
.hulp-tabs a[aria-current="page"] { background: var(--surface-raised); color: var(--purple-strong); box-shadow: var(--shadow-xs); }
@media (max-width: 630px) {
  .hulp-tabs { display: flex; flex-wrap: nowrap; width: 100%; border-radius: var(--radius-lg); }
  .hulp-tabs a { flex: 1 1 0; display: grid; place-items: center; text-align: center; padding: 10px var(--space-2); font-size: 13px; border-radius: var(--radius-md); }
}

/* ---------- Dashboard: Iets melden ---------- */
.zijbalk__onder { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-left: 14px; }
.zijbalk__meld { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1.4 var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.zijbalk__meld:hover { color: var(--purple-strong); }
.zijbalk__onder button.zijbalk__uit { width: auto; padding: var(--space-1) var(--space-2); }
.s-melden-lijst { list-style: none; padding: 0; display: flex; flex-direction: column; }
.s-melden-rij { margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.s-melden-rij:first-child { border-top: 0; padding-top: 0; }
.s-melden-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Dashboard: welkomstappen bij de eerste keer ---------- */
.app.welkom { display: block; min-height: 100vh; padding: var(--space-4) var(--space-4) var(--space-12); }
.welkom__kop, .welkom__vlak { max-width: 780px; margin: 0 auto; }
.welkom__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2); }
.welkom__vlak { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.welkom__voortgang { list-style: none; padding: 0; display: flex; }
.welkom__punt { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font: 800 12px/1.2 var(--font-sans); color: var(--ink-muted); text-align: center; }
.welkom__punt + .welkom__punt::before { content: ""; position: absolute; top: 16px; right: calc(50% + 22px); left: calc(-50% + 22px); height: 2px; border-radius: 2px; background: var(--line-strong); }
.welkom__punt.is-klaar + .welkom__punt::before, .welkom__punt.is-klaar + .welkom__punt.is-klaar::before { background: var(--mint); }
.welkom__nr { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); border: 2px solid var(--line-strong); font: 900 14px/1 var(--font-display); color: var(--ink-soft); }
.welkom__punt.is-nu { color: var(--purple-strong); }
.welkom__punt.is-nu .welkom__nr { background: var(--purple); border-color: var(--purple); color: var(--on-purple); box-shadow: var(--shadow-cta); }
.welkom__punt.is-klaar .welkom__nr { background: var(--mint-soft); border-color: var(--mint); color: var(--ink); }
.welkom__kaart { padding: var(--space-8); gap: var(--space-5); }
.welkom__uitlegrij { display: flex; flex-direction: column; gap: var(--space-4); }
.welkom__uitleg { display: flex; align-items: flex-start; gap: var(--space-4); }
.welkom__uitleg strong { display: block; margin-bottom: 2px; font: 700 18px/1.25 var(--font-display); letter-spacing: -0.03em; }
.welkom__teken { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 20px; font-weight: 900; color: var(--ink); }
.welkom__teken--paars { background: var(--purple-soft); }
.welkom__teken--coral { background: var(--coral-soft); }
.welkom__teken--mint { background: var(--mint-soft); }
.welkom__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.welkom__stappen ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: var(--space-2); }
.welkom__stappen li { margin: 0; }
.welkom__formulier { display: flex; flex-direction: column; gap: var(--space-5); }
.welkom__acties { display: flex; flex-direction: column; gap: var(--space-3); }
.welkom__actie { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-warm); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.welkom__actie strong { font: 700 17px/1.3 var(--font-display); letter-spacing: -0.02em; }
.welkom__actie .s-tekst { grid-column: 1; }
.welkom__pijl { grid-column: 2; grid-row: 1 / span 2; color: var(--purple-strong); font-weight: 800; }
a.welkom__actie:hover { border-color: var(--purple); transform: translateY(-2px); text-decoration: none; }
.welkom__actie--claude { grid-template-columns: 1fr; }
.welkom__actie--claude .cg-chip { justify-self: start; margin-top: var(--space-2); }
.welkom__voet { text-align: center; }
@media (max-width: 640px) {
  .app.welkom { padding: var(--space-2) var(--gutter-sm) var(--space-10); }
  .welkom__naam { display: none; }
  .welkom__kaart { padding: var(--space-5); }
  .welkom__knoppen > * { flex: 1 1 auto; }
  .welkom__knoppen > .welkom__terug { order: 9; }
}

/* ---------- Hulppagina's: menu aan de zijkant (hulpOpzet in website.ts, gedrag in hulp.js) ----------
   Computer: links een vast menu met groepen, rechts de tekst. Telefoon en tablet: een balk bovenaan die blijft staan
   en die je opzij schuift. Zonder JavaScript zijn het gewone links. */
.blok--hulp { padding-top: var(--space-12); }
.hulp-menu a { display: block; padding: 7px var(--space-3); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: background-color .2s, color .2s; }
.hulp-menu a:hover { background: var(--purple-wash); color: var(--purple-strong); }
.hulp-menu a[aria-current="true"] { background: var(--purple-soft); color: var(--purple-strong); font-weight: 800; }
.hulp-menu__titel { margin: 0 0 var(--space-1); padding: 0 var(--space-3); font: 900 11px/1.2 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted); }
.hulp-menu__groep + .hulp-menu__groep { margin-top: var(--space-5); }
.hulp-tekst > :first-child, .hulp-onderwerp:first-child > h2:first-child { margin-top: 0; }
.hulp-tekst h2[id], .hulp-tekst [id] { scroll-margin-top: 100px; }
.hulp-onderwerp + .hulp-onderwerp { border-top: 1px solid var(--line); margin-top: var(--space-10); }
.hulp-onderwerp > h2 { margin-top: var(--space-10); }

@media (min-width: 1000px) {
  .hulp-opzet { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .hulp-menu { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding: var(--space-4) var(--space-2); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
  .hulp-opzet .leestekst { max-width: 860px; margin: 0; }
  .hulp-opzet .leestekst > p, .hulp-opzet .leestekst > ul, .hulp-opzet .leestekst > ol,
  .hulp-onderwerp > p, .hulp-onderwerp > ul, .hulp-onderwerp > ol { max-width: var(--measure); }
  /* De schermafbeelding vult de tekstkolom en schuift niet meer onder het menu. */
  .hulp-opzet .leestekst .hulp-scherm { position: static; left: auto; width: auto; transform: none; }
}
@media (max-width: 999px) {
  .hulp-menu { position: sticky; top: 69px; z-index: 5; display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-7)) var(--space-6); padding: var(--space-3) var(--space-7); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .hulp-menu::-webkit-scrollbar { display: none; }
  .hulp-menu__groep { display: contents; }
  .hulp-menu__titel { display: none; }
  .hulp-menu__groep + .hulp-menu__groep { margin-top: 0; }
  .hulp-menu a { flex: none; white-space: nowrap; padding: 9px var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--purple-deep); font-size: 13px; }
  .hulp-menu a[aria-current="true"] { background: var(--purple); border-color: var(--purple); color: var(--on-purple); }
  .hulp-tekst h2[id], .hulp-tekst [id] { scroll-margin-top: 140px; }
}
@media (max-width: 630px) {
  .hulp-menu { margin-left: calc(-1 * var(--gutter-sm)); margin-right: calc(-1 * var(--gutter-sm)); padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
}

/* Muziek kiezen: het nummer dat nu speelt (studio.js) */
button.nee.is-speelt { background: var(--purple-soft); box-shadow: inset 0 0 0 2px var(--purple-strong); }

/* Nieuwe post: het vinkje voor het AI-label onder de bestanden */
.s-nieuw-ai { margin-top: var(--space-4); font-weight: 600; }

/* ---------- Beheer (/admin, besluit 29): alleen voor Joey, zelfde bouwstenen als het dashboard (a-*) ---------- */
.a-beheer form button, .a-beheer a.knop, .a-los button { margin: 0; }
.a-los { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-10); }
.a-los form { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.a-los input[type=email] { width: min(100%, 360px); }
.a-wie { cursor: default; }
.a-getallen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.a-getal { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
a.a-getal:hover { border-color: var(--purple); }
.a-getal__waarde { font: 800 32px/1 var(--font-display); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.a-getal__label { font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.a-lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.a-lijst--log li { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.a-aandacht { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-warm); color: var(--ink); text-decoration: none; font-weight: 700; }
.a-aandacht > span:nth-child(2) { flex: 1; }
.a-aandacht:hover { background: var(--purple-wash); color: var(--purple-strong); }
.a-tabel table { min-width: 0; }
.a-tabel td { vertical-align: top; overflow-wrap: break-word; }
.a-gevaarzone a.knop.gevaar { background: var(--danger); color: var(--on-danger); box-shadow: none; }
.a-nowrap { white-space: nowrap; }
.a-fout { color: var(--danger); font-size: 13px; }
.a-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a-tab { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink-soft); font: 800 14px/1.2 var(--font-sans); text-decoration: none; }
.a-tab span { color: var(--ink-muted); font-weight: 700; }
.a-tab.is-actief { background: var(--purple-soft); border-color: var(--purple-soft); color: var(--purple-strong); }
.a-zoek { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.a-zoek input { flex: 1 1 260px; min-width: 0; margin: 0; }
.a-filter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.a-vink { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 700; }
.a-vink input { width: auto; margin: 0; }
.a-gegevens { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.a-gegeven { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); font-size: 14px; border-top: 1px solid var(--line); padding-top: var(--space-2); }
.a-gegeven:first-child { border-top: 0; padding-top: 0; }
.a-gegeven dt { color: var(--ink-muted); }
.a-gegeven dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.a-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a-knopform { margin: 0; }
.a-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; }
.a-inline input { flex: 1 1 160px; min-width: 0; margin: 0; padding: 8px 12px; font-size: 14px; }
.a-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.a-gevaarzone { border-color: var(--danger); }
.a-kopie { width: 100%; margin-top: var(--space-2); font: 600 13px/1.4 var(--font-sans); }
.a-draad { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.a-bericht { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.a-bericht--jij { background: var(--purple-wash); border-color: var(--purple-soft); }
.a-bericht--intern { background: var(--sun-soft); border-color: var(--sun-soft); }
.a-tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.a-grafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.a-grafiek { margin: 0; }
.a-grafiek svg { width: 100%; height: auto; overflow: visible; }
.a-staaf { fill: var(--purple); }
.a-staaf__getal { fill: var(--ink); font: 800 11px var(--font-sans); }
.a-staaf__label { fill: var(--ink-muted); font: 600 9px var(--font-sans); }
.s-melden-antwoord { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--purple-wash); display: flex; flex-direction: column; gap: var(--space-1); }
.s-melden-antwoord.is-nieuw { box-shadow: inset 3px 0 0 var(--purple); }
.s-melden-antwoord .cg-badge { vertical-align: 1px; }

/* Antwoord op een melding dat de klant nog niet las: bovenaan elke pagina van het dashboard (studio-schil.ts). */
.bericht { position: relative; border-radius: var(--radius-md); padding: 14px 18px 14px 40px; margin: var(--space-4) 0; color: var(--ink); background: var(--purple-wash); }
.bericht::before { content: ""; position: absolute; left: 17px; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--purple); }
.bericht a { font-weight: 800; }
:where(.app) .bericht { margin: 0; }
.zijbalk__meld .zijbalk__teller { min-width: 20px; height: 20px; font-size: 11px; line-height: 20px; }
@media (max-width: 900px) {
  .a-getal__waarde { font-size: 26px; }
  .a-filter { flex-direction: column; align-items: stretch; }
}
/* Op de telefoon: elke rij een kaartje, met het kopje van de kolom voor elke waarde (data-label) */
@media (max-width: 700px) {
  .a-tabel table, .a-tabel tbody { display: block; }
  .a-tabel thead { display: none; }
  .a-tabel tr { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--line); }
  .a-tabel tr:first-child { border-top: 0; }
  .a-tabel td { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: 0; border: 0; overflow-wrap: anywhere; }
  .a-tabel td::before { content: attr(data-label); font-size: 13px; color: var(--ink-muted); }
  .a-tabel td:first-child { display: block; padding-bottom: var(--space-1); }
  .a-tabel td:first-child::before { content: none; }
  .a-tabel td:empty { display: none; }
  .a-tabel td > form { flex: 1 1 100%; }
}