/* ==========================================================================
   Die Registrierung bekommt ein Aussehen                       31.08.2026
   ==========================================================================
   Kai: „die registrierung überlappt" und „bei der registrierung ist plz und
   ort vertauscht wenn man das mobil anschaut".

   URSACHE, gemessen: zu den Klassen obs-reg-* gab es im ganzen Haus NULL
   Regeln. Das Raster war display:block, und obs-reg-feld — ein <label> — war
   display:inline. Dreizehn Eingabefelder im Inline-Fluss.

   Damit erklären sich beide Beschwerden aus einer Ursache:
     * Die Überlappung ist der Inline-Fluss.
     * „PLZ und Ort vertauscht" ist gar keine Vertauschung. Im Quelltext steht
       <span>PLZ</span><input> und danach <span>Ort</span><input>. Ohne
       Blocksatz bricht die Zeile ZWISCHEN Beschriftung und Feld — man liest
       „PLZ" und sieht daneben das Feld für den Ort.

   DREI DINGE, DIE HIER ABSICHT SIND:

     * DAS RASTER HAT SECHS SPALTEN, WEIL DAS MARKUP SIE ERWARTET. Die Klassen
       heissen sp2, sp3, sp4, sp6; das ist die Spannweite. Auf dem Telefon
       spannt jedes Feld die ganze Breite — eine Spalte, kein Nebeneinander,
       nichts zu vertauschen.

     * 16 PX SCHRIFT IN DEN EINGABEFELDERN. Unter 16 px zoomt iOS beim
       Antippen in das Feld hinein und die Seite steht danach verschoben. Das
       ist kein Geschmack, sondern die Bedingung dafuer, dass ein Formular auf
       dem Telefon benutzbar bleibt.

     * 44 PX HOEHE FUER FELDER UND KNOPF. Die kleinste Flaeche, die ein Finger
       zuverlaessig trifft. Vorher waren es 35.
   ========================================================================== */

.obs-reg {
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
}

.obs-reg-karte {
  width: 100%;
  max-width: 44rem;
  box-sizing: border-box;
  background: var(--panel, #fff);
  border: var(--bw, 1px) solid var(--line, #D5DEE2);
  border-radius: var(--r-card, 13px);
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* ------------------------------------------------------------------- Kopf */

.obs-reg-kopf h1 {
  margin: 0 0 .375rem;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.obs-reg-lead {
  margin: 0 0 1.25rem;
  color: var(--ink-2, #4C5D66);
}

.obs-reg-meldung {
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------ Die Gruppen */

/* Ein <fieldset> bringt Rand und Innenabstand des Browsers mit. Beides weg:
   die Gruppen sollen durch ihre Beschriftung und den Abstand wirken, nicht
   durch zwei ineinandergeschachtelte Kaesten. */
.obs-reg-gruppe {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.obs-reg-gruppe > legend {
  padding: 0;
  margin: 0 0 .625rem;
  font-family: var(--f-label, inherit);
  font-size: var(--label-fs, 12px);
  font-weight: var(--label-fw, 600);
  letter-spacing: var(--label-ls, .005em);
  text-transform: var(--label-tt, none);
  color: var(--ink-2, #4C5D66);
}

/* ------------------------------------------------------------- Das Raster */

.obs-reg-raster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .75rem;
}

.obs-reg-sp2 { grid-column: span 2; }
.obs-reg-sp3 { grid-column: span 3; }
.obs-reg-sp4 { grid-column: span 4; }
.obs-reg-sp6 { grid-column: span 6; }

.obs-reg-raster > .obs-reg-hinweis {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-2, #4C5D66);
  font-size: .875rem;
}

/* -------------------------------------------------------------- Ein Feld */

/* Beschriftung ueber dem Feld, und zwar als eigene Zeile. Genau das fehlte:
   ein inline gesetztes <label> laesst den Umbruch zwischen Wort und Feld zu. */
.obs-reg-feld {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.obs-reg-feld > span {
  font-size: .8125rem;
  color: var(--ink-2, #4C5D66);
}

.obs-reg-feld small {
  color: var(--ink-2, #4C5D66);
  font-size: .75rem;
}

.obs-reg-feld input,
.obs-reg-feld select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  font-size: 1rem;
}

/* ---------------------------------------------------------- Der Abschluss */

.obs-reg-abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
}

.obs-reg-knopf {
  min-height: 2.75rem;
}

.obs-reg-fuss {
  margin: 0;
  color: var(--ink-2, #4C5D66);
  font-size: .875rem;
}

.obs-reg-fuss a {
  color: var(--accent, #2A3BE0);
}

/* Das reCAPTCHA-Feld ist 304 px breit und bringt seine Breite selbst mit. Auf
   einem 320-px-Telefon steht es damit ueber dem Rand des Kastens. */
.g-recaptcha {
  max-width: 100%;
  overflow-x: auto;
}

/* ------------------------------------------------------------ Das Telefon */

@media (max-width: 44rem) {
  /* Eine Spalte. Ab hier gibt es kein Nebeneinander mehr und damit auch
     nichts, was aussehen kann wie eine Vertauschung. */
  .obs-reg-sp2,
  .obs-reg-sp3,
  .obs-reg-sp4 {
    grid-column: span 6;
  }

  .obs-reg-abschluss {
    /* Der Knopf ueber die ganze Breite: er ist das Ziel dieser Seite. */
    flex-direction: column;
    align-items: stretch;
  }

  .obs-reg-knopf {
    width: 100%;
  }

  .obs-reg-fuss {
    text-align: center;
  }
}

@media (max-width: 22rem) {
  .g-recaptcha {
    transform: scale(.92);
    transform-origin: left top;
  }
}