/* BitzSearch: wat alleen BitzSearch nodig heeft. Alleen tokens uit ui.css, geen eigen kleuren. De schil en de maten komen letterlijk uit Planner
   (ui.css en schil.css, besluit Jurgen 14-10: elke app van SpaceBitz heeft dezelfde schil); hier geen grotere letters of knoppen ernaast. */

p{margin:0}
.zacht{color:var(--muted)}
.klein{font-size:var(--t-14)}
.lab{font-size:var(--t-12);font-weight:700;color:var(--text-2);letter-spacing:.02em;margin:0}
.fout{color:var(--red-text);font-size:var(--t-14);margin:0}
.btn.breed{width:100%}
.seg.breed{display:flex;width:100%}
.seg.breed button{flex:1 1 0;justify-content:center;text-align:center;padding:0 8px}
.seg.filter{display:flex;width:max-content;max-width:100%;overflow-x:auto}
/* Een keuze in de kop van een pagina (Resultaat: de maand) blijft binnen de breedte en schuift zelf op een telefoon. */
.b-kop .acts{min-width:0;max-width:100%}
.seg.filter button{flex:none;white-space:nowrap} /* een filter met veel knoppen schuift op de telefoon in plaats van zijn knoppen te breken (31-10, Collecties) */

/* ---------- /start (de kaart en de twee kolommen komen uit schil.css, zoals /start van Planner) ---------- */
.s-vak{display:grid;gap:16px;min-width:0}
.s-vak h1{margin:0;font-size:var(--t-22);line-height:1.25}
.s-vak h2{font-size:var(--t-18)}
/* BitzSearch is één woord: geen spatie tussen Bitz en Search, ook niet op de kaart van /start (Planner zet daar SpaceBitz en Planner los). */
.start-kaart .logo .word .os{margin-left:0}
/* Het merk van BitzSearch (7-11, besluit Jurgen; bron ontwerp/merk/): het volledige logo zoals aangeleverd (vergrootglas en woordmerk
   samen, BitzSearch.svg), als één beeld in de plaats van de planeet van SpaceBitz en het woord in tekst. Het losse vergrootglas is
   alleen de favicon. --bitz-logo wijst het bestand aan (in het donker de papierversie: de inkt wordt licht, het oranje blijft, zoals
   merk-paper.svg bij merk.svg); ui.css blijft letterlijk dat van Planner. Het woord in de HTML blijft voor schermlezers, onzichtbaar.
   De bezig-lus (merk-beweging.js) blijft de planeet van SpaceBitz: dat is de motor erachter. */
:root{--bitz-logo:url(bitzsearch-logo.svg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bitz-logo:url(bitzsearch-logo-paper.svg)}}
:root[data-theme="dark"]{--bitz-logo:url(bitzsearch-logo-paper.svg)}
.logo:has(> .merk){gap:0}
.logo .merk{height:15px;width:calc(15px * 892 / 106);background-image:var(--bitz-logo)}
.logo .word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.start.kaal .s-wat{display:none}
.start.kaal .s-raster{display:block}
@media (min-width:900px){.start.kaal .start-kaart{width:min(560px,100%)}}
.vorm{display:grid;gap:16px}
details.extra{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset)}
details.extra>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;min-height:48px;padding:8px 16px;font-weight:600;color:var(--heading)}
details.extra>summary::-webkit-details-marker{display:none}
details.extra>summary span{font-weight:500;color:var(--muted);font-size:var(--t-14)}
details.extra>.field{padding:0 16px 16px}
details.extra>.cb-lijst{margin:0;padding:0 16px 16px 36px;display:grid;gap:6px;font-size:var(--t-14);color:var(--text-2)}
.gevonden,.plan-lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gevonden li,.plan-lijst li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.gevonden li .i{color:var(--green-text);width:24px;height:24px}
.plan-lijst li .i{color:var(--heading);width:24px;height:24px}
.gevonden b,.plan-lijst b{display:block;color:var(--heading)}
.plan-lijst.kort li{align-items:center}
.plan-lijst.kort .i{color:var(--green-text)}
.blokje{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;display:grid;gap:8px}
.eerste{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.eerste li > span{display:block;font-weight:600;color:var(--heading)}
.eerste li small{color:var(--muted);font-size:var(--t-13)}
.talen-kies .sw:last-child,.gemeenten .sw:last-child,.werking .sw{border-bottom:0}
.prijs{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prijs b{font-size:var(--t-22);font-weight:800;color:var(--heading);letter-spacing:-.02em}
.prijs span{color:var(--muted)}
.bezig{display:flex;gap:12px;align-items:center;min-height:48px;color:var(--text-2);font-weight:600}
.gelukt{display:flex;gap:8px;align-items:center;color:var(--green-text);font-weight:700;margin-bottom:12px}
.koppel{display:grid}
.klaar-ic{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green-text);display:inline-flex;align-items:center;justify-content:center}
.klaar-ic .i{width:32px;height:32px;stroke-width:2.5}

/* Stap 3 en 4 van /start: het doel en de stem (ontwerp/doel-en-plan.md). */
.doel-zin{font-size:var(--t-18);font-weight:700;color:var(--heading);line-height:1.35;margin:0 0 4px}
.doel-delen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.doel-delen li{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr);gap:12px;font-size:var(--t-14)}
.doel-delen b{color:var(--muted);font-weight:600}
.doel-delen span{color:var(--heading);font-weight:600}
@media (max-width:560px){.doel-delen li{grid-template-columns:minmax(0,1fr)}}
.stemmen{grid-template-columns:minmax(0,1fr)}
/* Stap 5: de kalender van de eerste drie maanden en of het plan het doel dekt. */
.plan-maanden{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.plan-maand-kop{margin:0 0 8px;font-size:var(--t-13);font-weight:700;color:var(--text-2)}
.plan-maanden .eerste{gap:8px}
.plan-maanden .eerste li > span{font-size:var(--t-14)}
.dekking{display:flex;gap:8px;align-items:flex-start;margin:0;padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--amber-rand);background:var(--amber-soft);color:var(--amber-text);font-size:var(--t-14);font-weight:600}
.dekking.ok{border-color:var(--green-rand);background:var(--green-soft);color:var(--green-text)}
.dekking .i{flex:none;margin-top:1px}
.stem-tegel .z{white-space:normal;line-height:1.5}

/* ---------- het werkvlak ---------- */
.b-stapel>.kpis{margin-bottom:0}

/* Overzicht */
/* De stand op het overzicht is de balk van Planner (.balk in ui.css); alleen de kleur van het icoon zegt welke stand. */
.b-stapel>.balk{margin:0}
.balk b{color:var(--heading)}
.balk.goed>.i{color:var(--green-text)}
.balk.stop>.i{color:var(--red-text)}
.balk.bijna>.i{color:var(--blue-deep)}
.volgende{display:grid;gap:4px;text-decoration:none;color:inherit;border-radius:var(--r-sm)}
.volgende:hover{text-decoration:none}
.volgende .wanneer{font-weight:700;color:var(--text-2);text-transform:none}
.volgende .wanneer::first-letter{text-transform:uppercase}
.volgende .n{font-size:var(--t-16);font-weight:700;color:var(--heading);line-height:1.3}
.volgende .lees{display:inline-flex;align-items:center;gap:4px;color:var(--blue-text);font-weight:600;min-height:40px}
.volgende:hover .lees{text-decoration:underline}
.tijdlijn{list-style:none;margin:0;display:grid;gap:12px}
.tijdlijn li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
.tijdlijn .d{color:var(--muted);font-size:var(--t-14)}
.tijdlijn b{display:block;color:var(--heading)}

/* Teksten */
.melding{display:flex;gap:8px;align-items:center;padding:12px 16px;border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber-text);font-weight:600;border:1px solid var(--amber-rand)}
.melding.info{align-items:flex-start;background:var(--blue-soft);color:var(--blue-deep);border-color:var(--blue-rand);font-size:var(--t-14);font-weight:600}
.melding.info .i{flex:none;margin-top:1px}
.toolbar .seg.filter{margin:0}
.teksten-tbl .co .n{max-width:none;font-size:var(--t-14)}
.teksten-tbl td.co-cell{white-space:normal;min-width:320px}
/* Werkgebied: de twee keuzes vullen de breedte van de kaart (auto-fill in ui.css laat op een breed scherm lege kolommen staan); één
   per rij op een telefoon. */
.keuzetegels.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.keuzetegels.twee{grid-template-columns:minmax(0,1fr)}}
.toevoegen .selw{flex:1 1 220px;max-width:360px}
/* De taalkeuze onder de startkaart: vier knoppen, de gekozen vet. */
.taalkeuze{display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;margin:4px 0 0}
.taalkeuze .btn.link[aria-current]{color:var(--heading);font-weight:700}
.toevoegen .hint{flex:1 1 100%;color:var(--muted);font-size:var(--t-12)}
/* De eigen naam van een taal naast de Nederlandse ("Duits · Deutsch") en het land naast een plaats over de grens. */
.sw .t small{margin-left:6px;color:var(--muted);font-weight:400;font-size:var(--t-13)}
.blokje .toevoegen{margin-top:8px}
/* Voorstellen: de titel krijgt de ruimte (zoals bij Teksten), de twee knoppen staan met een tussenruimte naast elkaar. */
.voorstellen-tbl .co .n{max-width:none;font-size:var(--t-14)}
.voorstellen-tbl td.co-cell{white-space:normal;min-width:320px;width:100%}
/* Waar de bestellingen begonnen (#resultaat/bestellingen): de naam krijgt de breedte, de getallen rechts. */
.bestel-tbl .co .n{max-width:none;font-size:var(--t-14)}
.bestel-tbl td.co-cell{white-space:normal;min-width:320px;width:100%}
.col-tbl.bestel-tbl th.num,.col-tbl.bestel-tbl td.num{text-align:right;width:auto;white-space:nowrap;padding-left:24px}
.voorstellen-tbl .acts{gap:8px;flex-wrap:nowrap}

/* De contentkalender (Teksten › Kalender): zeven kolommen met haarlijnen, vandaag in de kleur van vandaag uit Planner (--today), een tekst
   als regel met een streep in de kleur van zijn stand. Op een telefoon alleen de dagen met teksten, onder elkaar. */
.kal-nav{display:flex;align-items:center;gap:4px}
.kal-maand{min-width:140px;text-align:center;color:var(--heading);font-size:var(--t-14)}
.kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.kal-kop{padding:8px;font-size:var(--t-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);background:var(--inset)}
.kal-dag{min-height:112px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.kal-dag:nth-child(7n){border-right:0}
.kal-dag.buiten{background:var(--inset)}
.kal-dag.vandaag{background:var(--today)}
.kal-nr{font-size:var(--t-12);font-weight:700;color:var(--muted)}
.kal-dag.vandaag .kal-nr{color:var(--orange-text)}
.kal-wd{display:none}
.kal-item{display:flex;flex-direction:column;gap:1px;padding:4px 6px;border-radius:var(--r-sm);border-left:3px solid var(--line-strong);background:var(--surface-2);text-decoration:none;min-width:0}
.kal-item:hover{text-decoration:none;background:var(--hover-row)}
.kal-item b{font-size:var(--t-12);font-weight:700;color:var(--heading);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kal-item small{font-size:var(--t-11);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-item.komt{border-left-color:var(--blue)}
.kal-item.online{border-left-color:var(--green)}
.kal-niets{margin:0;padding:12px 20px 16px;color:var(--muted);font-size:var(--t-13)}
@media (max-width:700px){
  .kal{display:block}
  .kal-kop,.kal-dag.buiten,.kal-dag.leeg{display:none}
  .kal-dag{min-height:0;border-right:0;padding:10px 16px;gap:6px}
  .kal-wd{display:inline;text-transform:capitalize}
  .kal-item{padding:8px 10px;min-height:44px;justify-content:center}
  .kal-item b{font-size:var(--t-13)}
  .kal-maand{min-width:0}
}

/* de lade van een tekst */
.drawer{width:720px}
.drawer .dh-txt{flex:1;min-width:0}
.drawer .dh .eyebrow::first-letter{text-transform:uppercase}
.drawer .dh .eyebrow{text-transform:none;letter-spacing:0;font-size:var(--t-14)}
.drawer .db.een{display:block;padding:24px}
/* Een melding boven de tekst in de lade (de winkel: lees hem eerst na) staat los van de tekst. */
.drawer .db.een>.melding{margin:0 0 16px}
/* De versies van een tekst per markt en taal (in de lade): één rij per versie, de stand rechts. */
.drawer .db.een>.vn-blok{margin:0 0 16px}
.versies{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.versies li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.versies li:last-child{border-bottom:0}
.versies .vv-naam{flex:1;min-width:0;font-weight:600;color:var(--heading)}
.versies .vv-naam small{display:block;font-weight:400;font-size:var(--t-12)}
.btn.sluit{height:40px}
.artikel{max-width:65ch;line-height:1.65;display:grid;gap:16px}
.artikel h3{font-size:var(--t-18);margin-top:8px}
.artikel .artikel-kop{font-size:var(--t-18);margin-top:8px}
.artikel h4.artikel-kop{font-size:var(--t-16)}
.artikel ul,.artikel ol{margin:0;padding-left:24px;display:grid;gap:6px}
.cijferregel{color:var(--muted);font-size:var(--t-14);font-weight:600}
.faq{margin:0;display:grid;gap:4px}
.faq dt{font-weight:700;color:var(--heading)}
.faq dd{margin:0 0 12px}
.aanpassen{display:grid;gap:16px}
.aanpassen .ta{min-height:120px}
.bevestig{flex-basis:100%;font-weight:700;color:var(--heading)}

/* Resultaat */
.staven{display:grid;gap:12px}
.staaf{display:grid;grid-template-columns:40px minmax(0,1fr) 32px;gap:12px;align-items:center}
.staaf .l{color:var(--muted);font-size:var(--t-14)}
.staaf b{color:var(--heading);text-align:right}
.balkje{height:12px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.balkje i{display:block;height:100%;width:var(--w,0);border-radius:var(--r-pill);background:var(--line-strong)}
.staaf.nu .balkje i{background:var(--orange)}
/* Verdeling: één balk met delen in hun eigen kleur en een legende (Resultaat, waar de bestellingen begonnen). Kleuren uit de tokens. */
.verdeling{display:flex;height:12px;border-radius:var(--r-pill);overflow:hidden;background:var(--surface-2);gap:2px}
.verdeling i{display:block;height:100%;width:var(--w,0);min-width:4px}
.verdeling-leg{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:var(--t-13);color:var(--text-2)}
.verdeling-leg span{display:inline-flex;align-items:center;gap:6px}
.verdeling-leg b{color:var(--heading)}
.verdeling-leg i{width:10px;height:10px;border-radius:var(--r-pill);display:inline-block}
.v-collectie{background:var(--orange)}.v-product{background:var(--blue)}.v-start{background:var(--purple)}.v-artikel{background:var(--green)}.v-andere{background:var(--muted)}.v-onbekend{background:var(--line-strong)}
/* Op een telefoon: zonder de kolom Via Google en zonder woorden in tweeën te knippen. */
@media (max-width:640px){.bestel-mini th:nth-child(4),.bestel-mini td:nth-child(4){display:none}.bestel-mini td b{overflow-wrap:normal;word-break:normal;hyphens:auto}}
.goedregel{display:flex;gap:8px;align-items:flex-start}
.ai-blok{display:grid;gap:20px}
.ai-blok h3{font-size:var(--t-16);margin-bottom:8px}
.ai-rijen,.ai-fouten{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ai-rijen li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.ai-rijen b{color:var(--heading)}
.ai-fouten li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.ai-fouten .i{color:var(--amber-text)}
.ai-fouten b{display:block;color:var(--heading)}
.goedregel .i{color:var(--green-text);margin-top:2px}

/* Jouw zaak */
.rij-actie{display:flex;gap:12px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rij-actie p{flex:1 1 240px}
.cf.toevoegen{justify-content:flex-start;flex-wrap:wrap}
.toevoegen .inp{flex:1 1 220px;max-width:360px}
.taken{display:grid;gap:16px}
.taken .rij-actie+.rij-actie{padding-top:16px;border-top:1px solid var(--line)}
.rij-knoppen{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- proefstand ---------- */
body.met-proef{padding-top:var(--demobar)}
.proefbalk{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--navy);color:var(--on-navy);padding-top:env(safe-area-inset-top,0px);box-shadow:var(--shadow-md)}
.proefbalk .pb-in{max-width:880px;margin:0 auto;display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.proefbalk .pb-tekst{flex:1 1 300px;min-width:0}
.proefbalk .eyebrow{color:var(--on-navy)}
.proefbalk .pb-opdracht{font-size:var(--t-16);font-weight:700;margin:0;outline:none}
.proefbalk .pb-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.proefbalk .pb-acts .inp{width:160px;height:40px}
.proefbalk .btn.quiet{color:var(--on-navy);border-color:var(--on-navy)}
.proefbalk .btn.quiet:hover{background:transparent;text-decoration:underline}
.proefbalk .btn.navy{background:var(--card);color:var(--heading);border-color:var(--card)}
.proefbalk.gelukt{background:var(--green-soft);color:var(--green-text)}
.proef-eind{display:grid;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.uitslag{list-style:none;margin:0;padding:0;display:grid}
.uitslag li{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.uitslag li:last-child{border-bottom:0}
.uitslag b{color:var(--heading)}
.uitslag li>span{color:var(--text-2);font-size:var(--t-14);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Collecties (1-11): zoeken in de werkbalk, een kolom per markt, de markten in de lade */
.toolbar .r .col-zoek{width:240px;height:38px}
.col-tbl th.num,.col-tbl td.num{text-align:center;width:64px}
.col-stap{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);padding:12px 16px;margin:12px 0 0;display:grid;gap:4px}
.col-stap p{margin:0}
.col-kop{margin:24px 0 8px;font-size:var(--t-16)}
/* Voor en na bij een verbetering (1-11): per onderdeel wat er nu staat en het voorstel, naast elkaar vanaf 641 px */
.vn-blok{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;margin-top:16px;display:grid;gap:4px}
/* Terug linken (5-11): de knoppen onder een voorstel, de woorden die de link krijgen onderstreept. */
.vn-knoppen{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vn-na u{text-decoration-thickness:2px;text-underline-offset:3px}
.vn-blok .col-kop{margin:4px 0 4px}
.vn{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.vn-kop{font-weight:700;color:var(--heading)}
.vn-l{display:block;font-size:var(--t-11);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.vn p,.vn-blok>p{margin:0}
.vn .ta{min-height:88px}
.vn .ta.vn-titel{min-height:0;resize:none}
.vn-zw .chip{margin:4px 4px 0 0}
.vn-bewijs{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.vn-bewijs .cb-lijst{margin:0}
@media (min-width:641px){.vn{grid-template-columns:1fr 1fr;column-gap:16px}.vn-kop{grid-column:1/-1}}
.mini-tbl{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.mini-tbl th{padding:0 8px 8px 0;text-align:left;font-size:var(--t-11);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.mini-tbl td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.mini-tbl tr:last-child td{border-bottom:0}
.mini-tbl .num{text-align:right;white-space:nowrap;padding-right:0;padding-left:8px}
.mini-tbl td b{display:block;color:var(--heading)}
.mini-tbl td small{display:block;color:var(--muted);font-size:var(--t-12)}
.mini-tbl+.klein{margin-top:8px}
@media (max-width:640px){.mini-tbl th,.mini-tbl td{padding-right:4px}.mini-tbl .num{padding-left:4px}.mini-tbl td b,.mini-tbl td small{overflow-wrap:anywhere}}
.col-kop+.seg{margin-bottom:8px}
.k-knop:has(>.chip+.btn),.k-knop:has(>.btn+.btn){display:flex;align-items:center;gap:8px}

@media (max-width:900px){
  .drawer{width:100%}
  .drawer .db.een{padding:16px}
}
@media (max-width:560px){
  .seg button{min-height:40px}
  .toolbar .r .col-zoek{width:100%;height:40px}
  .col-tbl th.num,.col-tbl td.num{text-align:right;width:auto}
  .teksten-tbl td.co-cell,.voorstellen-tbl td.co-cell,.bestel-tbl td.co-cell{min-width:0}
  .voorstellen-tbl .acts{gap:8px}
  .drawer .df .btn{flex:1 1 100%}
  .tijdlijn li{grid-template-columns:64px minmax(0,1fr)}
  .ai-rijen li{grid-template-columns:minmax(0,1fr);gap:2px}
  .proefbalk .pb-acts{width:100%}
  .proefbalk .pb-acts .inp{flex:1 1 120px;width:auto}
  .drawer .df .sp{display:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* Een nieuw thema als voorstel (Voorstellen): uitleg links, twee knoppen rechts; op een telefoon de uitleg erboven en de knoppen even breed. */
.thema-voorstel .cf{flex-wrap:wrap;align-items:center}
@media (max-width:700px){.thema-voorstel .cf .hint{width:100%}.thema-voorstel .cf .btn{flex:1;justify-content:center;min-height:40px}}

/* De juridische pagina's (voorwaarden.html, privacy.html): de tekstpagina van Planner (SpacePlanner/web/tekst.css, zelfde maten), want
   ui.css zet lijsten zonder opsommingsteken en er was nog geen leeskolom. Onder /start de twee links ernaar, links uitgelijnd onder de prijs
   (de linkregel .s-voet uit schil.css, tikdoel 40 px). */
.s-voet.s-juridisch{justify-content:flex-start}
.tekst{max-width:720px;margin:0 auto;padding:32px 24px 24px;display:flex;flex-direction:column;gap:24px;min-height:100vh;min-height:100dvh}
.tekst-kop{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.tekst-kop nav{display:flex;gap:4px 16px;flex-wrap:wrap}
.tekst-kop nav a{display:inline-flex;align-items:center;min-height:40px;font-size:var(--t-14);font-weight:600;color:var(--text-2);text-decoration:none}
.tekst-kop nav a:hover{color:var(--heading);text-decoration:underline}
.tekst-kop nav a[aria-current="page"]{color:var(--heading)}
.tekst-kaart{padding:32px 40px 24px}
.tekst-kaart h1{margin:4px 0 0;font-size:var(--t-32);color:var(--heading);line-height:1.15;letter-spacing:-.01em}
.tekst-meta{margin:8px 0 0;color:var(--muted);font-size:var(--t-13)}
.tekst-kaart h2{margin:32px 0 8px;font-size:var(--t-18);color:var(--heading);line-height:1.3}
.tekst-kaart h3{margin:16px 0 4px;font-size:var(--t-16);color:var(--heading)}
.tekst-kaart p,.tekst-kaart li{font-size:var(--t-16);line-height:1.65;max-width:35em}
.tekst-kaart p{margin:0 0 12px}
.tekst-kaart ul{margin:0 0 12px;padding-left:24px;list-style:disc}
.tekst-kaart li::marker{color:var(--muted)}
.tekst-kaart li{margin:0 0 4px}
.tekst-kaart a{overflow-wrap:anywhere}
.tekst-samenvatting{margin:24px 0 8px;padding:16px 20px;background:var(--inset);border-radius:var(--r-sm)}
.tekst-samenvatting p{margin:8px 0 0}
.tekst-samenvatting ul{margin:8px 0 0}
.tekst-verplicht{padding-left:16px;border-left:2px solid var(--line-strong)}
.tekst>.melding{align-items:flex-start;font-size:var(--t-14);line-height:1.5}
.tekst>.melding .i{margin-top:1px}
@media (max-width:560px){
  .tekst{padding:16px 16px 12px;gap:16px}
  .tekst-kaart{padding:24px 20px 16px}
  .tekst-kaart h1{font-size:var(--t-26)}
  .tekst-kaart h2{margin-top:24px}
  .tekst-samenvatting{padding:12px 16px}
}
/* Een tekst die op dit moment geschreven wordt: de bezig-lus van het merk met wat er gebeurt. */
.schrijft{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:var(--r);margin-top:16px}
.schrijft h3{margin:0 0 4px}
.schrijft p{margin:0;color:var(--muted)}
/* De bezig-lus van het merk (merk-beweging.js, overgenomen uit SpaceBitzOS): een canvas met data-merk-bezig speelt de baan in een lus. */
canvas.merk-bezig{display:block;flex:none;width:40px;height:32px}
canvas.merk-bezig.sm{width:24px;height:19px}
canvas.merk-bezig.lg{width:64px;height:51px}
/* De foto bij een tekst in de lade (functie beeld), met waar ze vandaan komt. */
.tekst-beeld{margin:0 0 16px}
.tekst-beeld .vak{aspect-ratio:3/2;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tekst-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.drawer .dh .meta .btn.sm{text-decoration:none}
.tekst-beeld figcaption{margin-top:8px;color:var(--muted);font-size:var(--t-12)}

/* Zelf de foto kiezen (28-10): twee kleine knoppen onder de foto, zes kandidaten in een raster; op een telefoon twee per rij en knoppen
   van 40 px. */
/* In .artikel (raster met 16 px tussenruimte) geen eigen marges: de knoppen staan 8 px onder het onderschrift. */
.beeld-acties{display:flex;flex-wrap:wrap;gap:8px}
.artikel .tekst-beeld{margin:0}
.tekst-beeld:has(figcaption)+.beeld-acties{margin-top:-8px}
.beeld-keuze{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.beeld-kandidaat{display:block;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/2;background:var(--surface-2);cursor:pointer}
.beeld-kandidaat:hover{border-color:var(--navy-line)}
.beeld-kandidaat img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.beeld-keuze{grid-template-columns:repeat(2,minmax(0,1fr))}.beeld-acties .btn.sm{height:40px}}
/* Nakijken door SpaceBitz (#nakijken): de twee knoppen naast elkaar, op een telefoon onder elkaar zodra ze niet passen. */
.nakijk-knoppen{display:flex;flex-wrap:wrap;gap:8px}
/* De pakketten (28-10): de tegels gebruiken de hele breedte van de kaart (Jurgen: "als de ruimte er is, gebruik je die"). Vier naast
   elkaar, op een smaller scherm twee bij twee en op een telefoon onder elkaar; nooit drie plus één losse tegel met lege ruimte ernaast. */
.keuzetegels.pakketten{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.keuzetegels.pakketten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.keuzetegels.pakketten{grid-template-columns:minmax(0,1fr)}}
/* Pakketten bij Abonnement (28-10): vier tegels met elk een eigen knop, het huidige pakket in navy, het volgende aanbevolen in oranje
   (de primaire actie). Zelfde raster als de keuzetegels: vier, twee bij twee, of onder elkaar. */
.pakket-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.pakket-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pakket-tegels{grid-template-columns:minmax(0,1fr)}}
.pakket-tegel{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--inset);min-width:0}
.pakket-tegel.nu{border-color:var(--navy-line);background:var(--navy-soft)}
.pakket-tegel.aanbevolen{border-color:var(--orange-rand)}
.pakket-tegel .pk-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pakket-tegel h4{margin:0;font-size:var(--t-16);color:var(--heading)}
.pakket-tegel .pk-prijs{margin:0;display:flex;align-items:baseline;gap:6px}
.pakket-tegel .pk-prijs b{font-size:var(--t-22);color:var(--heading)}
.pakket-tegel .pk-prijs span,.pakket-tegel .pk-uitleg{color:var(--text-2);font-size:var(--t-13);margin:0}
.pakket-tegel .pk-cijfers{margin:0;display:grid;gap:2px;font-size:var(--t-12);color:var(--muted)}
.pakket-tegel .pk-meer{color:var(--green-text);font-weight:700}
.pakket-tegel .btn{margin-top:auto;width:100%}
.pk-bevestig{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pk-bevestig p{margin:0;flex:1 1 320px}
.card.upgrade .cb{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.card.upgrade h3{margin:4px 0}
.card.upgrade .zacht{margin:0}
@media (max-width:560px){.card.upgrade .cb{grid-template-columns:minmax(0,1fr)}.card.upgrade .btn{width:100%}}
/* Het overzicht heeft drie cijfers, niet zes (het raster van Planner): ze delen de volle breedte in plaats van de helft leeg te laten
   (Jurgen 28-10: "als de ruimte er is, gebruik je die"). Op een telefoon blijft het raster van ui.css (twee per rij). */
@media (min-width:641px){.b-stapel>.kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
/* De knoppen van het abonnement rechtsboven naast de stand, niet in een aparte balk eronder (Jurgen 28-10: "cleaner"). Op een telefoon
   onder de tekst, over de volle breedte. */
.abon-stand .abon-boven{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start}
.abon-knoppen{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
@media (max-width:700px){.abon-stand .abon-boven{grid-template-columns:minmax(0,1fr)}.abon-knoppen .btn{flex:1 1 100%;justify-content:center;min-height:40px}}
/* Facturen (28-10, _gedeeld/facturen.mjs): de pagina voor de klant (factuur.html) en de lijst bij Abonnement. Haarlijnen, geen schaduw;
   bedragen in mono en rechts. Bij afdrukken alleen het document, op wit (factuur.js zet het lichte thema tijdens het afdrukken). */
.tekst.factuur{max-width:800px}
.fa-balk{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.fa-balk .zacht{font-size:var(--t-13);color:var(--muted)}
.fa-doc{display:flex;flex-direction:column;gap:24px}
.fa-doc h1{margin:4px 0 0;font-size:var(--t-26);color:var(--heading);letter-spacing:-.01em}
.fa-doc h2{margin:0 0 -16px;font-size:var(--t-16);color:var(--heading)}
.fa-doc p{margin:0;font-size:var(--t-14);line-height:1.6;max-width:none}
.fa-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fa-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 24px;margin:0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fa-feiten dt{font-size:var(--t-12);font-weight:600;color:var(--muted)}
.fa-feiten dd{margin:4px 0 0;font-size:var(--t-14);color:var(--heading);font-weight:600}
.fa-partijen{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:var(--t-14);line-height:1.6;color:var(--text)}
.fa-partijen .eyebrow{margin-bottom:4px}
.fa-partijen b{color:var(--heading)}
.fa-regels{width:100%;border-collapse:collapse;font-size:var(--t-14)}
.fa-regels th{text-align:left;font-size:var(--t-12);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 0 8px;border-bottom:1px solid var(--line-strong)}
.fa-regels td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text);line-height:1.5}
.fa-regels td+td,.fa-regels th+th{padding-left:24px}
.fa-regels .r{text-align:right;white-space:nowrap}
.fa-regels tfoot td{border-bottom:0;padding:6px 0;color:var(--text-2)}
.fa-regels tfoot tr:first-child td{padding-top:16px}
.fa-regels .fa-tot td{padding-top:12px;border-top:1px solid var(--line-strong);font-size:var(--t-16);font-weight:800;color:var(--heading)}
.fa-noot{color:var(--text-2)}
.fa-bank{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:var(--t-14)}
.fa-bank dt{color:var(--muted);font-weight:600}
.fa-bank dd{margin:0;color:var(--heading)}
.fa-doc .mono,.fa-lijst .mono{font-family:var(--mono)}
/* De lijst bij Abonnement. */
.fa-lijst{display:flex;flex-direction:column}
.fa-lijst li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.fa-lijst li:last-child{border-bottom:0}
.fa-lijst .nr{font-weight:700;color:var(--heading)}
.fa-lijst .wanneer{display:block;font-size:var(--t-13);color:var(--muted)}
.fa-lijst .som{font-weight:700;color:var(--heading)}
@media (max-width:560px){
  .fa-partijen{grid-template-columns:1fr}
  .fa-lijst li{grid-template-columns:minmax(0,1fr) auto}
  .fa-lijst li .btn{grid-column:1/-1;justify-self:start}
}
@media print{
  .tekst.factuur{max-width:none;padding:0;min-height:0}
  .fa-balk{display:none}
  .fa-kaart{border:0;padding:0;background:transparent}
  body{background:var(--card)}
}
.k-knop{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} /* 31-10: twee knoppen naast elkaar in een rij van Koppelingen (Shopify: Opnieuw lezen, Ontkoppelen) */
/* 31-10 (Jurgen: "nieuwe functieknoppen nooit zomaar in het midden"): in de kop van een kaart vult de titel de ruimte en staan knoppen
   altijd rechts, ook als ze niet in een .r staan. */
.card .ch>.inr-kop{flex:1 1 auto}
.card .ch>.btn,.card .ch>button{margin-left:auto}
.card .ch:has(>.inr-kop){align-items:center} /* een knop staat rechts en verticaal in het midden van de kop */
/* 31-10: het favicon van de site in plaats van de beginletter, naast de naam van de zaak. */
.avatar.met-logo{background:var(--card);border:1px solid var(--line);overflow:hidden;padding:2px}
.avatar.met-logo img{display:block;width:100%;height:100%;object-fit:contain}
/* 31-10 (Jurgen: "minder snel naar de volgende regel, dan is het vak ook minder hoog"; standaard, zoals de knoppen): de uitleg onder een
   paginatitel of in de kop van een kaart gebruikt de breedte die er is, tot een leesbare 120 tekens. */
.inr-kop .sub,.b-kop .intro,.ph .intro{max-width:120ch}
/* Een veld met zijn knop (Voeg toe) op één lijn, ook buiten een kaart (in een lade); 31-10. */
.toevoegen{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Staafjes met een langere naam (een land) en een groter getal: Via Google per land (31-10). */
.staven.breed .staaf{grid-template-columns:minmax(80px,160px) minmax(0,1fr) auto}