/* Klantenportal Arcturian Studios. Zelfde huisstijl als het CRM: wit paneel op een zacht kleurverloop. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-1ab1ad.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-tight-6c70c7.woff2) format('woff2');
}

:root {
  --panel: #FFFFFF;
  --soft: #F6F5F8;
  --soft-2: #EFEDF2;
  --ink: #121016;
  --ink-2: #55515E;
  --ink-3: #6E6A78;
  --ink-4: #9C98A5;
  --line: #E8E6EC;
  --line-2: #DDDAE2;
  --star: #FF7A4D;
  --star-soft: #FFF1EB;
  --link: #C24A1C;
  --ok: #2F7A4E;
  --ok-soft: #E8F4EC;
  --violet-soft: #F1EBFD;
  --violet: #6B45B8;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --r-lg: 28px;
  --r: 18px;
  --r-sm: 12px;
  --frame: clamp(6px, 1vw, 14px);
  --gut: clamp(16px, 3vw, 36px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(60vw 50vh at 0% 0%, #F8E4F0 0%, transparent 70%),
    radial-gradient(60vw 60vh at 100% 0%, #E2ECFB 0%, transparent 70%),
    radial-gradient(70vw 60vh at 100% 100%, #FCE9DF 0%, transparent 70%),
    radial-gradient(60vw 60vh at 0% 100%, #ECE5FA 0%, transparent 70%),
    #F1EFF4;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }

.frame { padding: var(--frame); min-height: 100vh; }
.panel {
  background: var(--panel);
  border-radius: var(--r-lg);
  min-height: calc(100vh - 2 * var(--frame));
  box-shadow: 0 1px 2px rgba(18,16,22,.04), 0 12px 40px -18px rgba(18,16,22,.12);
  overflow: clip;
}

/* ---------- bovenbalk */
.top {
  display: flex; align-items: center; gap: 16px;
  padding: 16px var(--gut);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 17px; letter-spacing: -.01em; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand b { font-weight: 600; }
.top-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.wie { font-size: 14px; color: var(--ink-3); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wie:hover { color: var(--ink); }

/* ---------- knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel);
  font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.knop:hover { background: var(--soft); }
.knop svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.knop-donker { background: var(--ink); color: #fff; border-color: var(--ink); }
.knop-donker:hover { background: #2A2730; }
.knop-ster { background: var(--star); border-color: var(--star); color: var(--ink); }
.knop-ster:hover { background: #FF8E66; }
.knop-klein { height: 32px; padding: 0 12px; font-size: 13px; }
.knop-kaal { border-color: transparent; background: transparent; }
.knop-gevaar { color: var(--link); }
.knop:disabled { opacity: .5; cursor: default; }
.icoonknop {
  width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-3);
  display: inline-grid; place-items: center; cursor: pointer; flex: none;
}
.icoonknop:hover { background: var(--soft); color: var(--ink); }
.icoonknop svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- algemeen */
.inhoud { padding: 28px var(--gut) 56px; max-width: 1180px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
.dim { color: var(--ink-3); }
.klein { font-size: 13px; }
.leeg { color: var(--ink-4); font-size: 14px; padding: 6px 0; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }

.pil {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; background: var(--soft); color: var(--ink-2);
}
.pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.pil.zonder-stip::before { display: none; }
.pil.ok { background: var(--ok-soft); color: var(--ok); }
.pil.let-op { background: var(--star-soft); color: var(--link); }
.pil.bezig { background: var(--violet-soft); color: var(--violet); }
.pil.donker { background: var(--ink); color: #fff; }
.pil.grijs { color: var(--ink-3); }

.kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.kop .sub { color: var(--ink-3); margin-top: 6px; font-size: 15px; }
.kop .label { margin-bottom: 8px; display: block; }

.blok { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 22px; min-width: 0; background: var(--panel); }
.blok.zacht { background: var(--soft); border-color: transparent; }
.blok.donker { background: var(--ink); border-color: var(--ink); color: #EEECF2; }
.blok.donker .dim, .blok.donker .label { color: #A9A4B3; }
.blok-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 32px; }
.blok-kop a { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.blok-kop a:hover { color: var(--ink); }

.raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stapel { display: grid; gap: 18px; min-width: 0; }

/* ---------- tabs */
.tabs {
  display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 999px;
  overflow-x: auto; scrollbar-width: none; margin-bottom: 26px; width: max-content; max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  text-decoration: none; padding: 7px 15px; border-radius: 999px; font-size: 14px; color: var(--ink-2);
  font-weight: 500; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.tabs a:hover { color: var(--ink); }
.tabs a.actief { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(18,16,22,.08); }
.tabs .teller { background: var(--star); color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 600; padding: 0 6px; line-height: 18px; }

/* ---------- voortgang */
.procent { font-family: var(--display); font-size: 64px; font-weight: 300; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.procent small { font-size: 28px; color: var(--ink-3); margin-left: 2px; }
.balk { height: 8px; border-radius: 999px; background: var(--soft-2); overflow: hidden; margin: 16px 0 18px; }
.balk span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B47AFF, #7AB8FF 55%, #FF7A4D); }
.balk.dun { height: 5px; margin: 10px 0 0; }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .stappen { grid-template-columns: repeat(min(var(--n, 6), 3), minmax(0, 1fr)); row-gap: 14px; } }
.stappen li { display: grid; gap: 6px; font-size: 13px; color: var(--ink-3); min-width: 0; }
.stappen li i { display: block; height: 4px; border-radius: 999px; background: var(--line); }
.stappen li.klaar i { background: var(--ink); }
.stappen li.bezig i { background: linear-gradient(90deg, var(--star) 50%, var(--line) 50%); }
.stappen li.bezig, .stappen li.klaar { color: var(--ink); }
.stappen li.bezig b { color: var(--link); font-weight: 600; }
.stappen b { font-weight: 500; overflow-wrap: anywhere; }

.volgende { margin-top: 16px; background: var(--star-soft); border-radius: var(--r-sm); padding: 14px 16px; display: grid; gap: 4px; }
.volgende .label { color: var(--link); }

/* ---------- feed */
.feed { display: grid; gap: 0; }
.bericht { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; min-width: 0; }
.bericht:first-child { border-top: 0; padding-top: 4px; }
.bericht-kop { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.bericht h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.bericht .meta { font-size: 13px; color: var(--ink-3); }
.bericht.kort { padding: 12px 0; }
.bericht.kort h3 { font-size: 15px; }
.bericht.kort .tekst { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.schrijver { display: grid; gap: 10px; margin-bottom: 8px; }

/* ---------- invoer */
.invoer {
  width: 100%; border: 1px solid var(--line-2); background: var(--panel); border-radius: 12px;
  padding: 9px 12px; font-size: 15px; min-height: 42px; transition: border-color .12s, box-shadow .12s;
}
.invoer:focus { outline: none; border-color: var(--ink-4); box-shadow: 0 0 0 3px var(--soft-2); }
.invoer::placeholder { color: #BDB9C4; }
textarea.invoer { resize: vertical; min-height: 96px; line-height: 1.5; }
select.invoer { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%239C98A5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; }
.invoer-klein { min-height: 32px; height: 32px; padding: 0 30px 0 10px; font-size: 13px; border-radius: 999px; background-position: right 8px center; width: auto; }
.veld { display: grid; gap: 6px; }
.veld > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.veld .hint { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.fout { color: var(--link); font-size: 14px; }

/* ---------- dialoog */
.dialoog {
  border: 0; border-radius: 22px; padding: 0; width: min(560px, calc(100vw - 24px));
  box-shadow: 0 30px 80px -20px rgba(18,16,22,.4); color: var(--ink);
}
.dialoog::backdrop { background: rgba(18,16,22,.36); backdrop-filter: blur(3px); }
.dialoog form { padding: 24px; display: grid; gap: 16px; max-height: calc(100vh - 40px); overflow-y: auto; }
.dialoog h2 { font-size: 21px; font-weight: 600; }
.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dialoog-knoppen .links { margin-right: auto; }
.momenten { display: grid; gap: 8px; }
.momenten div { display: flex; gap: 6px; }
.code-vak {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 22px; letter-spacing: .04em;
  background: var(--soft); border-radius: var(--r-sm); padding: 14px 16px; text-align: center; user-select: all;
}
.bericht-vak { background: var(--soft); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; white-space: pre-wrap; user-select: all; color: var(--ink-2); }

/* ---------- melding */
.melding {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 12px 30px -10px rgba(18,16,22,.5); z-index: 10; max-width: calc(100vw - 32px);
}
.melding.fout { background: var(--link); }

/* ---------- klantenlijst */
.klanten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.klantkaart {
  display: grid; gap: 10px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0;
}
.klantkaart:hover { border-color: var(--line-2); box-shadow: 0 10px 28px -16px rgba(18,16,22,.28); transform: translateY(-1px); }
.klantkaart h2 { font-size: 20px; font-weight: 600; }
.klantkaart .rij { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-3); }

/* ---------- fases */
.fases { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fase { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.fase.bezig { border-color: #E9DDFB; background: linear-gradient(180deg, #FBF8FF, var(--panel)); }
.fase-nr { font-family: var(--display); font-size: 30px; font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--ink-4); padding-top: 2px; }
.fase.klaar .fase-nr { color: var(--ink); }
.fase.bezig .fase-nr { color: var(--violet); }
.fase-kop { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.fase h3 { font-size: 18px; font-weight: 600; }
.fase .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.fase .tekst { margin-top: 6px; font-size: 14.5px; }

/* ---------- datumprikker */
.prikker { display: grid; gap: 14px; }
.opties { display: grid; gap: 8px; }
.optie {
  display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 10px 16px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px;
}
.optie.gekozen { border-color: var(--ok); background: var(--ok-soft); }
.optie-datum b { display: block; font-weight: 600; }
.optie-datum span { font-size: 13px; color: var(--ink-3); }
.antwoorden { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 3px; gap: 2px; }
.antwoorden button {
  border: 0; background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; color: var(--ink-2); font-weight: 500;
}
.antwoorden button:hover { background: var(--panel); }
.antwoorden button[aria-pressed="true"].ja { background: var(--ok); color: #fff; }
.antwoorden button[aria-pressed="true"].misschien { background: #F2C14E; color: var(--ink); }
.antwoorden button[aria-pressed="true"].nee { background: var(--ink-2); color: #fff; }
.stemmen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stem { font-size: 12.5px; border-radius: 999px; padding: 2px 9px; background: var(--soft); color: var(--ink-2); }
.stem.ja { background: var(--ok-soft); color: var(--ok); }
.stem.misschien { background: #FDF3D7; color: #7A5A00; }
.stem.nee { text-decoration: line-through; color: var(--ink-4); }

/* ---------- documenten en lijsten */
.lijst { display: grid; }
.regel { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.regel:first-child { border-top: 0; }
.regel-icoon { width: 38px; height: 38px; border-radius: 11px; background: var(--soft); display: grid; place-items: center; color: var(--ink-2); }
.regel-icoon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.regel a.titel { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.regel a.titel:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.regel .meta { font-size: 13px; color: var(--ink-3); }
.uploadvak {
  border: 1.5px dashed var(--line-2); border-radius: var(--r); padding: 18px; display: flex; gap: 12px;
  align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; transition: background .15s, border-color .15s;
}
.uploadvak.over { background: var(--star-soft); border-color: var(--star); }

.tabel-wrap { overflow-x: auto; margin: 0 -4px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.tabel th { text-align: left; font-weight: 500; font-size: 13px; color: var(--ink-3); padding: 0 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabel td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel td.acties { white-space: nowrap; text-align: right; width: 1%; }
.tabel .sterk { font-weight: 600; }
.tabel .sub { font-size: 13px; color: var(--ink-3); }
.tabel a { color: var(--link); text-decoration: none; }
.tabel a:hover { text-decoration: underline; }

.techniek { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tech { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.tech-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tech b { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tech b.open { color: var(--ink-4); font-weight: 400; }
.tech .tekst { font-size: 13.5px; }
.tech a { font-size: 13px; color: var(--link); text-decoration: none; overflow-wrap: anywhere; }

.waarschuwing { display: flex; gap: 10px; align-items: flex-start; background: var(--star-soft); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.waarschuwing svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: var(--link); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- inloggen */
.inlog { min-height: calc(100vh - 2 * var(--frame)); display: grid; place-items: center; padding: 32px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); position: relative; overflow: hidden; }
.inlog::before {
  content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -260px; border-radius: 50%; filter: blur(40px); opacity: .55;
  background: radial-gradient(circle at 40% 40%, #B47AFF, #7AB8FF 45%, #FF7A4D 65%, transparent 75%); pointer-events: none;
}
.inlog form { position: relative; width: min(400px, 100%); display: grid; gap: 16px; }
.inlog .brand { margin-bottom: 18px; }
.inlog h1 { font-size: 40px; }
.inlog p.dim { margin-top: -6px; }

@media (max-width: 860px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .optie { grid-template-columns: minmax(0, 1fr); }
  .fase { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .procent { font-size: 52px; }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wie { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- overleg */
.filter { display: inline-flex; background: var(--soft); border-radius: 999px; padding: 4px; gap: 2px; }
.filter button { border: 0; background: transparent; border-radius: 999px; height: 32px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(18,16,22,.08); }
.onderwerpen { display: grid; }
.onderwerp { display: grid; grid-template-columns: 10px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); text-decoration: none; border-radius: 10px; }
.onderwerp:first-child { border-top: 0; }
.onderwerp:hover { background: var(--soft); }
.onderwerp > svg { width: 18px; height: 18px; stroke: var(--ink-4); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.onderwerp-stip { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.onderwerp.nieuw .onderwerp-stip { background: var(--star); }
.onderwerp-titel { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.onderwerp.nieuw .onderwerp-titel { color: var(--ink); }
.onderwerp .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.gesprek-titel { font-size: 24px; font-weight: 600; line-height: 1.2; margin-bottom: 4px; }
.deel-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--star-soft); text-decoration: none; }
.deel-link:hover { background: #FFE5D9; }
.deel-link span { display: grid; min-width: 0; }
.deel-link span .dim { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deel-link svg { width: 20px; height: 20px; stroke: var(--link); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gesprek { margin-top: 20px; display: grid; gap: 16px; }
.berichten { display: grid; gap: 4px; }
.post { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.berichten .post:first-child { border-top: 0; }
.post-av { width: 34px; height: 34px; border-radius: 50%; background: var(--soft-2); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.post.eigen .post-av { background: var(--ink); color: #fff; }
.post-inhoud { display: grid; gap: 6px; min-width: 0; }
.post-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-kop .meta { font-size: 13px; color: var(--ink-3); }
.post-kop .icoonknop { margin-left: auto; width: 26px; height: 26px; }
.post-rol { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--link); background: var(--star-soft); border-radius: 999px; padding: 1px 8px; }
.tekst a, .punt-antwoord a { color: var(--link); text-underline-offset: 2px; }
.bijlage-beeld { display: block; max-width: 420px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.bijlage-beeld img { width: 100%; height: auto; display: block; }
.bijlage-bestand { display: inline-flex; align-items: center; gap: 8px; align-self: start; justify-self: start; padding: 8px 12px; border-radius: 10px; background: var(--soft); text-decoration: none; font-size: 14px; }
.bijlage-bestand svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reageer { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.reageer-voet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reageer-voet > .knop:last-child, .reageer-voet > button[type="submit"] { margin-left: auto; }
.vinkveld { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.vinkveld input { width: 16px; height: 16px; accent-color: var(--ink); }
.vinkveld.klein { font-size: 13px; }

/* ---------- verbeterrondes */
.ronde-uitleg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: stap; }
.ronde-uitleg li { counter-increment: stap; display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-3); }
.ronde-uitleg li b { color: var(--ink); font-size: 14px; }
.ronde-uitleg li b::before { content: counter(stap) ". "; color: var(--link); }
@media (max-width: 720px) { .ronde-uitleg { grid-template-columns: 1fr 1fr; } }
.ronde > details > summary { list-style: none; cursor: pointer; }
.ronde > details > summary::-webkit-details-marker { display: none; }
.ronde-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ronde-kop h2 { font-size: 20px; }
.ronde-kop .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.ronde-inhoud { display: grid; gap: 16px; margin-top: 18px; }
.ronde-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ronde-stappen li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--ink-4); text-align: center; }
.ronde-stappen li::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.ronde-stappen li:first-child::before { display: none; }
.ronde-stappen i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-2); }
.ronde-stappen li.klaar { color: var(--ink-2); }
.ronde-stappen li.klaar::before, .ronde-stappen li.nu::before { background: var(--ink); }
.ronde-stappen li.klaar i { background: var(--ink); border-color: var(--ink); }
.ronde-stappen li.nu { color: var(--ink); font-weight: 600; }
.ronde-stappen li.nu i { border-color: var(--star); background: var(--star); box-shadow: 0 0 0 4px var(--star-soft); }
.oplevering { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--ink); color: #EEECF2; border-radius: var(--r-sm); padding: 18px 20px; }
.oplevering .label { color: #FFB59B; }
.oplevering .tekst { color: #D9D6DF; }
.oplevering .tekst a { color: #FFB59B; }
.punten-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.punten-kop h3 { font-size: 16px; font-weight: 600; }
.punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.punt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.punt.gedaan { background: var(--ok-soft); border-color: transparent; }
.punt.gedaan .punt-tekst { color: var(--ink-3); }
.punt-nr { width: 26px; height: 26px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.punt.gedaan .punt-nr { background: var(--ok); color: #fff; }
.punt .meta { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.punt .bijlage-beeld { max-width: 280px; margin-top: 8px; }
.punt-antwoord { margin-top: 8px; font-size: 14px; background: var(--soft); border-radius: 8px; padding: 8px 10px; color: var(--ink-2); }
.punt-acties { justify-content: flex-end; }
@media (max-width: 620px) { .punt { grid-template-columns: 26px minmax(0, 1fr); } .punt-acties { grid-column: 2; justify-content: flex-start; } }
.punt-nieuw { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--soft); }
.ronde-acties:empty { display: none; }
.ronde-gesprek { border-top: 1px solid var(--line); padding-top: 12px; }
.ronde-gesprek > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); list-style: none; }
.ronde-gesprek > summary::-webkit-details-marker { display: none; }
.ronde-gesprek > summary svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ronde-gesprek .gesprek { margin-top: 12px; }
.blok.donker .pil.grijs, .blok.donker .pil.let-op { background: rgba(255,255,255,.1); color: #FFB59B; }

.stappen li b { font-weight: 500; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; }
.stappen.veel li { font-size: 12px; }

/* ---------- mobiel */
@media (max-width: 640px) {
  /* Geen inzoomen bij het typen op iPhone */
  .invoer, .reageer textarea, .punt-nieuw .invoer { font-size: 16px; }
  .inhoud { padding-top: 20px; }
  .kop { margin-bottom: 16px; }

  /* Alle tabs in beeld in plaats van een verborgen schuifrij */
  .tabs { flex-wrap: wrap; width: auto; border-radius: 18px; gap: 2px; margin-bottom: 20px; }
  .tabs a { padding: 8px 12px; font-size: 13.5px; }

  /* Koppen met knoppen: onder elkaar in plaats van samengeperst */
  .bericht-kop { flex-direction: column; align-items: stretch; gap: 10px; }
  .bericht-kop > .knoppen { justify-content: flex-start; }
  .gesprek-titel { font-size: 21px; }
  .blok-kop { flex-wrap: wrap; }

  /* Reacties: bewerkknop rechtsboven, tekst over de volle breedte */
  .post { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .post-av { width: 30px; height: 30px; font-size: 13px; }
  .post-inhoud { position: relative; }
  .post-kop { padding-right: 30px; }
  .post-kop .icoonknop { position: absolute; top: -4px; right: 0; }
  .bijlage-beeld { max-width: 100%; }
  .reageer-voet > button[type="submit"] { width: 100%; margin-left: 0; }

  /* Verbeterrondes */
  .ronde-kop { flex-direction: column; align-items: stretch; gap: 8px; }
  .ronde-kop > .knoppen { justify-content: flex-start; }
  .ronde-stappen li span { display: none; }
  .ronde-stappen li.nu span { display: block; position: absolute; top: 22px; white-space: nowrap; }
  .ronde-stappen { padding-bottom: 22px; }
  .oplevering .knoppen, .oplevering .knop { width: 100%; }
  .ronde-acties .knop { flex: 1 1 100%; }

  /* Lijstregels (gebruikers, documenten): knoppen onder de tekst */
  .regel { grid-template-columns: 38px minmax(0, 1fr); }
  .regel > .knoppen { grid-column: 2; }
  .regel .meta { overflow-wrap: anywhere; }

  /* Dialogen over bijna het hele scherm */
  .dialoog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .dialoog form { padding: 20px; }
  .dialoog-knoppen .knop { flex: 1 1 auto; }
}

/* Mail preview and the first visit use the existing portal colours and spacing. */
.demo-balk{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:#121016;color:#fff;font-size:13px;line-height:1.5}.demo-balk a{color:#ffbda7;white-space:nowrap}.demo-balk strong{color:#ffbda7}
.voorbeeld-kop{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.voorbeeld-kop h1{font:600 clamp(26px,4vw,38px)/1.1 var(--display);letter-spacing:-1px;margin:0 0 8px}.voorbeeld-kop p{margin:0}.mail-voorbeeld{max-width:900px;margin:0 auto;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#f3f0f6}.mail-adressen{display:grid;gap:10px;padding:22px 26px;background:#fff;font-size:13px;line-height:1.5}.mail-adressen>div{display:grid;grid-template-columns:90px 1fr;gap:14px}.mail-adressen span{overflow-wrap:anywhere}.mail-frame{display:block;width:100%;height:1100px;border:0;background:#f3f0f6}.dialoog-mail{width:min(760px,95vw);max-width:760px;padding:0}.mail-dialoog-kop{padding:24px}.mail-dialoog-kop h2{margin:0}.dialoog-mail .mail-frame{height:min(62vh,700px)}.dialoog-mail .dialoog-knoppen{margin:0;padding:20px 24px;border-top:1px solid var(--line)}.dialoog-mail>.fout{margin:16px 24px}.activatie>h1{margin-bottom:16px}.activatie>.dim{margin:0 0 24px}.activatie-adres{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;overflow-wrap:anywhere;margin-bottom:24px}.activatie-adres svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5}.activatie-vink{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ok-soft);color:var(--ok);margin:0 0 20px}.activatie-vink svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}.activatie-bevestigd{padding:12px;background:var(--ok-soft);color:var(--ok);border-radius:12px;font-size:14px}.activatie .knop{width:100%;justify-content:center}.activatie>.hint{font-size:12px;line-height:1.6;margin-top:18px}.activatie .veld>.hint{font-size:12px}.activatie{max-width:470px}
@media(max-width:600px){.demo-balk{align-items:start;padding:12px 16px;font-size:11px}.demo-balk span{max-width:75%}.voorbeeld-kop{align-items:start;flex-direction:column;gap:16px}.mail-adressen{padding:16px;font-size:11px}.mail-adressen>div{grid-template-columns:60px 1fr;gap:8px}.mail-frame{height:1200px}.dialoog-mail .dialoog-knoppen{padding:16px}.inlog form{padding-left:22px;padding-right:22px}}

/* Each update keeps its original message above a shared conversation. */
.update-reacties{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--ink);font-size:13px;text-decoration:none;min-height:36px}.update-reacties:hover{text-decoration:underline;text-underline-offset:4px}.update-reacties svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}.update-reacties .teller{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--star-soft);color:var(--link)}.update-detail{max-width:820px}.update-oorsprong{border-top:3px solid var(--star)}.update-oorsprong .gesprek-titel{margin:10px 0 18px}.demo-reactie-noot{font-size:12px;color:var(--ink-3);margin:-4px 0 22px}