/* Basislaag — Warm Vakmanschap. Alleen wat de M1-schermen nodig hebben. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  font-weight: 400;
  margin: 0 0 12px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card { width: 100%; max-width: 420px; }

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--text-body);
  background: var(--km-wit);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-inner);
}

.field input:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--accent);
}

.btn {
  display: inline-block;
  width: 100%;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.btn-primary { background: var(--primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-accent { background: var(--accent); color: var(--km-wit); }
.btn-accent:hover { background: var(--accent-hover); }

.btn-outline {
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { background: var(--surface-raised); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border-subtle);
}

.flash-error {
  background: var(--negative-soft);
  color: var(--negative);
  border-radius: var(--radius-inner);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
}

.flash-success {
  background: var(--positive-soft);
  color: var(--positive);
  border-radius: var(--radius-inner);
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: var(--text-sm);
}

.page-shell { max-width: 1180px; margin: 0 auto; padding: 40px clamp(20px, 4vw, 48px) 90px; }

/* Links zijn klei, nooit browserblauw. Geldt ook voor wat Marieke in de
   editor plakt en voor de reader; specifiekere regels (nav, kaarten) winnen gewoon. */
a { color: var(--text-accent); }
.les-reader-body a, .jodit-wysiwyg a {
  color: var(--text-accent); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--km-huid); text-underline-offset: 3px;
}
.les-reader-body a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

.muted-link { color: var(--text-accent); }

/* ── App shell (student) — sidebar per prototype ───────────────────────── */

.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: clamp(240px, 18vw, 258px);
  flex: none;
  background: var(--km-wit);
  border-right: 1px solid var(--border-subtle);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-lockup { display: flex; align-items: center; gap: 11px; padding: 0 6px; text-decoration: none; }
.app-lockup-mark { width: 36px; height: 36px; border-radius: 12px; }
.app-lockup-name { display: block; font-family: var(--font-display); font-size: 17px; line-height: 1.08; color: var(--text-heading); }
.app-lockup-sub { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }

.app-nav { display: flex; flex-direction: column; gap: 3px; }
.app-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.app-nav-item:hover { background: var(--surface-page); }
.app-nav-item.is-active { background: var(--km-aubergine); color: #FFF7EF; }
.app-nav-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-strong); flex: none; }
.app-nav-item.is-active .app-nav-dot { background: var(--km-huid); }
.app-nav-item.is-soon { opacity: 0.45; cursor: default; }

.app-sidebar-footer { margin-top: auto; padding: 0 6px; font-size: var(--text-sm); }

.app-content { flex: 1; min-width: 0; }

.page-title { font-size: 40px; margin-top: 14px; }
.page-intro { font-size: 17px; line-height: 1.65; margin-top: 12px; max-width: 56ch; }

/* ── Klasstrook: welke klas je bekijkt (map #33) ───────────────────────── */

.klasstrook {
  position: sticky; top: 0; z-index: 21;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px clamp(20px, 4vw, 48px);
  background: var(--km-lila-soft); color: var(--text-heading);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13.5px;
}
.klasstrook.is-team { background: var(--km-aubergine); color: #FFF7EF; border-bottom-color: var(--km-aubergine-deep); }
.klasstrook-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.klasstrook-keuze { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 24px 4px 0; cursor: pointer; }
.klasstrook-naam { font-weight: 700; }
.klasstrook-opleiding { opacity: 0.7; }
.klasstrook-chev { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); opacity: 0.75; }
/* de echte select ligt onzichtbaar over de tekst heen: eigen typografie, native menu */
.klasstrook-select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.klasstrook-keuze:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.klasstrook-ga { font: inherit; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid currentColor; background: transparent; color: inherit; }
.klasstrook-meer { margin-left: auto; font-size: 12.5px; color: inherit; opacity: 0.85; }
.klasstrook + .live-bar { top: 0; }
@media (max-width: 640px) { .klasstrook-opleiding { display: none; } }

/* ── Live-balk: bovenaan elke pagina zolang een sessie bezig is ────────── */

.live-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(20px, 4vw, 48px);
  background: var(--km-klei); color: #FFF7EF;
  font-size: 14.5px; line-height: 1.3;
  box-shadow: 0 1px 0 rgba(69, 48, 63, 0.12);
}
.live-bar.is-soon { background: var(--km-aubergine); }
.live-dot {
  width: 9px; height: 9px; border-radius: 999px; flex: none;
  background: #FFF7EF; box-shadow: 0 0 0 0 rgba(255, 247, 239, 0.7);
  animation: live-pulse 1.8s ease-out infinite;
}
.live-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.live-text strong { font-weight: 700; }
.live-title { opacity: 0.92; }
.live-btn {
  flex: none; padding: 7px 16px;
  border-radius: var(--radius-pill); text-decoration: none;
  font-weight: 700; font-size: 13.5px;
  background: #FFF7EF; color: var(--km-klei-deep);
  transition: background var(--duration-fast) var(--ease-out);
}
.live-bar.is-soon .live-btn { color: var(--km-aubergine); }
.live-btn:hover { background: #FFFFFF; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 247, 239, 0.7); }
  100% { box-shadow: 0 0 0 9px rgba(255, 247, 239, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ── De opleiding: module rows ─────────────────────────────────────────── */

.module-list { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }

.module-row {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 26px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
a.module-row:hover { box-shadow: var(--shadow-raised); }

.module-tile {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-card);
  background: var(--km-creme);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 15px; color: var(--text-heading);
}
.module-tile.is-busy { background: var(--km-klei-soft); }
.module-tile.is-done { background: var(--positive-soft); }

.module-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.module-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.module-title { font-family: var(--font-display); font-size: 22px; color: var(--text-heading); }
.module-sub { font-size: 15px; line-height: 1.6; }

.pill {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 4px 10px;
}
.pill-groen { color: var(--positive); background: var(--positive-soft); }
.pill-klei { color: #FFF7EF; background: var(--km-klei); }
.pill-open { color: var(--text-muted); background: var(--km-creme); }
.pill-lila { color: var(--km-aubergine); background: var(--km-lila-soft); }

.module-side { flex: none; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.module-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.module-dots { display: flex; gap: 4px; }
.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--km-zand); flex: none; }
.dot.is-done { background: var(--positive); }

.module-row-held { background: var(--km-zand); box-shadow: none; }
.module-tile-held { background: var(--km-creme); color: var(--text-muted); }

/* ── Lesomgeving ───────────────────────────────────────────────────────── */

.les-shell { padding-top: 26px; max-width: 1280px; }
.les-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-accent);
  text-decoration: none; margin-bottom: 22px;
}
.les-back:hover { color: var(--accent-hover); }

.les-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 0.85fr); gap: 28px; align-items: start; }
.les-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.les-title { font-size: 36px; line-height: 1.14; margin-top: 12px; max-width: 26ch; }

.les-video {
  background: var(--km-aubergine);
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.les-video iframe { width: 100%; height: 100%; border: none; display: block; }
/* Een video met een kopje erboven; zonder kopje staat de speler er precies als voorheen. */
.les-video-block { margin: 0; }
.les-video-title {
  font-family: var(--font-display); font-size: 20px; line-height: 1.25;
  color: var(--text-heading); margin: 0 0 12px;
}

.les-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--km-wit); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 10px 18px;
  font-size: 14px; font-weight: 600; color: var(--text-heading);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.chip:hover { background: var(--km-zand); }

.les-reader { padding: 30px 34px; }
.les-reader-body { font-size: 16px; line-height: 1.75; text-wrap: pretty; margin-top: 6px; }
/* prose keeps a readable measure; tables get the full card width */
.les-reader-body > p, .les-reader-body > ul, .les-reader-body > ol,
.les-reader-body > h3, .les-reader-body > h4, .les-reader-body > blockquote { max-width: 62ch; }
.les-reader-body h3 { font-size: 24px; margin: 18px 0 4px; }
.les-reader-body h3:first-child { margin-top: 8px; }
.les-reader-body ul { padding-left: 20px; }
.les-reader-body li { margin-bottom: 6px; }

.les-afronden { display: flex; align-items: center; gap: 16px; }
.les-afronden-btn { width: auto; padding: 13px 26px; }
.les-afronden-hint { font-size: 14px; color: var(--text-muted); }
.les-afronden-done { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-heading); }
.check-dot {
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: var(--positive); color: var(--km-creme);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.les-afronden-undo { background: none; border: none; padding: 0; font: inherit; font-size: 14px; cursor: pointer; }

.les-rail { position: sticky; top: 26px; display: flex; flex-direction: column; gap: 18px; }
.les-rail-card { padding: 22px 20px; }
.rail-lessons { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.rail-lesson {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; border-radius: var(--radius-inner);
  font-size: 14.5px; line-height: 1.45; color: var(--text-heading);
  text-decoration: none;
}
.rail-lesson:hover { background: var(--km-creme); }
.rail-lesson.is-current { background: var(--km-klei-soft); font-weight: 700; }
.rail-lesson .dot { margin-top: 6px; }
.rail-divider { height: 1px; background: var(--border-subtle); margin: 16px 0; }
.rail-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--text-accent); }
.rail-next-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--text-heading); margin-top: 5px; }

/* ── Responsive: sidebar becomes bottom bar under 900px ────────────────── */

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    width: 100%; height: auto; position: fixed; bottom: 0; top: auto; z-index: 10;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--border-subtle);
  }
  .app-lockup, .app-sidebar-footer { display: none; }
  /* De onderbalk toont de drie links van waar je bent, plus Meer (ticket 003 van de rondleiding-map) */
  .app-sidebar { justify-content: space-around; gap: 0; }
  .app-nav { flex-direction: row; flex: none; justify-content: space-around; gap: 0; display: contents; }
  .app-nav .eyebrow, .app-nav-item { display: none; }
  .sectie-leren .app-nav-item[data-balk~="leren"], .sectie-praktijk .app-nav-item[data-balk~="praktijk"], .sectie-beheer .app-nav-item[data-balk~="beheer"] { display: flex; }
  .app-nav-item { padding: 10px 10px; font-size: 13px; min-height: 44px; white-space: nowrap; }
  .app-nav-dot { display: none; }
  .nav-meer-knop { display: flex; flex-direction: column; align-items: center; padding: 4px 12px; min-height: 44px; background: none; border: none; font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; }
  .nav-meer-icoon { font-size: 18px; line-height: 1; letter-spacing: 1px; }
  .nav-meer[open] { display: block; margin: auto 0 0; width: 100%; max-width: none; max-height: 82vh; overflow: auto; border: none; border-radius: 22px 22px 0 0; padding: 0; background: var(--bg, #f5efe9); }
  .nav-meer::backdrop { background: rgba(27, 20, 24, .45); }
  .app-content { padding-bottom: 80px; }
  .les-grid { grid-template-columns: 1fr; }
  .les-rail { position: static; }
  .module-row { gap: 16px; padding: 18px 20px; }
  .module-side { display: none; }
  .page-title { font-size: 30px; }
  .les-title { font-size: 28px; }
}

/* ── Reader rich content (tables, steps, quotes) ───────────────────────── */

.les-reader-body h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--km-klei); font-weight: 400;
  margin: 22px 0 6px;
}

.les-reader-body .table-scroll { overflow-x: auto; margin: 14px 0 6px; }
.les-reader-body table {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; line-height: 1.5;
}
/* First column holds the term/label: keep it on one line but never wider
   than a third; explanation columns wrap. (Old nowrap-last-column rule broke
   term|toelichting tables by pushing the explanation off-screen.) */
.les-reader-body td:first-child, .les-reader-body th:first-child {
  white-space: nowrap; max-width: 34%; overflow-wrap: break-word;
}
/* label | opsomming tables (in balans / uit balans / wat kun jij doen) */
.les-reader-body td ul { margin: 0; padding-left: 18px; }
.les-reader-body td li:last-child { margin-bottom: 0; }
.les-reader-body td + td, .les-reader-body th + th { padding-left: 14px; }
@media (max-width: 640px) {
  .les-reader-body td:first-child, .les-reader-body th:first-child { white-space: normal; }
}
.les-reader-body th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 400;
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border-strong);
}
.les-reader-body td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.les-reader-body tr:last-child td { border-bottom: none; }

.les-reader-body ol.steps { list-style: none; padding: 0; margin: 14px 0; counter-reset: step; }
.les-reader-body ol.steps li {
  position: relative; padding: 0 0 14px 46px; counter-increment: step;
}
.les-reader-body ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono); font-size: 12px; color: var(--km-klei);
  background: var(--km-klei-soft); border-radius: 999px; padding: 3px 8px;
}

.les-reader-body blockquote {
  margin: 18px 0; padding: 18px 22px;
  background: var(--km-klei-soft); border-radius: var(--radius-inner);
  font-family: var(--font-display); font-size: 19px; line-height: 1.45;
  color: var(--text-heading);
}
.les-reader-body blockquote footer {
  font-family: var(--font-body); font-size: 13.5px; color: var(--text-muted); margin-top: 10px;
}

/* Checklist items (meeneemlijst-style): circle checkbox markers */
.les-reader-body ul.checklist { list-style: none; padding: 0; margin: 16px 0; }
.les-reader-body ul.checklist li {
  position: relative; padding: 0 0 14px 38px;
  font-size: 15.5px; line-height: 1.55;
}
.les-reader-body ul.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--km-wit);
}

/* ── Reader schedule: agenda-style rows instead of a data grid ─────────── */

.les-reader-body .schedule { margin: 16px 0 6px; }
.les-reader-body .schedule-row {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.les-reader-body .schedule-row:last-child { border-bottom: none; }
.les-reader-body .schedule-date {
  width: 118px; flex: none;
  display: flex; flex-direction: column; gap: 3px;
}
.les-reader-body .schedule-day {
  font-family: var(--font-display); font-size: 17px; color: var(--text-heading);
}
.les-reader-body .schedule-time {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.les-reader-body .schedule-main { flex: 1; min-width: 0; }
.les-reader-body .schedule-tags { margin-bottom: 6px; }
.les-reader-body .schedule-title {
  font-family: var(--font-display); font-size: 17px; color: var(--text-heading);
  line-height: 1.3;
}
.les-reader-body .schedule-meta {
  font-size: 13.5px; color: var(--text-muted); margin-top: 4px;
}
@media (max-width: 640px) {
  .les-reader-body .schedule-row { flex-direction: column; gap: 8px; }
  .les-reader-body .schedule-date { width: auto; flex-direction: row; gap: 10px; align-items: baseline; }
}

/* ── Agenda ────────────────────────────────────────────────────────────── */

.agenda-list { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; }

.agenda-row {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 26px;
  display: flex; align-items: center; gap: 24px;
}
.agenda-date { width: 78px; flex: none; text-align: center; }
.agenda-month {
  display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.agenda-day {
  display: block;
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: var(--text-heading); margin-top: 5px;
}
.agenda-divider { width: 1px; height: 46px; background: var(--border-subtle); flex: none; }
.agenda-main { flex: 1; min-width: 0; }
.agenda-tags { display: flex; align-items: center; gap: 11px; }
.agenda-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.agenda-title {
  font-family: var(--font-display); font-size: 21px; color: var(--text-heading);
  margin-top: 8px;
}
.agenda-meta { font-size: 14.5px; line-height: 1.55; margin-top: 5px; color: var(--text-muted); }
.agenda-actions { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.agenda-btn {
  display: inline-flex; justify-content: center;
  border-radius: var(--radius-pill); padding: 11px 22px;
  font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.agenda-btn-klei { background: var(--km-klei); color: #FFF7EF; }
.agenda-btn-klei:hover { background: var(--km-klei-deep); }
.agenda-btn-outline { border: 1.5px solid var(--border-strong); color: var(--text-heading); }
.agenda-btn-outline:hover { background: var(--km-zand); }
.agenda-btn-ghost { color: var(--text-accent); font-size: 13.5px; padding: 6px 10px; }

/* tonight: inverted on aubergine */
.agenda-row.is-tonight { background: var(--km-aubergine); }
.agenda-row.is-tonight .agenda-month { color: var(--km-huid); }
.agenda-row.is-tonight .agenda-day,
.agenda-row.is-tonight .agenda-title { color: #FFF7EF; }
.agenda-row.is-tonight .agenda-divider { background: rgba(255, 247, 239, 0.25); }
.agenda-row.is-tonight .agenda-time,
.agenda-row.is-tonight .agenda-meta { color: var(--km-huid); }
.agenda-row.is-tonight .pill { background: rgba(255, 247, 239, 0.16); color: #FFF7EF; }
.agenda-row.is-tonight .agenda-btn-ghost { color: var(--km-huid); }

.agenda-row.is-past { opacity: 0.55; }
/* Een sessie met opname is nog iets waard: niet zo ver wegdimmen. */
.agenda-row.is-past.has-recording { opacity: 0.9; }
.agenda-btn-replay { display: inline-flex; align-items: center; gap: 6px; }
.tk-when { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tk-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

@media (max-width: 700px) {
  .agenda-row { flex-wrap: wrap; gap: 14px; padding: 18px 20px; }
  .agenda-divider { display: none; }
  .agenda-actions { flex-direction: row; width: 100%; }
  .agenda-btn { flex: 1; }
}

/* ── Klasruimte ────────────────────────────────────────────────────────── */

.kr-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.kr-avatars { display: flex; }
.kr-avatar {
  width: 38px; height: 38px; border-radius: 999px;
  color: var(--text-heading);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px;
  border: 2px solid var(--km-creme);
}
.kr-avatars .kr-avatar { margin-left: -8px; }
.kr-avatar-lg { width: 42px; height: 42px; font-size: 13.5px; flex: none; border: none; }
.kr-avatar-sm { width: 24px; height: 24px; font-size: 10.5px; border: none; }
/* Een cursist met een portret in haar profiel: haar gezicht in plaats van initialen. */
.kr-avatar-foto { overflow: hidden; background: var(--km-creme); }
.kr-avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Het team van Kiki Mae: beeldmerk in plaats van initialen, plus een label bij de naam. */
.kr-avatar-team { overflow: hidden; }
.kr-avatar-team img { width: 68%; height: 68%; object-fit: contain; display: block; }
/* De naam licht op in het lila van het merk; "kiki mae" staat erachter waar
   bij een cursist haar woonplaats staat. Het rondje zegt wie, het lila zegt Kiki Mae. */
.kr-post-name.is-team, .kr-reply-name.is-team {
  background: var(--km-lila-soft); border-radius: 6px;
  padding: 2px 7px; margin-left: -7px;
}
.kr-reply-name.is-team { padding: 1px 6px; margin-left: -6px; border-radius: 5px; }
.kr-team-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}

.kr-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 0.8fr); gap: 28px; margin-top: 30px; align-items: start; }
.kr-feed { display: flex; flex-direction: column; gap: 16px; }

.kr-announcement {
  background: var(--km-aubergine);
  border-radius: var(--radius-card);
  padding: 26px 30px;
  color: var(--km-creme);
}
.kr-announcement-head { display: flex; align-items: center; gap: 10px; }
.kr-announcement-head img { width: 30px; height: 30px; border-radius: 999px; }
.kr-announcement-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--km-huid);
}
.kr-announcement-title { font-family: var(--font-display); font-size: 23px; line-height: 1.25; margin-top: 14px; }
.kr-announcement-body { font-size: 15.5px; line-height: 1.7; color: var(--km-huid); margin-top: 9px; max-width: 62ch; }

.kr-composer { display: flex; gap: 12px; padding: 22px 24px; }
.kr-composer form { flex: 1; }
.kr-composer textarea {
  width: 100%; min-height: 62px;
  background: var(--km-creme); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-inner); padding: 13px 16px;
  font: inherit; font-size: 15px; line-height: 1.55; color: var(--text-body);
  resize: vertical; outline: none;
}
.kr-composer textarea:focus { border-color: var(--accent); }
.kr-post-btn { width: auto; margin-top: 12px; padding: 11px 24px; font-size: 14.5px; }

.kr-post { display: flex; gap: 14px; padding: 26px 28px; }
.kr-post-main { flex: 1; min-width: 0; }
.kr-post-head { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.kr-post-name { font-size: 15.5px; font-weight: 700; color: var(--text-heading); }
.kr-post-city {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.kr-post-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.kr-delete { margin-left: auto; }
.kr-ghost-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
}
.kr-ghost-btn:hover { color: var(--negative); }
.kr-post-body { font-size: 16px; line-height: 1.7; color: var(--text-heading); margin-top: 9px; text-wrap: pretty; }
.kr-actions-frame { display: block; }
.kr-closed { padding: 20px 24px; background: var(--km-zand); border: none; }
.kr-closed p:last-child { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.vd-closed p:last-child { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; }
.kr-post-actions { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.kr-inline-form { display: inline-flex; }
.kr-heart {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted);
}
.kr-heart.is-hearted, .kr-heart:hover { color: var(--km-klei); }
.kr-comment-count { font-size: 14px; font-weight: 600; color: var(--text-muted); }

.kr-reply { background: var(--km-creme); border-radius: var(--radius-inner); padding: 16px 18px; margin-top: 16px; }
.kr-reply-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kr-reply-name { font-size: 13.5px; font-weight: 700; color: var(--text-heading); }
.kr-reply-body { font-size: 14.5px; line-height: 1.6; margin-top: 8px; }
/* Reageren op een reactie: dezelfde knop en kiezer, een maatje kleiner. */
.kr-reply-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.kr-reply-actions .kr-heart { font-size: 13px; }
.kr-reply-actions .kr-heart svg { width: 15px; height: 15px; }
.kr-reply-actions .kr-summary { font-size: 12.5px; }

.kr-reply-form { margin-top: 14px; }
.kr-reply-form input {
  width: 100%;
  background: var(--km-creme); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 10px 18px;
  font: inherit; font-size: 14.5px; outline: none;
}
.kr-reply-form input:focus { border-color: var(--accent); }

.kr-rail { display: flex; flex-direction: column; gap: 18px; }
.kr-rail-card { padding: 24px; }
.kr-upcoming { margin-top: 14px; }
.kr-upcoming-title { font-size: 15px; font-weight: 700; color: var(--text-heading); }
.kr-upcoming-meta { font-size: 14px; margin-top: 4px; color: var(--text-muted); }
.kr-rules { background: var(--km-zand); border-radius: var(--radius-card); padding: 24px; }
.kr-rules-label { color: var(--km-klei); }
.kr-rules p:last-child { font-size: 14.5px; line-height: 1.7; color: var(--text-heading); margin: 10px 0 0; }

@media (max-width: 900px) {
  .kr-grid { grid-template-columns: 1fr; }
}

/* ── Vandaag ───────────────────────────────────────────────────────────── */

.vd-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 22px; margin-top: 34px; align-items: start; }
.vd-main, .vd-rail { display: flex; flex-direction: column; gap: 22px; }

.vd-welcome { display: flex; padding: 0; overflow: hidden; flex-wrap: wrap; }
.vd-welcome-video { flex: 1 1 220px; min-width: 180px; background: var(--km-aubergine); }
.vd-welcome-video iframe { width: 100%; height: 100%; min-height: 176px; border: none; display: block; }
.vd-welcome-text { flex: 1.6 1 300px; min-width: 0; padding: 26px 28px; }
.vd-welcome-text p:last-child { font-size: 15px; line-height: 1.6; margin: 10px 0 0; }
.vd-eyebrow-klei { color: var(--km-klei); }

.vd-card-title { font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--text-heading); margin-top: 10px; }
.vd-card-title-lg { font-size: 26px; }

.vd-continue { padding: 26px 28px; }
.vd-continue-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.vd-progress { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.vd-ctas { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.vd-btn { width: auto; padding: 13px 26px; font-size: 15px; }

.vd-teaser { padding: 22px 24px; }
.vd-teaser-body { font-size: 15px; line-height: 1.65; color: var(--text-heading); margin: 14px 0 0; }
.vd-more { display: inline-block; font-size: 14px; font-weight: 700; margin-top: 12px; }

.vd-session {
  background: var(--km-aubergine);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  color: var(--km-creme);
}
.vd-eyebrow-huid { color: var(--km-huid); }
.vd-session-title { font-family: var(--font-display); font-size: 22px; line-height: 1.22; margin-top: 12px; }
.vd-session-meta { font-size: 14.5px; line-height: 1.6; color: var(--km-huid); margin-top: 8px; }
.vd-session-btn {
  display: inline-flex; margin-top: 20px;
  background: var(--km-klei); color: #FFF7EF;
  border-radius: var(--radius-pill); padding: 12px 22px;
  font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.vd-session-btn:hover { background: var(--km-klei-deep); }

.vd-days { padding: 22px 24px; }
.vd-day { margin-top: 14px; }
.vd-day-title { font-family: var(--font-display); font-size: 18px; color: var(--text-heading); }
.vd-day-meta { font-size: 14px; line-height: 1.55; margin-top: 5px; color: var(--text-muted); }

@media (max-width: 900px) {
  /* één kolom; de paarse blokken (de aankondiging en de eerstvolgende sessie of praktijkdag) altijd bovenaan */
  .vd-grid { display: flex; flex-direction: column; align-items: stretch; }
  .vd-main, .vd-rail { display: contents; }
  .vd-announcement:not(.is-light) { order: -2; }
  .vd-session { order: -1; }
}

/* ── Cursusbouwer ──────────────────────────────────────────────────────── */

.bw-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.bw-new-module { width: auto; padding: 12px 22px; font-size: 14.5px; }

.bw-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.8fr); gap: 26px; margin-top: 32px; align-items: start; }
.bw-modules { display: flex; flex-direction: column; gap: 14px; }

.bw-module { padding: 0; overflow: hidden; }
.bw-module-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--border-subtle);
}
.bw-module-nr { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.bw-module-title { font-family: var(--font-display); font-size: 20px; color: var(--text-heading); flex: 1; min-width: 0; }
.bw-module-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.bw-move { display: flex; flex-direction: column; gap: 2px; flex: none; }
.bw-move button {
  border: none; background: none; cursor: pointer; padding: 0 4px;
  color: var(--border-strong); font-size: 12px; line-height: 1.2;
}
.bw-move button:hover:not(:disabled) { color: var(--km-klei); }
.bw-move button:disabled { opacity: 0.3; cursor: default; }

.bw-lesson {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid #F0E8DC;
}
.bw-lesson.is-selected { background: var(--km-klei-soft); }
.bw-lesson-main { flex: 1; min-width: 0; text-decoration: none; }
.bw-lesson-title { display: block; font-size: 15.5px; font-weight: 600; color: var(--text-heading); }
.bw-lesson-chips { display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.bw-chip {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--km-creme); border-radius: var(--radius-pill); padding: 4px 9px;
}

.bw-switch-form { flex: none; }
.bw-switch {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.bw-switch:disabled { opacity: 0.45; cursor: default; }
.bw-switch-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.bw-switch.is-open .bw-switch-label { color: var(--positive); }
.bw-switch.is-held .bw-switch-label { color: var(--text-muted); }
.bw-switch-track {
  width: 42px; height: 24px; border-radius: 999px; padding: 3px;
  display: flex; transition: background var(--duration-fast) var(--ease-out);
}
.bw-switch.is-open .bw-switch-track { background: var(--positive); justify-content: flex-end; }
.bw-switch.is-held .bw-switch-track { background: var(--km-zand); justify-content: flex-start; }
.bw-switch-knob { width: 18px; height: 18px; border-radius: 999px; background: var(--km-wit); box-shadow: var(--shadow-card); }

.bw-add-lesson { display: flex; gap: 10px; padding: 13px 22px; align-items: center; }
.bw-add-lesson input[type="text"] {
  flex: 1; background: var(--km-creme); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 9px 16px; font: inherit; font-size: 14px; outline: none;
}
.bw-add-lesson button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 14.5px; font-weight: 700; color: var(--km-klei);
}

.bw-panel { padding: 24px; position: sticky; top: 26px; }
.bw-panel-title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; color: var(--text-heading); margin-top: 12px; }
.bw-panel-blocks { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.bw-panel-block {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--km-creme); border-radius: var(--radius-inner); padding: 12px 16px;
  font-size: 14.5px; color: var(--text-heading);
}
.bw-panel-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.bw-panel-empty { font-size: 14.5px; color: var(--text-muted); margin-top: 11px; }
.bw-panel-edit { display: inline-block; font-size: 14px; font-weight: 700; margin-top: 12px; }
.bw-panel-note {
  background: var(--km-klei-soft); border-radius: var(--radius-inner);
  padding: 16px 18px; margin-top: 20px;
  font-size: 14px; line-height: 1.6; color: var(--text-heading);
}

/* les editor */
.bw-title-form { display: flex; gap: 14px; margin-top: 10px; }
.bw-title-input {
  flex: 1; font-family: var(--font-display); font-size: 26px; color: var(--text-heading);
  background: transparent; border: none; border-bottom: 2px solid var(--border-strong);
  padding: 6px 2px; outline: none;
}
.bw-title-input:focus { border-color: var(--accent); }
.bw-blocks { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.bw-block { padding: 22px 24px; }
.bw-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bw-block-form { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.bw-field span {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-heading); margin-bottom: 6px;
}
.bw-input {
  width: 100%; padding: 10px 14px; font: inherit; color: var(--text-body);
  background: var(--km-wit); border: 1px solid var(--border-strong);
  border-radius: var(--radius-inner);
}
.bw-input-s { max-width: 110px; }
.bw-block-save { align-self: flex-start; }
.bw-add-blocks { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.bw-add-blocks .chip { border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; }
.bw-delete-lesson { margin-top: 34px; }

@media (max-width: 900px) {
  .bw-grid { grid-template-columns: 1fr; }
  .bw-panel { position: static; }
}

/* bouwer cohesion pass */
.bw-module-edit { color: var(--text-muted); display: inline-flex; flex: none; }
.bw-module-edit:hover { color: var(--km-klei); }
.bw-module-edit-form {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--border-subtle);
  background: var(--km-creme);
}
.bw-field-grow { flex: 1; min-width: 180px; }
.bw-course-settings { margin-top: 26px; padding: 18px 24px; }

/* Bouwer per opleiding (map #33): klas-keuze voor achter de hand, delen tussen opleidingen, de lijst */
.bw-klaskeuze { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.bw-klaskeuze .eyebrow { margin: 0; }
.bw-klaskeuze select { width: auto; }
.bw-shared { white-space: nowrap; }
.bw-course-form { flex-wrap: wrap; }
.bw-course-form textarea.bw-input { min-height: 120px; resize: vertical; line-height: 1.5; }
.bw-course-hint { flex-basis: 100%; font-size: 13.5px; color: var(--text-muted); margin: 6px 0 0; }
.bw-unplace { margin: -6px 0 12px; padding: 0 4px; }
.bw-share { margin-top: 6px; padding: 18px 22px; }
.bw-share-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.bw-share-row select, .bw-share-row input[type="text"] { flex: 1; min-width: 220px; }
.bw-share-note { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.bw-losse-row { justify-content: space-between; }
.bw-losse-row + .bw-losse-row { margin-top: 6px; }
.bw-losse-title { flex: 1; min-width: 140px; font-size: 15px; color: var(--text-heading); }
.bw-losse-title .bw-module-count { margin-left: 8px; white-space: nowrap; }
.bw-losse-actions { display: flex; align-items: center; gap: 14px; }
.bw-losse-actions .btn { width: auto; }
.op-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; flex-wrap: wrap; }
.op-title { font-family: var(--font-display); font-size: 22px; color: var(--text-heading); }
.op-meta { font-size: 14px; color: var(--text-muted); margin-top: 6px; }
.op-actions { display: flex; gap: 10px; align-items: center; }
.op-actions .btn { width: auto; }
.op-new { margin-top: 26px; padding: 18px 24px; }
.bw-course-settings summary {
  cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--text-heading);
}
.bw-course-settings[open] summary { margin-bottom: 6px; }
.bw-module-edit-form[hidden] { display: none; }

/* ── Public welcome page ───────────────────────────────────────────────── */

.pw { background: var(--km-warm, #FAF5EC); }

.pw-topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 22px clamp(20px, 4vw, 48px);
}
.pw-lockup { display: flex; align-items: center; gap: 11px; }
.pw-lockup > img { width: 36px; height: 36px; border-radius: 12px; }
.pw-lockup-text { font-family: var(--font-display); font-size: 17px; line-height: 1.08; color: var(--text-heading); }
.pw-byline {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  margin-left: 14px; padding-left: 18px; border-left: 1px solid var(--border-subtle);
}
.pw-byline span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
.pw-byline img { height: 13px; }
.pw-login { width: auto; padding: 10px 22px; font-size: 14.5px; }

.pw-hero { max-width: 820px; margin: 0 auto; padding: 60px clamp(20px, 4vw, 48px) 70px; text-align: center; }
.pw-hero h1 { font-size: clamp(34px, 5.5vw, 52px); line-height: 1.1; margin-top: 16px; }
.pw-hero-sub { font-size: 17.5px; line-height: 1.7; margin: 18px auto 0; max-width: 56ch; }
.pw-hero-ctas { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.pw-cta { width: auto; padding: 14px 28px; font-size: 15.5px; }
.pw-hero-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 24px; }

/* De deuren zijn dicht: de klas loopt. */
.pw-now {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--km-klei); background: var(--km-klei-soft);
  border-radius: var(--radius-pill); padding: 7px 14px;
}
.pw-now-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--km-klei);
  box-shadow: 0 0 0 0 rgba(169, 96, 63, 0.5);
  animation: live-pulse-klei 1.8s ease-out infinite;
}
@keyframes live-pulse-klei {
  0% { box-shadow: 0 0 0 0 rgba(169, 96, 63, 0.5); }
  100% { box-shadow: 0 0 0 9px rgba(169, 96, 63, 0); }
}
.pw-hero-dicht h1 { margin-top: 22px; }
@media (max-width: 640px) { .pw-br { display: none; } }
.pw-wens { display: block; }
.pw-cta.is-done { cursor: default; background: var(--km-klei-deep); }
.pw-hero-login { margin-top: 26px; font-size: 14.5px; }
.pw-hero-login a { color: var(--text-accent); }
.cheer-heart {
  position: fixed; z-index: 100; pointer-events: none; font-size: 22px;
  transform: translate(-50%, -50%);
  animation: cheer-rise 1100ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes cheer-rise {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), calc(-50% - var(--rise))) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .pw-now-dot { animation: none; } .cheer-heart { display: none; } }

.vd-cheers {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 14px; color: var(--km-klei); background: var(--km-klei-soft);
  border-radius: var(--radius-pill); padding: 7px 14px;
}

.pw section h2 { font-size: clamp(26px, 3.5vw, 34px); line-height: 1.15; margin-top: 12px; text-align: center; }
.pw-center { text-align: center; }

.pw-peek { padding: 60px clamp(20px, 4vw, 48px); background: var(--km-creme); }
.pw-peek-sub { font-size: 16px; line-height: 1.7; max-width: 62ch; margin: 16px auto 0; text-align: center; }

.pw-mama { max-width: 680px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 48px) 10px; }
.pw-mama p { font-size: 16px; line-height: 1.75; margin: 18px auto 0; text-wrap: pretty; }

.pw-learn { max-width: 1180px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 48px); }
.pw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 34px; }
.pw-card {
  background: var(--km-zand); border-radius: var(--radius-card); padding: 26px 24px;
}
.pw-card-nr { font-family: var(--font-mono); font-size: 12px; color: var(--km-klei); }
.pw-card h3 { font-size: 21px; margin: 10px 0 0; }
.pw-card p { font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; }

.pw-how { padding: 64px clamp(20px, 4vw, 48px); background: var(--km-wit); }
.pw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; max-width: 1180px; margin: 34px auto 0; }
.pw-step h3 { font-size: 19px; }
.pw-step p { font-size: 14.5px; line-height: 1.65; margin: 8px 0 0; }

.pw-kikimae { text-align: center; padding: 74px clamp(20px, 4vw, 48px); background: var(--km-aubergine); }
.pw-kikimae .eyebrow { color: var(--km-huid); }
.pw-kikimae-logo { width: min(320px, 72vw); margin-top: 20px; }
.pw-kikimae p { font-size: 16px; line-height: 1.7; max-width: 52ch; margin: 22px auto 0; color: var(--km-creme); }
.pw-kikimae .pw-kikimae-sign {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--km-huid); margin-top: 14px;
}
.pw-kikimae .pw-kikimae-link {
  display: inline-block; margin-top: 26px; color: var(--km-huid);
  font-size: 14.5px; text-decoration: underline; text-underline-offset: 4px;
}
.pw-kikimae .pw-kikimae-link:hover { color: var(--km-creme); }

.pw-close { max-width: 680px; margin: 0 auto; padding: 74px clamp(20px, 4vw, 48px); text-align: center; }
.pw-close p { font-size: 16.5px; line-height: 1.75; margin: 18px auto 0; max-width: 52ch; text-wrap: pretty; }
.pw-close .pw-hero-ctas { margin-top: 28px; }
.pw-close .pw-hero-note { font-size: 11px; margin-top: 24px; }

/* ── Voordeur: verkoop, kalender, programma ─────────────────────────────── */

/* de countdown-pill boven een klas die openstaat */
.pw-now-open { color: var(--km-aubergine); background: var(--km-lila-soft, #EFE6F1); }
.pw-now-open .pw-now-dot { background: var(--km-aubergine); animation: none; box-shadow: none; }
.pw-hero-verkoop .eyebrow { margin-top: 22px; }
.pw-hero-verkoop h1 { margin-top: 10px; }

/* feiten in de stijl van de studiegids: mono-label boven de waarde */
.pw-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 38px;
  margin: 30px auto 0; padding: 0;
}
.pw-facts div { min-width: 120px; text-align: left; }
.pw-facts dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--km-klei);
}
.pw-facts dd { margin: 4px 0 0; font-size: 15.5px; color: var(--text-heading); }
.pw-facts-stack { flex-direction: column; gap: 14px; margin-top: 14px; }
.pw-facts-stack div { min-width: 0; }

/* ondertussen loopt er een klas */
.pw-live { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) 30px; }
.pw-live-card {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center;
  background: var(--km-wit); border-radius: var(--radius-card); padding: 30px 34px;
  box-shadow: 0 1px 0 rgba(69, 48, 63, 0.05);
}
.pw-live-card h2 { font-size: 24px; text-align: left; margin-top: 12px; }
.pw-live-sub { font-size: 15px; line-height: 1.7; margin: 10px 0 0; color: var(--text-body); }
.pw-live-card .pw-wens { text-align: center; }
.pw-live-card .pw-hero-ctas { margin-top: 0; }
.pw-live-card .pw-hero-note { margin-top: 14px; }
@media (max-width: 760px) {
  .pw-live-card { grid-template-columns: 1fr; padding: 24px 22px; }
  .pw-live-card .pw-wens { text-align: left; }
  .pw-live-card .pw-hero-ctas { justify-content: flex-start; }
}

/* de kalender: alles wat speelt, op startdatum */
.pw-board { max-width: 900px; margin: 0 auto; padding: 50px clamp(20px, 4vw, 48px) 30px; }
.pw-board-list { margin-top: 30px; border-top: 1px solid var(--border-subtle); }
.pw-board-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--border-subtle);
}
.pw-board-date { display: flex; flex-direction: column; gap: 2px; }
.pw-board-day { font-family: var(--font-display); font-size: 19px; color: var(--text-heading); line-height: 1.15; }
.pw-board-year { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.pw-board-tags { margin-bottom: 7px; }
.pw-board-title { font-family: var(--font-display); font-size: 19px; color: var(--text-heading); line-height: 1.25; }
.pw-board-meta { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.pw-board-row.is-afgerond .pw-board-title, .pw-board-row.is-afgerond .pw-board-day { color: var(--text-muted); }
.pw-cta-sm { padding: 11px 20px; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .pw-board-row { grid-template-columns: 1fr; gap: 10px; }
  .pw-board-date { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* per opleiding die te koop is: verhaal, programma, praktisch */
.pw-sell { max-width: 1080px; margin: 0 auto; padding: 44px clamp(20px, 4vw, 48px) 60px; }
.pw-sell-p { font-size: 16.5px; line-height: 1.75; max-width: 62ch; margin: 18px auto 0; text-align: center; text-wrap: pretty; }
.pw-sell-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.pw-programma { list-style: none; padding: 0; margin: 14px 0 0; }
.pw-programma li {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--border-subtle);
}
.pw-programma li:last-child { border-bottom: 1px solid var(--border-subtle); }
.pw-programma-nr {
  font-family: var(--font-mono); font-size: 12px; color: var(--km-klei);
  background: var(--km-klei-soft); border-radius: 999px; padding: 3px 0; text-align: center;
}
.pw-programma strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text-heading); line-height: 1.3; }
.pw-programma-sub { display: block; font-size: 14px; line-height: 1.55; color: var(--text-body); margin-top: 3px; }
.pw-programma-date { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.pw-avonden { padding-left: 18px; margin: 10px 0 0; font-size: 14.5px; line-height: 1.8; }
.pw-sell-card {
  position: sticky; top: 24px;
  background: var(--km-wit); border-radius: var(--radius-card); padding: 26px 28px 28px;
  box-shadow: 0 1px 0 rgba(69, 48, 63, 0.05);
}
.pw-cta-block { display: block; width: 100%; text-align: center; margin-top: 24px; }
.pw-sell-link { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: var(--text-accent); }
@media (max-width: 760px) {
  .pw-sell-grid { grid-template-columns: 1fr; }
  .pw-sell-card { position: static; }
}

/* hoofdstukken: één per opleiding, elk met een kop in eigen kleur */
.pw-chapter {
  position: relative; overflow: hidden; text-align: center;
  padding: 72px clamp(20px, 4vw, 48px) 64px;
  background: var(--chapter-tint); border-top: 6px solid var(--chapter-accent);
}
.pw-chapter-lila { --chapter-accent: var(--km-lila); --chapter-tint: var(--km-lila-soft); }
.pw-chapter-klei { --chapter-accent: var(--km-huid); --chapter-tint: var(--km-huid-soft); }
.pw-chapter-inner { position: relative; max-width: 760px; margin: 0 auto; }
.pw-chapter-nr {
  position: absolute; left: clamp(8px, 3vw, 40px); top: -0.1em;
  font-family: var(--font-display); font-size: clamp(120px, 17vw, 210px); line-height: 1;
  color: var(--km-aubergine); opacity: 0.07; pointer-events: none; user-select: none;
}
@media (max-width: 900px) { .pw-chapter-nr { display: none; } }
.pw-chapter-lila .pill-lila { background: var(--km-wit); }
.pw-chapter-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--km-aubergine); margin: 0;
}
.pw .pw-chapter-title { font-size: clamp(32px, 4.8vw, 50px); line-height: 1.08; margin-top: 12px; }
.pw-chapter-sub {
  font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4;
  color: var(--km-aubergine-soft); max-width: 44ch; margin: 16px auto 0; text-wrap: pretty;
}
.pw-chapter-status { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.pw-chapter-status .pill { font-size: 11.5px; padding: 6px 12px; }
/* de afsluiter van een hoofdstuk kleurt mee met zijn kop */
.pw-close-lila { border-bottom: 6px solid var(--km-lila); max-width: none; }
.pw-close-lila > *, .pw-close-klei > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.pw-close-klei { border-bottom: 6px solid var(--km-huid); max-width: none; }
/* het vaste verhaal begint met het inkijkje: geen extra kleurvlak direct onder de kop */
.pw-chapter + .pw-peek { background: transparent; padding-top: 56px; }

.pw-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 26px clamp(20px, 4vw, 48px);
  border-top: 1px solid var(--border-subtle);
  font-size: 14px; color: var(--text-muted);
}
.pw-footer a { color: var(--text-accent); }

/* ── Gratis inkijkje widget ────────────────────────────────────────────── */

.ink {
  max-width: 680px; margin: 34px auto 0;
  background: var(--km-wit); border-radius: 20px;
  box-shadow: var(--shadow-raised); overflow: hidden;
  text-align: left;
}
.ink [hidden] { display: none !important; }
.ink-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--km-huid);
}
.ink-muted { color: var(--text-muted); }

.ink-head {
  background: var(--km-aubergine); padding: 20px 26px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ink-head img { width: 38px; height: 38px; border-radius: 999px; flex: none; }
.ink-head-main { flex: 1; min-width: 0; }
.ink-title { display: block; font-family: var(--font-display); font-size: 21px; line-height: 1.15; color: var(--km-creme); margin-top: 4px; }
.ink-head-right {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); text-align: right; line-height: 1.5;
}

.ink-video { position: relative; aspect-ratio: 16 / 9; background: var(--km-huid); overflow: hidden; }
.ink-idle {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: none; border: none; cursor: pointer; font: inherit;
}
.ink-play {
  width: 66px; height: 66px; border-radius: 999px; background: var(--km-creme);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px rgba(69, 48, 63, 0.22);
}
.ink-idle-label { font-size: 13.5px; font-weight: 700; color: var(--text-heading); }
.ink-player { position: absolute; inset: 0; }
.ink-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.ink-player-shield { position: absolute; top: 0; right: 0; width: 100%; height: 62px; }
.ink-lock {
  position: absolute; inset: 0; background: var(--km-aubergine);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 26px; text-align: center;
  animation: inkRise 320ms var(--ease-out);
}
@keyframes inkRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ink-lock-icon {
  width: 34px; height: 34px; border-radius: 999px; background: rgba(245, 239, 230, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.ink-lock-title { font-family: var(--font-display); font-size: 20px; color: var(--km-creme); }
.ink-lock-sub { font-size: 14px; line-height: 1.55; color: var(--km-huid); max-width: 38ch; }
.ink-progress {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(to top, rgba(69, 48, 63, 0.32), rgba(69, 48, 63, 0));
}
.ink-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(245, 239, 230, 0.45); overflow: hidden; display: block; }
.ink-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--km-creme); }
.ink-time { font-family: var(--font-mono); font-size: 11px; color: var(--km-creme); flex: none; }

.ink-body { padding: 22px 26px 26px; }
.ink-tabs { display: flex; gap: 6px; background: var(--km-creme); border-radius: 999px; padding: 5px; }
.ink-tab {
  flex: 1; text-align: center; border-radius: 999px; padding: 9px 8px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: transparent; border: none; color: var(--text-muted);
}
.ink-tab.is-active { background: var(--km-wit); color: var(--text-heading); }

.ink-panel { margin-top: 22px; animation: inkIn 250ms var(--ease-out); }
@keyframes inkIn { from { opacity: 0; } to { opacity: 1; } }
.ink-panel h3 { font-size: 23px; line-height: 1.2; margin: 8px 0 0; }
.ink-panel > p { font-size: 15.5px; line-height: 1.72; margin: 10px 0 0; text-wrap: pretty; }
.ink-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ink-count { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); flex: none; }

.ink-stats { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ink-stat { flex: 1 1 120px; border-radius: 14px; padding: 16px 18px; }
.ink-stat strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--text-heading); }
.ink-stat span { display: block; font-size: 13px; line-height: 1.45; color: #7A4A3A; margin-top: 3px; }

.ink-blur { filter: blur(3.6px); user-select: none; pointer-events: none; }

.ink-locked-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin-top: 14px; background: var(--km-creme); border-radius: 14px; padding: 16px 20px;
  border: none; cursor: pointer; font: inherit; text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}
.ink-locked-row:hover { background: var(--km-zand); }
.ink-lock-dot {
  width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--km-zand);
  display: flex; align-items: center; justify-content: center;
}
.ink-locked-main { flex: 1; min-width: 0; }
.ink-locked-main strong { display: block; font-size: 14.5px; color: var(--text-heading); }
.ink-locked-main .ink-blur { display: block; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin-top: 2px; }

.ink-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ink-step {
  display: flex; gap: 16px; border-radius: 14px; padding: 15px 18px;
  border: none; cursor: pointer; font: inherit; text-align: left; align-items: flex-start;
}
.ink-step-nr { font-family: var(--font-display); font-size: 22px; width: 30px; flex: none; line-height: 1.1; }
.ink-step-main { flex: 1; min-width: 0; }
.ink-step-main strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.25; color: var(--text-heading); }
.ink-step-main span { display: block; font-size: 14px; line-height: 1.6; color: var(--km-aubergine-soft); margin-top: 4px; }
.ink-lock-mini { flex: none; display: flex; align-self: center; }

.ink-contra { display: block; background: var(--negative-soft); border-radius: 14px; padding: 16px 20px; margin-top: 14px; }
.ink-contra strong { display: block; font-size: 15.5px; color: var(--text-heading); }
.ink-contra span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--text-heading); margin-top: 3px; }
.ink-contra-warn { background: var(--warning-soft); }
.ink-contra-locked {
  position: relative; display: block; width: 100%; margin-top: 8px;
  border: none; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left;
}
.ink-contra-locked .ink-blur { display: flex; flex-direction: column; gap: 8px; filter: blur(4.5px); }
.ink-contra-locked .ink-contra { margin-top: 0; }
.ink-contra-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ink-pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--km-wit); border-radius: 999px; padding: 10px 20px;
  box-shadow: var(--shadow-raised);
  font-size: 13.5px; font-weight: 700; color: var(--text-heading);
}

.ink-cta {
  border-top: 1px solid var(--border-subtle);
  background: var(--km-creme); padding: 22px 26px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  transition: background 300ms var(--ease-out);
}
.ink-cta.is-nudged { background: var(--km-klei-soft); }
.ink-cta-main { flex: 1 1 230px; min-width: 0; }
.ink-cta-main strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--text-heading); }
.ink-cta-main span { display: block; font-size: 14px; line-height: 1.55; color: var(--km-aubergine-soft); margin-top: 4px; }
.ink-cta-side { display: flex; flex-direction: column; gap: 8px; flex: none; }
.ink-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--km-klei); color: #FFF7EF; border-radius: 999px; padding: 13px 26px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.ink-cta-btn:hover { background: var(--km-klei-deep); }
.ink-cta-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-muted); text-align: center; }

/* ── Agenda-planning (beheer) ──────────────────────────────────────────── */

.pl-add-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 26px 0; }
.pl-add { padding: 18px 24px; }
.pl-add summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--text-heading); }
.pl-add[open] summary { margin-bottom: 12px; }

.pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pl-form .pl-span2 { grid-column: span 2; }
.pl-form-actions { grid-column: span 2; display: flex; justify-content: flex-end; }
.pl-time-pair { display: flex; gap: 8px; }
.pl-time-pair .bw-input { min-width: 0; }

.pl-row { flex-wrap: wrap; }
.pl-row .pl-edit {
  flex-basis: 100%; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.pl-row .pl-edit[hidden] { display: none; }
.pl-actions form { display: contents; }
.pl-delete { color: var(--negative, #A93F3F); }
.pl-pill-missing { color: #A93F3F; background: var(--negative-soft, #F3DDDA); }

/* ── Mobile polish pass (kickoff map) ──────────────────────────────────── */

/* Tap targets: grow the hit area without moving the layout. */
.kr-heart { padding: 11px 8px; margin: -11px -8px; }
.vd-more { padding: 11px 10px; margin: 1px -10px -11px; }
.les-back { padding: 11px 10px 11px 0; margin: -11px 0 11px; }
.pw-kikimae-link, .pw-footer a { padding: 11px 6px; margin: -11px -6px; }

@media (max-width: 700px) {
  /* iOS Safari zooms into inputs below 16px — keep every text control at 16. */
  .kr-composer textarea, .kr-reply-form input, .field input, .bw-input {
    font-size: 16px;
  }

  /* De opleiding: tighter module rows so titles keep room. */
  .module-row { gap: 16px; padding: 20px 18px; }
  .module-tile { width: 46px; height: 46px; font-size: 13px; }
  .module-title { font-size: 20px; }
  .module-side { display: none; }

  /* Klasruimte: cards lose some padding on a phone. */
  .kr-post { padding: 20px 18px; }
  .kr-composer { padding: 18px; }

  .page-title { font-size: 32px; }
  .page-shell { padding-top: 28px; }
}

@media (max-width: 640px) {
  /* Topbar: the byline pushed Inloggen off-screen; the brand band right
     below carries the Kiki Mae identity on small screens. */
  .pw-byline { display: none; }

  /* Inkijkje: keep the three tab labels on one line. */
  .ink-tab { font-size: 12.5px; padding: 10px 4px; }
  .ink-body { padding: 18px 16px 20px; }
  .ink-head { padding: 16px 18px; }
  .ink-cta { padding: 18px; }
}

/* Rail: video marker on lessons that carry a Stream video */
.rail-video { margin-left: auto; margin-top: 3px; flex: none; display: inline-flex; color: var(--km-klei); }
.rail-lesson.is-current .rail-video { color: var(--km-klei-deep, var(--km-klei)); }
.les-afronden-hint a { color: var(--text-accent); font-weight: 600; text-decoration: none; }
.les-afronden-hint a:hover { text-decoration: underline; }

/* Bouwer les editor: make title editing and deletion unmistakable */
.bw-title-form { align-items: flex-end; flex-wrap: wrap; }
.bw-title-label { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.bw-title-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--km-klei);
}
.bw-title-input {
  width: 100%; background: var(--km-wit); border: 1px solid var(--border-strong);
  border-radius: var(--radius-inner); padding: 10px 14px;
}
.bw-title-input:hover { border-color: var(--km-klei); }
.bw-delete-lesson {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; border-color: var(--negative-soft);
}
.bw-delete-text { font-size: 14px; color: var(--text-muted); margin: 0; max-width: 52ch; }
.bw-delete-btn { width: auto; color: var(--negative); border-color: var(--negative); }
.bw-delete-btn:hover { background: var(--negative-soft); }

/* Vandaag: aankondigingen van Marieke (pinned first, aubergine; older ones light) */
.vd-announcement {
  background: var(--km-aubergine); color: var(--km-creme);
  border-radius: var(--radius-card); padding: 24px 28px;
}
.vd-announcement-head { display: flex; align-items: center; gap: 10px; }
.vd-announcement-head img { width: 28px; height: 28px; border-radius: 999px; }
.vd-announcement-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--km-huid);
}
.vd-announcement-title { font-family: var(--font-display); font-size: 22px; line-height: 1.25; margin-top: 12px; }
.vd-announcement-body { font-size: 15px; line-height: 1.7; color: var(--km-huid); margin-top: 8px; max-width: 62ch; }
.vd-announcement.is-light {
  background: var(--surface-card); color: var(--text-heading);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card);
}
.vd-announcement.is-light .vd-announcement-label { color: var(--text-muted); }
.vd-announcement.is-light .vd-announcement-body { color: var(--text-body); }

/* ── Cursisten: "Hoe het met ze gaat" + per-cursist control center ─────── */

.cs-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-actions .btn { width: auto; }

.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; margin-top: 30px; }
.cs-stat {
  background: var(--surface-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 24px 26px;
}
.cs-stat.is-blush { background: var(--km-blush); box-shadow: none; }
.cs-stat.is-blush .eyebrow { color: var(--km-klei); }
.cs-stat-nr { font-family: var(--font-display); font-size: 30px; color: var(--text-heading); margin-top: 10px; }
.cs-stat-sub { font-size: 14.5px; line-height: 1.55; margin: 6px 0 0; }

.cs-table { padding: 0; margin-top: 22px; overflow-x: auto; }
.cs-row {
  display: grid; grid-template-columns: 2.2fr 1.8fr 1.1fr 0.9fr; gap: 18px; align-items: center;
  min-width: 660px; padding: 18px 28px; border-bottom: 1px solid var(--border-subtle);
  color: inherit; text-decoration: none;
}
.cs-row:last-child { border-bottom: none; }
a.cs-row:hover { background: var(--km-warm, #FAF5EC); }
.cs-row-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
}
.cs-who { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cs-who-text { display: flex; flex-direction: column; min-width: 0; }
.cs-name { font-size: 15.5px; font-weight: 700; color: var(--text-heading); }
.cs-sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.cs-pos { display: block; font-size: 14.5px; color: var(--text-heading); }
.cs-bar { display: block; height: 5px; background: var(--km-zand); border-radius: 999px; margin: 8px 0 4px; max-width: 150px; overflow: hidden; }
.cs-bar > span { display: block; height: 100%; background: var(--km-huid); border-radius: 999px; }
.cs-bar-s { max-width: 90px; margin: 8px 0 0; margin-left: auto; }
.pill-blush { color: var(--km-klei); background: var(--km-blush); }

.cs-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cs-avatar-xl { width: 64px; height: 64px; font-size: 20px; }
.cs-head-main { flex: 1; min-width: 240px; }
.cs-title { margin-top: 8px; font-size: 36px; }
.cs-contact { font-size: 15px; margin: 8px 0 0; color: var(--text-muted); }
.cs-contact a { color: var(--text-accent); text-decoration: none; }

.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 28px; }
.cs-fact { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 18px 20px; }
.cs-fact-value { font-size: 16px; font-weight: 600; color: var(--text-heading); margin-top: 8px; }
.cs-fact .cs-sub { margin-top: 4px; }

.cs-grid { margin-top: 24px; }
.cs-modules { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.cs-module {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px; border-radius: var(--radius-inner); background: var(--km-creme);
}
.cs-module.is-held { background: var(--km-zand); }
.cs-module-tile { width: 42px; height: 42px; font-size: 12.5px; background: var(--km-wit); }
.cs-module-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-module-title { font-family: var(--font-display); font-size: 17px; color: var(--text-heading); }
.cs-module-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.cs-done { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.cs-done:last-of-type { border-bottom: none; }
.cs-done-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-done-title { font-size: 14.5px; font-weight: 600; color: var(--text-heading); }
.cs-empty { margin-top: 12px; }
.cs-kr-stats { margin-top: 12px; }
.cs-post { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.cs-post-body { font-size: 14.5px; line-height: 1.55; color: var(--text-heading); }

@media (max-width: 700px) {
  .cs-title { font-size: 28px; }
}

/* Cursisten: ingeleverd / aanwezig columns, check-off lists, afvinken page */
.cs-row-wide { grid-template-columns: 2fr 1.6fr 0.9fr 0.9fr 1fr 0.9fr; min-width: 880px; }
.cs-count { font-family: var(--font-mono); font-size: 13px; color: var(--text-heading); }
.cs-count.is-full { color: var(--positive); }
.cs-afvinken { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; }
.cs-afvinken-intro { margin-top: 8px; }
.cs-chips { margin-top: 12px; }
.cs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cs-check {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 10px 12px; border-radius: var(--radius-inner); background: var(--km-creme);
}
.cs-check.is-done { background: var(--positive-soft); }

/* Cursisten: wie in geen klas zit, en Bericht aan de klas met wat er eerder heen ging */
.cs-zonder-klas { margin-top: 12px; }
.cs-mail-form { margin-top: 26px; padding: 22px 24px; }
.cs-mail-kop { margin-top: 34px; }
.cs-mails { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cs-mail { padding: 16px 24px; }
.cs-mail summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; list-style: none; }
.cs-mail summary::-webkit-details-marker { display: none; }
.cs-mail summary::after { content: '+'; margin-left: auto; font-size: 18px; line-height: 1; color: var(--text-muted); }
.cs-mail[open] summary::after { content: '\2212'; }
.cs-mail-when { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.cs-mail-subject { font-size: 15.5px; font-weight: 700; color: var(--text-heading); }
.cs-mail[open] summary { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.cs-mail-body { font-size: 15px; line-height: 1.7; color: var(--text-body); max-width: 68ch; }
.cs-mail-who { margin: 12px 0 0; }
.cs-mail-note { margin-top: 6px; }
.cs-check.is-future { opacity: 0.7; }
.cs-check-box {
  width: 28px; height: 28px; flex: none; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--km-wit); color: var(--positive);
  font-size: 15px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.cs-check.is-done .cs-check-box { border-color: var(--positive); background: var(--km-wit); }
.cs-check-box:hover { border-color: var(--km-klei); }
.cs-check-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-check-title { font-size: 14.5px; font-weight: 600; color: var(--text-heading); }

.af-card { padding: 8px 0 0; margin-top: 28px; }
.af-list { display: flex; flex-direction: column; }
.af-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 24px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}
.af-row:hover { background: var(--km-warm, #FAF5EC); }
.af-row input { width: 22px; height: 22px; accent-color: var(--positive); flex: none; }
.af-name { font-size: 15.5px; font-weight: 600; color: var(--text-heading); flex: 1; }
.af-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.af-foot .btn { width: auto; }

/* ── Wachtwoordvelden: tonen wat je typt + de regels vooraf ────────────── */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pw-toggle:hover { color: var(--km-klei); background: var(--km-creme); }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle.is-showing .pw-eye { display: none; }
.pw-toggle.is-showing .pw-eye-off { display: inline; }

.pw-rules { list-style: none; padding: 0; margin: 10px 0 0; }
.pw-rule {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--text-sm); color: var(--text-muted);
}
.pw-rule-dot {
  width: 18px; height: 18px; flex: none; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--km-wit);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
}
.pw-rule.is-ok { color: var(--positive); }
.pw-rule.is-ok .pw-rule-dot { border-color: var(--positive); color: var(--positive); }

/* Klasruimte: eigen bericht bewerken of verwijderen (staf mag alles) */
.kr-own-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.kr-own-actions .kr-inline-form { display: inline-flex; }
.kr-delete-btn:hover { color: var(--negative); }
.kr-edit-form { margin-top: 12px; }
.kr-edit-form[hidden] { display: none; }
.kr-edit-form textarea {
  width: 100%; min-height: 92px;
  background: var(--km-creme); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-inner); padding: 13px 16px;
  font: inherit; font-size: 15px; line-height: 1.55; color: var(--text-body);
  resize: vertical; outline: none;
}
.kr-edit-form textarea:focus { border-color: var(--accent); }
.kr-edit-form-s textarea { min-height: 64px; font-size: 14.5px; }
.kr-edit-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.kr-edit-actions .btn { width: auto; margin-top: 0; }
.kr-reply-edited { font-size: 12px; color: var(--text-muted); }
@media (max-width: 700px) { .kr-edit-form textarea { font-size: 16px; } }

/* Klasruimte: reacties (fijn, geweldig, interessant, verhelderend, leeft mee).
   Hover op desktop, press-and-hold op mobiel. */
.kr-react { position: relative; display: inline-flex; }
.kr-react .kr-heart { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.kr-react-emoji { font-size: 15px; line-height: 1; }
.kr-react-mine { font-weight: 600; }

.kr-picker {
  position: absolute; bottom: calc(100% + 9px); left: -6px; z-index: 6;
  display: flex; gap: 2px; padding: 6px;
  background: var(--km-wit); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-raised);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 140ms;
}
.kr-react:hover .kr-picker,
.kr-react:focus-within .kr-picker,
.kr-react.is-held .kr-picker { opacity: 1; visibility: visible; transform: translateY(0); }

.kr-picker-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; font-size: 19px; line-height: 1;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.kr-picker-btn:hover { background: var(--km-creme); transform: translateY(-2px) scale(1.12); }
.kr-picker-btn.is-mine { background: var(--km-klei-soft); }
.kr-picker-label {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--km-aubergine); color: var(--km-creme);
  font-family: var(--font-body); font-size: 11px; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--radius-pill);
  opacity: 0; pointer-events: none; transition: opacity 120ms var(--ease-out);
}
.kr-picker-btn:hover .kr-picker-label, .kr-picker-btn:focus-visible .kr-picker-label { opacity: 1; }

.kr-summary {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; margin-left: -2px; border-radius: var(--radius-pill);
  font-size: 13.5px; color: var(--text-muted); cursor: default;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.kr-summary:hover { background: var(--km-creme); }
.kr-summary-emojis { display: inline-flex; }
.kr-summary-emojis span { font-size: 13px; line-height: 1; margin-left: -3px; }
.kr-summary-emojis span:first-child { margin-left: 0; }

.kr-hearts-tip {
  position: absolute; bottom: calc(100% + 9px); left: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--km-aubergine); color: var(--km-creme);
  border-radius: var(--radius-inner); padding: 9px 13px;
  font-size: 13px; line-height: 1.45; text-align: left;
  width: max-content; max-width: min(260px, 70vw);
  box-shadow: var(--shadow-raised);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 140ms;
  pointer-events: none;
}
.kr-tip-emoji { font-size: 12px; }
.kr-hearts-tip::after {
  content: ''; position: absolute; top: 100%; left: 16px;
  border: 6px solid transparent; border-top-color: var(--km-aubergine);
}
.kr-summary:hover .kr-hearts-tip,
.kr-summary:focus .kr-hearts-tip,
.kr-summary.is-held .kr-hearts-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* Touch: no hover, only the press-and-hold state opens picker and tooltip. */
@media (hover: none) {
  .kr-react:hover .kr-picker, .kr-react:focus-within .kr-picker,
  .kr-summary:hover .kr-hearts-tip, .kr-summary:focus .kr-hearts-tip { opacity: 0; visibility: hidden; }
  .kr-react.is-held .kr-picker, .kr-summary.is-held .kr-hearts-tip { opacity: 1; visibility: visible; }
  .kr-summary:hover { background: transparent; }
}
@media (max-width: 480px) {
  .app-nav-item { padding: 10px 6px; font-size: 12px; gap: 0; }
  .kr-picker-btn { width: 34px; height: 34px; font-size: 17px; }
  .kr-react-mine { display: none; }
}

/* ── Zoeken ────────────────────────────────────────────────────────────── */

.app-search { position: relative; display: block; }
.app-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--text-muted); pointer-events: none;
}
.app-search-input {
  width: 100%;
  padding: 10px 12px 10px 35px;
  font: inherit; font-size: 14.5px;
  color: var(--text-body);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.app-search-input::placeholder { color: var(--text-muted); }
.app-search-input:focus {
  outline: 3px solid var(--focus-ring); outline-offset: 1px;
  background: var(--km-wit); border-color: var(--accent);
}
.app-search-input::-webkit-search-cancel-button { cursor: pointer; }
/* Op desktop is er het zoekveld hierboven, in de mobiele balk het nav-item. */
.app-nav-search { display: none; }

.zk-form {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-top: 26px;
}
.zk-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--text-muted); pointer-events: none;
}
.zk-input {
  flex: 1; min-width: 0;
  padding: 14px 16px 14px 44px;
  font: inherit; font-size: 16px;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}
.zk-input::placeholder { color: var(--text-muted); }
.zk-input:focus { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); }
.zk-submit { width: auto; flex: none; }

.zk-count {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin: 30px 0 12px;
}
.zk-empty { margin-top: 30px; color: var(--text-body); line-height: var(--leading-normal); max-width: 56ch; }
.zk-empty a { color: var(--text-accent); }

.zk-hits { display: flex; flex-direction: column; gap: 10px; }
.zk-hit {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
a.zk-hit:hover { box-shadow: var(--shadow-raised); }
.zk-hit-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.zk-hit-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zk-hit-context { font-size: var(--text-sm); color: var(--text-muted); }
.zk-hit-title {
  font-family: var(--font-display); font-size: 19px;
  line-height: var(--leading-snug); color: var(--text-heading);
}
.zk-hit-snippet {
  font-size: 14.5px; line-height: 1.55; color: var(--text-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zk-hit-arrow { flex: none; color: var(--text-accent); display: flex; }

.zk-kind { flex: none; }
.zk-kind-les { color: #FFF7EF; background: var(--km-aubergine); }
.zk-kind-module { color: #FFF7EF; background: var(--km-klei); }
.zk-kind-aankondiging { color: var(--km-klei); background: var(--km-klei-soft); }
.zk-kind-bericht { color: var(--positive); background: var(--positive-soft); }
.zk-kind-agenda { color: var(--text-body); background: var(--km-zand); }

.zk-hit mark {
  background: var(--km-huid-soft); color: inherit;
  border-radius: 3px; padding: 0 2px;
}

/* Waar een zoekresultaat landt: even oplichten zodat je ziet welke het is. */
.kr-post:target, .kr-announcement:target, .vd-announcement:target, .agenda-row:target {
  outline: 2px solid var(--km-huid);
  outline-offset: 3px;
  border-radius: var(--radius-card);
  scroll-margin-top: 24px;
}

@media (max-width: 900px) {
  .app-search { display: none; }
  /* Zoeken zit op de telefoon in het onderblad achter Meer, niet in de balk */
  .app-nav-search { display: none; }
  .zk-submit { display: none; }
  .zk-hit { padding: 16px 18px; gap: 12px; }
  .zk-hit-arrow { display: none; }
  .zk-hit-title { font-size: 17px; }
}

/* ---- certificaat (cursistenpagina, ADR academy_0008) ---- */
.cs-certificaat .cs-check { align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-certificaat .cs-check-main { flex: 1 1 260px; min-width: 0; }
.cs-certificaat .cs-check .pill { flex: none; }
.cs-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.cs-inline-form input[type="date"], .cs-inline-form select {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line, #e6dcd6); border-radius: 10px; background: #fff;
}
.cs-certificaat-form { margin-top: 14px; }
.cs-certificaat > .cs-sub { margin-top: 8px; }
.cs-danger { margin-top: 14px; color: var(--blush-dark, #b0546a); border-color: currentColor; }

/* ---- mijn certificaat (badgepagina) ---- */
.cert-card + .cert-card { margin-top: 16px; }
.cert-form { display: grid; gap: 14px; margin-top: 8px; }
.cert-field { display: grid; gap: 6px; }
.cert-field input[type="url"] { font: inherit; padding: 10px 12px; border: 1px solid var(--line, #e6dcd6); border-radius: 12px; background: #fff; }
.cert-check { display: flex; gap: 10px; align-items: center; }
.cert-keuze { border: 0; padding: 0; margin: 0; min-width: 0; }
.cert-keuze legend { padding: 0; margin-bottom: 6px; }
.cert-keuze .cert-check { align-items: flex-start; }
.cert-keuze input[type="radio"] { margin-top: 4px; accent-color: var(--accent, #A9603F); }
.cert-details summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.cert-voorwaarden ol { padding-left: 20px; display: grid; gap: 8px; }
.cert-code { width: 100%; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 12px; border: 1px solid var(--line, #e6dcd6); border-radius: 12px; background: #fbf8f5; resize: vertical; }
.cert-preview { margin: 14px 0 6px; }
.cert-notice { padding: 10px 12px; border-radius: 12px; background: var(--km-blush, #f6e3e1); color: var(--km-klei, #6b4a3a); }

/* ---- dienstencatalogus ---- */
.cat-row { display: grid; gap: 14px; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cat-sleutel { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--km-klei, #A9603F); margin-left: 8px; }
.cat-switch { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 14px; }
.cat-field { display: grid; gap: 4px; font-size: 12px; color: var(--km-grijsroze, #8A7580); }
.cat-field-wide { grid-column: 1 / -1; }
.cat-modules { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cat-modules label { display: flex; align-items: center; gap: 6px; }

/* ---- profiel: gedeelde velden (ook instellingen en aanvraag) ---- */
.pf-form { display: grid; gap: 16px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin-top: 8px; }
.pf-field { display: grid; gap: 4px; font-size: 12px; color: var(--km-grijsroze, #8A7580); }
.pf-field input, .pf-field select, .pf-field textarea { font: inherit; font-size: 14px; color: inherit; }
.pf-wide { grid-column: 1 / -1; }
.pf-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pf-voorbeeld-frame { width: 100%; height: 80vh; border: 1px solid var(--line, #e6dcd6); border-radius: 16px; background: #fff; }
.pf-voorbeeld-fouten { margin: 8px 0 16px 18px; color: var(--text-heading); }

/* ---- bevestigingsdialoog (<dialog>, confirm_controller) ---- */
.km-dialog { border: 0; border-radius: 20px; padding: 0; max-width: min(92vw, 440px); background: #fff; color: var(--km-aubergine, #45303F); box-shadow: 0 24px 60px rgba(50, 34, 46, 0.25); }
.km-dialog::backdrop { background: rgba(50, 34, 46, 0.45); backdrop-filter: blur(2px); }
.km-dialog-body { padding: 24px 26px 22px; display: grid; gap: 14px; margin: 0; }
.km-dialog-message { margin: 0; font-size: 16px; line-height: 1.5; }
.km-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Mijn praktijk en instellingen (portaalbesluit): cijfers, sterkte, doorsturingen */
.pk-card { margin-top: 18px; }
.pk-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; margin-top: 14px; }
.pk-cijfer { display: grid; gap: 4px; }
.pk-cijfer-getal { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--text-heading); }
.pk-cijfer-label { font-size: 13px; color: var(--text-muted); }
.pk-delta { font-family: var(--font-mono); font-size: 11px; }
.pk-delta.is-up { color: var(--positive); }
.pk-delta.is-down { color: var(--negative); }
.pk-balk { height: 8px; border-radius: 999px; background: var(--km-creme); margin: 12px 0 14px; overflow: hidden; }
.pk-balk span { display: block; height: 100%; border-radius: inherit; background: var(--km-klei); }
.pk-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pk-punt { display: flex; gap: 12px; align-items: flex-start; }
.pk-punt-vink { font-family: var(--font-mono); color: var(--text-muted); width: 18px; flex: none; }
.pk-punt.is-af .pk-punt-vink { color: var(--positive); }
.pk-punt-tekst { display: grid; gap: 2px; }
.pk-punt.is-af .pk-punt-tekst { color: var(--text-muted); }
.pk-lijst { list-style: none; margin: 8px 0 0; padding: 0; }
.pk-rij { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line, #e6dcd6); flex-wrap: wrap; }
.pk-rij:first-child { border-top: none; }
.pk-rij-link { display: grid; gap: 2px; text-decoration: none; color: inherit; flex: 1; min-width: 200px; }
.pk-rij-wie { font-weight: 600; color: var(--text-heading); }
.pk-rij-link:hover .pk-rij-wie { text-decoration: underline; }
.pk-notitie p { margin: 6px 0 0; line-height: 1.6; }
.pk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 10px 0 0; font-size: 14.5px; }
.pk-dl dt { color: var(--text-muted); }
.pk-dl dd { margin: 0; }
.pk-reactie { display: grid; gap: 12px; margin-top: 10px; }
.pk-keuzes { display: flex; gap: 14px; flex-wrap: wrap; }
.pk-keuze { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line, #e6dcd6); border-radius: 999px; cursor: pointer; }
.pk-keuze:has(input:checked) { border-color: var(--km-klei); background: var(--km-creme); }
.pk-details { margin-top: 12px; }
.pk-details summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.pk-acties { display: flex; justify-content: flex-end; margin-top: 12px; }
.pk-acties .btn { width: auto; }
.pk-toggles { display: grid; gap: 10px; margin-top: 8px; }
.app-sidebar-footer { display: flex; gap: 14px; flex-wrap: wrap; }
.app-sidebar-footer .muted-link.is-active { color: var(--text-heading); }

/* Alumni-link: de kaart in het beheer, de klaskeuze van de alumna */
.al-link-card { margin-top: 26px; padding: 18px 24px; }
.al-link-intro { margin: 6px 0 10px; font-size: 14.5px; line-height: 1.6; }
.al-link-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.al-link-rij input { flex: 1; min-width: 260px; font-family: var(--font-mono); font-size: 12px; }
.al-link-rij .btn, .al-link-form .btn { width: auto; }
.al-link-form { margin-top: 12px; }
.auth-intro { margin: 8px 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.al-form { display: grid; gap: 16px; margin-top: 18px; }
.al-form .card { margin: 0; }
.al-klassen { display: grid; gap: 10px; margin-top: 10px; }
.al-klas { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line, #e6dcd6); border-radius: 12px; cursor: pointer; }
.al-klas input { grid-row: span 2; }
.al-klas:has(input:checked) { border-color: var(--km-klei); background: var(--km-creme); }
.al-klas:has(input:disabled) { cursor: default; opacity: .8; }
.al-klas.is-vast { grid-template-columns: 1fr; cursor: default; border-color: var(--km-klei); background: var(--km-creme); }
.al-welkom .al-form { text-align: left; margin-top: 12px; }
.al-klas-naam { font-weight: 600; color: var(--text-heading); }

/* Het onderblad achter "Meer" op de telefoon; op groter scherm bestaat het niet */
@media (min-width: 901px) { .nav-meer-knop, .nav-meer { display: none; } }
@media (max-width: 900px) { .app-sidebar-footer { display: none; } }
.nav-meer-body { padding: 18px 22px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 4px; }
.nav-meer-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.nav-meer-sluit { background: none; border: none; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.nav-meer-body .eyebrow { margin: 14px 0 4px; }
.nav-meer-body .eyebrow.is-huidig { color: var(--km-klei); }
.nav-meer-body a { display: block; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: var(--text-heading); font-size: 16px; background: #fff; }
.nav-meer-body a:active { background: var(--km-creme); }
/* Rondleiding: Marieke's verhaalkaart in het midden, daarna de onderkaart bij elke uitgelichte plek */
.driver-popover.rl { font-family: var(--font-body, inherit); color: var(--text-body); background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(69,48,63,.25); padding: 16px 18px 14px; }
.driver-popover.rl .driver-popover-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--text-heading); }
.driver-popover.rl .driver-popover-description { font-size: 14.5px; line-height: 1.55; color: var(--text-body); margin-top: 6px; }
.driver-popover.rl .driver-popover-progress-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-muted); white-space: nowrap; }
.driver-popover.rl .driver-popover-footer { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.driver-popover.rl .driver-popover-navigation-btns { display: flex; gap: 6px; margin-left: auto; }
.driver-popover.rl .driver-popover-footer button { font: inherit; font-size: 13px; text-shadow: none; border-radius: 999px; padding: 7px 12px; border: 1px solid var(--line, #e6dcd6); background: #fff; color: var(--text-heading); }
.driver-popover.rl .driver-popover-next-btn { background: var(--text-heading); color: #fff; border-color: transparent; }
.driver-popover.rl .driver-popover-close-btn { position: static; width: auto; height: auto; font-size: 12px; color: var(--text-muted); background: none; border: none; padding: 0; margin-right: auto; }
.driver-popover.rl-verhaal { max-width: 360px; padding: 22px 24px; }
.rl-marieke { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rl-marieke img { width: 28px; height: 28px; border-radius: 50%; }
.driver-popover.rl-kaart { position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(84px + env(safe-area-inset-bottom)) !important; top: auto !important; max-width: none; width: auto; transform: none !important; border-radius: 18px; }
@media (min-width: 901px) { .driver-popover.rl-kaart { left: 50% !important; right: auto !important; width: 420px; transform: translateX(-50%) !important; bottom: 24px !important; } }
.driver-popover.rl-kaart .driver-popover-arrow { display: none; }
.rl-balk { height: 4px; border-radius: 999px; background: var(--km-creme); margin: -4px 0 12px; overflow: hidden; }
.rl-balk span { display: block; height: 100%; background: var(--km-klei); }
.rl-hervat { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--text-heading); color: #fff; font-size: 14px; z-index: 50; box-shadow: 0 10px 30px rgba(0,0,0,.3); white-space: nowrap; }
.rl-hervat a { color: #fff; text-decoration: none; }
.rl-hervat-weg { background: none; border: none; color: rgba(255,255,255,.7); font: inherit; font-size: 12px; cursor: pointer; }
@media (min-width: 901px) { .rl-hervat { bottom: 24px; } }
.rl-beheer-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line, #e6dcd6); flex-wrap: wrap; }
.rl-beheer-rij:first-of-type { border-top: none; }
.rl-beheer-naam { min-width: 160px; font-weight: 600; color: var(--text-heading); }
.rl-beheer-opnieuw { margin: 0; }
.rl-beheer-opnieuw .btn { width: auto; }
.al-welkom { max-width: 640px; }
.al-welkom-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; margin: 4px 0 18px; }
.al-welkom-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Het profiel in onderdelen (23 september 2026) ──────────────────────
   Links de onderdelen en de stand, rechts één onderdeel over de hele breedte.
   Zonder JavaScript (geen .is-in-onderdelen) staan de onderdelen onder elkaar. */
.pf-kop { margin-bottom: 22px; }
.pf-register { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding: 20px 26px; }
.pf-register form { margin: 0; }
.pf-shell .btn:disabled { opacity: .45; cursor: not-allowed; }
.pf-werkplaats { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }

.pf-rail { position: sticky; top: 24px; display: grid; gap: 14px; }
.pf-rail > div { display: grid; gap: 14px; }
.pf-secties { display: grid; gap: 2px; padding: 8px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.pf-sectie-link { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text-body); font-size: 15px; font-weight: 500; transition: background var(--duration-fast) var(--ease-out); }
.pf-sectie-link:hover { background: var(--km-creme); }
.pf-sectie-link.is-actief { background: var(--km-aubergine); color: #fff; }
.pf-sectie-nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--km-creme); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.pf-sectie-link.is-actief .pf-sectie-nr { background: rgba(255, 255, 255, 0.16); color: #fff; }
.pf-sectie-vink { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); font-size: 11px; line-height: 1; }
.pf-sectie-vink.is-af { background: var(--positive); border-color: var(--positive); color: #fff; }
.pf-sectie-link.is-actief .pf-sectie-vink:not(.is-af) { border-color: rgba(255, 255, 255, 0.45); }
.pf-sectie-tel { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--km-klei); color: #FFF7EF; }
.pf-sectie-tel.is-aangevraagd { background: var(--km-lila-soft); color: var(--km-aubergine); }

.pf-stand { display: grid; gap: 10px; padding: 18px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.pf-stand .pill { justify-self: start; }
.pf-stand .btn { width: 100%; padding: 11px 16px; font-size: 14.5px; }
.pf-stand-tekst { margin: 0; font-size: 14px; line-height: 1.5; }
.pf-stand-link { font-size: 13.5px; text-align: center; }
.pf-sterkte { padding: 2px 8px; }
.pf-sterkte-kop { display: flex; justify-content: space-between; align-items: baseline; }
.pf-sterkte-kop .eyebrow { margin: 0; }
.pf-sterkte .pk-balk { margin: 8px 0 0; }
.pf-bewaard { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 8px; font-size: 13px; color: var(--text-muted); }
.pf-bewaard::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--positive); }
.pf-bewaard.is-bezig::before { background: var(--warning); animation: pf-puls 1s ease-in-out infinite; }
.pf-bewaard.is-fout { color: var(--negative); }
.pf-bewaard.is-fout::before { background: var(--negative); }
@keyframes pf-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pf-bewaard.is-bezig::before { animation: none; } }
.pf-werkplaats:not(.is-in-onderdelen) .pf-bewaard { display: none; }
.pf-straks { padding: 18px 20px; background: var(--km-zand); border-radius: var(--radius-card); }
.pf-straks .eyebrow { margin: 0; }
.pf-straks-intro { margin: 6px 0 8px; font-size: 14.5px; }
.pf-straks-lijst { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--text-heading); }

.pf-onderdelen { display: grid; gap: 20px; min-width: 0; }
.pf-sectie { margin: 0; padding: clamp(24px, 3.6vw, 44px); scroll-margin-top: 24px; }
.pf-sectie[hidden] { display: none; }
.pf-sectie-kop { margin-bottom: 28px; }
.pf-sectie-kop h2 { font-size: 30px; margin: 0 0 8px; }
.pf-sectie-kop h2:focus { outline: none; }
.pf-lead { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; }
.pf-blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pf-blok-kop h3 { font-size: 20px; margin: 0; }
.pf-teller { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); }
.pf-verder { display: flex; justify-content: flex-end; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.pf-werkplaats:not(.is-in-onderdelen) .pf-verder { display: none; }
.pf-bewaarknop { display: flex; justify-content: flex-end; }

/* velden */
.pf-rooster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.pf-rooster-adres { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.pf-breed { grid-column: 1 / -1; }
.pf-veld { display: grid; gap: 7px; align-content: start; }
.pf-veld > span { font-size: 13.5px; font-weight: 600; color: var(--text-heading); }
.pf-veld > span em { font-style: normal; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.pf-veld .bw-input { font-size: 16px; padding: 12px 14px; }
.pf-veld textarea.bw-input { resize: vertical; line-height: 1.6; }
.pf-veld .bw-input:focus { outline: 3px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); }
.pf-veld .bw-input:disabled { background: var(--km-creme); color: var(--text-muted); }
.bw-input.is-fout { border-color: var(--negative); }
.pf-veld-voet { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.pf-tel { margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); }
.pf-tel.is-bijna { color: var(--km-klei); }
.pf-fout { color: var(--negative); font-size: 12.5px; }
.pf-fout:empty { display: none; }
.pf-groep { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; }
.pf-groep:last-of-type { margin-bottom: 0; }
.pf-groep legend { padding: 0; margin-bottom: 14px; font-family: var(--font-display); font-size: 20px; color: var(--text-heading); }
.pf-groep > .cs-sub { margin: -6px 0 12px; }

/* schakelaar: een echte checkbox, als schuifje getekend */
.pf-schakel { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); cursor: pointer; }
.pf-schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-schakel-baan { position: relative; width: 44px; height: 26px; margin-top: 1px; border-radius: var(--radius-pill); background: var(--border-strong); transition: background var(--duration-fast) var(--ease-out); }
.pf-schakel-baan::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(69, 48, 63, .25); transition: transform var(--duration-base) var(--ease-out); }
.pf-schakel input:checked + .pf-schakel-baan { background: var(--positive); }
.pf-schakel input:checked + .pf-schakel-baan::after { transform: translateX(18px); }
.pf-schakel input:focus-visible + .pf-schakel-baan { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pf-schakel strong { display: block; font-size: 15px; font-weight: 600; color: var(--text-heading); }
.pf-schakel .cs-sub { display: block; margin-top: 2px; }
.pf-schakel-klein { padding: 0; border: 0; background: none; grid-template-columns: 44px auto; align-items: center; font-size: 14.5px; }

.pf-dagen { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-dag { position: relative; cursor: pointer; }
.pf-dag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-dag span { display: grid; place-items: center; width: 58px; height: 50px; border: 1.5px solid var(--border-strong); border-radius: 14px; font-weight: 600; color: var(--text-heading); background: var(--surface-card); transition: all var(--duration-fast) var(--ease-out); }
.pf-dag input:checked + span { background: var(--km-aubergine); border-color: var(--km-aubergine); color: #fff; }
.pf-dag input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* behandelingen */
.pf-diensten { display: grid; gap: 14px; }
.pf-dienst { display: grid; gap: 14px; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.pf-dienst:has(.pf-schakel input:checked) { border-color: var(--km-huid-soft); background: #FFFCF9; }
.pf-dienst-kop { display: grid; gap: 2px; }
.pf-dienst-kop strong { font-size: 17px; color: var(--text-heading); }
.pf-varianten { display: grid; gap: 10px; }
.pf-variant { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.pf-variant .pf-schakel-klein { min-width: 150px; }
.pf-invoer { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }
.pf-invoer .bw-input { width: 110px; padding: 9px 12px; font-size: 15px; }
.pf-invoer input[type="number"] { width: 92px; }
.pf-invoer-vast { min-width: 92px; font-size: 14px; color: var(--text-muted); }
.pf-opslot { margin-top: 24px; }
.pf-opslot summary { cursor: pointer; font-size: 14px; color: var(--text-muted); }
.pf-opslot ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pf-dienst.is-locked { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: #FBF8F5; }
.pf-slot { font-size: 13px; color: var(--km-klei); }

/* foto's */
.pf-portret-blok { margin-bottom: 40px; }
.pf-portret-binnen { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: start; }
.pf-portret-foto { display: grid; place-items: center; width: 170px; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 72px 20px 72px 20px; background: var(--km-creme); }
.pf-portret-foto img { width: 100%; height: 100%; object-fit: cover; }
.pf-portret-binnen.is-sleep .pf-portret-foto { outline: 3px dashed var(--km-klei); outline-offset: 4px; }
.pf-portret-leeg { font-size: 13px; color: var(--text-muted); }
.pf-portret-tekst h3 { font-size: 20px; margin: 4px 0 6px; }
.pf-portret-toestemming { margin-top: 12px; }
.pf-portret-acties { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.pf-portret-acties form { margin: 0; }
.pf-foto-weg { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.pf-foto-weg:hover { color: var(--negative); }

.pf-galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.pf-foto { display: grid; margin: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
.pf-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--km-creme); }
.pf-foto figcaption { display: grid; gap: 10px; padding: 12px 14px 14px; }
.pf-foto figcaption form { margin: 0; display: grid; gap: 10px; }
.pf-foto .pf-veld > span { font-size: 12px; }
.pf-foto textarea.bw-input { min-height: 60px; padding: 8px 10px; font-size: 14px; }
.pf-foto.is-onaf { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.pf-foto-toestemming { align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--warning-soft); font-size: 13px; line-height: 1.4; cursor: pointer; }
.pf-foto-toestemming input { margin-top: 2px; accent-color: var(--km-klei); }
.pf-foto-toestemming.is-vast { background: var(--positive-soft); color: var(--positive); }

.pf-dropzone { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 230px; padding: 18px; border: 2px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--km-creme); font: inherit; color: var(--text-body); text-align: center; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); }
.pf-dropzone:hover, .pf-galerij-blok.is-sleep .pf-dropzone { border-color: var(--km-klei); background: var(--km-klei-soft); }
.pf-dropzone:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.pf-dropzone[hidden] { display: none; }
.pf-dropzone-plus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--km-klei); font-size: 26px; box-shadow: var(--shadow-card); }
.pf-dropzone-tekst { font-weight: 600; color: var(--text-heading); line-height: 1.35; }
.pf-dropzone-sub { font-size: 12px; color: var(--text-muted); }

.pf-staging { margin-top: 24px; padding: 20px 22px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--km-creme); }
.pf-staging[hidden], .pf-upload-los[hidden] { display: none; }
.pf-portret-tekst .pf-staging { margin-top: 16px; }
.pf-staging-lijst { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 12px; }
.pf-staging-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; }
.pf-staging-item img, .pf-staging-geen { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.pf-staging-geen { display: grid; place-items: center; background: var(--km-creme); font-size: 11px; color: var(--text-muted); }
.pf-staging-velden { display: grid; gap: 4px; min-width: 0; }
.pf-staging-velden .pf-veld > span { font-size: 12px; }
.pf-staging-velden .bw-input { padding: 9px 12px; font-size: 15px; }
.pf-staging-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pf-staging-status { font-size: 12.5px; color: var(--text-muted); }
.pf-staging-status:empty { display: none; }
.pf-staging-item.is-bezig { opacity: .7; }
.pf-staging-item.is-fout { border-color: var(--negative); }
.pf-staging-item.is-fout .pf-staging-status { color: var(--negative); }
.pf-staging-weg { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 22px; color: var(--text-muted); cursor: pointer; }
.pf-staging-weg:hover { background: var(--km-creme); color: var(--text-heading); }
.pf-staging-acties { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pf-staging-hint { margin-right: auto; font-size: 13px; color: var(--text-muted); }
.pf-toestemming { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5; cursor: pointer; }
.pf-toestemming input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--km-klei); }
.pf-toestemming strong { display: block; margin-bottom: 4px; color: var(--text-heading); }
.pf-toestemming:has(input:checked) { border-color: var(--positive); }
.pf-toestemming-tekst { color: var(--text-muted); font-size: 13px; }
.pf-uitleg { margin-top: 14px; font-size: 13.5px; }
.pf-uitleg summary { cursor: pointer; color: var(--text-muted); }
.pf-uitleg .pf-toestemming-tekst { display: block; margin-top: 8px; }
.pf-upload-los { display: grid; gap: 12px; margin-top: 18px; }
.pf-upload-los .btn { justify-self: start; }

/* insturen en nakijken */
.pf-melding { margin-bottom: 22px; padding: 14px 18px; border-radius: 14px; font-size: 15px; line-height: 1.55; }
.pf-melding.is-aangevraagd { background: var(--km-lila-soft); color: var(--km-aubergine); }
.pf-melding.is-blokkade { background: var(--warning-soft); color: var(--text-heading); }
.pf-melding ul { margin: 6px 0 0; padding-left: 18px; }
.pf-live { margin: 0 0 30px; }
.pf-verschil { margin-bottom: 26px; }
.pf-wijzigingen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }
.pf-wijziging { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); align-items: start; }
.pf-wijziging-label { font-size: 14.5px; font-weight: 600; color: var(--text-heading); }
.pf-wijziging-waarden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pf-wijziging-waarden del { color: var(--text-muted); text-decoration-color: rgba(138, 117, 128, .6); }
.pf-wijziging-waarden ins { padding: 1px 6px; border-radius: 6px; background: var(--positive-soft); color: var(--text-heading); text-decoration: none; }
.pf-wijziging-foto { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.pf-pijl { color: var(--text-muted); }
.pf-tag { padding: 2px 8px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.pf-tag.is-nieuw { background: var(--positive-soft); color: var(--positive); }
.pf-tag.is-weg { background: var(--negative-soft); color: var(--negative); }
.pf-insturen-acties { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.pf-insturen-acties form { margin: 0; }

@media (max-width: 960px) {
  .pf-werkplaats { grid-template-columns: 1fr; gap: 16px; }
  .pf-rail { position: static; }
  .pf-secties { display: flex; overflow-x: auto; gap: 4px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .pf-secties::-webkit-scrollbar { display: none; }
  .pf-sectie-link { flex: none; grid-template-columns: auto auto auto; scroll-snap-align: start; padding: 8px 12px; }
  .pf-stand { gap: 6px; padding: 14px 16px; }
  .pf-stand .btn { display: none; }
  .pf-stand-link { text-align: left; }
  .pf-sterkte, .pf-rail .pf-straks { display: none; }
}
@media (max-width: 700px) {
  .pf-rooster, .pf-rooster-adres { grid-template-columns: 1fr; }
  .pf-portret-binnen { grid-template-columns: 1fr; }
  .pf-portret-foto { width: 150px; }
  .pf-wijziging { grid-template-columns: 1fr; gap: 4px; }
  .pf-staging-item { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .pf-staging-item img, .pf-staging-geen { width: 72px; height: 56px; }
  .pf-sectie-kop h2 { font-size: 26px; }
}

/* Mijn praktijk: de stand van je pagina, je cijfers, je profielsterkte */
.pk-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 8px; }
.pk-raster > div { display: grid; gap: 22px; }
.pk-raster .card { margin: 0; }
.pk-stand-kop { font-family: var(--font-display); font-size: 26px; color: var(--text-heading); margin: 4px 0 6px; line-height: 1.2; }
.pk-stand-tekst { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; }
.pk-stand-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pk-punt-tekst a { font-weight: 600; }
@media (max-width: 900px) { .pk-raster { grid-template-columns: 1fr; } }
.app-nav-tel { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--km-klei); color: #FFF7EF; font-family: var(--font-mono); font-size: 11px; }

/* ── De directory: wat je pagina je geeft en wat we vragen (voor de eerste aanvraag) ── */
.vw-shell { max-width: 1100px; }
.vw-kop { margin-bottom: 26px; }
.vw-kop .page-intro { max-width: 62ch; }
.vw-band { position: relative; overflow: hidden; margin: 6px 0 48px; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--km-aubergine); background-image: radial-gradient(circle at 100% 0, rgba(217, 168, 140, .28), transparent 42%), radial-gradient(circle at 0 100%, rgba(210, 190, 217, .16), transparent 40%); color: var(--text-inverse); }
.vw-band .eyebrow { color: var(--km-huid); }
.vw-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 36px; margin-top: 14px; }
.vw-getal { display: block; font-family: var(--font-display); font-size: clamp(48px, 6vw, 72px); line-height: 1; color: #FFF7EF; }
.vw-cijfer.is-regio .vw-getal { color: var(--km-huid); }
.vw-cijfer-tekst { display: block; margin-top: 10px; font-size: 16px; line-height: 1.45; color: rgba(245, 239, 230, .92); }
.vw-cijfer-sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: rgba(245, 239, 230, .62); }
.vw-balk { height: 10px; margin: 30px 0 8px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); }
.vw-balk span { display: block; height: 100%; border-radius: inherit; background: var(--km-huid); }
.vw-balk-legenda { display: flex; justify-content: space-between; margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 239, 230, .6); }
.vw-balk-legenda .is-regio { color: var(--km-huid); }
.vw-tellen { margin: 20px 0 0; font-size: 12.5px; color: rgba(245, 239, 230, .58); }
.vw-band-tekst { max-width: 60ch; margin: 8px 0 0; font-size: 19px; line-height: 1.5; }

.vw-sectie { margin-bottom: 48px; }
.vw-sectie > h2 { font-size: 30px; margin-bottom: 20px; }
.vw-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.vw-kaart { padding: 24px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.vw-kaart h3 { margin: 14px 0 6px; font-size: 19px; }
.vw-kaart p { margin: 0; font-size: 15px; line-height: 1.6; }
.vw-kaart-icoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--km-klei-soft); color: var(--km-klei); }
.vw-kaart:nth-child(3n+2) .vw-kaart-icoon { background: var(--km-lila-soft); color: var(--km-aubergine); }
.vw-kaart:nth-child(3n) .vw-kaart-icoon { background: var(--positive-soft); color: var(--positive); }

.vw-eisen { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--border-subtle); border-radius: 24px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.vw-eisen > p { max-width: 70ch; }
.vw-eisen-lead { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--text-heading); }
.vw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.vw-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--km-creme); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-heading); }
.vw-chips .vw-icoon { width: 15px; height: 15px; }
.vw-routes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; margin: 24px 0; }
.vw-route { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); }
.vw-route.is-standaard { border-color: var(--km-klei); box-shadow: 0 0 0 3px var(--km-klei-soft); }
.vw-route h3 { margin: 0; font-size: 22px; }
.vw-route p { margin: 0; line-height: 1.6; }
.vw-route-tag { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--km-creme); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.vw-route.is-standaard .vw-route-tag { background: var(--km-klei); color: #FFF7EF; }
.vw-stappen { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.vw-stappen li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.55; }
.vw-stappen strong { display: block; color: var(--text-heading); }
.vw-stap-icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--km-creme); color: var(--km-klei); }
.vw-sterren { display: flex; gap: 3px; margin-top: 6px; color: var(--warning); }
.vw-sterren .vw-icoon { width: 16px; height: 16px; fill: currentColor; }
.vw-of { display: grid; place-items: center; }
.vw-of span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--km-aubergine); color: #FFF7EF; font-family: var(--font-display); font-size: 16px; }
.vw-let-op { margin-top: auto !important; padding: 12px 14px; border-radius: 12px; background: var(--warning-soft); font-size: 14px; line-height: 1.5; }
.vw-vragen { margin: 0; color: var(--text-muted); }

.vw-akkoord { margin: 0 0 20px; padding: clamp(24px, 4vw, 40px); }
.vw-akkoord h2 { font-size: 26px; }
.vw-akkoord-vink { font-size: 15px; }
.vw-akkoord-acties { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.vw-akkoord-noot { margin: 12px 0 0; }
.vw-akkoord-klaar { margin: 0 0 18px; font-size: 17px; color: var(--positive); }
.pf-voorwaarden-noot { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); text-align: right; }
@media (max-width: 760px) {
  .vw-routes { grid-template-columns: 1fr; }
  .vw-of span { width: 38px; height: 38px; }
  .pf-voorwaarden-noot { text-align: left; }
}

/* De eerste aanvraag vooraf aangekondigd, en de drie stappen (insturen en de afspraken) */
.pf-vooraf { margin: 4px 0 22px; padding: 22px 24px; border-radius: 18px; background: var(--km-lila-soft); color: var(--km-aubergine); }
.pf-vooraf .eyebrow { margin: 0 0 4px; color: var(--km-aubergine-soft); }
.pf-vooraf h3 { margin: 0 0 8px; font-size: 22px; }
.pf-vooraf > p:not(.eyebrow) { margin: 0; max-width: 62ch; line-height: 1.6; }
.pf-vooraf .pf-stappen { margin: 18px 0 0; }
.pf-stappen { display: flex; align-items: center; gap: 0; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: stap; }
.pf-stap { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.pf-stap + .pf-stap::before { content: ''; width: clamp(16px, 4vw, 44px); height: 2px; margin: 0 10px; border-radius: 2px; background: var(--border-strong); }
.pf-stap-nr { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-card); font-family: var(--font-mono); font-size: 12px; }
.pf-stap.is-klaar { color: var(--positive); }
.pf-stap.is-klaar .pf-stap-nr { border-color: var(--positive); background: var(--positive); color: #fff; }
.pf-stap.is-klaar + .pf-stap::before { background: var(--positive); }
.pf-stap.is-nu { color: var(--km-aubergine); }
.pf-stap.is-nu .pf-stap-nr { border-color: var(--km-aubergine); background: var(--km-aubergine); color: #FFF7EF; }

@media (max-width: 700px) {
  /* Behandelingen: per variant het schuifje bovenaan, duur en prijs naast elkaar eronder */
  .pf-dienst { padding: 16px; }
  .pf-variant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: center; }
  .pf-variant + .pf-variant { padding-top: 12px; border-top: 1px dashed var(--border-subtle); }
  .pf-variant .pf-schakel-klein { grid-column: 1 / -1; min-width: 0; }
  .pf-invoer { min-width: 0; }
  .pf-invoer .bw-input, .pf-invoer input[type="number"] { flex: 1; width: auto; min-width: 0; }
  .pf-invoer-vast { min-width: 0; }
  .pf-stap-naam { font-size: 12.5px; }
  .pf-stap + .pf-stap::before { margin: 0 6px; }
}
@media (max-width: 420px) {
  .pf-stap:not(.is-nu) .pf-stap-naam { display: none; }
}

/* Wat het kost: je pagina gratis, commissie op aanvragen via Kiki Mae */
.vw-kosten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.vw-kost { display: flex; flex-direction: column; gap: 8px; padding: 26px; border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.vw-kost.is-gratis { background: var(--positive-soft); border-color: transparent; }
.vw-kost-tag { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--km-creme); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.vw-kost.is-gratis .vw-kost-tag { background: rgba(255, 255, 255, .7); color: var(--positive); }
.vw-kost-bedrag { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--km-klei); margin-top: 6px; }
.vw-kost.is-gratis .vw-kost-bedrag { color: var(--positive); }
.vw-kost h3 { margin: 4px 0 0; font-size: 20px; }
.vw-kost p { margin: 0; line-height: 1.6; }
.vw-voorbeeld { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--km-creme); }
.vw-voorbeeld .eyebrow { margin: 0 0 4px; }
.vw-voorbeeld > p:not(.eyebrow) { font-size: 14.5px; }
.vw-voorbeeld-balk { display: flex; margin-top: 12px; overflow: hidden; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.vw-voorbeeld-balk span { padding: 7px 10px; white-space: nowrap; }
.vw-voorbeeld-balk .is-jij { flex: 4; background: var(--positive-soft); color: var(--positive); }
.vw-voorbeeld-balk .is-commissie { flex: 1; background: var(--km-klei); color: #FFF7EF; text-align: center; }
.vw-kost-noot { margin: 14px 0 0; color: var(--text-muted); }
.vw-akkoord-punt { display: block; margin-top: 4px; padding-left: 14px; position: relative; }
.vw-akkoord-punt::before { content: '·'; position: absolute; left: 2px; font-weight: 700; }
.vw-gratis-lijst { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.vw-gratis-lijst li { position: relative; padding-left: 30px; line-height: 1.5; color: var(--text-heading); }
.vw-gratis-lijst li::before { content: '✓'; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--positive); color: #fff; font-size: 11px; font-weight: 700; }
.vw-gratis-lijst strong { color: var(--positive); }

/* Welkom van de alumni (de nieuwe klas) en de vraag aan een alumna (een nieuwe klas van haar opleiding) */
.vd-welkom, .vd-nieuweklas { margin: 0; padding: 22px 26px; }
.vd-main > .vd-cheers { align-self: flex-start; margin-top: 0; }
.vd-welkom { background: var(--km-klei-soft); border-color: transparent; }
.vd-welkom .eyebrow, .vd-nieuweklas .eyebrow { margin: 0 0 4px; }
.vd-welkom-kop, .vd-nieuweklas h2 { margin: 0 0 12px; font-size: 22px; }
.vd-welkom-gezichten { display: flex; flex-wrap: wrap; margin: 0 0 10px; }
.vd-welkom-gezichten .kr-avatar { margin-right: -8px; border: 2px solid #fff; } /* wit: één van de avatarkleuren is de kleur van deze kaart */
.vd-welkom-meer { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: #fff; border: 2px solid var(--km-klei-soft); font-size: 12px; font-weight: 700; color: var(--km-klei); }
.vd-welkom-tekst { margin: 0 0 12px; line-height: 1.55; color: var(--text-heading); }
.vd-welkom-woorden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.vd-welkom-woorden li { padding: 12px 14px; border-radius: 12px; background: #fff; }
.vd-welkom-woorden p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-heading); }
.vd-welkom-wie { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.vd-welkom-rest { margin: -2px 0 12px; }
.vd-welkom-rest summary { cursor: pointer; font-size: 13.5px; color: var(--km-klei); }
.vd-welkom-rest .vd-welkom-woorden { margin-top: 10px; }
.vd-welkom > .cs-sub, .vd-nieuweklas > .cs-sub { margin: 0; }
/* een nieuwe groep op weg: warm, met een kruisje en de tijdlijn van hun opleiding */
.vd-nieuweklas { position: relative; border-color: var(--km-huid-soft); background: linear-gradient(165deg, var(--km-klei-soft) 0%, #fff 60%); transition: opacity .25s ease, transform .25s ease; }
.vd-nieuweklas.is-dicht { opacity: 0; transform: translateY(-8px); }
.vd-nieuweklas .eyebrow { color: var(--km-klei); padding-right: 40px; }
.vd-nieuweklas h2 { font-size: 26px; line-height: 1.2; max-width: 34ch; padding-right: 24px; }
.vd-sluit { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; font-size: 26px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.vd-sluit:hover, .vd-sluit:focus-visible { background: rgba(69, 48, 63, .07); color: var(--text-heading); }
.vd-nieuweklas-tekst { margin: 0 0 14px; max-width: 64ch; line-height: 1.55; }
.vd-nieuweklas-tekst strong { color: var(--km-klei); }
.vd-nieuweklas-vraag { margin: 0 0 10px; font-weight: 600; color: var(--text-heading); }
.vd-reis { margin: 36px 0 20px; max-width: 640px; }
.vd-reis-baan { position: relative; height: 6px; border-radius: 999px; background: var(--km-zand); }
.vd-reis-gedaan { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--km-klei); }
.vd-reis-moment { position: absolute; top: 50%; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--km-huid); transform: translate(-50%, -50%); }
.vd-reis-moment.is-praktijkdag { width: 13px; height: 13px; border-radius: 3px; border-color: var(--km-aubergine); transform: translate(-50%, -50%) rotate(45deg); }
.vd-reis-moment.is-geweest { background: var(--km-klei); border-color: #fff; }
.vd-reis-nu { position: absolute; top: 50%; z-index: 1; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: var(--km-klei); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--km-klei), 0 0 0 7px rgba(169, 96, 63, .16); transform: translate(-50%, -50%); }
.vd-reis-nu-label { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--km-klei); }
.vd-reis-nu.is-begin .vd-reis-nu-label { left: -4px; transform: none; }
.vd-reis-nu.is-eind .vd-reis-nu-label { left: auto; right: -4px; transform: none; }
.vd-reis-randen { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.vd-reis-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.vd-reis-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.vd-reis-sleutel { display: inline-block; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--km-huid); background: #fff; }
.vd-reis-sleutel.is-praktijkdag { width: 10px; height: 10px; border-radius: 2px; border-color: var(--km-aubergine); transform: rotate(45deg); }
@media (max-width: 640px) {
  .vd-nieuweklas h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-nieuweklas { transition: none; }
}
.vd-nieuweklas-form { display: grid; gap: 10px; margin-bottom: 10px; }
.vd-nieuweklas-form .btn { justify-self: start; }
.vd-nieuweklas-klaar { margin: 0 0 10px; color: var(--km-klei); font-weight: 600; }
.vd-nieuweklas-klaar q { font-weight: 400; color: var(--text-heading); }
.vd-nieuweklas-aanpassen { margin-bottom: 10px; }
.vd-nieuweklas-aanpassen summary { cursor: pointer; font-size: 13.5px; color: var(--text-muted); }
.vd-nieuweklas-aanpassen .vd-nieuweklas-form { margin-top: 10px; }
turbo-frame[id^="welkom-"] { display: block; }

/* ── Profielen (beheer): de wachtrij, en iedereen in één oogopslag met filter, zoeken, sorteren en pagina's ── */

.pb-aangevraagd, .pb-overzicht { margin-top: 22px; padding: 22px 26px; }
.pb-aangevraagd { display: grid; gap: 8px; }
.pb-aangevraagd .eyebrow { margin: 0 0 4px; }
.pb-aangevraagd .cs-check-main { flex: 1; }
.pb-verdeling { display: flex; gap: 3px; height: 10px; margin: 0 0 18px; border-radius: 999px; overflow: hidden; }
.pb-deel { flex: 1 1 0; min-width: 8px; }
.pb-deel.is-aangevraagd, .pb-filter.is-aangevraagd .pb-filter-stip { background: var(--km-aubergine); }
.pb-deel.is-bezig, .pb-filter.is-bezig .pb-filter-stip { background: var(--km-huid); }
.pb-deel.is-goedgekeurd, .pb-filter.is-goedgekeurd .pb-filter-stip { background: var(--positive); }
.pb-deel.is-niets, .pb-filter.is-niets .pb-filter-stip { background: var(--km-zand); }
.pb-deel.is-ongeclaimd, .pb-filter.is-ongeclaimd .pb-filter-stip { background: var(--km-lila); }
.pb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pb-filter { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--km-wit); font-size: 14px; color: var(--text-heading); cursor: pointer; }
.pb-filter input { position: absolute; opacity: 0; pointer-events: none; }
.pb-filter b { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pb-filter:hover { border-color: var(--border-strong); }
.pb-filter:has(input:checked) { background: var(--km-aubergine); border-color: var(--km-aubergine); color: var(--km-wit); }
.pb-filter:has(input:checked) b { color: var(--km-huid-soft); }
.pb-filter:has(input:focus-visible) { outline: 2px solid var(--km-klei); outline-offset: 2px; }
.pb-filter-stip { width: 8px; height: 8px; border-radius: 50%; }
.pb-filter.is-actief .pb-filter-stip, .pb-filter.is-alle .pb-filter-stip { display: none; }
.pb-filter:has(input:checked) .pb-filter-stip { box-shadow: 0 0 0 2px var(--km-wit); }
.pb-zoekrij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pb-zoekveld { flex: 1 1 260px; width: auto; }
.pb-sorteer { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); }
.pb-sorteer select { width: auto; font-family: var(--font-body); font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.pb-telling { margin: 20px 0 8px; font-size: 13.5px; color: var(--text-muted); }
.pb-lijst { margin: 0 -26px; border-top: 1px solid var(--border-subtle); }
.pb-rij { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(120px, 1fr) minmax(0, 1.5fr) minmax(110px, 0.8fr) 118px; gap: 16px; align-items: center; padding: 14px 26px; border-bottom: 1px solid var(--border-subtle); }
.pb-rij:last-child { border-bottom: none; }
.pb-rij-kop { padding-block: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.pb-rij .cs-who-text .cs-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-voortgang { display: flex; align-items: center; gap: 4px; }
.pb-stap { width: 12px; height: 12px; border-radius: 50%; background: var(--km-zand); }
.pb-stap.is-af { background: var(--km-klei); }
.pb-voortgang-tal { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.pb-pill-bezig { color: var(--km-klei); background: var(--km-klei-soft); }
.pb-stand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pb-actie { text-align: right; }
.pb-actie .btn { padding: 9px 18px; font-size: 14px; }
.pb-leeg { margin: 0; padding: 22px 26px; color: var(--text-muted); }
/* Vandaag: "is dit jouw profiel?" (een-app 011) */
.vd-claim { margin-bottom: 22px; padding: 22px 26px; }
.vd-claim .eyebrow { margin: 0 0 4px; }
.vd-claim-kop { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--text-heading); }
.vd-claim-tekst { margin: 0 0 14px; }
.vd-claim-lijst { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.vd-claim-kandidaat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 14px; }
.vd-claim-wie { display: flex; flex: 1; flex-direction: column; min-width: 0; }

/* De stand "Ongeclaimd" (een-app 011): eigen kolommen, acties per rij en voor een selectie. */
.pb-pill-ongeclaimd { color: var(--km-aubergine); background: var(--km-lila-soft); }
.pb-claim { color: var(--km-aubergine); }
.pb-nieuw-blok { margin: 0 0 14px; }
.pb-nieuw-blok > summary, .pb-meer > summary { list-style: none; cursor: pointer; }
.pb-nieuw-blok > summary::-webkit-details-marker, .pb-meer > summary::-webkit-details-marker { display: none; }
.pb-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 12px; text-align: left; }
.pb-inline-form .pf-field { flex: 1 1 200px; margin: 0; }
.pb-inline-form .cs-sub { flex-basis: 100%; margin: 0; }
.pb-meer { flex-basis: 100%; }
.pb-meer[open] { padding: 4px 0 8px; }
.pb-lijst-ongeclaimd .pb-rij { grid-template-columns: 20px minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(90px, 0.7fr) minmax(0, 1fr) auto; }
.pb-lijst-ongeclaimd .pb-actie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pb-selectie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 -26px; padding: 16px 26px 2px; border-top: 1px solid var(--border-subtle); }
@media (max-width: 760px) {
  .pb-lijst-ongeclaimd .pb-rij { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "vink wie" ". kiki" ". uitgenodigd" ". actie"; }
  .pb-lijst-ongeclaimd .pb-vink { grid-area: vink; }
  .pb-lijst-ongeclaimd .pb-kiki { grid-area: kiki; }
  .pb-lijst-ongeclaimd .pb-uitgenodigd { grid-area: uitgenodigd; }
  .pb-lijst-ongeclaimd .pb-sinds { display: none; }
  .pb-lijst-ongeclaimd .pb-actie { justify-content: flex-start; }
  .pb-selectie { margin: 0 -18px; padding: 16px 18px 2px; }
}
.pb-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 16px 0 2px; border-top: 1px solid var(--border-subtle); margin: 0 -26px; }
.pb-paginas a, .pb-paginas span { min-width: 36px; padding: 7px 11px; border-radius: 999px; text-align: center; font-size: 14px; text-decoration: none; color: var(--text-heading); }
.pb-paginas a:hover { background: var(--km-creme); }
.pb-paginas [aria-current] { background: var(--km-aubergine); color: var(--km-wit); font-weight: 700; }
@media (max-width: 760px) {
  .pb-aangevraagd, .pb-overzicht { padding: 18px; }
  .pb-lijst, .pb-paginas { margin: 0 -18px; }
  .pb-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 14px; padding: 2px 18px; scrollbar-width: none; }
  .pb-filter { flex: none; }
  .pb-rij-kop { display: none; }
  .pb-rij { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wie wie" "voortgang actie" "stand actie"; gap: 8px 12px; padding: 14px 18px; }
  .pb-rij > .cs-who { grid-area: wie; }
  .pb-voortgang { grid-area: voortgang; }
  .pb-stand { grid-area: stand; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pb-bewerkt { display: none; }
  .pb-actie { grid-area: actie; }
}

/* Cookiemelding (zoals kiki-mae.nl) */
.km-cookie { position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 300; display: flex; justify-content: flex-start; pointer-events: none; }
.km-cookie[hidden] { display: none; }
.km-cookie__card { pointer-events: auto; max-width: 420px; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-modal); padding: 24px; opacity: 0; transform: translateY(12px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.km-cookie.km-is-open .km-cookie__card { opacity: 1; transform: none; }
.km-cookie__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--text-heading); margin: 0; }
.km-cookie__text { font-size: var(--text-sm); line-height: var(--leading-normal); margin: 8px 0 0; }
.km-cookie__link { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.km-cookie__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.km-cookie__knop { width: auto; padding: 8px 18px; font-size: var(--text-sm); }
@media (max-width: 640px) { .km-cookie { left: 16px; right: 16px; bottom: 16px; } .km-cookie__card { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .km-cookie__card { transition: none; transform: none; } }

/* De editor van de linkpagina: links het paneel, rechts een telefoon met het voorbeeld (ticket 010) */
.lp-shell { max-width: 1240px; }
.lp-intro { margin-bottom: 24px; }
.lp-werkplaats { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.lp-paneel { display: grid; gap: 18px; min-width: 0; }
.lp-paneel > * { min-width: 0; }
.lp-paneel-titel { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--text-heading); margin: 0 0 12px; }
.lp-adres { padding: 24px; }
.lp-handle { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lp-handle-veld { flex: 1 1 260px; display: flex; align-items: center; min-width: 0; background: var(--km-wit); border: 1px solid var(--border-strong); border-radius: var(--radius-inner); padding: 0 14px; }
.lp-handle-veld:focus-within { box-shadow: 0 0 0 3px var(--focus-ring); }
.lp-handle-voor { color: var(--text-muted); white-space: nowrap; }
.lp-handle-input { flex: 1; width: 0; min-width: 60px; border: 0; padding: 11px 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--text-heading); background: transparent; outline: none; }
.lp-adres > .cs-sub { margin: 8px 0 0; }
.lp-fout { display: block; color: var(--negative); font-size: var(--text-sm); margin: 6px 0 0; }
.lp-online { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-inner); background: var(--surface-raised); }
.lp-online.is-online { background: var(--positive-soft); }
.lp-status { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: var(--text-heading); }
.lp-status .cs-sub, .lp-status .muted-link { font-weight: 400; }
.lp-status-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.lp-online.is-online .lp-status-stip { background: var(--positive); }

.lp-tabs, .lp-schermkeuze { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-inner); background: var(--surface-raised); }
.lp-tabs button, .lp-schermkeuze button { flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 9px; font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.lp-tabs button.is-actief, .lp-schermkeuze button.is-actief { background: var(--km-wit); color: var(--text-heading); box-shadow: var(--shadow-card); }
.lp-schermkeuze { display: none; margin-bottom: 18px; }
.lp-schermkeuze[hidden] { display: none !important; }
.lp-tab[hidden] { display: none; }
.lp-tab.card { padding: 24px; }

.lp-blokken { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-blok-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 6px 8px 6px 4px; }
.lp-blok-rij.is-uit .lp-blok-kop { opacity: .55; }
.lp-blok-details { min-width: 0; }
.lp-blok-kop { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; border-radius: 10px; }
.lp-blok-kop::-webkit-details-marker { display: none; }
.lp-blok-kop::before { content: '\25B8'; color: var(--text-muted); font-size: 12px; transition: transform var(--duration-fast) var(--ease-out); }
.lp-blok-details[open] > .lp-blok-kop::before { transform: rotate(90deg); }
.lp-blok-kop:hover { background: var(--surface-page); }
.lp-blok-soort { font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.lp-blok-soort em { font-style: normal; font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); }
.lp-blok-samenvatting { min-width: 0; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-blok-form { display: grid; gap: 14px; padding: 8px 10px 14px; }
.lp-blok-bewaar { display: flex; justify-content: flex-end; }
.lp-uit-profiel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 10px 14px; }
.lp-uit-profiel .cs-sub { margin: 0; }
.lp-blok-acties { display: flex; gap: 4px; padding-top: 4px; }
.lp-icoonknop { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--surface-page); color: var(--text-body); font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.lp-icoonknop:hover:not(:disabled) { background: var(--surface-raised); }
.lp-icoonknop:disabled { opacity: .35; cursor: default; }
.lp-aanknop span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-muted); }
.lp-aanknop.is-aan span { background: var(--positive); border-color: var(--positive); }
.lp-sociaal-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp-veld-icoon { display: inline-grid; vertical-align: -5px; margin-right: 6px; color: var(--text-muted); }
.lp-veld-icoon svg { width: 18px; height: 18px; }
/* Een eigen foto in een blok of als achtergrond (ticket 012): de foto die er staat, het bestand en de toestemming. */
.lp-beeld-veld { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.lp-beeld-veld .pf-veld { flex: 1; min-width: 0; }
.lp-beeld-veld input[type="file"] { max-width: 100%; }
.lp-beeld-nu { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: cover; background: var(--surface-page); }
.lp-beeld-keuze { display: grid; gap: 12px; }
.lp-beeld-keuze > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-heading); }
.lp-beeld-keuze > summary em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.lp-beeld-keuze[open] > summary { margin-bottom: 12px; }
.lp-fotokeuze { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.lp-fotokeuze-titel { padding: 0; margin: 0 0 4px; font-weight: 600; font-size: var(--text-sm); color: var(--text-heading); }
.lp-radio { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.lp-radio input { margin: 3px 0 0; accent-color: var(--km-klei); }
.lp-achtergrondfoto { display: grid; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.lp-achtergrondfoto-weg { margin-top: 10px; }

.lp-erbij { margin-top: 14px; }
.lp-erbij-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-erbij-knop { border: 1px dashed var(--border-strong); background: transparent; border-radius: var(--radius-pill); padding: 8px 14px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--text-body); cursor: pointer; }
.lp-erbij-knop:hover { border-style: solid; background: var(--surface-card); }

/* De levende blokken die de academy haar aanbiedt (ticket 013), en waarom een blok niet op haar pagina staat. */
.lp-aanbod { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--border-subtle); }
.lp-aanbod-kop { margin: 0; font-weight: 600; color: var(--text-heading); }
.lp-aanbod-tekst { margin: 4px 0 10px; font-size: var(--text-sm); color: var(--text-muted); }
.lp-aanbod-lijst { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-aanbod-lijst li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lp-aanbod-over { min-width: 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.lp-blok-waarom { order: 1; grid-column: 1 / -1; margin: 0 4px 4px 12px; font-size: var(--text-sm); color: var(--negative); }
.lp-levend-uitleg { margin: 4px 12px 10px; }

.lp-podium { position: sticky; top: 24px; display: grid; justify-items: center; gap: 10px; }
.lp-telefoon { width: 100%; max-width: 380px; padding: 12px; border-radius: 44px; background: #1d1a1c; box-shadow: var(--shadow-raised); }
.lp-telefoon-adres { margin: 2px 0 10px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-telefoon-scherm { display: block; width: 100%; height: min(720px, calc(100vh - 140px)); min-height: 480px; border: 0; border-radius: 32px; background: #fff; }
.lp-podium-noot { text-align: center; margin: 0; }

/* Het tabblad Stijl, de bouwdoos (ticket 011), naar variant B van het prototype */
.lp-stijl-form { display: grid; gap: 20px; }
.lp-stijl-groep { border: 0; margin: 0; padding: 0; min-width: 0; }
.lp-stijl-label { display: block; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: var(--text-sm); color: var(--text-heading); }
.lp-stijl-hint { margin: 6px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.lp-verborgen-keuze { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lp-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-themas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-thema { position: relative; display: block; border: 2px solid transparent; border-radius: 14px; padding: 2px; cursor: pointer; }
.lp-thema:has(:checked) { border-color: var(--accent); }
.lp-thema:has(:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }
.lp-thema-staal { height: 72px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.lp-thema-staal i { display: block; height: 9px; }
.lp-thema small { display: block; font-weight: 600; font-size: var(--text-xs); color: var(--text-heading); padding: 4px 2px 0; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lp-chips + .lp-chips, .lp-chips + .lp-kleuren { margin-top: 8px; }
.lp-chip { position: relative; border: 1px solid var(--border-strong); background: var(--km-wit); border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }
.lp-chip:has(:checked) { border-color: var(--accent); background: var(--surface-accent-soft); color: var(--km-klei-deep); font-weight: 600; }
.lp-chip:has(:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }
.lp-kleuren { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-kleuren .lp-stijl-hint { margin: 0; flex: 1 1 160px; }
.lp-kleur { display: inline-flex; }
.lp-kleur input[type="color"] { width: 40px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 2px; background: var(--km-wit); cursor: pointer; }
.lp-letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp-letter { display: grid; gap: 4px; min-width: 0; font-size: var(--text-xs); color: var(--text-muted); }
.lp-letter select { width: 100%; min-width: 0; }
.lp-leesbaarheid { margin: 0; font-size: var(--text-xs); line-height: 1.5; padding: 8px 10px; border-radius: 8px; background: var(--positive-soft); color: var(--positive); }
.lp-leesbaarheid.is-slecht { background: var(--negative-soft); color: var(--negative); }
.lp-stijl-bewaar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 20px; }
.lp-stijl-bewaar .cs-sub { margin: 0; }
.lp-stijl-bewaar [hidden] { display: none; }

@media (max-width: 1080px) {
  .lp-werkplaats { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
}
@media (max-width: 900px) {
  .lp-schermkeuze { display: flex; }
  .lp-werkplaats { grid-template-columns: minmax(0, 1fr); }
  .lp-werkplaats[data-scherm="bewerk"] .lp-podium, .lp-werkplaats[data-scherm="bekijk"] .lp-paneel { display: none; }
  .lp-podium { position: static; }
  .lp-telefoon { max-width: none; padding: 0; border-radius: var(--radius-card); background: none; box-shadow: none; }
  .lp-telefoon-adres { color: var(--text-muted); }
  .lp-telefoon-scherm { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); height: 75vh; }
  .lp-sociaal-velden { grid-template-columns: minmax(0, 1fr); }
}
/* Een telefoon vanaf 320 pixels breed: een rand van 16 pixels, niets dat zijwaarts scrolt. */
@media (max-width: 520px) {
  .lp-shell { padding-left: 16px; padding-right: 16px; }
  .lp-adres, .lp-tab.card { padding: 16px; }
  .lp-handle-veld { flex-basis: 100%; padding: 0 12px; }
  .lp-handle-voor { font-size: 14px; }
  .lp-blok-rij { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-blok-acties { justify-content: flex-end; padding: 0 4px 4px; }
  .lp-themas { gap: 6px; }
  .lp-thema-staal { height: 60px; padding: 0 8px; }
  .lp-letters { grid-template-columns: minmax(0, 1fr); }
}

/* Toezicht in de editor (ticket 015): de linkpaginavoorwaarden voor de eerste "zet online",
   en de melding als Kiki Mae haar pagina offline haalde, met de weg terug. */
.lp-voorwaarden, .lp-door-kiki-mae { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-inner); }
.lp-voorwaarden { background: var(--surface-raised); }
.lp-voorwaarden-kop, .lp-door-kiki-mae-kop { margin: 0 0 8px; font-weight: 600; color: var(--text-heading); }
.lp-voorwaarden-tekst { font-size: var(--text-sm); line-height: 1.55; }
.lp-voorwaarden-tekst p { margin: 0 0 8px; }
.lp-voorwaarden-tekst ul { margin: 0 0 8px; padding-left: 18px; }
.lp-voorwaarden-vink { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 12px; font-weight: 600; color: var(--text-heading); cursor: pointer; }
.lp-voorwaarden-vink input { margin-top: 4px; }
.lp-vindbaar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.lp-vindbaar-vink { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-sm); color: var(--text-body); cursor: pointer; }
.lp-vindbaar-vink input { margin-top: 3px; }
.lp-door-kiki-mae { background: var(--warning-soft); font-size: var(--text-sm); line-height: 1.55; }
.lp-door-kiki-mae p { margin: 0 0 8px; }
.lp-door-kiki-mae-reden { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--warning); background: var(--surface-card); border-radius: 0 8px 8px 0; color: var(--text-heading); }
.lp-door-kiki-mae-gevraagd { margin: 0; font-weight: 600; color: var(--text-heading); }
.lp-terug { display: grid; gap: 10px; justify-items: start; }
.lp-terug-veld { display: grid; gap: 4px; width: 100%; }
.lp-terug-veld em { font-style: normal; color: var(--text-muted); }
.lp-terug-veld textarea { width: 100%; resize: vertical; }

/* Linkpagina's in het beheer (ticket 015). */
.lpb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lpb-filter { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-heading); text-decoration: none; font-size: var(--text-sm); }
.lpb-filter b { font-weight: 600; margin-left: 4px; color: var(--text-muted); }
.lpb-filter.is-actief { background: var(--km-aubergine); border-color: var(--km-aubergine); color: #FFF7EF; }
.lpb-filter.is-actief b { color: inherit; }
.lpb-lijst { display: grid; gap: 14px; }
.lpb-pagina { display: grid; gap: 12px; }
.lpb-pagina.is-kiki-mae { border-color: var(--warning); }
.lpb-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lpb-wie { min-width: 0; }
.lpb-handle { margin: 0; font-weight: 600; color: var(--text-heading); overflow-wrap: anywhere; }
.lpb-handle a { color: inherit; }
.lpb-wie .cs-sub { margin: 2px 0 0; overflow-wrap: anywhere; }
.lpb-stand { display: flex; gap: 6px; flex-wrap: wrap; }
.lpb-pill-online { color: var(--positive); background: var(--positive-soft); }
.lpb-pill-offline { color: var(--text-muted); background: var(--km-creme); }
.lpb-pill-kiki-mae { color: var(--text-heading); background: var(--warning-soft); }
.lpb-pill-melding { color: #A93F3F; background: var(--negative-soft, #F3DDDA); }
.lpb-feiten { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: var(--text-sm); }
.lpb-feiten div { display: flex; gap: 6px; }
.lpb-feiten dt { color: var(--text-muted); }
.lpb-feiten dd { margin: 0; color: var(--text-heading); }
.lpb-fotos { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.lpb-fotos img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--km-creme); }
.lpb-offline { padding: 10px 12px; border-radius: 10px; background: var(--warning-soft); font-size: var(--text-sm); }
.lpb-offline p { margin: 0; }
.lpb-offline p + p { margin-top: 6px; }
.lpb-meldingen, .lpb-geschiedenis { font-size: var(--text-sm); }
.lpb-meldingen ul, .lpb-geschiedenis ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lpb-meldingen .eyebrow, .lpb-geschiedenis .eyebrow { margin: 0; }
.lpb-wanneer { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.lpb-acties { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lpb-acties form { margin: 0; }
.lpb-haal-offline summary { list-style: none; cursor: pointer; }
.lpb-haal-offline summary::-webkit-details-marker { display: none; }
.lpb-haal-offline[open] { flex-basis: 100%; }
.lpb-haal-offline form { display: grid; gap: 8px; margin-top: 10px; max-width: 560px; }
.lpb-haal-offline label { display: grid; gap: 4px; font-size: var(--text-sm); }
.lpb-haal-offline textarea { width: 100%; resize: vertical; }
.lpb-pilot-knop { margin-left: auto !important; }
.lpb-pilot-knop button, .lpb-pilot-lijst button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--text-sm); }
.lpb-pilot { margin-top: 22px; display: grid; gap: 10px; }
.lpb-pilot h2 { margin: 0; }
.lpb-pilot .cs-sub { margin: 0; }
.lpb-pilot-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lpb-pilot-lijst li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.lpb-pilot-lijst form { margin: 0; }
.lpb-pilot-erbij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lpb-pilot-erbij select { flex: 1 1 260px; min-width: 0; }

/* Tellen op de linkpagina (ticket 018): bezoeken bovenaan de editor, kliks klein bij elk blok. */
.lp-cijfers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 14px; }
.lp-cijfer { margin: 0; color: var(--text-body); font-size: var(--text-sm); }
.lp-cijfer b { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); color: var(--text-heading); margin-right: 2px; }
.lp-cijfers-noot { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.lp-blok-kliks { margin-left: auto; flex: none; color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.lpb-sorteer { margin-left: auto; align-self: center; font-size: var(--text-sm); }