/* De AI-Brouwerij — klantportaal (dashboard). Waarden uit tokens.json, zoals advies.css. */

@font-face { font-family: "Ubuntu"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/ubuntu-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/ubuntu-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/ubuntu-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/ubuntu-latin-700-normal.woff2") format("woff2"); }

:root {
  --primary: #d94b95;
  --primary-text: #c23a84;
  --secondary: #554596;
  --secondary-text: #554596;
  --primary-soft: #d94b950d;
  --primary-line: #d94b951a;
  --secondary-soft: #5545960d;
  --gradient-from: #d94b95;
  --gradient-to: #554596;
  --spark-amber: #ffb927;
  --background: #f8f9fa;
  --surface: #ffffff;
  --glass: #f8f9facc;
  --ink: #1f2937;
  --ink-muted: #6b7280;
  --line: #e5e7eb;
  --focus: #554596;
  --night: #120b21;
  --night-raised: #ffffff0d;
  --night-line: #ffffff14;
  --night-accent: #d94b951f;
  --night-accent-line: #d94b954d;
  --night-link: #e879b4;
  --focus-on-night: #a48fe0;
  --on-night: #f3f4f6;
  --on-night-muted: #9ca3af;
  --success: #008236;
  --success-soft: #f0fdf4;
  --success-line: #b9f8cf;
  --danger: #bf000f;
  --danger-soft: #fef2f2;
  --danger-line: #ffcaca;
  --meter-track: #d94b9526;   /* lichtere stap van primary: de lege balk hoort bij dezelfde kleur */
  --gradient: linear-gradient(90deg, var(--primary), var(--secondary));
  --gradient-diag: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-type: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
  --glow-sm: 0 10px 15px -3px rgba(217, 75, 149, .25), 0 4px 6px -4px rgba(217, 75, 149, .25);
  --radius-md: 12px;
  --radius-lg: 16px;
  --ease-brew: cubic-bezier(0.22, 1, 0.36, 1);
  --zb-breed: 264px;
  --zb-smal: 76px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-text: #e879b4;
    --secondary-text: #a48fe0;
    --primary-soft: #d94b951f;
    --primary-line: #d94b954d;
    --secondary-soft: #a48fe01f;
    --gradient-from: #e879b4;
    --gradient-to: #a48fe0;
    --background: #120b21;
    --surface: #1c1433;
    --glass: #120b21cc;
    --ink: #f3f4f6;
    --ink-muted: #9ca3af;
    --line: #374151;
    --focus: #a48fe0;
    --night: #0b0716;
    --success: #4ade80;
    --success-soft: #0f2a1c;
    --success-line: #1f5136;
    --danger: #f87171;
    --danger-soft: #2d1420;
    --danger-line: #5c2433;
    --meter-track: #d94b9540;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-family: "Ubuntu", ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: var(--background); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 16px; line-height: 1.6; background: var(--background); overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--primary-text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icoon { flex: none; width: 20px; height: 20px; }
.overslaan { position: absolute; left: 16px; top: -48px; z-index: 60; background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: var(--radius-md); }
.overslaan:focus { top: 12px; }

/* ---------- Typografie ---------- */
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--primary-text); margin: 0 0 8px; }
h1 { font-size: 40px; line-height: 44px; letter-spacing: -.6px; font-weight: 700; margin: 0; }
h2 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; }
h3 { font-size: 17px; line-height: 24px; font-weight: 700; margin: 0 0 4px; }
p { margin: 0 0 12px; }
.lead { font-size: 18px; line-height: 29px; color: var(--ink-muted); max-width: 760px; margin: 12px 0 0; }
.accent { background-image: var(--gradient-type); -webkit-background-clip: text; background-clip: text; color: transparent; }
.klein { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--primary-text); white-space: nowrap; }
.link .icoon { width: 16px; height: 16px; transition: transform .2s; }
.link:hover .icoon { transform: translateX(2px); }

/* ---------- Zijbalk ---------- */
.zijbalk {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--zb-breed);
  display: flex; flex-direction: column; gap: 20px; padding: 20px 14px 16px;
  background: var(--night); color: var(--on-night); overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid var(--night-line);
  transition: width .25s var(--ease-brew);
}
.zijbalk :focus-visible { outline-color: var(--focus-on-night); }
.zijbalk::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient); }
.zb-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
.zb-merk { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.zb-merk img { width: 32px; height: auto; flex: none; }
.zb-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-merk b, .zb-klant b { display: block; font-size: 15px; line-height: 20px; color: #fff; }
.zb-merk small, .zb-klant small { display: block; font-size: 12px; line-height: 16px; color: var(--on-night-muted); overflow: hidden; text-overflow: ellipsis; }
.zijbalk .zb-sluit { display: none; }

.zb-klant { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--night-raised); border: 1px solid var(--night-line); }
.zb-avatar, .zb-persoon { flex: none; width: 36px; height: 36px; border-radius: 9999px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--gradient-diag); }
.zb-persoon { width: 28px; height: 28px; font-size: 13px; background: #ffffff1f; }

.zb-nav { display: flex; flex-direction: column; gap: 2px; }
.zb-nav a, .zb-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-md); border: 0; background: none;
  font: 500 15px/20px "Ubuntu", sans-serif; color: var(--on-night-muted); text-decoration: none; text-align: left; cursor: pointer;
  transition: background .2s, color .2s;
}
.zb-nav a:hover, .zb-item:hover { background: var(--night-raised); color: #fff; }
.zb-nav a[aria-current="page"] { background: var(--night-accent); color: #fff; box-shadow: inset 0 0 0 1px var(--night-accent-line); }
.zb-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gradient-diag); }
.zb-nav a[aria-current="page"] .icoon { color: var(--night-link); }
.zb-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 9999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.zb-voet { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--night-line); }
.zb-inklap .icoon { transition: transform .25s var(--ease-brew); }

/* Ingeklapt (alleen op brede schermen) */
@media (min-width: 901px) {
  html.ingeklapt { --zb-breed: var(--zb-smal); }
  html.ingeklapt .zb-label { display: none; }
  html.ingeklapt .zb-kop, html.ingeklapt .zb-merk { justify-content: center; padding: 0; }
  html.ingeklapt .zb-klant { padding: 8px 0; justify-content: center; background: none; border-color: transparent; }
  html.ingeklapt .zb-nav a, html.ingeklapt .zb-item { justify-content: center; padding: 12px 0; }
  html.ingeklapt .zb-badge { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; line-height: 18px; }
  html.ingeklapt .zb-inklap .icoon { transform: rotate(180deg); }
}

/* ---------- Topbalk (mobiel) ---------- */
.topbalk { display: none; }
.ikoonknop { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); border: 0; background: none; color: inherit; cursor: pointer; }
.ikoonknop:hover { background: var(--primary-soft); }
.schaduw { display: none; }

/* ---------- Werkvlak ---------- */
.werkvlak { margin-left: var(--zb-breed); min-height: 100vh; padding: 0 40px; display: flex; flex-direction: column; transition: margin-left .25s var(--ease-brew); }
.werkvlak > * { width: 100%; max-width: 1160px; margin-left: auto; margin-right: auto; }
.kopregel { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; margin-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.kopregel p { margin: 0; }
.kopregel b { color: var(--ink); font-weight: 500; }
.bijgewerkt { display: flex; align-items: center; gap: 8px; }
.bijgewerkt::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--spark-amber); }
main { flex: 1; }
#inhoud:focus, #inhoud:focus-visible { outline: none; }  /* krijgt focus bij schermwissel, voor schermlezers */
html.js .view { display: none; }
html.js .view.actief { display: block; animation: binnen .4s var(--ease-brew); }
@keyframes binnen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view > * + * { margin-top: 24px; }
html:not(.js) .view + .view { margin-top: 64px; }
.viewkop { margin-bottom: 8px; }
.voet { padding: 40px 0 32px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.voet p { margin: 0; }
.voet a { color: inherit; }

/* ---------- Wie kijkt er mee ---------- */
.wie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--night); color: var(--on-night); }
.wie p { margin: 0; font-size: 15px; }
.wie p b { color: #fff; }
.wie-keuzes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wie-anders { display: flex; gap: 8px; }
.wie-anders input { font: 400 14px "Ubuntu", sans-serif; width: 140px; padding: 7px 14px; border-radius: 9999px; border: 1px solid #ffffff33; background: #ffffff0d; color: var(--on-night); }
.wie .knop.licht { background: #ffffff0d; border-color: #ffffff33; color: var(--on-night); }
.wie .knop.licht:hover { background: #ffffff1f; }

.melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; max-width: calc(100% - 32px); background: var(--night); color: var(--on-night); padding: 12px 20px; border-radius: var(--radius-md); font-size: 14px; box-shadow: 0 10px 30px #0004; }
.melding.fout { background: var(--danger); color: #fff; }

/* ---------- Kaarten ---------- */
.kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.kaart-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kaarten.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaarten .kaart p { font-size: 14px; line-height: 22.75px; color: var(--ink-muted); margin: 0; }
.kaart .nr { display: inline-block; width: 32px; height: 32px; border-radius: 9999px; background: var(--gradient-diag); color: #fff; font-weight: 700; font-size: 14px; line-height: 32px; text-align: center; margin-bottom: 14px; }
.kolom { display: grid; gap: 24px; align-content: start; min-width: 0; }
.raster-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.raster-offerte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* Welkom */
.welkom { position: relative; overflow: hidden; padding: 40px; border-radius: var(--radius-lg); border: 1px solid var(--primary-line);
  background: radial-gradient(circle at 85% 0%, #d94b9526, transparent 55%), radial-gradient(circle at 60% 120%, #55459620, transparent 50%), var(--surface); }
.welkom .hexraster { position: absolute; right: -40px; top: -40px; width: 460px; opacity: .55; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 15%, transparent 70%); mask-image: radial-gradient(circle at 70% 30%, #000 15%, transparent 70%); }
.welkom > * { position: relative; }
.welkom h1 { font-size: 48px; line-height: 52px; letter-spacing: -1px; }
.welkom-tekst { font-size: 17px; line-height: 27px; color: var(--ink-muted); max-width: 640px; margin: 14px 0 22px; }

/* Eerste bezoek (portaal.js): kop, dan even "typt...", dan de tekst woord voor woord, dan de knop */
html.welkom-nieuw .welkom > :not(.hexraster) { opacity: 0; }
.welkom.speelt { cursor: default; }
.welkom.speelt .eyebrow { animation: binnen .6s var(--ease-brew) both; }
.welkom.speelt h1 { animation: binnen .7s var(--ease-brew) .15s both; }
.welkom .typt { position: absolute; left: 0; top: 10px; display: flex; gap: 5px; animation: typt 1.1s .6s both; }
.welkom .typt i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: stip .9s ease-in-out infinite; }
.welkom .typt i:nth-child(2) { animation-delay: .15s; }
.welkom .typt i:nth-child(3) { animation-delay: .3s; }
.welkom.speelt .woord { display: inline-block; animation: woord .5s var(--ease-brew) both; animation-delay: calc(1.6s + var(--i) * 40ms); }
.welkom.speelt .knop { animation: binnen .5s var(--ease-brew) both; animation-delay: calc(1.9s + var(--n) * 40ms); }
@keyframes typt { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stip { 0%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes woord { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* Tegels (KPI-rij) */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.tegel { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.tegel.klikbaar:hover { border-color: var(--primary-line); transform: translateY(-2px); }
.tegel p { margin: 0; }
.tegel-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.tegel-label .icoon { width: 16px; height: 16px; color: var(--primary-text); }
.tegel-waarde { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.3px; }
.tegel-waarde.kleiner { font-size: 18px; line-height: 25px; letter-spacing: 0; }
.tegel-waarde small { font-size: 14px; font-weight: 400; color: var(--ink-muted); letter-spacing: 0; }
.tegel-sub { font-size: 13px; color: var(--ink-muted); margin-top: auto !important; }
.tegel-sub + .tegel-sub { margin-top: 4px !important; }
.tegel .meter { margin-top: auto; }

/* Meter: gevulde balk op een lichtere stap van dezelfde kleur */
.meter { height: 8px; border-radius: 9999px; background: var(--meter-track); overflow: hidden; }
.meter.dun { height: 6px; margin: -6px 0 16px; }
.meter span { display: block; height: 100%; width: 0; border-radius: 9999px; background: var(--gradient); transition: width .7s var(--ease-brew); }

/* Stapper: fases naast elkaar */
.stapper { list-style: none; margin: 0; padding: 0; display: flex; }
.stapper li { position: relative; flex: 1; min-width: 0; padding: 34px 12px 0 0; }
.stapper li:not(:last-child)::before { content: ""; position: absolute; left: 30px; right: 6px; top: 11px; height: 2px; background: var(--line); }
.stapper li.klaar:not(:last-child)::before { background: var(--gradient); }
.stapper .stip { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 9999px; border: 2px solid var(--line); background: var(--surface); }
.stapper .klaar .stip { border: none; background: var(--gradient-diag); }
.stapper .klaar .stip::after, .tijdlijn .stip::after { content: ""; position: absolute; left: 8.5px; top: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stapper .nu .stip { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft), 0 0 0 5px var(--primary-line); }
.stapper .nu .stip::after { content: ""; position: absolute; inset: 5px; border-radius: 9999px; background: var(--primary); }
.stapper b { display: block; font-size: 14px; line-height: 20px; }
.stapper small { display: block; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.stapper .straks b { color: var(--ink-muted); font-weight: 500; }
.stapper .nu b { color: var(--primary-text); }
/* Mogelijk vervolg: gestippeld, nog niet gekozen */
.stapper:not(.gekozen) li.optioneel .stip { border-style: dashed; }
.stapper:not(.gekozen) li.optioneel:not(:last-child)::before, .stapper:not(.gekozen) li:has(+ .optioneel)::before { background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.takengroep.later { background: transparent; border-style: dashed; }

/* Eerstvolgend */
.volgende-lijst { list-style: none; margin: 4px 0 0; padding: 0; }
.volgende-lijst a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; line-height: 22px; }
.volgende-lijst a:hover span { color: var(--primary-text); }
.volgende-lijst .rondje { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--ink-muted); }
.volgende-lijst .icoon { margin-left: auto; width: 16px; height: 16px; color: var(--ink-muted); }
.volgende-lijst .klaar-melding { padding: 12px 0; border-top: 1px solid var(--line); color: var(--success); font-weight: 500; }

/* Tijdlijn */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn li { position: relative; padding: 0 0 18px 38px; }
.tijdlijn li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--meter-track); }
.tijdlijn .stip { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 9999px; background: var(--gradient-diag); }
.tijdlijn .datum { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); margin: 0; line-height: 24px; }
.tijdlijn h3 { font-size: 15px; line-height: 22px; margin: 0 0 2px; }
.tijdlijn p:last-child { font-size: 14px; line-height: 21px; color: var(--ink-muted); margin: 0; }

/* Documenten */
.doclijst { list-style: none; margin: 0; padding: 0; }
.doclijst a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.doclijst a:hover b { color: var(--primary-text); }
.doclijst b { display: block; font-size: 15px; line-height: 21px; font-weight: 500; }
.doclijst small { display: block; font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.doclijst .icoon { margin-left: auto; color: var(--ink-muted); }
.pdf { flex: none; width: 36px; height: 44px; border-radius: 6px; background: var(--gradient-diag); color: #fff; font-weight: 700; font-size: 9px; letter-spacing: .8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }

/* Nachtkaart (contact) */
.kaart.nacht { background: var(--night); border-color: var(--night); color: var(--on-night); position: relative; overflow: hidden; }
.kaart.nacht::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gradient); }
.kaart.nacht .merkteken { width: 32px; margin-bottom: 14px; }
.kaart.nacht h2 { color: #fff; margin-bottom: 6px; }
.kaart.nacht p { color: var(--on-night-muted); font-size: 15px; }
.kaart.nacht .contact { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
.kaart.nacht a { display: inline-flex; align-items: center; gap: 10px; color: var(--night-link); text-decoration: none; font-size: 15px; overflow-wrap: anywhere; }
.kaart.nacht a:hover { text-decoration: underline; }
.kaart.nacht :focus-visible { outline-color: var(--focus-on-night); }

/* Tabellen */
.tabel-schuif { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); background: var(--background); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.5; }
tr:last-child td { border-bottom: none; }
td.nu { color: var(--ink-muted); white-space: nowrap; }
td.doel { font-weight: 700; color: var(--primary-text); white-space: nowrap; }

.pil { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; border: 1px solid; vertical-align: middle; }
.pil.hoog, .pil.status, .pil.open { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-text); }
.pil.middel { background: var(--secondary-soft); border-color: #5545962e; color: var(--secondary-text); }
.pil.laag { background: var(--background); border-color: var(--line); color: var(--ink-muted); }
.pil.klaar { background: var(--success-soft); border-color: var(--success-line); color: var(--success); }

.callout { padding: 16px 20px; border-radius: var(--radius-md); background: var(--primary-soft); border: 1px solid var(--primary-line); }
.callout p { margin: 0; font-weight: 500; }
.callout .callout-titel { font-weight: 700; margin-bottom: 4px; }
.callout .callout-titel + p { font-size: 14px; line-height: 22px; font-weight: 400; }
.takengroep .callout { margin-top: 20px; }

/* Offerte en afspraken */
.offerte { background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft)), var(--surface); border-color: var(--primary-line); }
/* Prijsfases: fase 1 is het startpunt, de rest volgt na het besluitmoment */
.prijsfase { border-radius: var(--radius-md); padding: 18px 20px; }
.prijsfase p { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.prijsfase-label { font-size: 11px !important; line-height: 16px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px !important; }
.prijsfase-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.prijsfase h3 { margin: 0; font-size: 18px; }
.prijsfase h3 small { font-size: 13px; font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.prijsfase .bedrag { margin: 0; font-weight: 700; white-space: nowrap; color: var(--ink); }
.prijsfase .bedrag small { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.prijsfase.start { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-diag) border-box; box-shadow: var(--glow-sm); }
.prijsfase.start .prijsfase-label { color: var(--primary-text); }
.prijsfase.start .bedrag { font-size: 24px; line-height: 30px; }
.prijsfase.vervolg { border: 1px dashed var(--line); background: var(--surface); }
.prijsfase.vervolg .prijsfase-label { color: var(--ink-muted); }
.prijsfase.vervolg h3 { color: var(--ink-muted); }
.prijsfase.vervolg .bedrag { font-size: 17px; color: var(--ink-muted); }
/* Akkoord op fase 1 */
.akkoord { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.akkoord .klein { margin: 8px 0 0; font-size: 13px; }
.akkoord-form { display: grid; gap: 14px; justify-items: start; }
.akkoord-vinkje { position: relative; padding: 14px 16px; border-radius: var(--radius-md); background: var(--primary-soft); border: 1px solid var(--primary-line); font-size: 14px; line-height: 22px; color: var(--ink); }
.akkoord-vinkje a { color: var(--primary-text); font-weight: 500; }
.akkoord .knop:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.akkoord-gegeven { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--success-soft); border: 1px solid var(--success-line); }
.akkoord-gegeven p { color: var(--ink) !important; margin: 0 !important; }
.akkoord-gegeven b { color: var(--success); }
.akkoord-vink { position: relative; flex: none; width: 24px; height: 24px; border-radius: 9999px; background: var(--success); }
.akkoord-vink::after { content: ""; position: absolute; left: 8.5px; top: 5px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.volgende-lijst .akkoord-regel a { font-weight: 700; color: var(--primary-text); }
.volgende-lijst .akkoord-regel .rondje { border-color: var(--primary); background: var(--primary-soft); }
.besluit { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0; padding: 14px 4px 14px 10px; position: relative; }
.besluit::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 2px; background: var(--meter-track); }
.besluit-stip { position: relative; flex: none; width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--primary-line); color: var(--primary-text); }
.besluit-stip .icoon { width: 16px; height: 16px; }
.besluit p { margin: 5px 0 0; font-size: 14px; line-height: 22px; }
.totaal-klein { margin: 16px 0 12px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.offerte .klein { margin-bottom: 8px; }
.offerte .link { margin-top: 8px; }
.afspraken ul { list-style: none; margin: 0; padding: 0; }
.afspraken li { padding: 14px 0; border-top: 1px solid var(--line); }
.afspraken li p { margin: 0 0 6px; font-size: 15px; line-height: 23px; }
.afspraken small { font-size: 13px; color: var(--ink-muted); }

/* ---------- Taken ---------- */
.groep-teller { font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
.groep-teller b { color: var(--ink); }
.groep-intro { margin: 0 0 4px; }
.verwijzing { margin-top: 16px !important; }
.taken { list-style: none; margin: 0; padding: 0; }
.taak { padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.taak:first-child { border-top: 0; padding-top: 4px; }
.taak.uitgelicht { animation: uitlichten 1.6s var(--ease-brew); }
@keyframes uitlichten { 0%, 40% { background: var(--primary-soft); box-shadow: 0 0 0 8px var(--primary-soft); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.vink { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.vink input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vakje { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; border: 2px solid var(--ink-muted); background: var(--surface); position: relative; transition: background .2s, border-color .2s; }
.vink:hover .vakje { border-color: var(--primary); }
.vink input:focus-visible + .vakje { outline: 2px solid var(--focus); outline-offset: 2px; }
.vink input:checked + .vakje { border-color: transparent; background: var(--gradient-diag); }
.vink input:checked + .vakje::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.taaktekst b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
.taaktekst .uitleg { display: block; font-size: 14px; line-height: 22px; color: var(--ink-muted); margin-top: 2px; }
.taak.klaar .taaktekst b { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--primary); text-decoration-thickness: 2px; }
.antwoord { position: relative; margin: 12px 0 0 38px; }
.antwoord textarea { width: 100%; font: 400 15px/1.5 "Ubuntu", sans-serif; color: var(--ink); background: var(--background); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px 22px; resize: vertical; min-height: 64px; }
.antwoord textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; background: var(--surface); }
.opslaan { position: absolute; right: 12px; bottom: 8px; font-size: 12px; color: var(--ink-muted); pointer-events: none; }
.opslaan.ok { color: var(--success); }
.opslaan.fout { color: var(--danger); }
.naar-mail { margin: 8px 0 0 38px; }
.door { font-size: 12px; color: var(--ink-muted); margin: 6px 0 0 38px; }
.door:empty { display: none; }

/* Koppelingen: stappen */
.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.stappen li { counter-increment: stap; position: relative; padding: 0 0 20px 48px; }
.stappen li::before { content: counter(stap); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 9999px; background: var(--gradient-diag); color: #fff; font-weight: 700; font-size: 14px; line-height: 32px; text-align: center; }
.stappen li.straks::before { background: var(--surface); color: var(--ink-muted); border: 2px solid var(--line); line-height: 28px; }
.stappen li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line); }
.stappen li:last-child { padding-bottom: 0; }
.stappen b { font-size: 16px; }
.stappen p { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 4px 0 0; }

/* ---------- Mails ---------- */
.mails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.mail { scroll-margin-top: 80px; }
.mailkop { margin: 0 0 16px; font-size: 14px; }
.mailkop div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mailkop dt { width: 80px; flex: none; color: var(--ink-muted); }
.mailkop dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.mail-let-op { font-size: 14px; line-height: 22px; padding: 12px 14px; border-radius: var(--radius-md); background: #ffb9271f; border: 1px solid #ffb92766; margin: 0 0 16px; }
.mailtekst { font: 400 14px/1.6 "Ubuntu", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 20px; padding: 16px; background: var(--background); border-radius: var(--radius-md); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 15px/20px "Ubuntu", sans-serif; padding: 10px 20px; border-radius: 9999px; border: 1px solid transparent; background: var(--gradient); color: #fff; text-decoration: none; cursor: pointer; box-shadow: var(--glow-sm); transition: transform .2s, box-shadow .2s; }
.knop .icoon { width: 18px; height: 18px; }
.knop:hover { transform: translateY(-1px); }
.knop.licht { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.knop.licht:hover { border-color: var(--ink-muted); }
.knop.klein { font-size: 14px; padding: 7px 16px; }

/* ---------- Bestanden ---------- */
.bestand { display: flex; gap: 20px; align-items: flex-start; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.bestand:hover { border-color: var(--primary-line); transform: translateY(-2px); }
.bestand .pdf { width: 52px; height: 64px; font-size: 12px; padding-bottom: 10px; border-radius: 8px; }
.bestand b { display: block; font-size: 17px; line-height: 24px; margin-bottom: 4px; }
.bestand small { display: block; font-size: 14px; line-height: 22px; color: var(--ink-muted); margin-bottom: 8px; }
.bestand .link .icoon { width: 16px; height: 16px; }
.bestand-knoppen { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Overzicht: het advies staat bovenaan, als startpunt */
.begin-hier { border-color: var(--primary-line); background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft)), var(--surface); }
.begin-hier .kaarten { margin-top: 16px; }
.begin-hier .bestand { background: var(--surface); }

/* ---------- Loginpagina ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; position: relative; overflow: hidden; }
.login .gloed { position: absolute; border-radius: 9999px; filter: blur(64px); opacity: .5; pointer-events: none; width: 384px; height: 384px; }
.login .g1 { right: 10%; top: -80px; background: #d94b9533; }
.login .g2 { left: 8%; bottom: -60px; background: #55459633; }
.login .kaart { position: relative; width: 100%; max-width: 420px; padding: 40px 32px; text-align: center; box-shadow: 0 20px 25px -5px #0000000d; }
.login .logo { height: 36px; margin-bottom: 28px; }
.login h1 { font-size: 28px; line-height: 34px; letter-spacing: -.3px; margin-bottom: 8px; }
.login p { color: var(--ink-muted); font-size: 15px; }
.login form { display: grid; gap: 12px; margin-top: 24px; text-align: left; }
.login label { font-size: 14px; font-weight: 500; }
.login input { font: 400 16px "Ubuntu", sans-serif; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.login input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.login .knop { width: 100%; padding: 12px 20px; margin-top: 4px; }
.login .fout { color: var(--danger); font-size: 14px; margin: 0; min-height: 22px; }
.login .klein { margin-top: 24px; }

/* ---------- Middelbrede schermen ---------- */
@media (max-width: 1180px) {
  .raster-2, .raster-offerte { grid-template-columns: minmax(0, 1fr); }
  .kaarten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .mails { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mobiel: topbalk vast bovenaan, zijbalk als schuiflade ---------- */
@media (max-width: 900px) {
  .topbalk {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px;
    height: 60px; padding: 0 12px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .topbalk-merk { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
  .topbalk-merk img { width: 26px; flex: none; }
  .topbalk-merk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbalk-teller { margin-left: auto; flex: none; padding: 4px 12px; border-radius: 9999px; background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--primary-text); font-size: 13px; text-decoration: none; }
  .topbalk-teller b { font-weight: 700; }

  .zijbalk { width: min(300px, 86vw); transform: translateX(-100%); transition: transform .3s var(--ease-brew), visibility .3s; visibility: hidden; box-shadow: 0 0 40px #0006; }
  html.menu-open .zijbalk { transform: none; visibility: visible; }
  .zijbalk .zb-sluit { display: inline-grid; color: var(--on-night); }
  .zijbalk .zb-sluit:hover { background: var(--night-raised); }
  .zb-inklap { display: none; }
  .schaduw { display: block; position: fixed; inset: 0; z-index: 35; border: 0; padding: 0; background: #120b2199; opacity: 0; pointer-events: none; transition: opacity .3s; }
  html.menu-open .schaduw { opacity: 1; pointer-events: auto; }
  html.menu-open body { overflow: hidden; }

  .werkvlak { margin-left: 0; padding: 0 16px; }
  .kopregel { display: none; }
  main { padding-top: 20px; }
  .taak, .mail { scroll-margin-top: 76px; }
}
@media (max-width: 640px) {
  h1 { font-size: 30px; line-height: 36px; }
  .welkom { padding: 24px 20px; }
  .welkom h1 { font-size: 36px; line-height: 40px; }
  .welkom .hexraster { width: 300px; }
  .lead { font-size: 16px; line-height: 26px; }
  .kaart { padding: 20px; }
  .kaarten.twee { grid-template-columns: minmax(0, 1fr); }
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tegel { padding: 16px; }
  .tegel-waarde { font-size: 22px; line-height: 28px; }
  .tegel-waarde.kleiner { font-size: 15px; line-height: 21px; }
  .stapper { flex-direction: column; }
  .stapper li { padding: 0 0 16px 38px; min-height: 40px; }
  .stapper li:not(:last-child)::before { left: 11px; right: auto; top: 28px; bottom: 2px; width: 2px; height: auto; }
  .stapper:not(.gekozen) li.optioneel:not(:last-child)::before, .stapper:not(.gekozen) li:has(+ .optioneel)::before { background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 11px); }
  .stapper li.klaar:not(:last-child)::before { background: var(--gradient-diag); }
  .antwoord, .naar-mail, .door { margin-left: 0; }
  .tabel-schuif table { min-width: 560px; }
  .wie { padding: 14px 16px; }
}
@media (max-width: 380px) {
  .tegels { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .zijbalk, .topbalk, .schaduw, .wie, .melding, .knoppen, .kopregel { display: none !important; }
  .werkvlak { margin: 0; padding: 0; }
  html.js .view { display: block !important; }
}