@media (min-width: 450px) and (max-width: 960px) {

  /* Stap 1 */
  .b5-bit-form .b5-2  { grid-area: 1/1/88/61; }      /* Voornaam */
  .b5-bit-form .b5-13 { grid-area: 88/1/172/20; }    /* Tussenvoegsel */
  .b5-bit-form .b5-6  { grid-area: 88/21/175/61; }   /* Achternaam */
  .b5-bit-form .b5-14 { grid-area: 175/1/259/37; }   /* Geboortedatum */
  .b5-bit-form .b5-15 { grid-area: 175/38/247/61; }  /* Aanhef */
  .b5-bit-form .b5-17 { grid-area: 259/2/288/21; }   /* Adresgegevens */
  .b5-bit-form .b5-16 { grid-area: 259/21/290/61; }  /* streep */
  .b5-bit-form .b5-20 { grid-area: 290/1/374/61; }   /* Straatnaam */
  .b5-bit-form .b5-21 { grid-area: 374/1/458/18; }   /* Huisnummer */
  .b5-bit-form .b5-22 { grid-area: 374/19/458/61; }  /* Postcode */
  .b5-bit-form .b5-18 { grid-area: 458/2/487/32; }   /* Contact & Legitimatie */
  .b5-bit-form .b5-19 { grid-area: 458/27/489/61; }  /* streep */
  .b5-bit-form .b5-5  { grid-area: 489/1/576/31; }   /* Email */
  .b5-bit-form .b5-9  { grid-area: 489/32/576/61; }  /* Telefoonnummer */
  .b5-bit-form .b5-23 { grid-area: 576/1/660/61; }   /* Kopie identiteitsbewijs */
  .b5-bit-form .b5-11 { grid-area: 660/1/705/61; }   /* Spreekuur checkbox */

  /* Stap 2 - eigen rijen, twee velden meer dan formulier 4 */
  .b5-bit-form .b5-35 { grid-area: 1/1/85/61; }      /* Abonnement */
  .b5-bit-form .b5-24 { grid-area: 85/1/169/61; }    /* Ingangsdatum */
  .b5-bit-form .b5-25 { grid-area: 169/1/274/61; }
  .b5-bit-form .b5-26 { grid-area: 274/2/303/32; }   /* kop */
  .b5-bit-form .b5-27 { grid-area: 274/33/305/61; }  /* streep */
  .b5-bit-form .b5-28 { grid-area: 305/1/410/61; }   /* Betaalmethode */
  .b5-bit-form .b5-37 { grid-area: 410/1/515/61; }   /* Betaalmethode (2e - zie notitie) */
  .b5-bit-form .b5-29 { grid-area: 515/1/599/61; }   /* IBAN */
  .b5-bit-form .b5-30 { grid-area: 599/1/683/61; }   /* Ten name van */

  /* Stap 3 - b5-12 hoort hier, niet in stap 1. Rijnummers beginnen per stap
     opnieuw, dus een stap 1 nummer op een stap 3 veld duwt het veld ver naar
     beneden, onder de verstuurknop. */
  .b5-bit-form .b5-34 { grid-area: 1/1/75/61; }      /* Machtiging kop + intro */
  .b5-bit-form .b5-32 { grid-area: 75/1/200/61; }    /* Machtiging decision box */
  .b5-bit-form .b5-12 { grid-area: 200/1/245/61; }   /* Privacy checkbox */
  .b5-bit-form .b5-33 { grid-area: 245/1/310/61; }   /* E-mail opt-in */
  .b5-bit-form .b5-1  { grid-area: 310/1/370/61; }   /* Verstuurknop */
}


/* TELEFOON - dezelfde paren, opnieuw uitgesneden voor een formulier van ~311px.
   Geboortedatum en Aanhef krijgen elk een hele rij: het datumveld heeft ~160px
   nodig en Aanhef ~158px, samen 318px in een rij van 305px. Dat past niet, bij
   geen enkele kolomverdeling. */

@media (max-width: 449px) {

  /* Stap 1 */
  .b5-bit-form .b5-2  { grid-area: 1/1/88/61; }
  .b5-bit-form .b5-13 { grid-area: 88/1/172/25; }
  .b5-bit-form .b5-6  { grid-area: 88/26/175/61; }
  .b5-bit-form .b5-14 { grid-area: 175/1/259/61; }   /* hele rij */
  .b5-bit-form .b5-15 { grid-area: 259/1/331/61; }   /* hele rij */
  .b5-bit-form .b5-17 { grid-area: 331/2/360/38; }
  .b5-bit-form .b5-16 { grid-area: 331/38/362/61; }
  .b5-bit-form .b5-20 { grid-area: 362/1/446/61; }
  .b5-bit-form .b5-21 { grid-area: 446/1/530/24; }
  .b5-bit-form .b5-22 { grid-area: 446/25/530/61; }
  .b5-bit-form .b5-18 { grid-area: 530/2/559/47; }
  .b5-bit-form .b5-19 { grid-area: 530/47/561/61; }
  .b5-bit-form .b5-5  { grid-area: 561/1/648/31; }
  .b5-bit-form .b5-9  { grid-area: 561/32/648/61; }
  .b5-bit-form .b5-23 { grid-area: 648/1/732/61; }
  .b5-bit-form .b5-11 { grid-area: 732/1/777/61; }

  /* Stap 2 */
  .b5-bit-form .b5-35 { grid-area: 1/1/85/61; }
  .b5-bit-form .b5-24 { grid-area: 85/1/169/61; }
  .b5-bit-form .b5-25 { grid-area: 169/1/274/61; }
  .b5-bit-form .b5-26 { grid-area: 274/2/303/38; }
  .b5-bit-form .b5-27 { grid-area: 274/38/305/61; }
  .b5-bit-form .b5-28 { grid-area: 305/1/410/61; }
  .b5-bit-form .b5-37 { grid-area: 410/1/515/61; }
  .b5-bit-form .b5-29 { grid-area: 515/1/599/61; }
  .b5-bit-form .b5-30 { grid-area: 599/1/683/61; }

  /* Stap 3 */
  .b5-bit-form .b5-34 { grid-area: 1/1/75/61; }      /* Machtiging kop + intro */
  .b5-bit-form .b5-32 { grid-area: 75/1/235/61; }    /* Machtiging decision box - loopt hier verder door */
  .b5-bit-form .b5-12 { grid-area: 235/1/280/61; }   /* Privacy checkbox */
  .b5-bit-form .b5-33 { grid-area: 280/1/345/61; }   /* E-mail opt-in */
  .b5-bit-form .b5-1  { grid-area: 345/1/405/61; }   /* Verstuurknop */
}


/* SECTIEPAUZES
   Bit Form laat nul ruimte tussen veldrijen, dus een sectiekop plakt tegen de
   rij erboven. Kop en streep krijgen allebei de marge, anders staan ze niet
   meer op gelijke hoogte. */

@media (max-width: 960px) {
  .b5-bit-form .b5-17,
  .b5-bit-form .b5-16,
  .b5-bit-form .b5-18,
  .b5-bit-form .b5-19,
  .b5-bit-form .b5-26,
  .b5-bit-form .b5-27 {
    margin-block-start: 2rem;
  }
}


/* STAPPENBALK OP TELEFOON - drie stappen op een rij houden.
   De balk is flex-wrap: wrap en elke stap claimt ~156px, dus stap 3 valt
   anders op een eigen regel en de balk wordt 154px hoog in plaats van 69px. */

@media (max-width: 449px) {
  .b5-bit-form ._frm-b5-stp-hdr-wrpr { flex-wrap: nowrap; }
  .b5-bit-form ._frm-b5-stp-hdr { flex: 1 1 0; min-width: 0; width: auto; }
  .b5-bit-form ._frm-b5-stp-hdr-lbl { font-size: 0.8rem; line-height: 1.25; }
}


/* GEBOORTEDATUM OP iOS
   iOS Safari tekent input[type=date] met zijn eigen bediening: grijze vulling,
   gecentreerde tekst, hoger vak. appearance:none haalt die laag eraf. */

.b5-bit-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 0;
}

.b5-bit-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}