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

  /* Step 1 */
  .b4-bit-form .b4-2  { grid-area: 1/1/88/61; }      /* Voornaam */

  .b4-bit-form .b4-13 { grid-area: 88/1/172/20; }    /* Tussenvoegsel */
  .b4-bit-form .b4-6  { grid-area: 88/21/175/61; }   /* Achternaam */

  .b4-bit-form .b4-14 { grid-area: 175/1/259/37; }   /* Geboortedatum */
  .b4-bit-form .b4-15 { grid-area: 175/38/247/61; }  /* Aanhef - widened for both radios */

  .b4-bit-form .b4-17 { grid-area: 259/2/288/21; }   /* "Adresgegevens" - widened, was 3 lines */
  .b4-bit-form .b4-16 { grid-area: 259/21/290/61; }  /* its rule */

  .b4-bit-form .b4-20 { grid-area: 290/1/374/61; }   /* Straatnaam */

  .b4-bit-form .b4-21 { grid-area: 374/1/458/18; }   /* Huisnummer - widened for its label */
  .b4-bit-form .b4-22 { grid-area: 374/19/458/61; }  /* Postcode */

  .b4-bit-form .b4-18 { grid-area: 458/2/487/32; }   /* "Contact & Legitimatie" - widened */
  .b4-bit-form .b4-19 { grid-area: 458/27/489/61; }  /* its rule */

  .b4-bit-form .b4-5  { grid-area: 489/1/576/31; }   /* Email */
  .b4-bit-form .b4-9  { grid-area: 489/32/576/61; }  /* Telefoonnummer */

  .b4-bit-form .b4-23 { grid-area: 576/1/660/61; }   /* Kopie identiteitsbewijs */
  .b4-bit-form .b4-11 { grid-area: 660/1/705/61; }   /* Spreekuur checkbox */

  /* Step 2 */
  .b4-bit-form .b4-24 { grid-area: 1/1/85/61; }      /* Ingangsdatum */
  .b4-bit-form .b4-25 { grid-area: 85/1/190/61; }
  .b4-bit-form .b4-26 { grid-area: 190/2/219/32; }   /* heading - widened to match step 1 */
  .b4-bit-form .b4-27 { grid-area: 190/27/221/61; }  /* its rule */
  .b4-bit-form .b4-28 { grid-area: 221/1/326/61; }   /* Betaalmethode */
  .b4-bit-form .b4-29 { grid-area: 326/1/410/61; }   /* IBAN */
  .b4-bit-form .b4-30 { grid-area: 410/1/494/61; }   /* Ten name van */

  /* Step 3 - b4-12 lives here, not in step 1. Row numbers restart per step, so
     a step 1 number on a step 3 field pushes it far below everything else. */
  .b4-bit-form .b4-34 { grid-area: 1/1/75/61; }      /* Machtiging heading + intro */
  .b4-bit-form .b4-32 { grid-area: 75/1/200/61; }    /* Machtiging decision box */
  .b4-bit-form .b4-12 { grid-area: 200/1/245/61; }   /* Privacy checkbox */
  .b4-bit-form .b4-33 { grid-area: 245/1/310/61; }   /* E-mail opt-in */
  .b4-bit-form .b4-1  { grid-area: 310/1/370/61; }   /* Submit */
}


/* SECTION BREAKS
   Bit Form leaves no gap at all between field rows. Measured on the live page,
   every gap is 0 - the air you see is padding inside each field wrapper. So a
   section heading sits flush against the row above it and reads as part of it.

   This gives each heading room above. Nothing is added below, on purpose: the
   heading should sit close to the fields it introduces and far from the ones
   it does not.

   The heading AND its rule both get the margin. If only the heading got it,
   the row would grow but the line would stay at the old height, and the two
   would no longer sit level.

   It stops at 960px, so your monitor layout in Bit Form is untouched. Delete
   the media query to apply it there too. Change 2rem in one place to tune it;
   a whole field row is about 5.4rem. */

@media (max-width: 960px) {
  .b4-bit-form .b4-17,   /* Adresgegevens */
  .b4-bit-form .b4-16,   /* its rule */
  .b4-bit-form .b4-18,   /* Contact & Legitimatie */
  .b4-bit-form .b4-19,   /* its rule */
  .b4-bit-form .b4-26,   /* Betaalgegevens, step 2 */
  .b4-bit-form .b4-27 {  /* its rule */
    margin-block-start: 2rem;
  }
}


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

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


@media (max-width: 449px) {

  /* Step 1 */
  .b4-bit-form .b4-2  { grid-area: 1/1/88/61; }      /* Voornaam */

  .b4-bit-form .b4-13 { grid-area: 88/1/172/25; }    /* Tussenvoegsel */
  .b4-bit-form .b4-6  { grid-area: 88/26/175/61; }   /* Achternaam */

  .b4-bit-form .b4-14 { grid-area: 175/1/259/61; }   /* Geboortedatum */
  .b4-bit-form .b4-15 { grid-area: 259/1/331/61; }   /* Aanhef */

  .b4-bit-form .b4-17 { grid-area: 331/2/360/38; }   /* Adresgegevens */
  .b4-bit-form .b4-16 { grid-area: 331/31/362/61; }  /* its rule */

  .b4-bit-form .b4-20 { grid-area: 362/1/446/61; }   /* Straatnaam */

  .b4-bit-form .b4-21 { grid-area: 446/1/530/24; }   /* Huisnummer */
  .b4-bit-form .b4-22 { grid-area: 446/25/530/61; }  /* Postcode */

  .b4-bit-form .b4-18 { grid-area: 530/2/559/47; }   /* Contact & Legitimatie */
  .b4-bit-form .b4-19 { grid-area: 530/41/561/61; }  /* its rule */

  .b4-bit-form .b4-5  { grid-area: 561/1/648/31; }   /* Email */
  .b4-bit-form .b4-9  { grid-area: 561/32/648/61; }  /* Telefoonnummer */

  .b4-bit-form .b4-23 { grid-area: 648/1/732/61; }   /* Kopie identiteitsbewijs */
  .b4-bit-form .b4-11 { grid-area: 732/1/777/61; }   /* Spreekuur checkbox */

  /* Step 2 */
  .b4-bit-form .b4-24 { grid-area: 1/1/85/61; }
  .b4-bit-form .b4-25 { grid-area: 85/1/190/61; }
  .b4-bit-form .b4-26 { grid-area: 190/2/219/32; }   /* Betaalgegevens */
  .b4-bit-form .b4-27 { grid-area: 190/32/221/61; }  /* its rule */
  .b4-bit-form .b4-28 { grid-area: 221/1/326/61; }
  .b4-bit-form .b4-29 { grid-area: 326/1/410/61; }
  .b4-bit-form .b4-30 { grid-area: 410/1/494/61; }

  /* Step 3 */
  .b4-bit-form .b4-34 { grid-area: 1/1/75/61; }      /* Machtiging heading + intro */
  .b4-bit-form .b4-32 { grid-area: 75/1/235/61; }    /* Machtiging decision box - wraps further here */
  .b4-bit-form .b4-12 { grid-area: 235/1/280/61; }   /* Privacy checkbox */
  .b4-bit-form .b4-33 { grid-area: 280/1/345/61; }   /* E-mail opt-in */
  .b4-bit-form .b4-1  { grid-area: 345/1/405/61; }   /* Submit */
}

@media (max-width: 449px) {
  .b4-bit-form ._frm-b4-stp-hdr-wrpr {
    flex-wrap: nowrap;
  }

  .b4-bit-form ._frm-b4-stp-hdr {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .b4-bit-form ._frm-b4-stp-hdr-lbl {
    font-size: 0.8rem;
    line-height: 1.25;
  }
}