/* SITE2: de kop van site2 (alleen in testmodus geladen, core/pagina.ts). Het menu heeft langere labels
 * (Bouwplannen, Hoe het werkt, Wat het kost, Vragen). Op een telefoon past het zo op 375 px in één rij;
 * op een nog smaller scherm loopt het om naar een tweede regel in plaats van opzij te vegen.
 * Alleen tokens uit tokens.css. */

@media (max-width: 759px) {
  .site-nav ul {
    /* Stijn 12-10: het menu staat ook op mobiel in het midden. */
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 var(--sp-3);
    overflow-x: visible;
  }
}

/* Stijn 12-10: de zin bij een sectiekop staat onder de kop, niet ernaast; op een breed scherm stond hij raar rechts. */
.vlak-kop {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

/* Stijn 12-10: in de welkomstappen staat "Opslaan en verder" rechts (Terug ernaast) en
 * "Deze stap overslaan" rechtsboven in de kaart. */
#stap .formulier-kaart { position: relative; }
#stap .form-actions { flex-direction: row-reverse; justify-content: flex-start; }
#stap .form-actions > a:not(.btn):last-child {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  margin: 0;
}