/* ---------- de klantreis als film: klant · installateur · groothandel · Altilia ---------- */
#keten{--geel-zacht:#FBF3DC;--geel-lijn:#EBD9A6;--geel-inkt:#6B5414;--grijs-chip:#EFEEE8;--app-canvas:#F3F2EC;--sage-menu:#86B184;display:grid;gap:1.1rem}

/* hoofdstukken */
.kt-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem}
.kt-stappen button{width:100%;display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-radius:14px;background:var(--paper);box-shadow:var(--schaduw-kaart);text-align:left;position:relative;overflow:hidden;cursor:pointer;color:var(--tekst-2);font-weight:600;font-size:.88rem;line-height:1.2}
.kt-stappen .kt-nr{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--veld);color:var(--sage-diep);font-size:.76rem;font-weight:700}
.kt-stappen button.gedaan .kt-nr{background:var(--sage);color:var(--paper)}
.kt-stappen button[aria-selected="true"]{color:var(--inkt);box-shadow:0 0 0 2px var(--actie)}
.kt-stappen button[aria-selected="true"] .kt-nr{background:var(--actie-vlak);color:var(--paper)}
.kt-voortgang{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--actie)}
.kt-stappen button.gedaan .kt-voortgang{background:var(--sage)}

.kt-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:1.1rem;align-items:start}
.kt-zij{display:grid;gap:.9rem;align-content:start}
.kt-rollen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.kt-rol{background:var(--paper);border-radius:16px;box-shadow:var(--schaduw-kaart);padding:.7rem .75rem;display:flex;align-items:center;gap:.6rem;transition:opacity .35s,box-shadow .35s}
.kt-rol .kt-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--veld);color:var(--sage-diep);transition:background .35s,color .35s}
.kt-rol .kt-ic .ic{width:19px;height:19px}
.kt-rol b{display:block;font-size:.92rem;line-height:1.25;color:var(--inkt)}
.kt-doet{display:block;font-size:.76rem;line-height:1.3;color:var(--tekst-2)}
.kt-rol:not(.actief){opacity:.5}
.kt-rol.actief{box-shadow:0 0 0 2px var(--actie)}
.kt-rol.actief .kt-ic{background:var(--actie);color:var(--paper)}
.kt-uitleg{background:var(--paper);border-radius:var(--r-kaart);box-shadow:var(--schaduw-kaart);padding:1.15rem 1.25rem;display:grid;gap:.4rem}
.kt-teller{margin:0;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--sage-diep)}
.kt-uitleg h3{margin:0;font-size:1.25rem}
.kt-uitleg p[data-tekst]{margin:0;color:var(--tekst-2);font-size:.95rem;min-height:6.6em}
/* bediening van de film: eigen tegel onder de uitleg */
.kt-bediening{background:var(--paper);border-radius:var(--r-kaart);box-shadow:var(--schaduw-kaart);padding:.8rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem}
.kt-bediening[hidden]{display:none}
.kt-speler{display:flex;align-items:center;gap:.4rem}
.kt-knop{height:40px;min-width:40px;border-radius:999px;display:inline-grid;place-items:center;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--lijn-2);color:var(--inkt);font-weight:600;font-size:.88rem;cursor:pointer}
.kt-knop.breed{display:inline-flex;align-items:center;gap:.35rem;padding:0 .8rem;white-space:nowrap}
.kt-knop .ic{width:18px;height:18px}
.kt-knop.speel{width:44px;height:44px;background:var(--actie-vlak);color:var(--paper);box-shadow:none}
.kt-knop .ic.vol{width:16px;height:16px;fill:currentColor;stroke:none}
.kt-tempo{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--lijn-2)}
.kt-tempo span{font-size:var(--fs-xs);color:var(--muted);padding:0 .4rem 0 .6rem}
.kt-tempo button{height:34px;min-width:44px;padding:0 .5rem;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--tekst-2)}
.kt-tempo button[aria-checked="true"]{background:var(--paper);color:var(--inkt);box-shadow:0 0 0 1px var(--lijn-2)}
/* tijdens doorspoelen springt alles meteen naar de eindstand */
#keten.springt .fl-buhne *{transition:none!important}

/* ---------- het venster en de bühne ---------- */
.fl-frame .balk span{transition:color .3s}
.fl-venster{position:relative;overflow:hidden;background:var(--app-canvas)}
.fl-buhne{position:absolute;left:0;top:0;width:1000px;height:640px;transform-origin:0 0;font-size:16px;line-height:1.45;color:var(--tekst);user-select:none}
.fl-buhne .ic{width:1em;height:1em;flex:none}
.fl-scherm{position:absolute;inset:0;display:grid;grid-template-columns:206px minmax(0,1fr);background:var(--app-canvas);transition:filter .45s}
.fl-scherm.gedimd{filter:brightness(.8) saturate(.85)}

/* app-schil */
.fl-zij{background:var(--paper);border-right:1px solid var(--lijn);padding:16px 10px;display:flex;flex-direction:column;gap:3px}
.fl-logo{padding:2px 10px 16px;display:grid;gap:4px}
.fl-logo img{height:28px;width:auto}
.fl-logo span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fl-menu{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;font-size:14.5px;color:var(--tekst)}
.fl-menu .ic{font-size:17px;color:var(--tekst-2)}
.fl-menu.actief{background:var(--sage-menu);color:var(--paper)}
.fl-menu.actief .ic{color:var(--paper)}
.fl-main{padding:0 26px 22px;display:flex;flex-direction:column;gap:13px;min-width:0;overflow:hidden}
.fl-top{display:flex;align-items:center;gap:16px;height:68px;flex:none;margin:0 -26px 4px;padding:0 26px;border-bottom:1px solid var(--lijn);background:var(--paper)}
.fl-top i{display:block;font-family:var(--hand);font-style:normal;color:var(--actie);font-size:17px;line-height:1}
.fl-top b{font-size:18px;letter-spacing:-.01em}
.fl-zoek{flex:1;max-width:340px;margin-inline:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--lijn-2);border-radius:12px;padding:8px 12px;font-size:13.5px;color:var(--muted)}
.fl-online{background:var(--veld);color:var(--sage-diep);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;white-space:nowrap}
.fl-bel{position:relative;width:22px;height:22px;color:var(--tekst-2)}
.fl-bel .ic{width:22px;height:22px}
.fl-bel em{position:absolute;top:-3px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--vlag-rood);box-shadow:0 0 0 2px var(--paper);transform:scale(0);transition:transform .3s var(--ease)}
.fl-bel.nieuw em{transform:scale(1)}
.fl-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-diep);font-weight:600;margin:6px 0 -9px}
.fl-main h2{font-size:26px;letter-spacing:-.02em;line-height:1.15}
.fl-main h2 small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted)}

/* bouwstenen */
.fl-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fl-tegel{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:18px 16px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.fl-tegel b{font-size:15.5px}
.fl-tegel span{font-size:13px;color:var(--muted);line-height:1.35}
.fl-tegel.prim{background:var(--sage-menu);border-color:var(--sage-menu)}
.fl-tegel.prim b,.fl-tegel.prim span{color:var(--paper)}
.fl-kaart{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:14px 16px;display:grid;gap:8px;align-content:start}
.fl-kaart > b{display:flex;align-items:center;gap:8px;font-size:15.5px}
.fl-kaart > span{font-size:14px;color:var(--tekst-2)}
.fl-let{background:var(--geel-zacht);border:1px solid var(--geel-lijn);color:var(--geel-inkt);border-radius:10px;padding:8px 12px;font-size:14.5px}
.fl-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fl-kpi div{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:12px 16px;display:grid;gap:2px}
.fl-kpi span{font-size:13px;color:var(--muted)}
.fl-kpi b{font-size:22px}
.fl-twee{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;flex:1;min-height:0;align-items:start}
.fl-logistiek .fl-twee,.fl-oplevering .fl-twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.fl-twee.smal{grid-template-columns:repeat(2,minmax(0,1fr));flex:none}
.fl-lijst{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:14px 12px;display:grid;gap:4px}
.fl-lijst > b{font-size:14.5px;padding:0 6px 6px}
.fl-rij{padding:8px 8px;border-radius:10px;display:grid}
.fl-rij b{font-size:14px}
.fl-rij span{font-size:12px;color:var(--muted)}
.fl-rij.nieuw{background:var(--veld);animation:fl-in .5s var(--ease)}
.fl-paneel{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fl-paneel-titel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px}
.fl-badge{background:var(--veld);color:var(--sage-diep);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}
.fl-badge.zacht{background:var(--grijs-chip);color:var(--tekst-2);font-weight:500}
.fl-velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fl-velden label{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--tekst-2)}
.fl-veld{height:38px;border:1px solid var(--lijn-2);border-radius:10px;padding:0 12px;display:flex;align-items:center;font-size:15px;color:var(--inkt);white-space:nowrap;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.fl-veld.focus{border-color:var(--actie);box-shadow:0 0 0 3px var(--veld-3)}
.fl-veld.focus::after{content:"";width:1.5px;height:18px;margin-left:1px;background:var(--inkt);animation:fl-knipper .8s steps(1) infinite}
.fl-drop{border:2px dashed var(--lijn-sage);border-radius:14px;padding:14px;background:var(--sage-zacht);display:grid;gap:10px;justify-items:center;text-align:center;color:var(--sage-diep);font-size:14px;transition:background .2s,border-color .2s}
.fl-drop > span{display:flex;align-items:center;gap:8px}
.fl-drop.hover{background:var(--veld-2);border-color:var(--actie)}
.fl-bestanden{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.fl-bestanden:empty{display:none}
.fl-bestanden span{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--lijn);border-radius:8px;padding:4px 10px;font-size:13px;color:var(--inkt);animation:fl-in .35s var(--ease)}
.fl-bestanden .ic{color:var(--actie)}
.fl-vinkjes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fl-vinkjes > span:first-child{font-size:13px;font-weight:500;color:var(--tekst-2);margin-right:2px}
.fl-vink{display:flex;align-items:center;gap:7px;border:1px solid var(--lijn-2);border-radius:999px;padding:6px 12px;font-size:13.5px;transition:background .2s,border-color .2s}
.fl-vink i,.fl-check i,.fl-scan i,.fl-vinkje{flex:none;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--lijn-2);display:inline-block;position:relative;transition:background .2s,border-color .2s}
.fl-vink.aan{background:var(--veld);border-color:var(--actie)}
.fl-vink.aan i,.fl-check.aan i,.fl-scan.klaar i,.fl-vinkje.aan{background:var(--actie);border-color:var(--actie)}
.fl-vink.aan i::after,.fl-check.aan i::after,.fl-scan.klaar i::after,.fl-vinkje.aan::after,.fl-voortgang .klaar i::after,.fl-tijdlijn .klaar i::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fl-knop{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--lijn-2);border-radius:10px;padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--inkt);white-space:nowrap;transition:transform .12s,filter .12s}
.fl-knop.prim{background:var(--actie-vlak);border-color:var(--actie-vlak);color:var(--paper)}
.fl-knop.mini{padding:5px 11px;font-size:12.5px;border-radius:8px}
.ingedrukt{transform:scale(.96);filter:brightness(.93)}

/* AI rekent + Piekbreker */
.fl-voortgang{display:grid;gap:7px}
.fl-voortgang div{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);transition:color .3s}
.fl-voortgang i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--lijn-2);position:relative}
.fl-voortgang div:first-child:not(.klaar) i,.fl-voortgang .klaar + div:not(.klaar) i{border-color:var(--lijn-2);border-top-color:var(--actie);animation:fl-draai .8s linear infinite}
.fl-voortgang .klaar{color:var(--inkt)}
.fl-voortgang .klaar i{background:var(--actie);border-color:var(--actie)}
.fl-voortgang .klaar i::after{left:4.5px;top:1.5px;height:7px;width:3.5px}
/* Piekbreker-kaart zoals in de app (PiekbrekerKaart + PiekbrekerSpel): het veld is 4:3, net als daar */
[data-paneel="wachten"] .fl-voortgang{grid-template-columns:auto auto;justify-content:start;gap:6px 24px}
[data-paneel="wachten"] .fl-voortgang div{font-size:13px;gap:8px;white-space:nowrap}
.fl-spel{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:12px 14px;display:grid;gap:6px;justify-items:center;--pk-b:340px}
.fl-spel-kop{justify-self:stretch;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fl-spel-kop p{margin:0 0 4px;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--actie);line-height:1}
.fl-spel-kop b{font-size:15px;letter-spacing:-.01em;color:var(--inkt)}
.fl-spel-kop span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--sage-diep)}
.fl-spel-kop .ic,.fl-spel-hud .ic{width:13px;height:13px}
.fl-spel-hud{width:var(--pk-b);display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:600;color:var(--tekst-2);font-variant-numeric:tabular-nums}
.fl-spel-hud span{display:inline-flex;align-items:center;gap:4px}
.fl-spel-hud i{font-style:normal}
.fl-spel-hud b{color:var(--sage-diep)}
.fl-spel canvas{width:var(--pk-b);height:calc(var(--pk-b) * .75);display:block;border:1px solid var(--lijn);border-radius:12px;background:#F7F6F1}
.fl-buhne.smal .fl-spel{--pk-b:500px}
.fl-cursor.weg{opacity:0}
.fl-tekst{font-size:15px;color:var(--tekst)}
.fl-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fl-cijfers div{background:var(--sage-zacht);border-radius:12px;padding:10px 12px;display:grid}
.fl-cijfers span{font-size:12px;color:var(--muted)}
.fl-cijfers b{font-size:18px}
.fl-mail{background:var(--canvas);border-radius:12px;padding:10px 12px;display:grid;gap:2px;font-size:13.5px;color:var(--tekst-2)}
.fl-mail b{font-size:12px;color:var(--muted);font-weight:600}

/* tabellen */
.fl-tabel{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;overflow:hidden}
.fl-tr{display:grid;grid-template-columns:1.1fr 1.5fr 1.3fr 1.1fr;gap:10px;align-items:center;padding:12px 18px;border-top:1px solid var(--lijn);font-size:14.5px;min-height:52px}
.fl-tr.th{border-top:0;background:var(--canvas);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;min-height:0;padding-block:9px}
.fl-tr.uit{background:var(--sage-zacht)}
.fl-tr.verschijn{animation:fl-in .5s var(--ease)}
.fl-status{font-style:normal;display:inline-block;font-size:12.5px;background:var(--grijs-chip);color:var(--tekst-2);border-radius:999px;padding:3px 10px;white-space:nowrap}
.fl-status.ok{background:var(--veld);color:var(--sage-diep)}
.fl-status.nieuw{background:var(--blauw-zacht);color:var(--blauw)}

/* order-venster */
.fl-modal{position:absolute;inset:0;z-index:5;background:rgba(25,28,24,.32);display:grid;place-items:center;animation:fl-fade .25s}
.fl-modal-doos{background:var(--paper);border-radius:18px;padding:22px 24px;width:470px;display:grid;gap:12px;box-shadow:0 30px 60px -24px rgba(25,28,24,.5);animation:fl-in .3s var(--ease)}
.fl-modal-doos > b{font-size:19px}
.fl-modal-doos p{font-size:14px;color:var(--tekst-2)}
.fl-optie{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--lijn);border-radius:14px;padding:12px 14px;transition:background .2s,border-color .2s}
.fl-optie i{flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%;border:2px solid var(--lijn-2);transition:border .2s}
.fl-optie b{display:block;font-size:14.5px}
.fl-optie span{font-size:12.5px;color:var(--tekst-2);line-height:1.4}
.fl-optie.aan{border-color:var(--actie);background:var(--sage-zacht)}
.fl-optie.aan i{border:5px solid var(--actie)}

/* logistiek */
.fl-scan{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--lijn);font-size:14px;border-radius:6px;transition:background .3s}
.fl-scan.klaar{background:var(--sage-zacht)}
.fl-tijdlijn{display:grid}
.fl-tijdlijn div{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);padding:6px 0;position:relative;transition:color .3s}
.fl-tijdlijn div + div::before{content:"";position:absolute;left:8px;top:-8px;height:16px;width:2px;background:var(--lijn-2)}
.fl-tijdlijn i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--lijn-2);background:var(--paper);position:relative;z-index:1;transition:background .3s,border-color .3s}
.fl-tijdlijn .klaar{color:var(--inkt);font-weight:500}
.fl-tijdlijn .klaar i{background:var(--actie);border-color:var(--actie)}
.fl-tijdlijn .klaar i::after{left:4.5px;top:1.5px;height:7px;width:3.5px}
.fl-tijdlijn .klaar + div:not(.klaar)::before,.fl-tijdlijn .klaar + .klaar::before{background:var(--actie)}
.fl-weg{position:relative;height:56px;margin-top:4px;border-bottom:3px dashed var(--lijn-2)}
.fl-truck{position:absolute;left:0;bottom:3px;width:72px;transition:left calc(1.4s * var(--traag,1)) cubic-bezier(.5,0,.3,1)}
.fl-truck.rijdt{left:calc(100% - 72px)}

/* oplevering */
.fl-balkje{height:8px;background:var(--veld);border-radius:999px;overflow:hidden;margin-bottom:2px}
.fl-balkje i{display:block;height:100%;width:0;background:var(--actie);transition:width .2s}
.fl-check{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:14px;border-bottom:1px solid var(--lijn)}
.fl-check:last-child{border-bottom:0}
.fl-oplevering .fl-paneel:first-child{gap:3px}
.fl-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fl-fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;opacity:0;transform:scale(.85);transition:opacity .35s,transform .35s var(--ease)}
.fl-fotos img.aan{opacity:1;transform:none}
.fl-velden .fl-kort{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--inkt);align-self:end;height:38px}

/* service */
.fl-kaart.later{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease)}
.fl-kaart.later.verschijn{opacity:1;transform:none}
.fl-antwoord{font-size:13.5px;color:var(--sage-diep);background:var(--sage-zacht);border-radius:10px;padding:7px 10px;min-height:1.5em}
.fl-antwoord:empty{display:none}
.fl-rijtje{display:flex;align-items:center;gap:10px}
.fl-docs{display:flex;flex-wrap:wrap;gap:8px}
.fl-docs span{display:flex;align-items:center;gap:8px;border:1px solid var(--lijn);border-radius:10px;padding:7px 12px;font-size:14px;color:var(--inkt)}
.fl-docs b{background:var(--huis);color:var(--paper);border-radius:5px;padding:2px 6px;font-size:11px;letter-spacing:.04em}
.verschijn{animation:fl-in .5s var(--ease)}

/* cursor, slepen, meldingen */
.fl-cursor{position:absolute;left:0;top:0;z-index:20;width:26px;height:26px;margin:-3px 0 0 -4px;pointer-events:none}
.fl-cursor svg{width:26px;height:26px;fill:var(--inkt);stroke:var(--paper);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));transition:transform .12s}
.fl-cursor.druk svg{transform:scale(.82)}
.fl-cursor::after{content:"";position:absolute;left:-10px;top:-10px;width:28px;height:28px;border-radius:50%;background:var(--actie);opacity:0;transform:scale(.3)}
.fl-cursor.druk::after{animation:fl-rimpel .45s ease-out}
.fl-sleep{position:absolute;left:0;top:0;z-index:18;display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--lijn);border-radius:10px;padding:9px 13px;box-shadow:0 14px 28px -10px rgba(25,28,24,.4);transform-origin:0 0}
.fl-sleep b{background:var(--huis);color:var(--paper);border-radius:5px;padding:2px 6px;font-size:11px;letter-spacing:.04em}
.fl-sleep span{font-size:14px;color:var(--inkt)}
.fl-toast{position:absolute;left:50%;bottom:24px;z-index:16;max-width:72%;display:flex;align-items:center;gap:10px;background:var(--inkt);color:var(--paper);border-radius:14px;padding:12px 18px;font-size:15px;box-shadow:0 20px 40px -16px rgba(25,28,24,.55);transform:translateX(-50%)}
.fl-toast .ic{width:20px;height:20px;color:var(--sage)}
.fl-toast.in{animation:fl-toast .35s var(--ease)}
.fl-telefoon.aan ~ .fl-toast{left:34%;max-width:56%}
.fl-buhne.smal .fl-telefoon.aan ~ .fl-toast{left:50%;bottom:16px;max-width:90%}
.fl-voorbeeld{position:absolute;left:12px;bottom:10px;z-index:15;font-size:11px;color:var(--muted);background:rgba(255,255,255,.88);border-radius:999px;padding:3px 10px}

/* ---------- de telefoon van de klant ---------- */
.fl-telefoon{position:absolute;right:60px;top:18px;z-index:12;width:300px;height:604px;background:var(--inkt);border-radius:46px;padding:10px;box-shadow:0 34px 70px -22px rgba(25,28,24,.55);transform:translateY(calc(100% + 240px));visibility:hidden;transition:transform calc(.55s * var(--traag,1)) var(--ease),visibility 0s calc(.55s * var(--traag,1))}
.fl-telefoon.aan{transform:none;visibility:visible;transition:transform calc(.55s * var(--traag,1)) var(--ease),visibility 0s}
.tl-notch{position:absolute;top:19px;left:50%;width:86px;height:22px;border-radius:999px;background:var(--inkt);transform:translateX(-50%);z-index:3}
.tl-scherm{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:var(--app-canvas);font-size:14px}
.tl-mails{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;overflow:hidden}
.tl-mail{display:grid;gap:2px;padding:11px 13px;border-top:1px solid var(--lijn);transition:transform .12s,filter .12s}
.tl-mail:first-child{border-top:0}
.tl-van{display:flex;align-items:center;gap:7px}
.tl-van i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--actie)}
.tl-van b{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--tekst-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-van em{flex:none;font-style:normal;font-size:11px;color:var(--muted)}
.tl-mail strong{font-size:12.8px;font-weight:400;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-mail > span{font-size:12.5px;line-height:1.4;color:var(--tekst-2)}
.tl-mail.nieuw{animation:fl-in .5s var(--ease) .25s both}
.tl-mail.nieuw .tl-van b{font-weight:700;color:var(--inkt)}
.tl-mail.nieuw .tl-van em{color:var(--sage-diep);font-weight:600}
.tl-mail.nieuw strong{font-weight:600;color:var(--inkt);white-space:normal}
.tl-bijlage{justify-self:start;display:flex;align-items:center;gap:5px;margin-top:6px;padding:4px 9px;border-radius:8px;background:var(--veld);color:var(--tekst-2);font-size:11.5px}
.tl-bijlage .ic{width:13px;height:13px}
.tl-app{height:100%;padding:48px 15px 16px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.tl-app > *{transition:transform calc(1.3s * var(--traag,1)) var(--ease);flex:none}
.tl-app.scroll > *{transform:translateY(-92px)}
.tl-held{background:var(--veld);border-radius:18px;padding:14px 16px;display:grid}
.tl-held span,.tl-kop span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sage-diep)}
.tl-held b{font-size:20px;line-height:1.2}
.tl-held em,.tl-kop em{font-style:normal;font-size:12.5px;color:var(--muted)}
.tl-kop{display:grid;padding:2px 2px 4px}
.tl-kop b{font-size:19px;line-height:1.2}
.tl-cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tl-cijfers div{background:var(--paper);border:1px solid var(--lijn);border-radius:12px;padding:8px 9px;display:grid}
.tl-cijfers span{font-size:10.5px;color:var(--muted)}
.tl-cijfers b{font-size:15px}
.tl-blok{background:var(--paper);border:1px solid var(--lijn);border-radius:14px;padding:11px 13px;display:grid;gap:2px}
.tl-blok b{font-size:14px}
.tl-blok span{font-size:12.8px;line-height:1.45;color:var(--tekst-2)}
.tl-knop{display:block;text-align:center;background:var(--actie-vlak);color:var(--paper);border-radius:12px;padding:11px;font-weight:600;font-size:14.5px;transition:transform .12s,filter .12s}
.tl-knop.zacht{background:var(--paper);color:var(--tekst-2);border:1px solid var(--lijn-2)}
.tl-regel{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--lijn);font-size:13.5px}
.tl-regel em{font-style:normal;color:var(--muted)}
.tl-akkoord{display:grid;gap:8px;margin-top:auto}
.tl-klaar{background:var(--veld);border-radius:16px;padding:14px 16px;display:grid;gap:3px;justify-items:start;animation:fl-in .45s var(--ease)}
.tl-klaar .ic{width:26px;height:26px;color:var(--sage-diep)}
.tl-klaar b{font-size:16px}
.tl-klaar span{font-size:13px;line-height:1.4;color:var(--tekst-2)}
.tl-maand{background:var(--paper);border:1px solid var(--lijn);border-radius:16px;padding:12px}
.tl-maand > b{font-size:15px}
.tl-dagen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.tl-dn{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center}
.tl-dag{height:38px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:500;transition:background .2s,color .2s,transform .12s}
.tl-dag.vrij{background:var(--sage-zacht);color:var(--sage-diep);box-shadow:inset 0 0 0 1px var(--lijn-sage)}
.tl-dag.bezet{background:var(--grijs-chip);color:var(--muted-2);text-decoration:line-through}
.tl-dag.gekozen{background:var(--actie-vlak);color:var(--paper);box-shadow:none}
.tl-legenda{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--muted)}
.tl-legenda span{display:flex;align-items:center;gap:5px}
.tl-legenda i{width:10px;height:10px;border-radius:3px;background:var(--grijs-chip)}
.tl-legenda i.vrij{background:var(--sage-zacht);box-shadow:inset 0 0 0 1px var(--lijn-sage)}
.tl-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tl-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.tl-teken{background:var(--paper);border:1.5px dashed var(--lijn-2);border-radius:14px;padding:8px 12px}
.tl-teken span{font-size:11px;color:var(--muted)}
.tl-teken svg{width:100%;height:auto}
.tl-teken path{fill:none;stroke:var(--inkt);stroke-width:3;stroke-linecap:round;stroke-dasharray:720;stroke-dashoffset:720}
.tl-teken path.teken{stroke-dashoffset:0;transition:stroke-dashoffset calc(1s * var(--traag,1)) ease-in-out}
.tl-huis{position:relative;background:var(--veld);border-radius:18px;padding:10px}
.tl-huis img{width:100%;height:auto}
.tl-ai{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:var(--paper);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--sage-diep)}

/* ---------- smalle bühne (telefoonbreedte van de bezoeker) ---------- */
.fl-buhne.smal{font-size:17px}
.fl-buhne.smal .fl-scherm{grid-template-columns:minmax(0,1fr)}
.fl-buhne.smal .fl-zij,.fl-buhne.smal .fl-zoek,.fl-buhne.smal .fl-lijst,.fl-buhne.smal .fl-online{display:none}
.fl-buhne.smal .fl-main{padding-inline:22px}
.fl-buhne.smal .fl-top{margin-inline:-22px;padding-inline:22px;justify-content:space-between}
.fl-buhne.smal .fl-twee,.fl-buhne.smal .fl-logistiek .fl-twee,.fl-buhne.smal .fl-oplevering .fl-twee{grid-template-columns:minmax(0,1fr)}
.fl-buhne.smal .fl-tegels,.fl-buhne.smal .fl-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
.fl-buhne.smal .fl-tr{grid-template-columns:1fr 1.3fr 1.2fr;font-size:15px}
.fl-buhne.smal .fl-tr > span:nth-child(4){grid-column:1/-1;justify-self:start}
.fl-buhne.smal .fl-tr > span:nth-child(4):empty{display:none}
.fl-buhne.smal .fl-modal-doos{width:600px}
.fl-buhne.smal .fl-telefoon{right:auto;left:calc(50% - 150px);top:96px}
.fl-buhne.smal .fl-toast{max-width:90%;font-size:17px}
.fl-buhne.smal .fl-velden{grid-template-columns:minmax(0,1fr)}
.fl-buhne.smal .fl-check{padding:3px 2px;font-size:15px}
.fl-buhne.smal .fl-fotos img{aspect-ratio:16/9}
.fl-buhne.smal .fl-oplevering .fl-paneel{padding:14px 18px}

@keyframes fl-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fl-fade{from{opacity:0}to{opacity:1}}
@keyframes fl-toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes fl-draai{to{transform:rotate(360deg)}}
@keyframes fl-knipper{50%{opacity:0}}
@keyframes fl-rimpel{0%{opacity:.45;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}

@media (max-width:980px){
  .kt-grid{grid-template-columns:minmax(0,1fr)}
  .kt-zij{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .kt-rollen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kt-bediening{grid-column:1 / -1}
}
@media (max-width:760px){
  .kt-stappen{gap:.3rem}
  .kt-stappen .kt-kort{display:none}
  .kt-stappen button{justify-content:center;padding:.5rem 0}
  .kt-zij{grid-template-columns:minmax(0,1fr)}
  .kt-uitleg p[data-tekst]{min-height:0}
}
@media (max-width:420px){
  .kt-rol{padding:.55rem .5rem;gap:.45rem}
  .kt-rol .kt-ic{width:30px;height:30px}
  .kt-rol b{font-size:.84rem}
  .kt-doet{font-size:.7rem}
}