/* Groenhart — Werkwijze (compositie). Gedeelde componenten staan in style.css.
   1. Paginakop
   2. Overzicht: het tuinjaar als ring, met de momenten per seizoen als navigatie
   3. Tijdlijn: doorlopende kantlijn (gestippeld = nog te gaan, doorgetrokken = gelopen),
      per moment een kleine jaarring met de maanden in de kantlijn, per stap een eigen compositie
   4. Slot: het eerste jaar als ring */

.page-werkwijze {
  --tl-indent: 2.1rem;                                   /* mobiel: inspringing rechts van de lijn */
  --tl-pad: clamp(3.75rem, 2.6rem + 4.6vw, 7.5rem);      /* ruimte boven/onder een stap */
  --rail-x: calc(var(--pad) + .5rem);                    /* positie van de kantlijn binnen een .wrap */
  --node-y: calc(var(--tl-pad) + 24px);                  /* mobiel: midden van de kleine jaarring */
  --end-y: 2.6rem;
  --rail-dash: var(--lijn-sterk);
  --rail-fill: var(--mos);
  --node-bg: var(--linnen);
  --node-ink: var(--bos);
}
@media (min-width: 960px) {
  .page-werkwijze {
    /* einde van kolom 3: de kantlijn van het plan; inhoud begint precies op kolom 4 */
    --rail-x: calc(var(--pad) + (100% - 2 * var(--pad) + var(--gap)) / 4 - var(--gap));
    --node-y: calc(var(--tl-pad) + var(--fs-h2) * .53);
  }
}

/* --------------------------------------------------------------------------
   1. Paginakop en het tuinjaar als ring
   -------------------------------------------------------------------------- */
.ww-head { padding-bottom: var(--space-l); }
.ww-head .page-head__title { max-width: 16ch; }
.ww-head__link { margin-top: .6rem; }

.ww-year { padding-bottom: var(--space-xl); }
.ww-year__grid { display: grid; gap: var(--space-l) var(--gap); padding-top: var(--space-l); border-top: 1px solid var(--steen-lijn); }
.ww-year__ring { margin: 0; width: min(100%, 25rem); justify-self: center; }
.ww-year__cap { margin-top: .8rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--kiezel); text-align: center; text-wrap: balance; }
.ww-year__title { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 330; line-height: 1.1; margin-bottom: var(--space-m); max-width: 18ch; }
.ww-season + .ww-season { margin-top: var(--space-m); }
.ww-season__name { margin-bottom: .45rem; font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
.ww-season__list { border-top: 1px solid var(--inkt); }
.ww-season__list li { border-bottom: 1px solid var(--steen-lijn); }
.ww-season__list a {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: baseline; gap: .1rem .8rem;
  min-height: 48px; padding: .6rem 0; text-decoration: none; color: inherit;
}
.ww-n { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bos); color: var(--linnen-licht); font-size: .75rem; font-weight: 700; }
.ww-season__m { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; color: var(--kiezel); }
.ww-season__t { font-family: var(--serif); font-optical-sizing: auto; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); font-weight: 370; line-height: 1.2; }
.ww-season__list a:hover .ww-season__t, .ww-season__list a:focus-visible .ww-season__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.ww-season__list a:hover .ww-n, .ww-season__list a:focus-visible .ww-n { background: var(--mos); }
.ww-ring .ww-arc { fill: none; }
.ww-arc--prep { stroke: var(--bos); stroke-width: 1.6; stroke-dasharray: 6 5; }
.ww-arc--build { stroke: var(--bos); stroke-width: 12; stroke-linecap: round; }
.ww-arc--year { stroke: var(--mos); stroke-width: 12; stroke-linecap: round; opacity: .55; }
@media (max-width: 599px) {
  .ww-year__ring { width: min(100%, 19rem); }
}
@media (min-width: 900px) {
  .ww-year__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .ww-year__ring { grid-column: 1 / span 5; width: 100%; max-width: 30rem; }
  .ww-year__nav { grid-column: 7 / -1; }
}

/* --------------------------------------------------------------------------
   2. Tijdlijn — doorlopende lijn in de kantlijn
   -------------------------------------------------------------------------- */
.tl-rail { position: relative; }
.tl-rail::before, .tl-rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--rail-x);
  pointer-events: none;
}
/* de geplande route: gestippeld */
.tl-rail::before {
  width: 1px; margin-left: -.5px;
  background: repeating-linear-gradient(to bottom, var(--rail-dash) 0 6px, transparent 6px 11px);
}
/* de gelopen route: doorgetrokken, groeit mee met het lezen (js/werkwijze.js) */
.tl-rail::after {
  width: 2px; margin-left: -1px;
  background: var(--rail-fill);
  transform-origin: top; transform: scaleY(var(--fill, 0));
}
.tl-step--first .tl-rail::before, .tl-step--first .tl-rail::after { top: var(--node-y); }
.tl-end__inner.tl-rail::before, .tl-end__inner.tl-rail::after { bottom: auto; height: var(--end-y); }

.tl-node {
  position: absolute; z-index: 1; left: var(--rail-x); top: var(--node-y);
  width: 17px; height: 17px; transform: translate(-50%, -50%);
  border: 1px solid var(--node-ink); border-radius: 50%;
  background: var(--node-bg) radial-gradient(circle, var(--node-ink) 0 2.2px, transparent 2.7px);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tl-step.is-reached .tl-node {
  background: var(--node-ink) radial-gradient(circle, var(--node-bg) 0 2.2px, transparent 2.7px);
  box-shadow: 0 0 0 5px var(--node-bg), 0 0 0 6px var(--rail-dash);
}

.tl-step__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem;
  padding-block: var(--tl-pad);
  padding-left: calc(var(--pad) + var(--tl-indent));
}

/* Kantlijn: kleine jaarring met de maanden van dit moment (geen stapnummer) */
.tl-mark { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; }
.tl-ring { width: 48px; height: 48px; }
.tl-ring__base { fill: none; stroke: var(--steen-lijn); stroke-width: 3; }
.tl-ring__arc { fill: none; stroke: var(--mos); stroke-width: 5; stroke-dasharray: var(--len) 12; stroke-dashoffset: calc(var(--from) * -1); }
.tl-mark__when { display: grid; gap: .15rem; }
.tl-mark__season { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); }
.tl-mark__month { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.25rem; font-weight: 350; line-height: 1.2; color: var(--inkt); }

/* Inhoud per stap */
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l) var(--gap); align-items: start; min-width: 0; }
.tl-title { max-width: 17ch; }
.tl-lead {
  margin-top: 1.25rem; max-width: 34ch;
  font-family: var(--serif); font-optical-sizing: auto; font-size: var(--fs-lead); font-weight: 350; line-height: 1.36; letter-spacing: -.008em;
}
.tl-body p:not([class]) { margin-top: 1rem; max-width: 58ch; }

@media (min-width: 960px) {
  .tl-step__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-left: var(--pad); }
  .tl-mark {
    grid-column: 1 / span 3; grid-row: 1; align-self: start;
    grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 1rem;
    position: sticky; top: calc(var(--header-h) + 1.75rem);
    padding-right: calc(var(--gap) + 1.25rem);
  }
  .tl-ring { width: 76px; height: 76px; }
  .tl-mark__month { font-size: 1.5rem; }
  .tl-body { grid-column: 4 / -1; grid-row: 1; grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

/* 01 Kennismaking: tekst + rondgang-schets ------------------------------------ */
.s1__text { display: grid; justify-items: start; }
.prep { width: 100%; max-width: 34rem; margin-top: 2.25rem; }
.prep__title {
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.3; color: var(--mos); margin-bottom: .8rem;
}
.prep__list { border-top: 1px solid var(--steen-lijn); }
.prep__list li { position: relative; padding: .7rem 0 .7rem 2rem; border-bottom: 1px solid var(--steen-lijn); }
.prep__list li::before {
  content: ""; position: absolute; left: .1rem; top: 1.15rem;
  width: 11px; height: 11px; border: 1px solid var(--mos); border-radius: 50%;
}
.prep__fine { margin-top: .8rem; font-size: var(--fs-xs); color: var(--kiezel); }
.s1__cta { display: grid; gap: .9rem; justify-items: start; margin-top: 2.25rem; }
.s1__cta-note { max-width: 40ch; font-size: var(--fs-small); color: var(--kiezel); }
.s1__sketch { width: 100%; max-width: 30rem; }

.rondgang .rg-wish circle { fill: var(--mos); }
.rondgang .rg-wish text { fill: var(--mos); font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.rondgang .latin { font-family: var(--serif); font-style: italic; font-stretch: 100%; font-size: 12.5px; letter-spacing: 0; fill: var(--bos-diep); }
/* telefoon: schets iets breder (tot vlak naast de kantlijn) en de aantekeningen groter,
   zodat ze ook op 360px rond 9,5px leesbaar blijven; een lichte rand haalt ze van het gras */
@media (max-width: 599px) {
  .s1__sketch { margin-inline-start: -1rem; width: calc(100% + 1rem); max-width: none; }
}
/* ook tussen 960 en 1439px staat de schets smal (ca. 290–420px) */
@media (max-width: 599px), (min-width: 960px) and (max-width: 1439px) {
  .rondgang .plan-note { font-size: 14.5px; letter-spacing: .02em; }
  .rondgang .plan-label { font-size: 14.5px; letter-spacing: .06em; }
  .rondgang text.plan-size { font-size: 14.5px; }
  .rondgang .plan-code { font-size: 14.5px; letter-spacing: 0; }
  .rondgang .rg-wish text { font-size: 14.5px; letter-spacing: 0; }
  .rondgang .latin { font-size: 15.5px; }
  .rondgang .plan-note, .rondgang .rg-wish text { paint-order: stroke; stroke: #EDEFE3; stroke-width: 3px; stroke-linejoin: round; }
}

@media (min-width: 960px) {
  .s1__text { grid-column: 1 / span 5; }
  .s1__sketch { grid-column: 6 / -1; max-width: none; margin-top: .4rem; position: sticky; top: calc(var(--header-h) + 1.75rem); }
}

/* 02 Ontwerp en offerte: voorbeeldofferte + twee routes ----------------------- */
.s2__text { display: grid; justify-items: start; }
.s2__sheet { width: 100%; max-width: 30rem; margin: 0; }
.order-list { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.order-list thead th { padding: .75rem .5rem .5rem; text-align: left; font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase; color: var(--kiezel); border-bottom: 1px solid var(--inkt); }
.order-list thead th:nth-child(n + 3) { text-align: right; }
.order-list td, .order-list tbody th { padding: .6rem .5rem; border-bottom: 1px dotted var(--lijn-sterk); vertical-align: baseline; text-align: left; font-weight: 400; }
.order-list tbody tr:last-child > * { border-bottom: 0; }
.order-list td:nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-list td:first-child { width: 2.6rem; }
.order-list .latin { font-size: 1.05rem; }
.order-list__nl { display: block; font-size: var(--fs-xs); color: var(--kiezel); }
.to-code {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--bos); border-radius: 50%;
  font-size: .6875rem; font-weight: 600; font-stretch: 85%; color: var(--bos-diep); background: var(--linnen-licht);
}
.s2__price { margin-top: 1rem; font-size: var(--fs-small); color: var(--kiezel); max-width: 44ch; }
@media (max-width: 479px) {
  .order-list td, .order-list tbody th, .order-list thead th { padding-inline: .3rem; }
  .order-list td:first-child { width: 2.2rem; }
}
/* smalle kaart (960–1099 naast de tekstkolom, en heel smalle telefoons): tabel compacter */
@media (min-width: 960px) and (max-width: 1099px), (max-width: 399px) {
  .order-list td, .order-list tbody th, .order-list thead th { padding-inline: .25rem; }
  .order-list thead th { letter-spacing: .06em; }
  .order-list td:first-child { width: 2.1rem; }
}

.paths { width: 100%; margin: 1.9rem 0 1.4rem; border-top: 1px solid var(--steen-lijn); }
.paths__item { display: grid; gap: .35rem 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--steen-lijn); }
.paths__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 380; line-height: 1.2; letter-spacing: -.008em; }
.paths__item p { margin-top: 0; color: var(--kiezel); max-width: 52ch; }
@media (min-width: 640px) { .paths__item { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; } .paths__item p + p { grid-column: 2; } }

@media (max-width: 959px) {
  .s2__text { order: -1; }
}
@media (min-width: 960px) {
  .s2__sheet { grid-column: 1 / span 4; grid-row: 1; max-width: none; margin-top: .4rem; }
  .s2__text { grid-column: 5 / -1; grid-row: 1; padding-left: 1rem; }
}

/* 03 Planning: tekst, tip en een kleine planningsstrook ----------------------- */
.s3__text .tl-lead { margin-top: 0; }
.s3__tip {
  max-width: 30ch; padding-left: 1.25rem; border-left: 1px solid var(--mos);
  font-family: var(--serif); font-optical-sizing: auto; font-size: 1.22rem; font-weight: 350; line-height: 1.42;
}
.s3__tip-label {
  display: block; margin-bottom: .45rem;
  font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos);
}
.season { width: 100%; }
.season__table { border-top: 1px solid var(--lijn-sterk); }
.season__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  border-bottom: 1px solid var(--steen-lijn);
}
.season__row--head { border-bottom-color: var(--lijn-sterk); }
.season__row--head > [role="columnheader"] {
  position: relative; z-index: 0; display: grid; place-items: center; height: 2.5rem;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; color: var(--kiezel);
}
.season__row--head > .season__task { display: none; }
.season__task { grid-column: 1 / -1; padding: .95rem 0 .4rem; font-weight: 600; line-height: 1.3; }
.season__task small { display: block; margin-top: .1rem; font-size: var(--fs-xs); font-weight: 400; color: var(--kiezel); }
.season__row > [role="cell"] { position: relative; min-height: 2.6rem; }
.season__row > [role="cell"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--steen-lijn);
}
/* beste maand: boomstip (vol); kan ook: open cirkel */
.season__row > .best::before, .season__row > .ok::before { width: 13px; height: 13px; border: 1px solid var(--mos); }
.season__row > .best::before { background: radial-gradient(circle, var(--mos) 0 3px, transparent 3.5px); }
.season__row > .ok::before { background: transparent; border-style: dashed; }
/* deze maand (js/werkwijze.js) */
.season__row > [role="cell"].is-now { background: rgba(86, 101, 58, .08); }
.season__row--head > .is-now { color: var(--linnen-licht); }
.season__row--head > .is-now::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 1.6rem; height: 1.6rem;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--bos);
}
.season__key { margin-top: 1rem; font-size: var(--fs-xs); color: var(--kiezel); }
.season__dot { display: inline-block; width: 12px; height: 12px; margin: 0 .3rem 0 .2rem; border: 1px solid var(--mos); border-radius: 50%; vertical-align: -1px; }
.season__dot:first-child { margin-left: 0; }
.season__dot--best { background: radial-gradient(circle, var(--mos) 0 2.5px, transparent 3px); }
.season__dot--ok { border-style: dashed; }

@media (min-width: 640px) {
  .season__row { grid-template-columns: minmax(11rem, 1.9fr) repeat(12, minmax(0, 1fr)); }
  .season__row--head > .season__task {
    display: grid; place-items: center start;
    font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--kiezel);
  }
  .season__task { grid-column: auto; align-self: center; padding: .85rem 1rem .85rem 0; }
  .season__row > [role="cell"] { min-height: 4.1rem; }
  .season__row > .best::before, .season__row > .ok::before { width: 15px; height: 15px; }
}
@media (min-width: 960px) {
  .s3__title { grid-column: 1 / span 7; }
  .s3__text { grid-column: 1 / span 5; }
  .s3__tip { grid-column: 6 / -1; align-self: end; margin-bottom: .3rem; }
  .season { grid-column: 1 / -1; margin-top: var(--space-m); }
  .season__row { grid-template-columns: minmax(13rem, 2.1fr) repeat(12, minmax(0, 1fr)); }
}

/* 04 Aanleg: donkere band met volgorde, beeld in volle breedte ---------------- */
.tl-step--dark {
  --rail-dash: rgba(236, 231, 219, .34);
  --rail-fill: var(--mos-licht);
  --node-bg: var(--bos-diep);
  --node-ink: var(--mos-licht);
  background: var(--bos-diep); color: var(--tekst-licht);
}
.tl-step--dark .tl-step__grid { padding-bottom: var(--space-xl); }
.tl-step--dark .tl-mark__month { color: var(--tekst-licht); }
.tl-step--dark .tl-mark__season { color: var(--mos-licht); }
.tl-step--dark .tl-ring__base { stroke: var(--lijn-donker); }
.tl-step--dark .tl-ring__arc { stroke: var(--mos-licht); }
.s4__lead { color: rgba(236, 231, 219, .92); }

.order { counter-reset: none; }
.order li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .15rem .75rem; padding: 1rem 0; border-top: 1px solid var(--lijn-donker); }
.order li:last-child { border-bottom: 1px solid var(--lijn-donker); }
.order__n {
  grid-row: span 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-top: .1rem;
  border: 1px solid var(--mos-licht); border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1; color: var(--mos-licht);
}
.order__title { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.32rem; font-weight: 380; line-height: 1.2; color: var(--tekst-licht); }
.order__text { font-size: var(--fs-small); line-height: 1.55; color: var(--mist); }

.s4-band { margin: 0; }
.s4-band__media { aspect-ratio: 4 / 3; background: var(--bos-nacht); }
.s4-band__media img { object-position: 50% 62%; }
.s4-band__cap {
  display: grid; gap: .25rem 1rem; padding-top: .9rem;
  padding-left: calc(var(--pad) + var(--tl-indent));
  font-size: var(--fs-xs); line-height: 1.5; color: var(--mist);
}
.s4-band__cap .caption__num { color: var(--mos-licht); }

.s4-after {
  display: grid; gap: var(--space-xl) var(--gap);
  padding-top: var(--space-xl); padding-bottom: var(--tl-pad);
  padding-left: calc(var(--pad) + var(--tl-indent));
}
.s4-after__text { display: grid; align-content: start; }
.s4-after__title { font-size: var(--fs-h3); margin-bottom: 1.4rem; }
.s4-after__list li { max-width: 46ch; }
.s4-after__photo { margin-top: var(--space-l); }
.s4-after__tall .media img { object-position: 58% 50%; }
@media (max-width: 959px) { .s4-after__tall .media { aspect-ratio: 4 / 3; } }

@media (min-width: 760px) {
  .s4-band__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 960px) {
  .s4__title { grid-column: 1 / span 7; }
  .s4__lead { grid-column: 1 / span 6; margin-top: 0; }
  .order {
    grid-column: 1 / -1; margin-top: var(--space-m);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .order li {
    position: relative; display: block; padding: 1.25rem 1.5rem 0 0;
    border-top: 1px solid var(--lijn-donker); border-bottom: 0;
  }
  .order li:last-child { border-bottom: 0; }
  .order__n { display: grid; }
  .order__title { display: block; margin: .55rem 0 .45rem; }
  .order__text { display: block; }

  .s4-band__cap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-left: var(--pad); }
  .s4-band__cap .caption__num { grid-column: 1 / span 3; }
  .s4-band__cap > span:last-child { grid-column: 4 / span 6; }

  .s4-after { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-left: var(--pad); }
  .s4-after__text { grid-column: 4 / span 5; }
  .s4-after__tall { grid-column: 9 / -1; margin-top: var(--space-2xl); align-self: start; }
}
@media (min-width: 1100px) {
  .s4-band__media { aspect-ratio: 21 / 9; }
}

/* 04 Dag één: uitzettekening op donker in plaats van een foto ------------------ */
.s4-band--drawing .uz { background: var(--bos-nacht); border-top: 1px solid var(--lijn-donker); border-bottom: 1px solid var(--lijn-donker); padding: clamp(1rem, .5rem + 2vw, 2.5rem) 0; overflow: hidden; }
.uz-svg { display: block; width: 100%; height: auto; max-width: 1360px; margin-inline: auto; }
.uz-svg--m { display: none; }
.uz-svg text { font-family: var(--sans); font-stretch: 85%; }
.uz-area { fill: rgba(236, 231, 219, .05); stroke: #ECE7DB; stroke-width: 1.4; }
.uz-string { fill: none; stroke: #BCC795; stroke-width: 1.2; stroke-dasharray: 9 5; }
.uz-hose { fill: none; stroke: #BCC795; stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.uz-stake rect { fill: #16241B; stroke: #BCC795; stroke-width: 1.6; }
.uz-pin circle { fill: #16241B; stroke: #BCC795; stroke-width: 1.6; }
.uz-tree { fill: none; stroke: #A7B0A2; stroke-width: 1.3; stroke-dasharray: 6 5; }
.uz-sand { fill: none; stroke: #A7B0A2; stroke-width: 1.6; stroke-dasharray: 1 6; stroke-linecap: round; }
.uz-cross { fill: none; stroke: #ECE7DB; stroke-width: 1.5; stroke-linecap: round; }
.uz-leader { fill: none; stroke: #A7B0A2; stroke-width: .8; }
.uz-label { fill: #ECE7DB; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.uz-note { fill: #A7B0A2; font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.uz-svg--m .uz-label { font-size: 22px; }
.uz-svg--m .uz-note { font-size: 21px; }
.uz-svg--m .uz-string { stroke-width: 1.6; }
.uz-svg--m .uz-leader { stroke-width: 1.1; }
/* Tot 960px de staande schets: de brede versie wordt anders te klein om de woorden te lezen */
@media (max-width: 959px) {
  .uz-svg--d { display: none; }
  .uz-svg--m { display: block; padding-inline: var(--pad); max-width: 40rem; }
}

/* 05 De laatste plant: tekst + beeld dat tot de rand loopt -------------------------- */
.s5__text { display: grid; justify-items: start; }
.s5__sub { margin: 2.25rem 0 .9rem; font-size: 1.45rem; }
.s5__facts { width: 100%; }
.s5__photo { position: relative; z-index: 1; margin-left: calc(-1 * (var(--pad) + var(--tl-indent))); margin-right: calc(-1 * var(--pad)); }
.s5__photo .media { aspect-ratio: 4 / 3; }
.s5__photo img { object-position: 32% 50%; }
.s5__photo .caption { margin-inline: calc(var(--pad) + var(--tl-indent)) var(--pad); }

@media (min-width: 960px) {
  .s5__text { grid-column: 1 / span 4; }
  .s5__photo {
    grid-column: 5 / -1; margin-left: var(--gap);
    margin-right: calc(-1 * (var(--pad) + max(0px, (100vw - var(--maxw) - 2 * var(--pad)) / 2)));
  }
  .s5__photo .media { aspect-ratio: 1 / 1; }
  .s5__photo .caption { margin-inline: 0 var(--pad); }
}
@media (min-width: 1300px) {
  .s5__photo .media { aspect-ratio: 6 / 5; }
}

/* 06 Nazorg en onderhoud: staand beeld + drie vormen -------------------------- */
.s6__text { display: grid; justify-items: start; }
.s6__photo { width: 100%; max-width: 26rem; }
.s6__photo .media { aspect-ratio: 4 / 3; }
.s6__photo .media img { object-position: 50% 62%; }
.care { width: 100%; margin-top: 1.9rem; border-top: 1px solid var(--steen-lijn); }
.care li { display: grid; gap: .2rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--steen-lijn); }
.care__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 380; line-height: 1.25; }
.care__text { color: var(--kiezel); }
.s6__price { margin: 1.15rem 0 .4rem; font-size: var(--fs-small); color: var(--kiezel); }
@media (min-width: 640px) { .care li { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: baseline; } }
@media (max-width: 959px) { .s6__text { order: -1; } }
@media (min-width: 960px) {
  .s6__photo { grid-column: 1 / span 4; grid-row: 1; max-width: none; margin-top: .4rem; position: sticky; top: calc(var(--header-h) + 1.75rem); }
  .s6__photo .media { aspect-ratio: 4 / 5; }
  .s6__text { grid-column: 5 / -1; grid-row: 1; padding-left: 1rem; }
}

.tl-step--last .tl-step__grid { padding-bottom: calc(var(--tl-pad) * .55); }

/* Einde van de lijn */
.tl-end__inner { padding-left: calc(var(--pad) + var(--tl-indent)); padding-bottom: var(--space-2xl); }
.tl-end__node {
  position: absolute; z-index: 1; left: var(--rail-x); top: var(--end-y);
  width: 25px; height: 25px; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid var(--bos);
  background: var(--linnen) radial-gradient(circle, var(--bos) 0 3.4px, transparent 3.9px);
  box-shadow: inset 0 0 0 4px var(--linnen), inset 0 0 0 5px rgba(31, 58, 43, .35);
  transition: background-color var(--t) var(--ease);
}
.tl-end.is-reached .tl-end__node { background-color: var(--linnen); box-shadow: inset 0 0 0 4px var(--linnen), inset 0 0 0 5px var(--bos); }
.tl-end__text {
  padding-top: calc(var(--end-y) - .66em);
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.35rem); font-weight: 300; line-height: 1.3; letter-spacing: -.012em; color: var(--bos);
  max-width: 26ch;
}
@media (min-width: 960px) {
  .tl-end__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-left: var(--pad); }
  .tl-end__text { grid-column: 4 / -1; }
}

/* --------------------------------------------------------------------------
   Toegankelijkheid
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .tl-rail::before { background: GrayText; }
  .tl-rail::after { background: CanvasText; }
  .tl-node, .tl-end__node, .tl-ring, .season__row > [role="cell"]::before, .season__dot, .season__row--head > .is-now::before { forced-color-adjust: none; }
  .season__row--head > .is-now::before { background: Highlight; }
  .season__row--head > .is-now { forced-color-adjust: none; color: HighlightText; }
}
@media print {
  .tl-rail::before, .tl-rail::after, .tl-node, .tl-end__node { display: none; }
  .tl-mark { position: static; }
}

/* --------------------------------------------------------------------------
   4. Slot: het eerste jaar als ring
   -------------------------------------------------------------------------- */
.yr__grid { display: grid; gap: var(--space-l) var(--gap); }
.yr__head { display: grid; gap: var(--space-m); align-content: start; }
.yr__title { font-size: clamp(2rem, 1.45rem + 2vw, 3.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.022em; max-width: 13ch; }
.yr__intro { color: var(--kiezel); max-width: 40ch; }
.yr__ring { margin: 0; width: min(100%, 440px); justify-self: center; }
.yr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.yr-svg text { font-family: var(--sans); font-stretch: 85%; }
.yr-line { fill: none; stroke: var(--bos); stroke-width: 1.2; }
.yr-ticks { stroke: var(--bos); stroke-width: 1; }
.yr-months text { fill: var(--kiezel); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.yr-guide { fill: none; stroke: var(--lijn-sterk); stroke-width: .8; stroke-dasharray: 2 4; }
.yr-plant { fill: none; stroke: var(--bos); stroke-width: 1.4; stroke-dasharray: 6 5; }
.yr-water { fill: none; stroke: var(--mos); stroke-width: 12; stroke-linecap: round; opacity: .85; }
.yr-stops circle { fill: var(--bos); stroke: var(--linnen); stroke-width: 3; }
.yr-stops text { fill: var(--linnen-licht); font-size: 13px; font-weight: 700; }
.yr-center { fill: var(--bos-diep); font-family: var(--serif) !important; font-stretch: normal !important; font-size: 30px; font-weight: 320; }
.yr-center-sub { fill: var(--kiezel); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.yr-lab { fill: var(--mos); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.yr-lab--dark { fill: var(--bos); }
/* Ring "Tuinjaar" bovenaan staat op telefoons op ca. 304px (schaal 0,69): ondertitel, maanden en nummers 14 eenheden (≥ 9,6px) */
.ww-ring .yr-center-sub { font-size: 14px; }
.ww-ring .yr-stops text, .ww-ring .yr-months text { font-size: 14px; }
/* Ring "Jaar 1" op kleine telefoons (schaal ≈ 0,72 bij 360px): labels groter, met minder spatiëring zodat
   "plantseizoen" binnen de gestippelde boog blijft */
@media (max-width: 479px) {
  .yr__ring .yr-lab, .yr__ring .yr-center-sub { font-size: 14px; letter-spacing: .08em; }
  .yr__ring .yr-months text, .yr__ring .yr-stops text { font-size: 15px; }
}
.yr__list { display: grid; border-top: 1px solid var(--steen-lijn); }
.yr__list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .15rem 1rem; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--steen-lijn); }
.yr__n { grid-row: span 3; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bos); color: var(--linnen-licht); font-size: .8125rem; font-weight: 700; }
.yr__m { font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos); padding-top: .2rem; }
.yr__t { font-size: 1.35rem; font-weight: 380; line-height: 1.2; }
.yr__list p { font-size: var(--fs-small); color: var(--kiezel); max-width: 46ch; }
.yr__foot { font-size: var(--fs-small); color: var(--kiezel); }
/* 960–1279px: drie kolommen maken de ring te klein (≈ 294px bij 1024); ring onder de kop in een brede linkerkolom */
@media (min-width: 960px) and (max-width: 1279px) {
  .yr__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; row-gap: var(--space-l); }
  .yr__head { grid-column: 1 / span 5; grid-row: 1; }
  .yr__ring { grid-column: 1 / span 5; grid-row: 2; }
  .yr__foot { grid-column: 1 / span 5; grid-row: 3; }
  .yr__list { grid-column: 7 / -1; grid-row: 1 / span 3; }
}
@media (min-width: 1280px) {
  .yr__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; row-gap: var(--space-xl); }
  .yr__head { grid-column: 1 / span 4; grid-row: 1; align-self: start; }
  .yr__ring { grid-column: 5 / span 4; grid-row: 1 / span 2; }
  .yr__list { grid-column: 9 / -1; grid-row: 1 / span 2; }
  .yr__foot { grid-column: 1 / span 4; grid-row: 2; align-self: end; }
}
@media (forced-colors: active) { .yr-svg { forced-color-adjust: none; background: var(--linnen); border-radius: 50%; } }