/* welkom.css — het welkomscherm en het verkenmodus-lint (ronde 11)
   ──────────────────────────────────────────────────────────────
   Twee onderdelen: het volscherm-welkom (11a web, 11c mobiel) dat verschijnt
   als er geen werkbestand is, en het oranje lint (11b) dat boven het
   dashboard hangt zolang een voorbeeld als kopie open staat.

   Palet en maten uit tokens.css; de petrol-dark achtergrond en de cream
   kaart komen recht uit frame 11a.
   ────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   HET WELKOMSCHERM (11a web, 11c mobiel)
   ═══════════════════════════════════════════════════════════════════ */

#welkom{
  position:fixed;
  inset:0;
  z-index:var(--z-venster);
  background:var(--schil);
  display:grid;
  place-items:center;
  overflow:auto;
  padding:var(--sp-10);
}
#welkom[hidden]{ display:none; }

/* de achtergronddriehoeken, subtiel linksonder zoals in het frame */
/* Vast t.o.v. het venster, niet absoluut binnen #welkom. Absoluut gepositioneerd
   steekt deze decoratie 120px onder de onderrand uit, en omdat #welkom
   overflow:auto draagt telde die overhang mee als scrollbare hoogte: een
   permanente scrollbalk op elk welkomscherm, zonder dat er iets te scrollen was.
   #welkom ligt zelf al fixed over het volle venster, dus de driehoeken landen
   op exact dezelfde plek. */
#welkom::before{
  content:"";
  position:fixed;
  left:-80px;
  bottom:-120px;
  width:560px;
  height:470px;
  opacity:.06;
  background:
    /* twee driehoeken als een enkele SVG-achtergrond, in het palet */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><polygon points='48,8 8,90 88,90' fill='none' stroke='%237FC4BE' stroke-width='6' stroke-linejoin='round'/><polygon points='72,8 32,90 112,90' fill='none' stroke='%23C87941' stroke-width='6' stroke-linejoin='round'/></svg>")
    no-repeat center / contain;
  pointer-events:none;
}

.wk-wrap{
  width:760px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--sp-9);
  position:relative;
}

/* de cream kaart; ze draagt zelf het enige merkmoment (22a-frame) */
.wk-kaart{
  background:var(--cream);
  border-radius:var(--r-kaart-groot);
  padding:var(--sp-8) var(--sp-9);
  display:flex;
  flex-direction:column;
  gap:var(--sp-7);
}

/* kaart-kop: klein driehoek-logo + "Waar wil je beginnen?" in Fraunces */
.wk-kaart-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
.wk-logo{ width:30px; height:25px; flex:none; }
.wk-kaart-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-s);
  color:var(--petrol-dark);
}
/* #178 — de stille "Sluit ✕" rechts op de kaart-kop, alleen als er iets is om
   naar terug te keren. Terug naar het lopende traject, geen wis, geen bevestiging. */
.wk-sluit{
  margin-left:auto;
  flex:none;
  border:none;
  background:none;
  padding:4px var(--sp-3);
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  color:var(--ink-soft);
  cursor:pointer;
}
.wk-sluit:hover{ color:var(--ink); text-decoration:underline; }

/* rij 1: eigen traject starten (terracotta) + een werkbestand openen */
.wk-hoofd{ display:flex; gap:var(--sp-5); }
.wk-weg{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-6);
  border-radius:var(--r-kaart);
  background:var(--wit);
  border:1px solid var(--line);
  text-align:left;
  cursor:pointer;
  font-family:var(--font-ui);
}
.wk-weg-primair{ border:1.5px solid var(--terra); }
.wk-weg:hover{ box-shadow:var(--sch-kaart); }
.wk-weg-titel{
  font-weight:var(--gew-zwaar);
  font-size:var(--t-body);
  color:var(--petrol-dark);
}
.wk-weg-uitleg{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
/* de zichtbare pil onderin elke kaart (de hele kaart blijft klikbaar).
   margin-top:auto duwt de pil naar de onderrand; omdat de twee kaarten in
   .wk-hoofd even hoog rekken, lijnen beide pillen onderaan uit (FB2). */
.wk-weg-knop{
  display:inline-flex;
  align-items:center;
  margin-top:auto;
  font-size:var(--t-pil);
  font-weight:var(--gew-zwaar);
  border-radius:var(--r-pil);
  padding:8px var(--sp-7);
  white-space:nowrap;
}
.wk-weg-knop-primair{ color:var(--wit); background:var(--terra); border:1.5px solid var(--terra); }
.wk-weg-primair:hover .wk-weg-knop-primair{ background:var(--terra-hover); border-color:var(--terra-hover); }
.wk-weg-knop-tweede{ color:var(--petrol-deep); background:var(--wit); border:1.5px solid var(--petrol-deep); }
.wk-weg-tweede:hover .wk-weg-knop-tweede{ background:var(--petrol-deep); color:var(--wit); }

/* #181 — de stille tweede regel ónder de open-knop: "of herstel je laatste werk ▸".
   Een role="button"-span binnen de open-kaart (geen geneste knop), stopt de
   kaart-klik en start het herstel. */
.wk-open-herstel{
  margin-top:var(--sp-3);
  font-size:var(--t-meta);
  color:var(--petrol);
  cursor:pointer;
}
.wk-open-herstel:hover{ text-decoration:underline; }

/* rij 2: de twee voorbeelden als compacte icoon-kaarten */
.wk-vb-kop{
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:var(--sp-4);
}
/* #181 — de vergelijk-zin verhuisde naar de kop-sub ("· zelfde scherm, twee
   aanpakken"): stiller dan de kop zelf, niet in kapitaal. */
.wk-vb-kop-sub{ text-transform:none; letter-spacing:normal; font-weight:var(--gew-normaal,400); color:var(--ink-soft); }
.wk-vb-rij{ display:flex; gap:var(--sp-5); }
.wk-vb-kaart{
  flex:1;
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:var(--sp-5);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  background:var(--wit);
  cursor:pointer;
  text-align:left;
  padding:var(--sp-5) var(--sp-6);
  font-family:var(--font-ui);
}
.wk-vb-kaart:hover{ box-shadow:var(--sch-kaart); }
.wk-vb-icoon{
  flex:none;
  width:34px;
  height:34px;
  border-radius:var(--r-s);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}
.wk-vb-icoon[data-tint="petrol"]{ background:rgba(18,113,108,.09); }
.wk-vb-icoon[data-tint="terra"]{ background:rgba(200,121,65,.1); }
.wk-vb-tekst{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.wk-vb-naam{
  font-size:var(--t-klein);
  font-weight:var(--gew-zwaar);
  color:var(--petrol-dark);
}
.wk-vb-onder{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
}

.wk-noot{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
/* #181 — de eerste zin van de oude voetregel blijft bij de voorbeeldensectie. */
.wk-vb-noot{
  margin-top:var(--sp-4);
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}


/* ═══════════════════════════════════════════════════════════════════
   HET VERKENMODUS-LINT (11b)
   ═══════════════════════════════════════════════════════════════════
   Een strip bovenaan het werkvlak, alleen zolang een voorbeeld open staat.
   Hij hoort bij de inhoudkolom, niet bij de hele app: hij zit daarom in
   .werkvlak (een kolom-flex) en spant de inhoudbreedte, niet het lege
   gebied links of het zijmenu.

   R87/87d — de band is petrol-deep, niet terracotta. Terracotta is in het hele
   systeem uitsluitend hándelen (FAB, primaire knop); als omgevingskleur over de
   volle breedte roept ze harder dan alles wat eronder staat. Een systeembanner
   hoort bij de donkere schil, net als het zijmenu: #0A3936 met mint eyebrow.
   Alleen de twee knoppen mogen terracotta zijn — dat zijn de handelingen. */

#verkenlint{
  flex:none;
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  /* R87 — smaller: de band is een mededeling, geen kop. Ze nam 66px van het
     scherm; met 5px lucht en krappere knoppen is dat ~44px. */
  /* --pad-schil is een tweewaardig token (18px 28px). In een shorthand met een
     eigen verticale waarde werd dat "5px 18px 28px": 28px onmarge die niemand
     bedoelde en die de band 66px hoog maakte. Hier alleen de zijmaat. */
  padding:5px var(--sp-14);
  background:var(--petrol-dark);
  color:var(--canvas);
  font-size:var(--t-pil);
  line-height:1.35;
}
#verkenlint[hidden]{ display:none; }

/* Het merk staat in een eigen vlakje, zodat het als label leest en niet als
   deel van de zin. */
.vk-merk{
  flex:none;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  /* op de donkere schil is de eyebrow mint, zonder eigen vlakje: het label
     leest als overline, niet als knop. */
  color:var(--petrol-light);
  background:none;
  border-radius:0;
  padding:3px 0;
  white-space:nowrap;
}
.vk-tekst{
  flex:1;
  min-width:0;
  line-height:var(--lh-lijst);
  /* op een krappe kolom liever afkappen dan de knoppen wegduwen */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* de enige twee terracotta vlakken op de band: de handelingen zelf. */
.vk-begin{
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  color:var(--wit);
  background:var(--terra);
  border:0;
  border-radius:var(--r-pil);
  padding:3px var(--sp-5);
  cursor:pointer;
  white-space:nowrap;
}
.vk-begin:hover{ background:#b96d38; }
/* De drie wegen zitten in een eigen vlakje, maar op een breed scherm telt dat
   vlakje niet mee: display:contents laat de knoppen gewoon items van de band
   blijven. Op een telefoon wordt het de schuifstrook (zie onderaan). */
.vk-wegen{ display:contents; }
/* B5 — de tweede uitweg naast "Begin zelf": de huidige staat overnemen. */
.vk-neemover{
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  color:var(--canvas);
  background:none;
  border:1px solid rgba(237,233,225,.34);
  border-radius:var(--r-pil);
  padding:3px var(--sp-5);
  cursor:pointer;
  white-space:nowrap;
}
.vk-neemover:hover{ background:rgba(237,233,225,.10); }
.vk-sluit{
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-overline);
  font-weight:var(--gew-vet);
  color:var(--canvas);
  background:none;
  border:0;
  padding:3px var(--sp-4);
  cursor:pointer;
  white-space:nowrap;
  opacity:.9;
}
.vk-sluit:hover{ opacity:1; text-decoration:underline; }

/* Op een smal scherm (telefoon): de uitleg mag weg, het merk en de twee
   wegen blijven. Zo blijft de strip bruikbaar zonder te verdringen. */
@media (max-width:699px){
  /* De uitleg mag weg, de vier wegen blijven. Ze stonden hier te wrappen, en
     met de rondleiding erbij werd dat drie regels en 88px band · boven een
     kopregel die zelf ook nog 166px vraagt, op een scherm van 640. De band
     blijft nu één regel: de wegen schuiven zijwaarts in hun eigen strook,
     dezelfde beweging als de tabstrook van de kopregel op mobiel, en Sluit ×
     staat er vast naast zodat hij nooit wegschuift. */
  /* zelfde valkuil als op web: --pad-mobiel is tweewaardig. */
  #verkenlint{ padding:4px var(--sp-8); gap:var(--sp-4); flex-wrap:nowrap; }
  .vk-tekst{ display:none; }
  .vk-merk{ flex:none; }
  .vk-wegen{
    display:flex; align-items:center; gap:var(--sp-4);
    flex:1 1 auto; min-width:0;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    /* dezelfde fade als de tabstrook: wat afgekapt is leest als "er staat
       nog meer", en botst niet visueel met Sluit × ernaast. */
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  .vk-wegen::-webkit-scrollbar{ display:none; }
  .vk-begin, .vk-neemover, .vk-tour, .vk-sluit{ flex:none; }
  .vk-neemover, .vk-sluit, .vk-tour{ min-height:32px; }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBIEL: het welkomscherm als 11c
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:699px){
  #welkom{ padding:0; place-items:stretch; }
  .wk-wrap{
    width:100%;
    gap:0;
    min-height:100%;
  }
  /* de cream kaart wordt een vel dat de onderkant vult; de kaart-kop met
     "Waar wil je beginnen?" staat gewoon bovenaan het vel */
  .wk-kaart{
    flex:1;
    border-radius:var(--r-sheet) var(--r-sheet) 0 0;
    padding:var(--sp-8) var(--sp-6) var(--sp-7);
    gap:var(--sp-6);
  }
  /* de twee hoofdwegen onder elkaar op smal */
  .wk-hoofd{ flex-direction:column; }
  /* de voorbeelden onder elkaar op smal */
  .wk-vb-rij{ flex-direction:column; }
}

/* Taalkiezer: rechtsboven, buiten en boven de kaart (22a-frame). Een gewone
   flex-rij i.p.v. absoluut, zodat ze niet meer over de kaart-kop valt nu het
   merk-blok vervalt. Het label leest op de donkere achtergrond. */
.wk-taal{ align-self:flex-end; display:flex; align-items:center; gap:8px; }
.wk-taal .c-taalkiezer{ display:flex; align-items:center; gap:6px; }
.wk-taal .c-taalkiezer-label{ font-size:12.5px; color:rgba(250,248,245,.75); }
.wk-taal select{ padding:5px 9px; border-radius:8px; border:1px solid var(--line,#d8d2c8); background:#fff; font:inherit; font-size:13px; color:inherit; cursor:pointer; }
@media (max-width:699px){ .wk-taal{ padding:var(--sp-5) var(--sp-6) 0; } }


/* ═══════════════════════════════════════════════════════════════════
   DE GELEIDE WIZARD — type-gekleurde hulp + het donkere startbeeld (#183)
   ═══════════════════════════════════════════════════════════════════
   Het verandertype (w1) kleurt de hulp van w2–w5 via één accentkleur (--vt) en
   een leesbare tekstkleur (--vt-tekst). "anders" is neutraal (lijngrijs). Deze
   regels leven hier omdat het welkomscherm en de wizard samen het onthaal zijn;
   welkom.css laadt na componenten.css, dus ze vullen de basis-gflow aan. */
#geleideflow{ --vt:var(--petrol); --vt-tekst:var(--petrol-deep); }
#geleideflow[data-type="systeem"]{   --vt:var(--petrol); --vt-tekst:var(--petrol-deep); }
#geleideflow[data-type="reorg"]{     --vt:var(--terra);  --vt-tekst:var(--terra-tekst); }
#geleideflow[data-type="werkwijze"]{ --vt:var(--geel);   --vt-tekst:var(--geel-tekst); }
#geleideflow[data-type="anders"]{    --vt:var(--line-sterk); --vt-tekst:var(--ink-soft); }

/* w1 — de type-chips onder de vrije zin */
.gf-typekop{ margin-top:var(--sp-4); font-size:var(--t-klein); color:var(--ink-soft); }
.gf-typechips{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3); }
.gf-typechip{
  border:1px solid var(--line); background:var(--wit); color:var(--ink);
  border-radius:var(--r-pil); padding:7px 14px; font-family:var(--font-ui);
  font-size:var(--t-pil); cursor:pointer;
}
.gf-typechip:hover{ border-color:var(--vt); }
.gf-typechip.is-gekozen{ border-color:var(--vt); color:var(--vt-tekst); box-shadow:inset 0 0 0 1px var(--vt); font-weight:var(--gew-zwaar); }

/* w2–w5 — de type-gekleurde duiding-zin bovenaan */
.gf-duiding{
  border-left:3px solid var(--vt); padding:2px 0 2px 12px;
  color:var(--vt-tekst); font-size:var(--t-klein); line-height:var(--lh-body);
  margin-bottom:var(--sp-3);
}

/* w3/w4 — het voorbeeldantwoord met "gebruik dit als start ▸" */
.gf-voorbeeld{
  margin-top:var(--sp-3); padding:var(--sp-4) var(--sp-5);
  border:1px dashed var(--vt); border-radius:var(--r-s);
  background:var(--wit); display:flex; flex-direction:column; gap:4px;
}
.gf-voorbeeld-regel{ font-size:var(--t-klein); color:var(--ink); }
.gf-voorbeeld-regel:nth-child(n+2){ color:var(--ink-soft); }
.gf-adopt{
  align-self:flex-start; margin-top:2px; border:none; background:none; padding:0;
  color:var(--vt-tekst); font-family:var(--font-ui); font-size:var(--t-klein);
  font-weight:var(--gew-zwaar); cursor:pointer;
}
.gf-adopt:hover{ text-decoration:underline; }

/* w6 — het cadeau: de enige donkere stap */
#geleideflow[data-donker]{ background:var(--schil); }
#geleideflow[data-donker] .c-gflow-vraag{ color:var(--cream); }
#geleideflow[data-donker] .c-gflow-hint{ color:rgba(250,248,245,.72); }
#geleideflow[data-donker] .c-gflow-eyebrow{ color:var(--petrol-light); }
#geleideflow[data-donker] .c-gflow-later,
#geleideflow[data-donker] .c-gflow-overslaan,
#geleideflow[data-donker] .c-gflow-terug{ color:rgba(250,248,245,.7); }
#geleideflow[data-donker] .c-gflow-later:hover,
#geleideflow[data-donker] .c-gflow-overslaan:hover,
#geleideflow[data-donker] .c-gflow-terug:hover{ color:var(--cream); }
#geleideflow[data-donker] .c-gflow-streep{ background:rgba(250,248,245,.22); }
#geleideflow[data-donker] .c-gflow-streep.is-vol{ background:var(--petrol-light); }
#geleideflow[data-donker] .c-gflow-streep.is-nu{ background:var(--cream); }

/* #210 — W6 vereenvoudigd: geen miniatuur, geen ritme-blok. Alleen twee acties
   naast elkaar in het globale knop-patroon (.c-knop primair + secundair). De
   rij-override staat in het [data-donker]-blok verderop (wint van de
   componenten.css-kolomstand). */
.gf-sb-acties{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; margin-top:var(--sp-6); }

/* ── Correctie 8 aug (feedback): W6 = dezelfde crème-kaart als de andere stappen.
   De donkere kaart week te weinig af van het (ook donkere) canvas — te weinig
   contrast. We houden het canvas donker (net als w1–w5) maar zetten de kaart én
   haar eigen elementen naar de lichte behandeling. Alle regels zijn
   #geleideflow[data-donker]-gescoped (hogere specificiteit dan de #geleideflow-
   /kale-klasse-regels hierboven en in componenten.css) en staan achteraan, zodat
   ze winnen. ── */
#geleideflow[data-donker]{ background:linear-gradient(158deg,#0E4F4B 0%,#0A3936 100%); }
#geleideflow[data-donker] .c-gflow-inner{ background:var(--cream); box-shadow:0 24px 60px rgba(10,57,54,.35); }
#geleideflow[data-donker] .c-gflow-kop{ background:transparent; }
#geleideflow[data-donker] .c-gflow-voet{ background:var(--cream); border-top-color:var(--line); }
#geleideflow[data-donker] .c-gflow-vraag{ color:var(--ink); }
#geleideflow[data-donker] .c-gflow-hint{ color:var(--ink-soft); }
#geleideflow[data-donker] .c-gflow-eyebrow{ color:var(--petrol); }
#geleideflow[data-donker] .c-gflow-later,
#geleideflow[data-donker] .c-gflow-overslaan,
#geleideflow[data-donker] .c-gflow-terug{ color:var(--ink-soft); }
#geleideflow[data-donker] .c-gflow-later:hover,
#geleideflow[data-donker] .c-gflow-overslaan:hover,
#geleideflow[data-donker] .c-gflow-terug:hover{ color:var(--ink); }
#geleideflow[data-donker] .c-gflow-streep{ background:var(--line); }
#geleideflow[data-donker] .c-gflow-streep.is-vol{ background:var(--petrol); }
#geleideflow[data-donker] .c-gflow-streep.is-nu{ background:var(--petrol); }
/* de W6-eigen elementen naar de lichte kaart */
#geleideflow[data-donker] .gf-beweging{ color:var(--petrol-dark); background:rgba(18,113,108,.08); border-color:rgba(18,113,108,.2); }
#geleideflow[data-donker] .gf-naamvraag{ background:var(--cream2); border-color:var(--line); }
#geleideflow[data-donker] .gf-naamvraag-q{ color:var(--ink); }
#geleideflow[data-donker] .gf-naamvraag-h{ color:var(--ink-soft); }
/* #210 — de twee acties naast elkaar (rij), niet gestapeld. Deze regel wint van
   de componenten.css-kolomstand (#geleideflow .gf-sb-acties) door de hogere
   [data-donker]-specificiteit én de latere plaats. De knoppen dragen het globale
   .c-knop-patroon (primair terracotta · secundair wit met petrol-omlijning),
   dat op de lichte W6-kaart vanzelf klopt. */
#geleideflow[data-donker] .gf-sb-acties{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }

/* #207 / correctiebriefing punt 28 — de sponsor-rij in wizard-stap 1 (.gf-sponsor).
   Een gewoon formulierveld in de bestaande veldtaal: systeemfont-label (géén
   Fraunces), het "· de sponsor"-deel lichter, en het standaard naamveld eronder.
   Geen eigen kleur. */
#geleideflow .gf-sponsor{ margin-top:14px; }
#geleideflow .gf-sponsor-kop{
  font-family:var(--font-ui); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#6B6862;
  margin-bottom:3px;
}
#geleideflow .gf-sponsor-kop-sub{
  text-transform:none; font-weight:400; letter-spacing:0; color:#8A867E;
}
#geleideflow .gf-sponsor-veld{
  background:#fff; border:1px solid #DDD8CF; border-radius:7px;
  padding:8px 11px; font-size:12.5px; color:#2A2A28;
}
#geleideflow .gf-sponsor-veld::placeholder{ color:#8A867E; }

/* W7 — de streefdatum-label onder de "eerste zet"; zelfde veldtaal als de
   sponsor-kop. Het date-veld erft .c-gflow-veld. */
#geleideflow .gf-plan-datumlab,
#geleideflow .gf-veldlabel{
  font-family:var(--font-ui); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:#6B6862;
  margin:12px 0 3px;
}
#geleideflow .gf-veldlabel:first-child{ margin-top:0; }
#geleideflow .gf-plan-datum{ max-width:220px; }

/* W5 — het ingetogen alternatief onder de gesprek-vorm: liever een
   luisteropdracht dan één gesprek. Tekstlink, geen knop-gewicht. */
#geleideflow .gf-toets-altlink{
  display:inline-block; margin-top:14px; padding:0; border:0; background:none;
  font-family:var(--font-ui); font-size:12.5px; color:var(--petrol-light);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
#geleideflow .gf-toets-altlink:hover{ color:var(--cream); }