/* De stappenbalk van het portaal: Aanleveren · Je site bekijken · Live (deel 4), of voor een aanvraag Eerste ontwerp · Aanleveren · Je site
   bekijken · Live (deel B), direct onder de donkere kop.
   Drie of vier rondjes met een dunne lijn ertussen. Af: een zacht roze rondje met een vinkje. Nu: donker, met een wit cijfer en een vette naam.
   Later: wit met een grijze rand en een grijze naam, en geen link. Het aantal stappen staat niet vast: elke stap krijgt evenveel van de breedte
   (een lange naam loopt door op een tweede regel). Op 320 pixels breed passen ook vier naast elkaar, omdat een stap met een korte naam
   (`.stappen-naam-kort`: Ontwerp, Aanleveren, Bekijken, Live) die korte naam toont; vanaf 560 pixels staat de lange naam (`.stappen-naam-lang`).
   Een stap zonder korte naam heeft alleen `.stappen-naam` en toont die altijd.
   Kleuren alleen uit de huisstijl (/huisstijl/huisstijl.css) en formulier.css. */

.stappenbalk { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.stappen {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  max-width: calc(720px + 2 * var(--rand)); margin: 0 auto; padding: 22px var(--rand) 18px; list-style: none;
}
.stappen-stap { position: relative; display: flex; justify-content: center; min-width: 0; }
/* De lijn van het vorige rondje naar dit rondje: van midden tot midden, met wat lucht rond de rondjes */
.stappen-stap + .stappen-stap::before {
  content: ""; position: absolute; top: 16px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 1px; background: var(--lijn-sterk);
}
/* Na een afgeronde stap is de lijn zacht roze */
.stappen-stap[data-stand="af"] + .stappen-stap::before { background: var(--blush); }

.stappen-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 0 4px 2px;
  border-radius: 10px; color: var(--tekst); text-align: center; text-decoration: none;
}
a.stappen-link:hover .stappen-naam, a.stappen-link:hover .stappen-naam-kort { text-decoration: underline; text-underline-offset: 3px; }
.stappen-rondje {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid transparent; border-radius: 50%;
  font-size: 14px; font-weight: 600; line-height: 1; transition: transform .2s var(--vloeiend);
}
a.stappen-link:hover .stappen-rondje { transform: scale(1.06); }
.stappen-naam, .stappen-naam-kort { font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
/* Smal (standaard): een stap met een korte naam toont die, en de lange is weg (ook voor schermlezers) */
.stappen-naam-lang { display: none; }

.stappen-stap[data-stand="af"] .stappen-rondje { background: var(--wit); border-color: var(--lijn-sterk); color: var(--roze); font-size: 15px; }
.stappen-stap[data-stand="nu"] .stappen-rondje { background: var(--nacht); color: var(--blush); }
.stappen-stap[data-stand="nu"] .stappen-naam, .stappen-stap[data-stand="nu"] .stappen-naam-kort { font-weight: 700; }
.stappen-stap[data-stand="open"] .stappen-rondje { background: var(--wit); border-color: var(--tekst); color: var(--tekst); }
.stappen-stap[data-stand="later"] .stappen-rondje { background: var(--wit); border-color: var(--lijn-sterk); color: var(--zacht); }
.stappen-stap[data-stand="later"] .stappen-naam, .stappen-stap[data-stand="later"] .stappen-naam-kort { color: var(--zacht); }

/* Op de allersmalste schermen (tot 359 pixels, vier stappen van 72 pixels) de korte namen iets kleiner: zo staan ze niet tegen elkaar aan */
@media (max-width: 359px) {
  .stappen-naam-kort { font-size: 13px; }
}
/* Vanaf 560 pixels is er plek voor de lange namen: de korte is weg en de lange staat er weer */
@media (min-width: 560px) {
  .stappen-naam-lang { display: block; }
  .stappen-naam-kort { display: none; }
}
@media (min-width: 720px) {
  .stappen { padding-top: 26px; padding-bottom: 22px; }
  .stappen-naam { font-size: 15px; }
}