/* ============================================
   Homepage — geldstroom-animatie "Van werkdag naar duidelijkheid"
   Hoort bij /js/geldstroom.js (NL + EN). Kleuren = Color System v4 +
   domeinkleuren uit de app (Asset Catalog, dark appearance). Sectie is altijd donker.
   ============================================ */
.zf {
    /* Domeinkleuren = app Asset Catalog (dark appearance) */
    --zf-jij: var(--brand-500);
    --zf-salon: #EA8F79;      /* domainHost */
    --zf-product: #DB8DC2;    /* domainProducts */
    --zf-fooi: #E98B9A;       /* domainTips */
    --zf-pin: #70B0F1;        /* domainPIN */
    --zf-cash: #E39761;       /* domainCash */
    --zf-kadobon: #AA9EEE;    /* domainVoucherHost */
    --zf-btw: var(--n-400);
    --zf-bg: #000;
    --zf-card: #0C1211;
    --zf-fg: #fff;
    --zf-fg-2: rgba(255,255,255,0.7);
    --zf-dim: rgba(255,255,255,0.45);
    --zf-faint: rgba(255,255,255,0.32);
    --zf-line: rgba(255,255,255,0.08);
    --zf-surface: rgba(255,255,255,0.04);
    --zf-chair-fill: #0B1A17;
    --zf-chair-line: var(--brand-500);
    --zf-neg-fg: #FBC3B5;
    --zf-seg-on: var(--brand-900);
    max-width: 1000px; margin: 0 auto; font-size: 14px; line-height: 1.4; color: var(--zf-fg);
    font-variant-numeric: tabular-nums;
}
.zf-vak { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 14px; max-width: 760px; }
.zf-vak button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--zf-dim); background: var(--zf-surface);
    border: 1px solid var(--zf-line); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.zf-vak button:hover { color: var(--zf-fg); }
.zf-vak button[aria-pressed="true"] { color: var(--zf-jij); border-color: color-mix(in srgb, var(--zf-jij) 45%, transparent); background: color-mix(in srgb, var(--zf-jij) 8%, transparent); }
.zf-vak button:focus-visible { outline: 2px solid var(--zf-jij); outline-offset: 2px; }
.zf-controls { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.zf-seg { display: inline-flex; background: var(--zf-surface); border: 1px solid var(--zf-line); border-radius: var(--radius-pill); padding: 3px; }
.zf-seg button, .zf-pause { font: inherit; font-size: 13px; font-weight: 600; color: var(--zf-dim); background: none; border: 0;
    border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: color .2s, background .2s; }
.zf-seg button[aria-pressed="true"] { background: var(--zf-seg-on); color: var(--zf-jij); }
.zf-seg button:focus-visible, .zf-pause:focus-visible, .zf-steps button:focus-visible { outline: 2px solid var(--zf-jij); outline-offset: 2px; }
.zf-pause { border: 1px solid var(--zf-line); width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
.zf-pause svg { width: 14px; height: 14px; fill: currentColor; }

.zf-steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; list-style: none; }
.zf-steps button { font: inherit; font-size: 12px; font-weight: 600; color: var(--zf-faint); background: none; border: 0;
    padding: 6px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; }
.zf-steps .zf-bar { display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--zf-line); overflow: hidden; }
.zf-steps .zf-bar i { display: block; height: 100%; width: 0; background: var(--zf-jij); }
.zf-steps button[aria-current="step"] { color: var(--zf-jij); }
.zf-steps button.done .zf-bar i { width: 100%; }

.zf-caption { text-align: center; min-height: 78px; margin: 18px auto 8px; max-width: 560px; }
.zf-caption h3 { font-size: 20px; font-weight: 700; color: var(--zf-fg); letter-spacing: -0.01em; }
.zf-caption p { font-size: 14px; color: var(--zf-dim); margin-top: 4px; }

.zf-stage { display: grid; }
.zf-act { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.zf[data-act="0"] .zf-act[data-act="0"], .zf[data-act="1"] .zf-act[data-act="1"],
.zf[data-act="2"] .zf-act[data-act="2"], .zf[data-act="3"] .zf-act[data-act="3"] { opacity: 1; visibility: visible; transition: opacity .5s ease .15s; }

/* ---- Act 1: werkdag ---- */
.zf-flow { position: relative; display: grid; grid-template-columns: 150px minmax(240px, 280px) 260px; justify-content: space-between;
    align-items: center; padding: 56px 40px 56px 0; }
.zf-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.zf-lines path.zf-path { fill: none; stroke: var(--zf-line); stroke-width: 1.5; transition: stroke .3s; }
.zf-lines path.zf-path.on { stroke: color-mix(in srgb, var(--zf-jij) 28%, transparent); }
.zf-lines path.zf-path.bypass { stroke-dasharray: 3 5; }
.zf-lines .zf-tok text { font-size: 12px; font-weight: 700; fill: var(--zf-fg); paint-order: stroke; stroke: var(--zf-bg); stroke-width: 4px; stroke-linejoin: round; }

.zf-col { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.zf-card { background: var(--zf-card); border: 1px solid var(--zf-line); border-radius: var(--radius-md); padding: 12px 14px;
    transition: border-color .3s, box-shadow .3s; position: relative; }
.zf-card .zf-t { font-weight: 700; color: var(--zf-fg); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.zf-card .zf-s { font-size: 12px; color: var(--zf-dim); margin-top: 2px; }
/* Subtekst bestemmingen: altijd precies 2 regels hoog, ongeacht vak of afspraak */
.zf-dest .zf-card .zf-t { white-space: nowrap; }
.zf-dest .zf-card .zf-s { height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zf-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.zf-card.hit { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.zf-kassa .zf-card { display: flex; align-items: center; gap: 10px; padding: 12px; }
.zf-kassa .zf-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.zf-kassa .zf-ico svg { width: 18px; height: 18px; }
.zf-kassa .zf-amt { font-size: 12px; color: var(--zf-dim); min-width: 5ch; }

.zf-center { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; z-index: 1; }
.zf-cat { width: 100%; padding: 12px 14px 10px; }
.zf-cat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--zf-faint); margin-bottom: 6px; }
.zf-cat ul { list-style: none; min-height: calc(var(--zf-cat-rijen, 7) * 23.5px); }   /* langste prijslijst van alle vakken */
.zf-cat li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--zf-fg-2);
    padding: 3px 6px; margin: 0 -6px; border-radius: 6px; transition: background .25s, color .25s; }
.zf-cat li .zf-own { font-size: 10px; font-weight: 700; color: var(--zf-product); border: 1px solid color-mix(in srgb, var(--zf-product) 45%, transparent);
    border-radius: 4px; padding: 0 4px; margin-left: 6px; }
.zf-cat li.on { background: color-mix(in srgb, var(--zf-jij) 12%, transparent); color: var(--zf-fg); }
.zf-cat li.on.prod { background: color-mix(in srgb, var(--zf-product) 16%, transparent); }
.zf-bon { border-top: 1px dashed var(--zf-line); margin-top: 8px; padding-top: 8px; font-size: 12px; color: var(--zf-dim); min-height: 51px; }
.zf-bon b { color: var(--zf-fg); font-weight: 700; }
.zf-bon .f { color: var(--zf-fooi); } .zf-bon .p { color: var(--zf-product); } .zf-bon .e { color: var(--zf-jij); }
.zf-cat li .zf-own.jij { color: var(--zf-jij); border-color: color-mix(in srgb, var(--zf-jij) 45%, transparent); }

.zf-chair { width: 220px; position: relative; }
.zf-chair svg { width: 100%; height: auto; display: block; overflow: visible; }
.zf-chair .zf-chair-body { transition: filter .35s; }
.zf-chair.pulse .zf-chair-body { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--zf-jij) 55%, transparent)); }
.zf-chair-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--zf-faint); margin-top: 12px; }
.zf-split { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 6px; min-height: 56px; }   /* ruimte voor 2 rijen */
.zf-split span { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill);
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.zf-split span.in { opacity: 1; transform: none; }

.zf-dest .zf-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; }
.zf-dest .zf-card > div:not(.zf-v) { min-width: 0; }
.zf-dest .zf-v { font-size: 17px; font-weight: 700; color: var(--c); grid-row: 1 / span 2; grid-column: 2; min-width: 5.4em; text-align: right; }
.zf-dest [data-dest="jij"] { background: linear-gradient(0deg, color-mix(in srgb, var(--zf-jij) 6%, transparent), color-mix(in srgb, var(--zf-jij) 6%, transparent)), var(--zf-card); border-color: color-mix(in srgb, var(--zf-jij) 25%, transparent); }
.zf-dest [data-dest="jij"] .zf-v { font-size: 20px; min-width: 5.6em; }

.zf-daysum { text-align: center; margin-top: 4px; min-height: 48px; font-size: 15px; color: var(--zf-dim); opacity: 0; transition: opacity .5s; }
.zf-daysum.in { opacity: 1; }
.zf-daysum b { color: var(--zf-fg); } .zf-daysum .j { color: var(--zf-jij); font-weight: 700; } .zf-daysum .f { color: var(--zf-fooi); font-weight: 700; }

/* ---- Act 2: maand ---- */
.zf-month { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 860px; margin: 0 auto; padding: 24px 0; }
.zf-cal-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--zf-dim); margin-bottom: 10px; }
.zf-cal-h b { color: var(--zf-fg); font-size: 15px; }
.zf-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.zf-cal .wd { font-size: 11px; text-align: center; color: var(--zf-faint); font-weight: 600; }
.zf-cal .d { aspect-ratio: 1; border-radius: 8px; background: var(--zf-surface); border: 1px solid var(--zf-surface);
    font-size: 10px; color: var(--zf-faint); padding: 4px 5px; display: flex; flex-direction: column; justify-content: space-between;
    transition: background .35s, border-color .35s, color .35s; }
.zf-cal .d em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--zf-jij); opacity: 0; transition: opacity .35s; align-self: flex-end; }
.zf-cal .d.work.on { background: color-mix(in srgb, var(--zf-jij) 10%, transparent); border-color: color-mix(in srgb, var(--zf-jij) 30%, transparent); color: var(--zf-fg-2); }
.zf-cal .d.work.on em { opacity: 1; }
.zf-mtot .zf-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zf-faint); }
.zf-mtot .zf-big { font-size: clamp(34px, 5vw, 46px); font-weight: 700; color: var(--zf-jij); letter-spacing: -0.02em; line-height: 1.15; }
.zf-mtot .zf-big-s { font-size: 13px; color: var(--zf-dim); margin-bottom: 22px; }
.zf-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--zf-surface); gap: 2px; }
.zf-stack i { display: block; height: 100%; background: var(--c); width: 0; transition: width .5s ease; }
.zf-legend { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.zf-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zf-fg-2); }
.zf-legend li b { margin-left: auto; color: var(--zf-fg); font-weight: 600; }
.zf-legend li.sep { border-top: 1px solid var(--zf-line); padding-top: 8px; margin-top: 4px; }

/* ---- Act 3: afsluiten ---- */
.zf-close { max-width: 720px; margin: 0 auto; padding: 16px 0; }
.zf-tbl { background: var(--zf-card); border: 1px solid var(--zf-line); border-radius: var(--radius-lg); overflow: hidden; }
.zf-tr { display: grid; grid-template-columns: 1.5fr 1fr 1fr 32px; gap: 10px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--zf-line);
    opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s, background .35s; }
.zf-tr.in { opacity: 1; transform: none; }
.zf-tr:first-child { border-top: 0; }
.zf-tr.head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--zf-faint); opacity: 1; transform: none; }
.zf-tr .n { color: var(--zf-fg-2); font-size: 13.5px; }
.zf-tr .a, .zf-tr .b { text-align: right; font-weight: 600; font-size: 14px; }
.zf-tr .b s { color: var(--zf-faint); font-weight: 400; margin-right: 6px; }
.zf-tr .ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; justify-self: end; font-size: 12px; font-weight: 700; }
.zf-tr .ok.y { background: color-mix(in srgb, var(--zf-jij) 14%, transparent); color: var(--zf-jij); }
.zf-tr .ok.x { background: color-mix(in srgb, var(--status-negative) 18%, transparent); color: var(--status-negative); }
.zf-tr.diff { background: color-mix(in srgb, var(--status-negative) 7%, transparent); }
.zf-tr.total .n, .zf-tr.total .a, .zf-tr.total .b { color: var(--zf-fg); font-weight: 700; }
.zf-note { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-md); font-size: 14px; opacity: 0; transition: opacity .4s, background .4s, color .4s;
    background: color-mix(in srgb, var(--status-negative) 10%, transparent); color: var(--zf-neg-fg); }
.zf-note.in { opacity: 1; }
.zf-note.good { background: color-mix(in srgb, var(--zf-jij) 10%, transparent); color: var(--zf-jij); }
.zf .pro-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--zf-fg);
    background: var(--brand-900); padding: 2px 8px; border-radius: var(--radius-xs); margin-left: 6px; vertical-align: 3px; }

/* ---- Act 4: rapporten ---- */
.zf-exports { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: 1000px; margin: 0 auto; padding: 24px 0; }
@media (max-width: 980px) { .zf-exports { grid-template-columns: repeat(3, 1fr); max-width: 640px; } }
/* Specificatie van de host: ander systeem, tabelvorm */
.zf-host { background: #EEF1F0; }
.zf-host i.r { height: 9px; border-radius: 2px; background: repeating-linear-gradient(90deg, #D5DDDA 0 30%, transparent 30% 36%, #D5DDDA 36% 62%, transparent 62% 68%, #D5DDDA 68% 100%); margin-bottom: 6%; }
.zf-host .num { color: var(--n-700); }
/* Vergelijking: twee kolommen naast elkaar, één afwijkende regel */
.zf-cmp i.d { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #D5DDDA 0 44%, transparent 44% 56%, #D5DDDA 56% 100%); margin-bottom: 8%; }
.zf-cmp i.d.x { background: linear-gradient(90deg, #F5B7A8 0 44%, transparent 44% 56%, #F5775C 56% 100%); }
.zf-page .num.warn { color: #D9553A; }
.zf-ai-chip { position: absolute; right: 7%; top: 7%; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
    color: #fff; background: linear-gradient(135deg, #0A8379, #4FD4BE); border-radius: 999px; padding: 3px 7px 3px 5px; box-shadow: 0 2px 8px rgba(10,131,121,.35); }
.zf-ai-chip svg { width: 11px; height: 11px; fill: currentColor; }
.zf-doc-ai.in .zf-ai-chip { animation: zf-ai 2.4s ease-in-out .9s infinite; }
@keyframes zf-ai { 0%, 100% { box-shadow: 0 2px 8px rgba(10,131,121,.35); } 50% { box-shadow: 0 2px 16px rgba(79,212,190,.8); } }
.zf-doc-ai { border-color: color-mix(in srgb, var(--zf-jij) 30%, transparent); }
.zf-doc { background: var(--zf-card); border: 1px solid var(--zf-line); border-radius: var(--radius-md); padding: 14px; opacity: 0; transform: translateY(14px) scale(.97);
    transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.zf-doc.in { opacity: 1; transform: none; }
.zf-page { aspect-ratio: 0.72; border-radius: 8px; background: #F5F8F7; padding: 10% 11%; margin-bottom: 12px; position: relative; overflow: visible; }
.zf-page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--acc); border-radius: 8px 8px 0 0; }
.zf-page i { display: block; height: 5px; border-radius: 3px; background: #D5DDDA; margin-bottom: 7%; }
.zf-page i.h { background: var(--acc); width: 50%; height: 7px; margin-bottom: 12%; opacity: .85; }
.zf-page i { width: 78%; } .zf-page i.s { width: 58%; } .zf-page i.m { width: 70%; } .zf-page i.r, .zf-page i.d { width: 100%; }
.zf-page .num { position: absolute; left: 9%; bottom: 9%; font-size: clamp(17px, 1.9vw, 22px); font-weight: 800; letter-spacing: -0.02em;
    color: var(--acc); line-height: 1; transform-origin: 0 100%; opacity: 0; transform: scale(.4); }
.zf-doc.in .num { animation: zf-pop .75s cubic-bezier(.2,1.5,.4,1) .3s forwards; }
@keyframes zf-pop {
    0%   { opacity: 0; transform: scale(.4) translateY(6px); }
    55%  { opacity: 1; transform: scale(1.32) translate(-6%, -4px); text-shadow: 0 6px 18px color-mix(in srgb, var(--acc) 45%, transparent); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .zf-page .num, .zf-doc.in .num { animation: none; opacity: 1; transform: none; } }
.zf-page .qr { position: absolute; right: 9%; top: 9%; width: 17%; aspect-ratio: 1; border-radius: 3px;
    background: conic-gradient(from 90deg at 50% 50%, #1A2623 0 25%, #D5DDDA 0 50%, #1A2623 0 75%, #D5DDDA 0) 0 0 / 50% 50%; opacity: .7; }
.zf-doc .zf-t { font-weight: 700; font-size: 14px; color: var(--zf-fg); }
.zf-doc .zf-s { font-size: 12px; color: var(--zf-dim); margin-top: 2px; }
.zf-mb { display: grid; place-items: center; background: #0E2A4A; }
.zf-mb::before { background: #70B0F1; }
.zf-mb span { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.zf-exp-note { text-align: center; font-size: 13px; color: var(--zf-dim); margin-top: 6px; opacity: 0; transition: opacity .5s; }
.zf-exp-note.in { opacity: 1; }

.zf-how { max-width: 520px; margin: 28px auto 0; font-size: 13px; color: var(--zf-dim); }
.zf-how summary { cursor: pointer; text-align: center; font-weight: 600; color: var(--zf-dim); list-style: none; }
.zf-how summary::-webkit-details-marker { display: none; }
.zf-how summary::after { content: " +"; } .zf-how[open] summary::after { content: " −"; }
.zf-how ol { list-style: none; margin-top: 12px; border: 1px solid var(--zf-line); border-radius: var(--radius-md); padding: 12px 16px; background: var(--zf-card); }
.zf-how li { display: flex; justify-content: space-between; padding: 3px 0; }
.zf-how li.sub { padding-left: 12px; } .zf-how li.tot { border-top: 1px solid var(--zf-line); margin-top: 4px; padding-top: 7px; color: var(--zf-fg); font-weight: 700; }
.zf-how li.tot b { color: var(--zf-jij); }
.zf-how .fine { margin-top: 8px; font-size: 12px; color: var(--zf-faint); text-align: center; }
.zf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Mobiel: alles onder elkaar ---- */
@media (max-width: 760px) {
    .zf-act { align-self: start; }
    .zf-vak { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
    .zf-vak::-webkit-scrollbar { display: none; }
    .zf-vak button { flex: none; }
    /* Afspraakknoppen: vaste hoogte (2 regels), zodat een vakwissel niets laat verspringen */
    .zf-seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 18px; }
    .zf-seg button { padding: 0 8px; font-size: 12px; height: 40px; line-height: 1.25; border-radius: 15px; display: flex; align-items: center; justify-content: center; text-align: center; }
    .zf-flow { grid-template-columns: 1fr; justify-content: stretch; gap: 26px; padding: 8px 0 8px; }
    .zf-kassa { flex-direction: row; gap: 8px; }
    .zf-kassa .zf-card { flex: 1; flex-direction: column; gap: 4px; padding: 10px 6px; text-align: center; }
    .zf-kassa .zf-card .zf-t { justify-content: center; font-size: 13px; }
    .zf-kassa .zf-amt { font-size: 11px; }
    .zf-center { gap: 16px; }
    .zf-cat { width: auto; margin: 0 26px; }
    .zf-cat li:not(.on) { display: none; }
    .zf-cat ul { min-height: 47px; }   /* dienst + product */
    .zf-caption { min-height: 100px; }
    .zf-daysum { min-height: 66px; }
    .zf-chair { width: 170px; }
    .zf-dest { padding: 0 22px; gap: 8px; }
    .zf-dest .zf-v { font-size: 16px; min-width: 5.4em; }
    .zf-dest [data-dest="jij"] .zf-v { font-size: 18px; min-width: 5em; }
    .zf-dest .zf-card { padding: 9px 12px; }
    .zf-dest .zf-s { font-size: 11px; }
    .zf-month { grid-template-columns: 1fr; gap: 28px; }
    .zf-tr { grid-template-columns: 1.3fr 1fr 1fr 24px; padding: 10px 12px; gap: 6px; }
    .zf-tr .n { font-size: 12.5px; } .zf-tr .a, .zf-tr .b { font-size: 13px; }
    .zf-exports { grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: none; }
    .zf-steps button { min-width: 0; flex: 1; padding: 6px 2px; font-size: 11px; }
}
/* Stoel volgt het thema (verlopen via CSS-tokens) */
.zf { --zf-u1: #1F6B60; --zf-u2: #0A221E; --zf-c1: #F5F8F7; --zf-c2: #A3B0AC; --zf-c3: #2E3B38;
      --zf-stitch: rgba(79,212,190,0.28); --zf-gloss: rgba(255,255,255,0.28); }
.zf-chair-body .u1 { stop-color: var(--zf-u1); } .zf-chair-body .u2 { stop-color: var(--zf-u2); }
.zf-chair-body .c1 { stop-color: var(--zf-c1); } .zf-chair-body .c2 { stop-color: var(--zf-c2); } .zf-chair-body .c3 { stop-color: var(--zf-c3); }
.zf-chair defs .u1 { stop-color: var(--zf-u1); } .zf-chair defs .u2 { stop-color: var(--zf-u2); }
.zf-chair defs .c1 { stop-color: var(--zf-c1); } .zf-chair defs .c2 { stop-color: var(--zf-c2); } .zf-chair defs .c3 { stop-color: var(--zf-c3); }
.zf-chair-body .uph { stroke: var(--zf-chair-line); stroke-width: 1.6; stroke-linejoin: round; }
.zf-chair-body .chrome { stroke: color-mix(in srgb, var(--zf-c3) 70%, transparent); stroke-width: .8; }
.zf-chair-body .bar { fill: none; stroke: url(#zfChromeV); stroke-width: 5; stroke-linecap: round; }
.zf-chair-body .rib { fill: none; stroke: color-mix(in srgb, var(--zf-c3) 55%, transparent); stroke-width: 1; }
.zf-chair-body .st { fill: none; stroke: var(--zf-stitch); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; stroke-linecap: round; }
.zf-chair-body .gl { fill: none; stroke: var(--zf-gloss); stroke-width: 1.6; stroke-linecap: round; }
/* Stuiteren: aanloop-squash → omhoog → landen met squash → twee kleinere naveertjes */
.zf-chair .zf-lift { transform-box: view-box; transform-origin: 112px 162px; }
.zf-chair.pulse .zf-lift { animation: zf-bounce 1s both; }
@keyframes zf-bounce {
    0%   { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
    10%  { transform: translateY(1.5px) scale(1.03, .96); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    32%  { transform: translateY(-11px) scale(.98, 1.03); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    50%  { transform: translateY(0) scale(1.035, .955); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    63%  { transform: translateY(-4.5px) scale(.995, 1.012); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    75%  { transform: translateY(0) scale(1.014, .985); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    85%  { transform: translateY(-1.4px) scale(1, 1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    93%  { transform: translateY(0) scale(1.004, .996); animation-timing-function: ease-out; }
    100% { transform: translateY(0) scale(1, 1); }
}
/* Schaduw krimpt mee als de stoel omhoog is */
.zf-chair-shadow { fill: color-mix(in srgb, var(--zf-jij) 14%, transparent); transform-box: view-box; transform-origin: 112px 229px; animation: zf-glow 4s ease-in-out infinite; }
.zf-chair.pulse .zf-chair-shadow { animation: zf-glow 4s ease-in-out infinite, zf-shadow 1s both; }
@keyframes zf-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes zf-shadow {
    0% { transform: scaleX(1); } 10% { transform: scaleX(1.03); } 32% { transform: scaleX(.84); } 50% { transform: scaleX(1.05); }
    63% { transform: scaleX(.93); } 75% { transform: scaleX(1.02); } 85% { transform: scaleX(.98); } 100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .zf-chair-shadow, .zf-chair.pulse .zf-chair-shadow, .zf-chair.pulse .zf-lift { animation: none; } }

/* Sectielabel gedimd, zoals de oorspronkelijke sectie */
.animation-zone .zf-label { color: rgba(255,255,255,0.25); }

/* Mobiel: dezelfde goot als de andere secties, zodat de animatie de breedte krijgt */
@media (max-width: 640px) {
    .animation-zone { padding: var(--section-padding-mobile); }
}