/* BitzSEO: wat alleen BitzSEO 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}

/* ---------- /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)}
/* BitzSEO is één woord: geen spatie tussen Bitz en SEO, ook niet op de kaart van /start (Planner zet daar SpaceBitz en Planner los). */
.start-kaart .logo .word .os{margin-left:0}
.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%}
.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}
.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)}
.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}

@media (max-width:900px){
  .drawer{width:100%}
  .drawer .db.een{padding:16px}
}
@media (max-width:560px){
  .seg button{min-height:40px}
  .teksten-tbl td.co-cell,.voorstellen-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}}