/* Kinnection, de website: de opstelling van de secties. Prompt 09, 21-09-2026.
   Dit bestand hoort bij de site, niet bij het systeem. Het legt enkel bouwstenen naast en onder elkaar,
   volgens de tien patronen uit 03-systeem/4-regels/regels.html. Het bevat geen enkele eigen maat of kleur:
   alles verwijst naar tokens.css. Wat een nieuwe bouwsteen zou zijn, hoort in 03-systeem/3-bouwstenen/.

   Laden: tokens.css, dan bouwstenen.css, dan dit bestand. */

/* ===== Een sectie ===== */
.deel{padding-block:var(--gap-section)}
.deel > .binnen > * + *{margin-top:var(--gap-block)}
.deel > .binnen > .knoop{top:var(--gap-tight);margin-top:0}
.deel[id],.paneel[id],.vraag[id]{scroll-margin-top:var(--gap-element)}
/* Wat focus krijgt of waar je naartoe springt, mag nooit verstopt zitten: niet achter de weekstrook die op gsm en tablet
   bovenaan meeloopt, en niet achter de checklist die daar onderaan staat. Regel 2.4.11 van WCAG 2.2. */
html{scroll-padding-block:calc(var(--control-lg) * 2) calc(var(--control-lg) + var(--gap-block))}
@media (min-width:900px){
  html{scroll-padding-block:var(--gap-element)}
}

/* ===== Patroon 1, de opening ===== */
.opening{padding-block:var(--gap-block)}
.opening-rooster{display:grid;gap:var(--gap-block);align-items:center}
.opening .knoppen{margin-top:var(--gap-block)}
.opening-bewijs{margin-top:var(--gap-block);max-width:var(--measure-text);padding-top:var(--gap-tight);border-top:var(--stroke-rule) solid var(--color-rule)}
.opening-woord{display:inline-block}
@media (min-width:900px){
  /* Bovenaan blijft plaats voor de checklist, zodat ze het beeld niet bedekt */
  .opening{padding-top:calc(var(--gap-section) + var(--gap-element))}
  .opening-rooster{grid-template-columns:minmax(0,var(--split-wide)) minmax(0,var(--split-narrow));gap:var(--gap-columns)}
}

/* ===== Patroon 5, een cijfer naast zijn tekst ===== */
.naast{display:grid;gap:var(--gap-block);align-items:start}
.naast-tekst{display:grid;gap:var(--gap-element);max-width:var(--measure-text)}
/* Het cijfer en zijn zin lezen als een geheel: de zin staat in dezelfde kleur en hetzelfde lettertype als het cijfer */
/* Drie cijfers naast elkaar pas vanaf een breed scherm: daaronder zijn de kolommen te smal voor een woord als "bewegingsexperten" */
.deel .cijfers{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .deel .cijfers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.naast .cijfer span,.cijfers .cijfer > span{font:var(--type-title);letter-spacing:var(--tracking-title);color:var(--op-heading)}
.cijfer cite{font:var(--type-small);font-style:normal;color:var(--op-label)}
@media (min-width:900px){
  .naast{grid-template-columns:minmax(0,var(--split-narrow)) minmax(0,var(--split-wide));gap:var(--gap-columns)}
}

/* ===== Patroon 3, de week: een knoop per stap, in de strook van de lijn ===== */
.stap > .knoop{top:auto;margin-top:var(--pad-panel)}
.paneel .punten{margin-top:var(--gap-element)}
.paneel-stapel{display:grid;gap:var(--gap-grid)}
.paneel .knop{margin-top:var(--gap-element)}
.paneel .t-h2 + .t-lead{margin-top:var(--gap-element)}
.naast-tekst .tekstlink{justify-self:start}

/* ===== Patroon 8, de vragen naast hun kop ===== */
@media (min-width:900px){
  .vragen-rooster{display:grid;grid-template-columns:minmax(0,var(--split-narrow)) minmax(0,var(--split-wide));gap:var(--gap-columns);align-items:start}
  .deel > .binnen > .vragen-rooster > * + *{margin-top:0}
}
.vragen-rooster > * + *{margin-top:var(--gap-block)}

/* ===== Patroon 9, het moment: de lichte kaart in het indigo paneel ===== */
.paneel.op-moment .kaart .knop{margin-top:var(--gap-element)}

/* ===== De gebouwde beelden: vlakke vormen in de zes kleuren ===== */
.beeld .b-wit{fill:var(--color-surface)}
.beeld .b-creme{fill:var(--color-ground)}
.beeld .b-indigo{fill:var(--color-moment)}
.beeld .b-warm{fill:var(--color-accent)}
.beeld .b-ink{fill:var(--color-float)}
.beeld .b-tint{fill:var(--color-tint)}
.beeld .b-zacht{fill:var(--color-rule)}
.beeld .b-ruit{fill:var(--color-rule-on-moment)}
.beeld [class^="l-"]{fill:none;stroke-linecap:round;stroke-linejoin:round}
.beeld .l-indigo{stroke:var(--color-moment)}
.beeld .l-warm{stroke:var(--color-accent)}
.beeld .l-ink{stroke:var(--color-float)}
.beeld .l-wit{stroke:var(--color-surface)}
.beeld .l-creme{stroke:var(--color-ground)}
.beeld .l-zacht{stroke:var(--color-rule)}
.beeld .l-stil{stroke:var(--color-border-quiet)}

/* ===== De voet van de site: merk, vaste omschrijving, links ===== */
.voet-breed .voet-binnen{flex-direction:column;align-items:stretch;gap:var(--gap-block);padding-block:var(--gap-block)}
.voet-breed nav a{gap:var(--gap-hair)}
.voet-breed .voet-over{display:grid;gap:var(--gap-tight);max-width:var(--measure-text)}
.voet-breed .voet-onder{padding-top:var(--gap-tight);border-top:var(--stroke-rule) solid var(--color-rule)}
@media (min-width:900px){
  .voet-breed .voet-boven{display:grid;grid-template-columns:minmax(0,var(--split-wide)) minmax(0,var(--split-narrow));gap:var(--gap-columns);align-items:start}
}
.voet-breed .voet-boven > * + *{margin-top:var(--gap-element)}
@media (min-width:900px){
  .voet-breed .voet-boven > * + *{margin-top:0}
}
.voet-met-balk.voet-breed .voet-binnen{padding-bottom:calc(var(--gap-block) + var(--control-lg) + var(--gap-element))}
@media (min-width:900px){
  .voet-met-balk.voet-breed .voet-binnen{padding-bottom:var(--gap-block)}
}

/* ===== Onderzoek en Over Kinnection. Prompt 11, 21-09-2026. ===== */

/* Het kruimelpad staat op de plek van het bovenlabel: een tekstlink, het teken chevron-right, de naam van de pagina */
.kruimelpad ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-hair)}
.kruimelpad li{display:inline-flex;align-items:center;gap:var(--gap-hair)}
.kruimelpad .tekstlink{display:inline-flex;min-width:var(--touch-min);min-height:var(--touch-min);font:inherit;letter-spacing:inherit}

/* De balk die meeloopt, met drie vaste stappen in plaats van acht dagen. Op scherm staan ze al onder elkaar. */
.weekbalk-stappen .dagen{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:900px){
  .weekbalk-stappen .dagen{grid-template-columns:minmax(0,1fr)}
}

/* Raden wat cliënten kozen: de keuzebalk, en het antwoord verschijnt pas na een keuze. Zonder keuze blijft het in de pagina,
   zodat een zoeker het ook leest. De melding veert binnen zoals elke melding (.komt). */
/* De drie keuzes staan onder elkaar, zodat elk woord volledig past. Zonder het schuivende blokje: de gekozen optie kleurt gewoon in. */
.raad .keuzebalk{grid-auto-flow:row;margin-top:var(--gap-element)}
.raad .keuzebalk::before{display:none}
.raad .keuzebalk input:checked + span{background:var(--op-action);color:var(--op-action-text)}
/* Elke keuze heeft een leeg vakje ervoor, zoals de dagknoppen van Joke. Kiezen vinkt het aan. */
.raad .keuzebalk span{justify-content:flex-start;gap:var(--gap-tight);text-align:left}
.raad .keuzebalk .vakje{width:var(--icon-md);height:var(--icon-md)}
.raad .keuzebalk input:checked + span .vakje{background:var(--color-ground);border-color:var(--color-ground)}
.raad .keuzebalk input:checked + span .vakje::after{transform:scale(1);background:var(--color-heading)}
@media (hover:hover),(min-width:900px){
  .raad .keuzebalk label:hover input:not(:checked) + span .vakje{border-color:var(--color-heading)}
}
.raad .melding{display:none;margin-top:var(--gap-element)}
/* Juist of niet: het antwoord zegt eerst of je gok klopte, dan de uitleg */
.raad:has(input[data-juist]:checked) .raad-juist{display:grid}
.raad:has(input:not([data-juist]):checked) .raad-fout{display:grid}

/* Een plek die nog open is, en de datum onderaan */
.vraag-open{padding-bottom:var(--gap-element)}
.bijgewerkt{color:var(--color-text-label)}
.waarom-tekst{margin-top:var(--gap-element)}

/* Opdracht 12e: "Hou me op de hoogte", een kleine tekstlink onder de hoofdknop in het slot. Ze opent een mail; de site verzamelt zelf niets. */
.band .slot-later{margin-top:var(--gap-tight)}
/* De extra zin in de opening van Over Kinnection, onder de vaste omschrijving */
.opening .sectiekop > .t-lead + p{margin-top:var(--gap-element);max-width:var(--measure-text)}