/* ContentX · stijl
   Tandem-richting (20-10): warm espresso/creme, terracotta-accent, dichte kaarten, Plus Jakarta Sans.
   Donker standaard, licht via knop (data-theme). Indeling: zijbalk (profiel + keten), werkvlak, lade rechts, engine-dock rechtsonder. */
:root {
  --bg: #14110e; --panel: #1f1914; --panel-2: #2a231d; --panel-3: #342b24; --rand: #332b24; --rand-hl: #4a3e34;
  --fg: #f3ece5; --fg2: #c9bcae; --fg3: #a39587;
  --accent: #ff8a5c; --accent-zacht: rgba(255, 138, 92, .14); --op-accent: #1a120c;
  --ok: #6fd29c; --warn: #f2c063; --err: #f4908a; --info: #9cc0ff; --paars: #c3a6ff;
  --schaduw: 0 18px 50px -20px rgba(0, 0, 0, .6);
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-groot: 20px; --r: 14px; --r-klein: 9px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #efebe6; --panel: #fdfbf8; --panel-2: #f5f1eb; --panel-3: #ebe5dd; --rand: #e2dbd2; --rand-hl: #cfc5b9;
  --fg: #221a14; --fg2: #54493f; --fg3: #6e6257;
  --accent: #b84a23; --accent-zacht: rgba(184, 74, 35, .1); --op-accent: #fff;
  --ok: #1d6b45; --warn: #845200; --err: #a8322e; --info: #24569e; --paars: #6a43b8;
  --schaduw: 0 18px 50px -24px rgba(34, 26, 20, .35);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 750; }
h2 { font-size: 16px; font-weight: 680; }
h3 { font-size: 13.5px; font-weight: 680; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 11.5px; }
.zacht { color: var(--fg2); } .zachter { color: var(--fg3); } .klein { font-size: 12px; } .cijfer { font-variant-numeric: tabular-nums; }
.rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rij.tussen { justify-content: space-between; } .rij.nowrap { flex-wrap: nowrap; }
.stapel { display: grid; gap: 14px; align-content: start; } .stapel.krap { gap: 8px; } .stapel.ruim { gap: 22px; }
.grow { flex: 1; min-width: 0; }
.verborgen { display: none !important; }

/* ---------- app-indeling ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100%; }
.zij { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px 14px; border-right: 1px solid var(--rand); background: var(--bg); }
.merk { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.merk-logo { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); color: var(--op-accent); display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: -0.04em; flex: none; }
.merk b { font-size: 16px; letter-spacing: -0.02em; display: block; line-height: 1.1; }
.merk small { font-family: var(--mono); font-size: 10.5px; color: var(--fg3); }
.profielknop { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--rand-hl); background: var(--panel); cursor: pointer; text-align: left; }
.profielknop:hover { border-color: var(--fg3); }
.avatar { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex: none; color: #fff; }
.profielknop .n { font-weight: 650; line-height: 1.2; } .profielknop .s { font-size: 11px; color: var(--fg3); }
nav.menu { display: grid; gap: 1px; }
nav.menu .groep { font-size: 10.5px; color: var(--fg3); padding: 12px 10px 4px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
nav.menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; text-decoration: none; color: var(--fg2); font-weight: 560; }
nav.menu a:hover { background: var(--panel-2); color: var(--fg); }
nav.menu a.aan { background: var(--panel-2); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
nav.menu a .stapnr { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--panel-3); color: var(--fg3); flex: none; }
nav.menu a.aan .stapnr { background: var(--accent); color: var(--op-accent); }
nav.menu a .stapnr.ok { background: color-mix(in oklab, var(--ok) 25%, transparent); color: var(--ok); }
nav.menu a .tel { margin-left: auto; font-size: 11px; color: var(--fg3); font-variant-numeric: tabular-nums; }
nav.menu a .tel.let { color: var(--accent); font-weight: 750; }
nav.menu svg { width: 16px; height: 16px; flex: none; }
.zij-voet { margin-top: auto; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rand); }

.werk { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.topbalk { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 1px solid var(--rand); background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.kruimel { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--fg3); min-width: 0; }
.kruimel b { color: var(--fg); font-weight: 650; }
.zoek { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--rand); background: var(--panel); color: var(--fg3); min-width: 220px; cursor: pointer; font-size: 12.5px; }
.zoek kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border-radius: 5px; background: var(--panel-3); }
main { padding: 22px 26px 120px; min-width: 0; }
.pagina { max-width: 1320px; margin: 0 auto; display: grid; gap: 18px; }
.paginakop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.paginakop .eyebrow { font-size: 11.5px; color: var(--fg3); display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.paginakop p.uitleg { color: var(--fg2); max-width: 70ch; margin-top: 6px; font-size: 13px; }

/* ---------- componenten ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rand-hl); background: var(--panel-2); cursor: pointer; font-weight: 620; font-size: 12.5px; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; }
.knop:hover { border-color: var(--fg3); }
.knop.primair { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.knop.accent { background: var(--accent); color: var(--op-accent); border-color: var(--accent); }
.knop.stil { background: transparent; border-color: transparent; color: var(--fg2); }
.knop.stil:hover { background: var(--panel-2); color: var(--fg); }
.knop.gevaar { color: var(--err); }
.knop.klein { padding: 4px 10px; font-size: 11.5px; }
.knop[disabled] { opacity: .45; cursor: not-allowed; }
.knop svg { width: 14px; height: 14px; }
.knopgroep { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); gap: 2px; }
.knopgroep button { border: 0; background: transparent; padding: 5px 11px; border-radius: 999px; font-weight: 620; font-size: 12px; color: var(--fg2); cursor: pointer; }
.knopgroep button.aan { background: var(--fg); color: var(--bg); }

.kaart { background: var(--panel); border: 1px solid var(--rand); border-radius: var(--r-groot); }
.kaart.pad { padding: 18px; display: grid; gap: 12px; align-content: start; }
.kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vlak { background: var(--panel-2); border-radius: var(--r); padding: 12px 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kolommen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

.veld, .keuze { width: 100%; padding: 8px 11px; border-radius: var(--r-klein); border: 1px solid var(--rand-hl); background: var(--panel-2); }
.veld:focus, .keuze:focus { outline: none; border-color: var(--accent); }
textarea.veld { resize: vertical; min-height: 96px; line-height: 1.55; }
textarea.veld.code { font-family: var(--mono); font-size: 12px; min-height: 220px; }
.veldgroep { display: grid; gap: 5px; align-content: start; }
.veldgroep > label, .label { font-size: 11.5px; color: var(--fg3); font-weight: 650; display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.hulp { font-size: 11.5px; color: var(--fg3); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.formgrid .breed { grid-column: 1 / -1; }

.schakel { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--panel-3); border: 1px solid var(--rand-hl); cursor: pointer; flex: none; transition: background .15s; }
.schakel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg3); transition: transform .15s, background .15s; }
.schakel.aan { background: var(--accent); border-color: var(--accent); }
.schakel.aan::after { transform: translateX(14px); background: var(--op-accent); }
.schakelrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rand); }
.schakelrij:first-child { border-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chipknop { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rand-hl); background: transparent; font-size: 12px; font-weight: 620; cursor: pointer; color: var(--fg2); }
.chipknop.aan { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.schuif { display: flex; align-items: center; gap: 10px; }
.schuif input { flex: 1; accent-color: var(--accent); }
.schuif output { font-family: var(--mono); font-size: 12px; min-width: 42px; text-align: right; }

.pil { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; background: var(--panel-3); color: var(--fg2); white-space: nowrap; }
.pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pil.geen::before { display: none; }
.s-plan { color: var(--info); } .s-ideated { color: var(--paars); } .s-written { color: var(--warn); } .s-ready { color: var(--ok); } .s-published { color: var(--fg3); }
.s-ok { color: var(--ok); } .s-bezig { color: var(--accent); background: var(--accent-zacht); } .s-fout { color: var(--err); } .s-leeg { color: var(--fg3); }
.tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: var(--panel-3); color: var(--fg2); letter-spacing: .02em; }
.tag.tofu { color: var(--ok); } .tag.mofu { color: var(--info); } .tag.bofu { color: var(--err); }
.tag.accent { background: var(--accent-zacht); color: var(--accent); }
.platform { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 10px; font-weight: 800; background: var(--panel-3); color: var(--fg2); }
.platform.uit { opacity: .3; }

.melding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--rand); }
.melding.warn { border-color: color-mix(in oklab, var(--warn) 45%, transparent); background: color-mix(in oklab, var(--warn) 8%, var(--panel)); }
.melding.fout { border-color: color-mix(in oklab, var(--err) 45%, transparent); background: color-mix(in oklab, var(--err) 8%, var(--panel)); }
.melding.info { border-color: color-mix(in oklab, var(--info) 35%, transparent); }
.melding b { font-weight: 700; }

/* tabellen */
.tabelwrap { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--r); background: var(--panel); }
table.tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabel th { text-align: left; font-size: 11px; color: var(--fg3); font-weight: 650; padding: 9px 10px; border-bottom: 1px solid var(--rand); white-space: nowrap; background: var(--panel); position: sticky; top: 0; }
.tabel td { padding: 9px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr { cursor: pointer; }
.tabel tbody tr:hover td { background: var(--panel-2); }
.tabel tr.gekozen td { background: var(--accent-zacht); }
.tabel .titelcel { font-weight: 620; max-width: 420px; }
.tabel .titelcel small { display: block; font-weight: 400; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.tabel input[type="checkbox"] { accent-color: var(--accent); }
.bulkbalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: var(--fg); color: var(--bg); }
.bulkbalk .knop { background: transparent; color: var(--bg); border-color: color-mix(in oklab, var(--bg) 35%, transparent); }
.bulkbalk .knop:hover { border-color: var(--bg); }
.filterbalk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filterbalk .veld, .filterbalk .keuze { width: auto; padding: 6px 10px; font-size: 12.5px; }

/* stappenbalk (fundament / keten) */
.keten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.ketenstap { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); text-decoration: none; display: grid; gap: 2px; border: 1px solid transparent; }
.ketenstap:hover { border-color: var(--rand-hl); }
.ketenstap .nr { font-size: 10.5px; color: var(--fg3); font-weight: 700; }
.ketenstap b { font-size: 13px; }
.ketenstap.ok .nr { color: var(--ok); }
.ketenstap.nu { background: var(--accent-zacht); } .ketenstap.nu .nr { color: var(--accent); }
.getal { font-size: 26px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* teksteditor met teller */
.editor { display: grid; gap: 6px; }
.editor-voet { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fg3); }
.editor-voet .over { color: var(--err); font-weight: 700; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rand); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex-wrap: nowrap; }
.tabs::-webkit-scrollbar { display: none; }
.tabel td .keuze { min-width: 92px; padding: 5px 8px; }
.tabs button { border: 0; background: transparent; padding: 8px 12px; font-weight: 640; font-size: 12.5px; color: var(--fg3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tabs button.aan { color: var(--fg); border-bottom-color: var(--accent); }
.voorbeeldtekst { white-space: pre-wrap; background: var(--panel-2); border-radius: var(--r); padding: 14px; font-size: 13px; line-height: 1.6; }
.richtext { font-size: 13px; line-height: 1.65; color: var(--fg2); }
.richtext h1, .richtext h2, .richtext h3 { color: var(--fg); margin: 14px 0 6px; }
.richtext h1 { font-size: 18px; } .richtext h2 { font-size: 15px; } .richtext h3 { font-size: 13.5px; }
.richtext p { margin: 0 0 8px; } .richtext ul { margin: 0 0 8px; padding-left: 18px; }

/* lade en modaal */
.scherm { position: fixed; inset: 0; background: rgba(10, 7, 5, .5); z-index: 40; }
.lade { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--panel); border-left: 1px solid var(--rand); z-index: 41; display: flex; flex-direction: column; box-shadow: var(--schaduw); }
.lade.smal { width: min(520px, 100%); }
.lade-kop { padding: 14px 20px; border-bottom: 1px solid var(--rand); display: grid; gap: 8px; }
.lade-body { padding: 16px 20px 40px; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.lade-voet { padding: 12px 20px; border-top: 1px solid var(--rand); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modaal { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(620px, calc(100% - 32px)); max-height: 76vh; overflow: auto; background: var(--panel); border: 1px solid var(--rand-hl); border-radius: var(--r-groot); z-index: 42; box-shadow: var(--schaduw); }
.palet input { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--rand); background: transparent; font-size: 15px; outline: none; }
.palet .res { padding: 6px; display: grid; gap: 1px; }
.palet .res button { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; text-align: left; }
.palet .res button.aan, .palet .res button:hover { background: var(--panel-2); }

/* engine-dock */
.dock { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 340px; background: var(--panel); border: 1px solid var(--rand-hl); border-radius: 16px; box-shadow: var(--schaduw); overflow: hidden; }
.dock-kop { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-weight: 650; font-size: 12.5px; }
.dock-kop .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--fg3); }
.dock-kop .stip.loopt { background: var(--accent); animation: puls 1s infinite; }
.dock-body { max-height: 300px; overflow-y: auto; padding: 0 10px 10px; display: grid; gap: 8px; }
.run { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.run-kop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 12.5px; }
.balk { height: 5px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.balk > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .35s ease; }
.stappen { display: flex; flex-wrap: wrap; gap: 4px; }
.stap { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--panel-3); color: var(--fg3); }
.stap.klaar { color: var(--ok); } .stap.nu { color: var(--accent); background: var(--accent-zacht); font-weight: 700; } .stap.fout { color: var(--err); }
/* status per platform */
.pstip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; vertical-align: middle; background: var(--fg3); }
.pstip.klaar { background: var(--ok); } .pstip.fout { background: var(--err); }
.pstip.onderzoeken, .pstip.schrijven { background: var(--accent); animation: puls 1s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-weight: 650; font-size: 12.5px; z-index: 60; box-shadow: var(--schaduw); }

/* kalender en bord */
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kal .dagnaam { font-size: 11px; color: var(--fg3); padding-left: 6px; font-weight: 650; }
.kaldag { min-height: 118px; background: var(--panel); border: 1px solid var(--rand); border-radius: 12px; padding: 7px; display: grid; gap: 4px; align-content: start; }
.kaldag.vandaag { border-color: var(--accent); }
.kaldag.anders { opacity: .45; }
.kaldag.over { background: var(--accent-zacht); }
.kaldag .d { font-size: 11px; color: var(--fg3); display: flex; justify-content: space-between; }
.kalpost { font-size: 11px; padding: 4px 6px; border-radius: 7px; background: var(--panel-2); border-left: 3px solid var(--fg3); cursor: pointer; line-height: 1.3; }
.bord { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kolom { background: var(--panel); border: 1px solid var(--rand); border-radius: 16px; padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 360px; }
.kolom.over { border-color: var(--accent); }
.kaartje { background: var(--panel-2); border: 1px solid var(--rand); border-radius: 12px; padding: 10px; display: grid; gap: 6px; cursor: pointer; }
.kaartje:hover { border-color: var(--rand-hl); }
.kaartje.bezig { border-color: var(--accent); }

/* beelden */
.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.beeld { border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 1; display: flex; align-items: flex-end; padding: 10px; color: #fff; font-weight: 700; font-size: 12px; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.beeld { isolation: isolate; } .beeld > img.foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; z-index: -1; }
.beeld:has(> img.foto)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); z-index: -1; pointer-events: none; }
.beeld.portrait { aspect-ratio: 4 / 5; } .beeld.landscape { aspect-ratio: 16 / 9; }
.beeld .lbl { position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.45); font-weight: 650; }

.leeg { padding: 26px; border: 1.5px dashed var(--rand-hl); border-radius: var(--r-groot); display: grid; gap: 10px; justify-items: start; }

/* menuknop alleen op smalle schermen: deze regel moet vóór de media query staan */
.menuknop { display: none !important; }
.kolommen > *, .stapel > *, .kaart > * { min-width: 0; }
@media (max-width: 1100px) { .kolommen { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .zij { position: fixed; z-index: 45; width: 270px; transform: translateX(-100%); transition: transform .2s; }
  .zij.open { transform: none; }
  .menuknop { display: inline-flex !important; }
  main { padding: 16px 16px 120px; }
  .grid-2, .grid-3, .formgrid { grid-template-columns: 1fr; }
  .dock { left: 12px; right: 12px; width: auto; }
  .zoek { min-width: 0; }
  /* telefoon: topbalk op één regel, ketenbalk en vaste grids stapelen, tabellen en kalender scrollen binnen hun kaart */
  .topbalk { padding: 8px 12px; gap: 8px; }
  .zoek kbd, .kruimel > span { display: none; }
  .kruimel b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .keten { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4, .grid-4[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tabelwrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
  .kal { grid-template-columns: repeat(7, minmax(84px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .paginakop { flex-wrap: wrap; }
  .bulkbalk .veld { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= Postweergave: echte post per platform =================
   Bewust een vaste lichte huid, los van het thema van ContentX: zo ziet de post er in de feed uit. */
.pw-omslag { display: grid; gap: 8px; max-width: 500px; width: 100%; margin-inline: auto; align-content: start; container-type: inline-size; }
@container (max-width: 390px) { .pw-acties { padding: 5px 4px; font-size: 11.5px; gap: 0; } .pw-acties span { gap: 3px; padding: 6px 2px; } .pw-acties svg { width: 15px; height: 15px; } }
@container (max-width: 340px) { .pw-acties svg { display: none; } }
.pw-noot { font-size: 12px; line-height: 1.45; color: var(--fg2); }
.pw-noot.zachter { color: var(--fg3); font-size: 11.5px; }
.pw { --pw-rand: #dfdedb; --pw-fg: #191919; --pw-zacht: #666; --pw-link: #0a66c2; background: #fff; color: var(--pw-fg); border: 1px solid var(--pw-rand); border-radius: 10px; overflow: hidden; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42; text-align: left; }
.pw svg { display: block; flex: none; }
.pw-kop { display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px 8px; }
.pw-wie { display: grid; min-width: 0; flex: 1; }
.pw-wie b { font-size: 14px; font-weight: 600; }
.pw-wie small { font-size: 12px; color: var(--pw-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-volg { color: var(--pw-link); font-weight: 600; font-size: 14px; white-space: nowrap; }
.pw-puntjes { color: var(--pw-zacht); font-weight: 700; letter-spacing: 1px; }
.pw-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.pw-avatar.klein { width: 34px; height: 34px; font-size: 12px; }
.pw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-tekst { padding: 0 14px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pw-tekst .pw-vol { display: none; }
.pw-tekst.open .pw-vol { display: inline; }
.pw-tekst.open .pw-kort, .pw-tekst.open .pw-meer { display: none; }
.pw-meer { border: 0; background: none; padding: 0 0 0 4px; font: inherit; color: var(--pw-zacht); cursor: pointer; }
.pw-meer:hover { color: var(--pw-link); text-decoration: underline; }
.pw-link { color: var(--pw-link); font-weight: 500; }
.pw-media { display: block; line-height: 0; background: #f3f2ef; }
.pw-media.rond { border-radius: 14px; overflow: hidden; margin: 2px 0 8px; border: 1px solid var(--pw-rand); }
.pw-foto img { width: 100%; display: block; }
.pw-foto.stuk { aspect-ratio: 4 / 5; background: #e8e6e1; }
.pw-foto.vast { overflow: hidden; }
.pw-foto.vast img { height: 100%; object-fit: cover; object-position: 50% 20%; }
.pw-foto.r-square { aspect-ratio: 1; } .pw-foto.r-landscape { aspect-ratio: 16 / 9; } .pw-foto.r-portrait { aspect-ratio: 4 / 5; }
.pw-acties { display: flex; justify-content: space-around; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--pw-rand); color: var(--pw-zacht); font-weight: 600; font-size: 12.5px; }
.pw-acties span { display: flex; align-items: center; gap: 5px; padding: 6px 5px; white-space: nowrap; }
/* Facebook */
.pw-fb { --pw-link: #1877f2; }
.pw-fb .pw-avatar { width: 40px; height: 40px; }
/* Instagram */
.pw-ig { --pw-link: #00376b; }
.pw-ig .pw-kop { align-items: center; padding: 9px 12px; }
.pw-ig-acties { display: flex; justify-content: space-between; padding: 10px 12px 6px; color: #262626; }
.pw-ig-acties svg { width: 23px; height: 23px; }
.pw-ig-acties > span { display: flex; gap: 13px; }
.pw-ig .pw-tekst { padding: 0 12px 4px; }
.pw-ig-datum { display: block; padding: 0 12px 11px; font-size: 11px; color: var(--pw-zacht); }
/* X */
.pw-x { --pw-link: #1d9bf0; padding: 12px 14px 4px; }
.pw-x-post { display: flex; gap: 10px; }
.pw-x-links { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pw-x-links i { width: 2px; flex: 1; background: var(--pw-rand); }
.pw-x-rechts { min-width: 0; flex: 1; padding-bottom: 8px; }
.pw-x-kop { font-size: 13.5px; } .pw-x-kop span { color: var(--pw-zacht); }
.pw-x .pw-tekst { padding: 2px 0 8px; }
.pw-x-acties { display: flex; justify-content: space-between; max-width: 300px; color: var(--pw-zacht); }
/* Blog */
.pw-blog-in { padding: 16px 18px 18px; display: grid; gap: 7px; }
.pw-blog-pijler { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5a2b; }
.pw-blog h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; color: var(--pw-fg); }
.pw-blog small { font-size: 12px; color: var(--pw-zacht); }
.pw-blog-tekst { padding: 6px 0 0; white-space: normal; font-size: 14.5px; line-height: 1.55; }
.pw-blog-tekst.open .pw-vol { display: block; }
.pw-blog-tekst h1, .pw-blog-tekst h2, .pw-blog-tekst h3 { font-size: 16px; margin: 12px 0 4px; }
.pw-blog-tekst p { margin: 0 0 9px; }
.pw-blog-tekst .pw-meer { padding: 0; color: var(--pw-link); font-weight: 600; }

/* sjabloonvisual: schaalt mee met de breedte via containereenheden */
.pw-sjabloon { position: relative; overflow: hidden; container-type: inline-size; background: var(--s-bg); color: var(--s-tekst); font-family: var(--s-font); line-height: 1.08; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
.pw-sjabloon.r-portrait { aspect-ratio: 4 / 5; } .pw-sjabloon.r-square { aspect-ratio: 1; } .pw-sjabloon.r-landscape { aspect-ratio: 16 / 9; }
.s-boven { padding: 8cqw 8cqw 0; display: grid; gap: 3.2cqw; position: relative; z-index: 1; }
.s-eyebrow { font-family: var(--mono); font-size: 2.9cqw; letter-spacing: .13em; text-transform: uppercase; color: var(--s-accent); line-height: 1.2; }
.s-kop { font-size: 8.2cqw; font-weight: 700; letter-spacing: -.02em; }
.s-kop em { font-style: normal; color: var(--s-accent); }
.s-voet { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 4cqw; padding: 0 8cqw 6.5cqw; font-size: 2.9cqw; color: var(--s-zacht); line-height: 1.2; }
.s-voet b { color: var(--s-tekst); font-weight: 650; }
.s-sfeer { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; object-fit: cover; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); opacity: .82; }
.s-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, var(--s-bg)); z-index: 0; }
.s-bogen { position: absolute; right: -6%; bottom: -6%; width: 78%; color: var(--s-accent); opacity: .3; z-index: -1; }
.s-vraag { background: var(--s-accent); color: var(--s-op); }
.s-vraag .s-eyebrow, .s-vraag .s-kop em, .s-vraag .s-voet, .s-vraag .s-voet b { color: var(--s-op); }
.s-vraag .s-kop { font-size: 10cqw; }
.s-lijst .s-cijfer { position: absolute; right: 7cqw; bottom: 13cqw; font-size: 44cqw; font-weight: 800; line-height: .8; color: var(--s-accent); letter-spacing: -.04em; z-index: -1; }
.pw-sjabloon.r-landscape .s-kop { font-size: 5.6cqw; }
.pw-sjabloon.r-landscape .s-boven { padding: 5cqw 6cqw 0; gap: 1.8cqw; }
.pw-sjabloon.r-landscape .s-eyebrow, .pw-sjabloon.r-landscape .s-voet { font-size: 1.9cqw; }
.pw-sjabloon.r-landscape .s-voet { padding: 0 6cqw 4cqw; }
.pw-sjabloon.r-landscape.s-lijst .s-cijfer { font-size: 30cqw; right: 5cqw; bottom: 8cqw; }
.pw-sjabloon.r-landscape.s-lijst .s-kop { max-width: 66%; }
.pw-sjabloon.mini .s-boven { padding: 8cqw; }
.pw-sjabloon.mini .s-kop { font-size: 11.5cqw; }
.pw-sjabloon.mini.s-vraag .s-kop { font-size: 11.5cqw; }
.pw-sjabloon.mini .s-cijfer { font-size: 44cqw; right: 6cqw; bottom: 6cqw; opacity: .9; }

/* kalender met miniatuur */
.kalpost { display: grid; gap: 4px; padding: 3px 3px 5px; }
.kalpost > span { padding: 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kalmini { border-radius: 5px; overflow: hidden; line-height: 0; pointer-events: none; }

/* keuring en postscherm: post naast de bediening */
.keurnaast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 16px; align-items: start; }
.postnaast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 20px; align-items: start; margin-bottom: 14px; }
.postnaast-post { position: sticky; top: 12px; }
.postnaast-post .pw-omslag { max-width: none; }
@media (max-width: 1100px) { .keurnaast, .postnaast { grid-template-columns: minmax(0, 1fr); } .postnaast-post { position: static; } }

/* lade: hoofdbeeld kiezen */
.pl-beelden { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-beeld { width: 64px; height: 80px; padding: 0; border: 2px solid var(--rand); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--panel-3); }
.pl-beeld.aan { border-color: var(--accent); }
.pl-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* inloggen (alleen productie) */
.inlog { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: var(--bg, #14110e); }
.inlog-kaart { width: min(400px, 100%); display: grid; gap: 14px; padding: 28px; border: 1px solid var(--rand); border-radius: 16px; background: var(--panel, #1f1914); }
.inlog-kaart [hidden] { display: none; }