/* DS-Herstelcoaching op de IJskast-basis. Alleen het accent wordt het goud van Dennis zijn lotus (gedempt, zoals het blauw bij IJskast
   alleen accent is), plus de delen die Dennis heeft en Victor niet: de poort, de lid-pagina, trajecten en groei. Daniel 2026-11-07:
   "net zo clean als Victor". Geen serif, geen donkere goudlaag, geen grote foto om mee te openen. */
:root{
  --blue:#c08a43; --blue-t:#8f5f1f; --blue2:rgba(192,138,67,.12); --blue3:rgba(192,138,67,.34);
  --ik-bel:#f7efe3;
}
:root[data-thema="donker"]{
  --blue:#d6a160; --blue-t:#e7b978; --blue2:rgba(214,161,96,.14); --blue3:rgba(214,161,96,.36); --ik-bel:#3a2e20;
}

/* de nav gebruikt links (zodat elk scherm een eigen adres heeft) */
.nav a{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:7px;font-size:14px;color:var(--ink);text-decoration:none}
.nav a svg{width:17px;height:17px;color:var(--ink2)}
.nav a:hover{background:var(--hover)}
.nav a.aan{background:var(--soft);font-weight:550}
.nav-n{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:600;min-width:18px;height:18px;border-radius:9px;padding:0 5px;display:grid;place-items:center;background:var(--blue);color:#fff}
.nav-n:empty{display:none}
.org img{border-radius:0;object-fit:contain}
@media (max-width:900px){
  .nav a{height:30px;padding:0 10px;font-size:13.5px;flex:none}
  .nav a svg{display:none}
}

/* de poort */
.poort{min-height:100dvh;display:grid;place-items:center;padding:24px;grid-column:1/-1}
.poort-in{width:min(320px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.poort-in img{width:44px;height:44px;object-fit:contain;margin-bottom:6px}
.poort-in h1{font:600 22px/1.2 var(--sans);letter-spacing:-.02em}
.poort-in p{color:var(--ink2);font-size:13.5px;margin-bottom:10px}
.poort-in input{width:100%;height:40px;border-radius:9px;border:1px solid var(--line2);background:var(--vlak);padding:0 12px;outline:none;font-size:15px;text-align:center;letter-spacing:.08em}
.poort-in input:focus{border-color:var(--blue3)}
.poort-in .knop-b{height:40px;background:var(--blue);color:#fff}
.poort-in small{min-height:18px;font-size:12.5px;color:var(--rood)}
body.dicht{display:block}

/* kop van een scherm: korte titel en een zin, zoals Vandaag bij IJskast */
.pk{margin-bottom:18px;max-width:720px}
.pk h1{font:600 22px/1.2 var(--sans);letter-spacing:-.02em}
.pk p{color:var(--ink2);margin-top:4px}
.oef{font-size:11px;color:var(--ink3);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px;font-weight:500;white-space:nowrap}

/* Vraagt aandacht: een appje op een lastig moment, met het voorstel al klaar */
.let-r em.vs{color:var(--blue-t)}
.let .nood{color:var(--rood)}

/* leden: de rijen van Tracks, met Dennis zijn kolommen */
.tr-r.ld{grid-template-columns:minmax(170px,1.3fr) 110px minmax(0,1.5fr) 110px 110px 150px}
.nm .av{width:26px;height:26px}
.fs b{font-weight:500}
.nuchter{font-variant-numeric:tabular-nums;white-space:nowrap}
.nuchter b{font-weight:600}
@media (max-width:1180px){ .tr-r.ld{grid-template-columns:minmax(150px,1.3fr) 100px minmax(0,1.4fr) 110px} .tr-r.ld>:nth-child(5),.tr-r.ld>:nth-child(6){display:none} }
@media (max-width:900px){ .tr-r.ld{grid-template-columns:minmax(0,1fr) auto} .tr-r.ld>:nth-child(3),.tr-r.ld>:nth-child(4){display:none} .tr-r.ld>:nth-child(2){justify-self:end} }

/* de lid-pagina: het gesprek in het midden, rechts waar het lid staat */
.lp{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:calc(100dvh - 52px)}
.lp .tm{background:var(--fdbg);border-right:1px solid var(--line)}
.lp-z{background:var(--zij);padding:16px 18px 40px;display:flex;flex-direction:column;gap:14px}
.lp-z .seg{margin:0}
.kaart{background:var(--vlak);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.kaart small{font-size:11.5px;color:var(--ink3)}
.kaart b{font-weight:600;font-size:13.5px}
.kaart p{font-size:13.5px;line-height:1.5}
.lijn{display:flex;align-items:center;gap:0;margin:6px 0 2px}
.lijn i{flex:1;height:3px;background:var(--line2)}
.lijn i.af{background:var(--blue)}
.lijn span{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);background:var(--vlak);flex:none}
.lijn span.af{border-color:var(--blue);background:var(--blue)}
.lijn span.nu{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue2)}
.lijn-n{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3)}
.groot{font:600 28px/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stem{display:flex;align-items:flex-end;gap:4px;height:34px}
.stem i{flex:1;border-radius:3px;background:var(--blue3)}
.stem i.laag{background:rgba(217,130,43,.45)}
.bel.ik{background:var(--ik-bel)}
.mk.rechts{flex-direction:row-reverse}
.mk.rechts .mb{align-items:flex-end}
.vs-bel{background:var(--blue2);border:1px dashed var(--blue3);border-radius:12px;padding:9px 12px;font-size:14px;line-height:1.5}
.vs-bel small{display:block;font-size:11.5px;font-weight:550;color:var(--blue-t);margin-bottom:2px}
.vs-k{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.bel.nood{border:1px solid rgba(229,72,77,.45)}
@media (max-width:900px){
  .lp{grid-template-columns:minmax(0,1fr)}
  .lp .tm{border-right:0;min-height:60dvh}
}

/* de super coach: wachtende appjes in het paneel */
.as-sub{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--soft);margin:12px 16px 0}
.as-sub button{flex:1;height:28px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink2);text-align:center}
.as-sub button.aan{background:var(--vlak);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.wacht{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;border:1px solid var(--line)}
.wacht:hover{background:var(--hover)}
.wacht span{display:flex;flex-direction:column;min-width:0;flex:1}
.wacht b{font-weight:550;font-size:13.5px}
.wacht em{font-style:normal;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wacht.nood{border-color:rgba(229,72,77,.45)}
.wacht.nood b{color:var(--rood)}
.regel{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:2px}
.regel small{font-size:11.5px;color:var(--ink3)}
.regel p{font-size:13.5px}
.regel .rg-k{display:flex;align-items:center;gap:8px}
.regel .rg-k em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--blue2);color:var(--blue-t)}
.regel .rg-k em.vast{background:var(--soft);color:var(--ink2)}
.regel .ik-k{margin-left:auto}

/* gesprekken en het verslag */
.gs-r{display:grid;grid-template-columns:90px minmax(0,1.2fr) minmax(0,1fr) 140px;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);font-size:13.5px;width:100%}
.gs-r:hover{background:var(--hover)}
.gs-r .tijd{color:var(--ink2);font-variant-numeric:tabular-nums}
.gs-r .st{justify-self:end;font-size:12.5px;color:var(--ink3)}
.gs-r .st.b{color:var(--blue-t);font-weight:550}
.gs-kop{font-size:12px;color:var(--ink3);margin:18px 0 4px;font-weight:500}
@media (max-width:900px){ .gs-r{grid-template-columns:70px minmax(0,1fr) auto} .gs-r>:nth-child(3){display:none} }
.vsl{max-width:640px;display:flex;flex-direction:column;gap:12px}
.vsl textarea{width:100%;min-height:96px;border:1px solid var(--line2);border-radius:10px;background:var(--vlak);padding:10px 12px;font-size:14px;line-height:1.5;outline:none;resize:vertical}
.vsl textarea:focus{border-color:var(--blue3)}
.vsl .rij{display:flex;gap:8px;flex-wrap:wrap}
.laden{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13.5px;padding:16px 0}
.laden i{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue3);border-top-color:var(--blue);animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
.k-tegel{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 40%,#2a2620,#121110)}
.k-tegel b{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:#2c2924;color:#ececef;font:600 40px var(--sans);letter-spacing:-.02em}

/* opdrachten langs de rode lijn */
.od-f{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px}
.od-f:first-of-type{margin-top:4px}
.od-f b{font-weight:600;font-size:13.5px}
.od-f span{font-size:12.5px;color:var(--ink3)}
.od-r{display:grid;grid-template-columns:minmax(0,1fr) 110px 120px;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-size:13.5px;width:100%}
.od-r:hover{background:var(--hover)}
.od-r b{font-weight:500}
.od-r em{font-style:normal;color:var(--ink3);font-size:12.5px}
.od-r .bij{justify-self:end;font-size:12.5px;color:var(--ink2)}
@media (max-width:900px){ .od-r{grid-template-columns:minmax(0,1fr) auto} .od-r>:nth-child(2){display:none} }

/* trajecten: waar het goed gaat en waar niet */
.tj{display:grid;grid-template-columns:minmax(160px,1.2fr) repeat(4,minmax(90px,1fr));gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.tj.kop{font-size:12px;color:var(--ink3);padding:4px;border-bottom:1px solid var(--line)}
.tj b{font-weight:600}
.tj .sub{display:block;font-size:12px;color:var(--ink3);font-weight:400}
.tj .m{display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.tj .m i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--groen)}
.tj .m i.o{background:var(--oranje)}
.lezing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:20px;max-width:1000px}
.lezing .blok h3{justify-content:flex-start;gap:8px}
.lezing .blok h3 i{width:8px;height:8px;border-radius:50%;background:var(--groen)}
.lezing .blok.o h3 i{background:var(--oranje)}
.lezing li{font-size:13.5px;line-height:1.5;margin:0 0 8px 16px}
@media (max-width:900px){
  .tj{grid-template-columns:minmax(0,1fr) auto auto}
  .tj>:nth-child(4),.tj>:nth-child(5){display:none}
  .lezing{grid-template-columns:minmax(0,1fr)}
}

/* groei: rustig, drie schuiven en wat het betekent */
.gr{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;max-width:1000px}
.sch{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid var(--line)}
.sch label{display:flex;justify-content:space-between;font-size:13.5px}
.sch label b{font-weight:600;color:var(--blue-t);font-variant-numeric:tabular-nums}
.sch input{accent-color:var(--blue);width:100%}
.gr .getallen{grid-template-columns:repeat(3,minmax(0,1fr))}
.gr details{margin-top:12px;font-size:13px;color:var(--ink2)}
.gr details summary{cursor:pointer;color:var(--ink)}
.gr details p{margin-top:6px;line-height:1.55}
@media (max-width:900px){ .gr{grid-template-columns:minmax(0,1fr)} .gr .getallen{grid-template-columns:repeat(3,minmax(0,1fr))} .getal b{font-size:22px} }
a.gs-r,a.knop-z,a.knop-b,a.link,.bk-l a{color:inherit;text-decoration:none}
a.link.b{color:var(--blue-t)}
.k-vs{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:rgba(255,255,255,.06)}
.k-vs small{font-size:12px;color:rgba(236,236,239,.5)}
.k-vs p{font-size:15px}
.k-vs .knop-w{align-self:flex-start;height:34px}

/* ronde 2 na de eigen kijk (2026-11-07) */
.org .demo{display:none}
.let-r .av,.wacht .av{display:grid}
.hk{background:var(--blue);color:#fff}
.hk:hover{background:var(--blue-t)}
.kamer .kern{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);margin:0;width:auto;box-shadow:none}
.kamer .kern small{color:rgba(236,236,239,.5)}
.kamer .kern p{color:#ececef}
.percoach .r{grid-template-columns:170px minmax(0,1fr) 30px}
.ag-l{display:none}
@media (max-width:900px){
  .vd-z{order:-1}
  .ag-r{display:none}
  .ag-l{display:flex;flex-direction:column}
  .ag-l .ag-b{position:static;width:100%;height:auto;padding:10px 12px;margin-bottom:6px}
  .percoach .r{grid-template-columns:120px minmax(0,1fr) 24px}
  .percoach .oef{display:none}
}

/* ronde 3 (Daniel 11-07): "net wat anders dan Victor". Warm papier in plaats van wit, een donkere espresso zijbalk met zijn goud,
   leden en gesprekken als eigen kaarten in plaats van Trackler-rijen. Het niveau blijft, de look wordt van DS. */
:root{
  --bg:#faf6f0; --vlak:#ffffff; --soft:#f2ebe0; --hover:#f5eee4; --line:#ebe2d5; --line2:#e0d5c4; --fdbg:#f5efe6;
  --ink:#231c15; --ink2:#6b5f52; --ink3:#a3968a; --bel:#ffffff; --belrand:#e8dfd2;
  --esp:#1c1611; --esp2:#2a221a; --esp-t:#efe6d9; --esp-t2:#a7988a;
}
.zij{background:var(--esp);border-right:0;color:var(--esp-t)}
.org b{color:var(--esp-t)}
.snel{background:var(--esp2);border-color:transparent;color:var(--esp-t2)}
.snel input{color:var(--esp-t)}
.snel input::placeholder{color:var(--esp-t2)}
.nav a,.nav button{color:var(--esp-t)}
.nav a svg,.nav button svg{color:var(--esp-t2)}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,.05)}
.nav a.aan{background:rgba(214,161,96,.16);color:#fff;box-shadow:inset 2px 0 0 var(--blue)}
.nav a.aan svg{color:var(--blue)}
.nav .ai-nav{color:#e7b978}
.nav .ai-nav svg{color:#e7b978}
.wie small{color:var(--esp-t2)}
.wie-l button{color:var(--esp-t2)}
.wie-l button b{color:var(--esp-t)}
.wie-l button:hover,.wie-l button.aan{background:rgba(255,255,255,.06)}
.wie .oef{border-color:rgba(255,255,255,.14);color:var(--esp-t2)}
.onder button{color:var(--esp-t2)}
.onder button:hover{color:var(--esp-t)}
.av{box-shadow:0 0 0 2px var(--esp)}
.hoofd .av,.assist .av,.blad .av{box-shadow:0 0 0 2px var(--vlak)}
.bk{background:var(--bg)}
.wie-s{background:var(--esp2)!important;color:var(--esp-t)!important;border-color:transparent!important}

/* leden: kaarten op papier */
.tb{padding:14px 20px 40px;gap:8px}
.tr-r.ld{height:58px;border:1px solid var(--line);border-radius:14px;background:var(--vlak);box-shadow:0 1px 2px rgba(40,30,20,.04);padding-left:18px}
.tr-r.ld:hover{background:var(--vlak);border-color:var(--blue3);box-shadow:0 8px 24px -16px rgba(40,30,20,.35)}
.tr-r.ld.kop{height:28px;border:0;background:none;box-shadow:none}
.tr-r.ld .av.k{width:32px;height:32px;font-size:11px;background:var(--esp);color:var(--esp-t)}
.werk{background:var(--bg)}

/* gesprekken: elk gesprek een kaart met een datumblok */
.gs-r{border:1px solid var(--line);border-radius:14px;background:var(--vlak);margin-bottom:8px;padding:12px 16px;box-shadow:0 1px 2px rgba(40,30,20,.04)}
.gs-r:hover{background:var(--vlak);border-color:var(--blue3)}
.gs-r .tijd{font-weight:600;color:var(--ink);background:var(--soft);border-radius:9px;padding:6px 0;text-align:center}
.gs-kop{font-size:12.5px;font-weight:600;color:var(--ink2);text-transform:none;margin:22px 0 8px}

@media (max-width:900px){
  .zij{background:var(--esp)}
  .nav a{color:var(--esp-t2)}
  .nav a.aan{box-shadow:none}
  .tb{padding:10px 12px 40px}
  .tr-r.ld{height:auto;padding:12px 14px}
}
.werk .seg button{padding:0 14px;flex:none}
/* ronde 4: de avatars in het super coach-paneel en Vraagt aandacht nooit uitrekken */
.wacht>.av,.let-r>.av{flex:none;width:30px;height:30px;font-size:11px;display:grid;place-items:center}
/* ronde 4: vuistregels rustig, groei zonder rare schuifjes, de brief voor de coach die luistert */
.vast-k{background:var(--soft);border-radius:12px;padding:12px 14px}
.vast-k b{font-size:12.5px;font-weight:600;color:var(--ink2)}
.vast-k ul{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:4px}
.vast-k li{font-size:13px;line-height:1.45;padding-left:14px;position:relative}
.vast-k li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--rood)}
.rg-l{display:flex;flex-direction:column}
.rg-r{display:flex;flex-direction:column;gap:2px;width:100%;padding:12px 4px;border-bottom:1px solid var(--line);border-radius:0}
.rg-r:hover{background:var(--hover)}
.rg-r small{font-size:12px;color:var(--ink3);font-weight:500}
.rg-r small em{font-style:normal;color:var(--blue-t);margin-left:4px}
.rg-r span{font-size:13.5px;line-height:1.45}
.gr .sch label{display:flex!important;flex-direction:row!important;justify-content:space-between;align-items:baseline;width:100%;color:var(--ink);font-size:13.5px}
.gr .sch input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--line2);margin:10px 0 4px;accent-color:auto}
.gr .sch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--vlak);border:2px solid var(--blue);box-shadow:0 1px 3px rgba(40,30,20,.2);cursor:pointer}
.gr .sch input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--vlak);border:2px solid var(--blue)}
.advies{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:620px}
.advies small{font-size:12px;color:var(--ink3);font-weight:500}
.advies p{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.advies b{color:var(--ink);font-weight:600}
.kaart.luister{background:var(--esp);border-color:var(--esp);color:var(--esp-t)}
.kaart.luister small{color:var(--esp-t2)}
.kaart.luister b{color:var(--esp-t)}
.kaart.luister p{color:var(--esp-t)}
.kaart.luister .vraag{font-size:16px;font-weight:550;letter-spacing:-.01em;color:#e7b978}

/* Het bedrijf: Dennis over een jaar (zijn memo 2026-11-07). Rustig, zoals Vandaag: links hoe het bedrijf loopt, rechts wat hem nodig heeft. */
.bd-l{display:flex;flex-direction:column;gap:28px}
.bd-getal{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.bd-getal b{font:600 40px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bd-getal span{color:var(--ink2);font-size:13.5px}
.bd-balk{position:relative;height:8px;border-radius:4px;background:var(--soft)}
.bd-balk i{display:block;height:100%;border-radius:4px;background:var(--blue);animation:bdGroei 1.2s cubic-bezier(.2,.7,.2,1) both}
.bd-balk em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink3);border-radius:1px}
@keyframes bdGroei{from{width:0}}
.bd-bl{position:relative;display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-top:8px;height:16px}
.bd-bl span:nth-child(2){position:absolute;transform:translateX(-50%);white-space:nowrap}
.bd-sr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 36px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.bd-sr>span:first-child{display:flex;flex-direction:column;min-width:0}
.bd-sr b{font-weight:550;font-size:13.5px}
.bd-sr em{font-style:normal;font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-sb{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.bd-sb i{display:block;height:100%;background:var(--blue3);border-radius:3px;animation:bdGroei 1s cubic-bezier(.2,.7,.2,1) both}
.bd-n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.bd-tr{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 170px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.bd-tr .av{width:28px;height:28px;display:grid}
.bd-tn{display:flex;flex-direction:column;min-width:0}
.bd-tn b{font-weight:550;font-size:13.5px}
.bd-tn em,.bd-tv{font-style:normal;font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-tb{justify-self:start;font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:6px;white-space:nowrap}
.bd-tb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--groen)}
.bd-tb.o{color:var(--ink)}
.bd-tb.o::before{background:var(--oranje)}
.bd-vj{border:1px solid var(--blue3);border-radius:12px;padding:12px 14px}
.bd-m{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.bd-m:last-child{border-bottom:0}
.bd-m .av{width:28px;height:28px;display:grid;flex:none}
.bd-m>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-m b{font-weight:550;font-size:13.5px}
.bd-m em{font-style:normal;font-size:12.5px;color:var(--ink2);line-height:1.45}
.bd-mk{display:flex;align-items:center;gap:14px;margin-top:8px}
.bd-mk .knop-b{height:28px;padding:0 12px;font-size:12.5px;background:var(--blue);color:#fff;border-radius:7px}
.bd-mk .link{font-size:12.5px;color:var(--ink2)}
.bd-wg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:10px}
.bd-wd{display:flex;flex-direction:column;gap:4px;padding:8px 6px;border-radius:9px;background:var(--soft);min-width:0}
.bd-wd.nu{background:var(--blue2);box-shadow:inset 0 0 0 1px var(--blue3)}
.bd-wd small{font-size:11.5px;font-weight:600;color:var(--ink2);margin-bottom:2px}
.bd-wd span{font-size:11.5px;line-height:1.3;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.bd-wd span i{display:block;font-style:normal;font-size:10.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.bd-wd span.c{color:var(--ink);font-weight:550}
.bd-voet{margin-top:28px;max-width:720px}
.bd-chat{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding:4px 2px}
.bd-chat .bel{font-size:13.5px;line-height:1.45}
.bd-tijden{display:flex;flex-direction:column;gap:8px}
.bd-tijden label{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.bd-tijden input{accent-color:var(--blue)}
@media (max-width:900px){
  .bd-tr{grid-template-columns:28px minmax(0,1fr) auto}
  .bd-tb{justify-self:end}
  .bd-tv{display:none}
  .bd-sr{grid-template-columns:minmax(0,1fr) 70px 30px}
  .bd-wg{grid-template-columns:repeat(5,minmax(96px,1fr));overflow-x:auto;padding-bottom:4px;margin-right:-16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){ .bd-balk i,.bd-sb i{animation:none} }

/* v7 (Daniel 11-07 avond): de eerste versie die hij krijgt. Alleen zijn lotus, een levende zijbalk met zijn foto en zijn eigen teller,
   een thuis met drie dingen, de rest wazig als "volgt", een rondleiding, een echte schakelaar voor donker en licht. */
.logo{display:flex;align-items:center;padding:10px 8px 14px}
.logo img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(219,162,92,.35))}
.nav-kop{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--esp-t2);padding:18px 10px 6px;opacity:.7}
.nav a.volgt{color:var(--esp-t2);filter:blur(.6px);opacity:.55;transition:filter .25s,opacity .25s;padding-left:37px}
.nav a.volgt:hover,.nav a.volgt.aan{filter:none;opacity:.9;background:rgba(255,255,255,.04)}
.ik{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.ik-foto{position:relative;height:210px;border-radius:16px;overflow:hidden;isolation:isolate}
.ik-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 20%;animation:ikAdem 18s ease-in-out infinite alternate}
@keyframes ikAdem{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-3%,-2%)}}
.ik-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,18,10,0) 35%,rgba(26,18,10,.88))}
.ik-foto span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;flex-direction:column;color:#f6eee4}
.ik-foto b{font-size:15px;font-weight:600}
.ik-foto em{font-style:normal;font-size:11.5px;opacity:.75}
.ik-foto strong{font-size:22px;font-weight:600;letter-spacing:-.02em;color:#e7b978;font-variant-numeric:tabular-nums;margin-top:2px}
.ik-onder{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.schakel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--esp-t2)}
.schakel i{position:relative;width:34px;height:20px;border-radius:10px;background:rgba(255,255,255,.14);transition:background .25s}
.schakel i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#f6eee4;transition:transform .25s cubic-bezier(.3,.7,.3,1)}
.schakel[aria-checked="true"] i{background:#c08a43}
.schakel[aria-checked="true"] i::after{transform:translateX(14px)}
.rondl{font-size:12.5px;color:var(--esp-t2)}
.rondl:hover,.schakel:hover{color:var(--esp-t)}

/* thuis: drie dingen, elk met een beeld */
.vs{max-width:1080px}
.vs-kop{margin:18px 0 26px}
.vs-kop h1{font:600 clamp(28px,3vw,38px)/1.1 var(--sans);letter-spacing:-.03em}
.vs-kop p{color:var(--ink2);font-size:16px;margin-top:8px}
.vs-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.vd-k{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;padding:14px 14px 18px;border-radius:18px;background:var(--vlak);border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s;animation:vdIn .5s cubic-bezier(.2,.7,.2,1) both}
.vd-k:nth-child(2){animation-delay:.08s}.vd-k:nth-child(3){animation-delay:.16s}
@keyframes vdIn{from{opacity:0;transform:translateY(10px)}}
.vd-k:hover{transform:translateY(-2px);border-color:var(--blue3);box-shadow:0 14px 34px -18px rgba(90,60,20,.35)}
.vd-k b{font-size:15.5px;font-weight:600;margin-top:12px}
.vd-k em{font-style:normal;font-size:13px;color:var(--ink2);line-height:1.45}
.vd-v{width:100%;height:132px;border-radius:12px;background:var(--blue2);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;overflow:hidden}
.vd-bel{align-self:flex-start;max-width:88%;background:var(--vlak);border-radius:12px 12px 12px 4px;padding:8px 10px;font-size:12.5px;line-height:1.35;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.vd-bel.ai{align-self:flex-end;border-radius:12px 12px 4px 12px;background:var(--blue);color:#fff;display:flex;align-items:center;gap:6px;font-weight:550;animation:vdPuls 2.4s ease-in-out infinite}
.vd-bel.ai svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
@keyframes vdPuls{50%{box-shadow:0 0 0 6px var(--blue2)}}
.vd-doc{align-items:center;gap:7px;position:relative}
.vd-doc i{display:block;width:62%;height:7px;border-radius:4px;background:var(--blue3)}
.vd-doc i.kort{width:38%}
.vd-ok{position:absolute;right:18px;bottom:16px;width:30px;height:30px;border-radius:50%;background:var(--groen);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.vd-tijd{align-items:flex-start;justify-content:flex-end}
.vd-tijd small{font-size:12px;color:var(--blue-t);font-weight:600}
.vd-tijd strong{font:600 46px/1 var(--sans);letter-spacing:-.04em;color:var(--blue-t);font-variant-numeric:tabular-nums}
.vs-l{margin-top:34px}
.vs-l h2{font-size:13.5px;font-weight:600;margin-bottom:12px}
.vs-rij{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.vs-p{flex:none;width:86px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px}
.vs-p:hover{background:var(--hover)}
.vs-av{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:600;font-size:15px;box-shadow:0 0 0 2px var(--vlak),0 0 0 4px var(--blue3)}
.vs-av.o{box-shadow:0 0 0 2px var(--vlak),0 0 0 4px var(--oranje)}
.vs-p b{font-size:13px;font-weight:550}
.vs-p em{font-style:normal;font-size:11.5px;color:var(--ink3)}

/* wazig: wat volgt */
.wz{position:relative;min-height:calc(100dvh - 20px);overflow:hidden}
.wz-in{filter:blur(7px) saturate(.8);opacity:.55;pointer-events:none;user-select:none}
.wz-k{position:absolute;top:22vh;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px));text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 26px;border-radius:20px;background:color-mix(in srgb,var(--vlak) 82%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 24px 60px -30px rgba(60,40,10,.4)}
.wz-k img{width:40px;height:40px;object-fit:contain;margin-bottom:4px}
.wz-k h2{font:600 22px/1.2 var(--sans);letter-spacing:-.02em}
.wz-k p{color:var(--ink2);font-size:14.5px;line-height:1.5}
.wz-k span{font-size:12.5px;color:var(--blue-t);font-weight:550;margin-top:6px}

/* rondleiding */
.demo-l{position:fixed;inset:0;z-index:2147483600}
.demo-l.op-puck .demo-gat{border-radius:50%}
.demo-gat{position:fixed;border-radius:14px;box-shadow:0 0 0 2400px rgba(20,14,8,.55),0 0 0 3px #dba25c;pointer-events:none}
.demo-b{position:fixed;width:300px;background:var(--vlak);color:var(--ink);border-radius:16px;padding:16px 16px 14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5);animation:vdIn .3s both}
.demo-b small{font-size:11.5px;color:var(--blue-t);font-weight:600}
.demo-b p{font-size:14.5px;line-height:1.5;margin:6px 0 14px}
.demo-b div{display:flex;justify-content:space-between;align-items:center}
.demo-b .knop-b{height:32px;padding:0 14px;background:var(--blue);color:#fff;border-radius:8px;font-size:13px}
.demo-b .link{font-size:12.5px;color:var(--ink3)}

@media (max-width:900px){
  .zij{grid-template-columns:auto minmax(0,1fr) auto}
  .logo{padding:0;grid-column:1;grid-row:1}
  .logo img{width:34px;height:34px}
  .ik{grid-column:3;grid-row:1;margin:0}
  .ik-foto,.rondl{display:none}
  .nav-kop{display:none}
  .nav a.volgt{padding-left:10px}
  .vs-kop{margin:4px 0 18px}
  .vs-k{grid-template-columns:minmax(0,1fr)}
  .vd-v{height:110px}
  .demo-b{left:16px!important;right:16px;bottom:16px;top:auto!important;width:auto}
  .wz-k{top:120px}
}
@media (prefers-reduced-motion:reduce){ .ik-foto img,.vd-bel.ai,.vd-k{animation:none} }

/* de puck staat overal vrij (Daniel 11-07): ruimte onder elk scherm, nooit over een knop of een rij */
.inh,.tb{padding-bottom:120px}

@media (max-width:900px){ .inh{padding-bottom:110px} }
@media (max-width:900px){ .demo-l.op-puck .demo-b{bottom:112px} }
@media (max-width:900px){ .tr-r.ld{grid-template-rows:auto;height:64px;padding:0 16px 0 22px} .tr-r.ld>:nth-child(2){grid-column:2;grid-row:1} }