/* Kunden-Datenportal — schlicht, kontraststark, ohne Fremdressourcen.
   Keine Webschrift von außen: Die Sicherheitsrichtlinie erlaubt nur die eigene Herkunft,
   und eine nachgeladene Schrift wäre zusätzlich eine Verbindung zu einem Dritten, die
   der Kunde nicht erwartet. */

/* Farben und Radius aus dem Markensystem „Fröhlich Versichert“:
   warmes Off-White, Navy, GENAU EINE Akzentfarbe (Terracotta), warme Linien, 8 px.
   Die Hausschrift (Merriweather/Source Sans 3) wird bewusst NICHT geladen: Die
   Sicherheitsrichtlinie erlaubt nur die eigene Herkunft, und eine nachgeladene Schrift
   wäre eine Verbindung zu einem Dritten, die der Kunde nicht erwartet. */
:root {
  --grund: #f7f5f3;
  --weiss: #ffffff;
  --linie: #e0dcd6;
  --text: #222a39;
  --leise: #5f5a54;
  --navy: #1a305b;
  --navy-tief: #0f1c36;
  --terra: #ae5832;
  --gruen: #2f6b4f;
  --warnung-grund: #fbf2ec;
  --erfolg-grund: #eef4f0;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
}

/* ⚠️ 1120 px, nicht 960: Bei 960 px blieben der Zeilenkarte 852 px, und in die
   passten nur ZWEI Felder à 416 px nebeneinander. Ein Feld für eine Jahreszahl
   416 px breit zu machen ist kein gutes Layout, sondern nur ein technisch grünes.
   Mit 1120 px sind es drei Felder à 326 px — breit genug für den längsten
   Auswahleintrag (225 px Text) und schmal genug, dass eine Zeile als Zeile lesbar
   bleibt.
   Damit der FLIESSTEXT davon nicht mitwächst — 1120 px lange Zeilen liest niemand
   gern — begrenzt die Regel darunter Überschriften und Absätze auf 68 Zeichen. */
.huelle {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.sprung {
  position: absolute;
  left: -9999px;
}
.sprung:focus {
  position: static;
  display: inline-block;
  padding: 8px 12px;
  background: var(--navy);
  color: #fff;
}

.kopf {
  background: var(--navy-tief);
  color: #fff;
  padding: 14px 0;
}
.kopf .huelle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
}
.logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 60vw;
}
.marke {
  font-weight: 800;
  font-size: 1.05rem;
}
.kopf-hinweis {
  color: #c8d2e2;
  font-size: 0.9rem;
}

main {
  padding-top: 22px;
  padding-bottom: 32px;
}

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
}
.karte.schmal {
  max-width: 520px;
}
/* Lesbare Zeilenlänge für alles, was gelesen statt ausgefüllt wird. Die Formulare
   selbst nutzen die volle Kartenbreite — sie werden gescannt, nicht gelesen. */
.karte > h1,
.karte > h2,
.karte > p,
.karte > details {
  max-width: 68ch;
}
.karte.warnung {
  border-color: var(--terra);
}

h1 {
  font-size: 1.35rem;
  margin: 0 0 10px;
}
h2 {
  font-size: 1.05rem;
  margin: 22px 0 8px;
}

p {
  margin: 0 0 12px;
}
.leise {
  color: var(--leise);
  font-size: 0.9rem;
}
.grossschrift {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.linkfeld code {
  display: block;
  padding: 10px 12px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  word-break: break-all;
  font-size: 0.95rem;
}

.hinweisfeld {
  background: var(--warnung-grund);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--terra);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 0.94rem;
}
.hinweisfeld ul {
  margin: 6px 0;
  padding-left: 20px;
}
.fehler {
  color: var(--terra);
  font-weight: 700;
}

/* --- Schrittanzeige ------------------------------------------------------ */
.schritte ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
/* ⚠️ 44 px, nicht 40: Bei 40 px min-height wurde der Link 42 px hoch (Inhalt 40 +
   2 px Rahmen) und blieb damit unter der Marke für Tap-Ziele. Gemessen am 26.08.2026
   auf 1440 px: 56 Navigations-Links à 42 px. Auf dem Handy galt die 44 schon, auf dem
   breiten Bildschirm nicht — ein Tablet ist aber beides. */
.schritte a {
  display: inline-block;
  padding: 8px 14px;
  min-height: 44px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}
.schritte .aktiv a {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --- Formulare ----------------------------------------------------------- */
label {
  display: block;
  margin: 0 0 12px;
  font-weight: 700;
}
/* ⚠️ Gemessen am 26.08.2026 auf der Maklerseite: sieben Ankreuzfelder à 13 px.
   Ein 13-px-Kasten ist mit dem Finger nicht sicher zu treffen. Zwei Dinge helfen:
   Die Box wird größer (22 px), UND das umgebende Label wird selbst zur Trefferfläche
   — ein `<label>` mit dem Feld darin schaltet das Feld mit, das ist keine Zutat,
   sondern HTML. 44 px Mindesthöhe macht daraus ein vollwertiges Tap-Ziel. */
label.ankreuz {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 400;
}
/* ⚠️ Schriftgröße hier AUSDRÜCKLICH auf 16 px, nicht `font: inherit`.
   In der Erfassungstabelle stand `font-size: 0.94rem`; die Felder erbten daraus 15 px —
   und iOS zoomt beim Antippen jedes Feldes unter 16 px automatisch hinein. Der Kunde
   landet dann in einer vergrößerten, seitlich verschobenen Seite. Gemessen am 26.08.2026:
   56 Felder unter 16 px.
   Ebenso die Höhe: 42 px lag unter der 44-px-Marke für Tap-Ziele; 48 px ist bequem. */
input,
select,
textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
label.ankreuz input {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
}
fieldset {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin: 0 0 14px;
  padding: 12px 14px;
}
legend {
  font-weight: 700;
  padding: 0 6px;
}

.knopf,
button {
  display: inline-block;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.knopf.haupt,
button.haupt {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.knopf.gefahr,
button.gefahr {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
form.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}
form.zeile label {
  margin: 0;
}
/* ⚠️ Ohne diese Regel zerfällt „Frist verlängern auf [14] Tage" in drei
   übereinanderstehende Stücke: Die Grundregel macht jedes Eingabefeld zum Block mit
   100 % Breite, und die Einheit „Tage" rutscht unter das Feld. In einer einzeiligen
   Leiste gehört ein Zahlenfeld neben seinen Text, nicht darunter — gesehen am
   26.08.2026 auf der Vorgangsseite. */
form.zeile label input[type="number"] {
  display: inline-block;
  width: 6.5rem;
  margin: 0 6px;
  vertical-align: middle;
}
form.zeile .leise {
  flex: 1 1 16rem;
}

/* --- Tabellen ------------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
th,
td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.erfassung input,
.erfassung select {
  min-width: 0;
}
/* Auf breiten Bildschirmen erben die Felder die 15 px der Tabelle nicht — sie behalten
   ihre 16 px aus der Formularregel. Nur die Beschriftungen sind kleiner. */
.erfassung input,
.erfassung select {
  font-size: 16px;
}
.entfernen {
  white-space: nowrap;
}
/* ⚠️ Auch der kleine Knopf ist ein Tap-Ziel. 40 px galten bis 26.08.2026 auf breiten
   Bildschirmen; gemessen wurden dort 40 Entfernen- und Vorschlagsknöpfe unter 44 px. */
.knopf.klein,
button.klein {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 700;
}
.knopf.still,
button.still {
  border-color: var(--linie);
  background: var(--grund);
  color: var(--leise);
}

/* =========================================================================
   Erfassungsblöcke: eine Karte je Eintrag — auf JEDER Breite dasselbe Raster.

   ⚠️ Was hier bis zum 26.08.2026 stand, war eine echte `<table>` für alles über
   760 px. Christian am 26.08.2026 zum Screenshot der Ausgabenzeile: „LAYOUT —
   Text abgeschnitten und felder nicht einheitlich eingelayoutet usw“. Genau das
   war messbar, und es war kein Zufall, sondern Bauart:

     · Die Tabelle verteilt ihre Breite nach INHALT. Dieselbe Spalte war je nach
       Block und Zeileninhalt 174, 188 oder 202 px breit — „Bezeichnung“ meinte
       in jedem Block etwas anderes Breites.
     · Schulden hat 9 Spalten. In 884 px Kartenbreite blieben je Auswahlfeld
       28–48 px übrig. Gemessen am 26.08.2026 bei 1440 px: 9 Auswahlfelder, deren
       GEWÄHLTER Eintrag nicht ins Feld passte, und 26, deren längster nicht passt.
       „Mobilität (Auto, Bahn, B“ statt „… Bus)“ war die Folge.

   Eine Tabelle kann „gleiche Feldbreite über alle Blöcke“ prinzipiell nicht
   leisten: Jeder Block hat eine andere Spaltenzahl, und jede Tabelle rechnet für
   sich. Deshalb steht hier ein Raster statt einer Tabelle.

   `repeat(auto-fit, minmax(min(280px, 100%), 1fr))` heißt:
     · jedes Feld ist mindestens 280 px breit — innen bleiben davon 240 px, und
       der längste Auswahleintrag („Private Krankenvollversicherung“) braucht
       gemessene 225 px. Er passt also, nicht nur der gerade gewählte;
     · alle Felder einer Breite sind exakt gleich breit (`1fr`), über alle Zeilen
       und alle Blöcke hinweg;
     · die Spaltenzahl ergibt sich aus dem Platz: 3 auf dem breiten Bildschirm,
       2 auf dem Tablet, 1 auf dem Handy. Das Handy-Layout von vorher bleibt damit
       unverändert — es ist derselbe Fall mit einer Spalte;
     · `min(280px, 100%)` verhindert den Überlauf auf sehr schmalen Geräten: Ist
       weniger als 280 px da, gilt die volle Breite statt der Mindestbreite.
   ========================================================================= */
table.erfassung,
table.erfassung tbody,
table.erfassung tr,
table.erfassung td {
  display: block;
  width: auto;
}
table.erfassung {
  font-size: 1rem;
  white-space: normal;
  border-collapse: separate;
  margin: 0 0 2px;
}
/* Die Spaltenköpfe wandern in die Zellen (`data-spalte`), die Kopfzeile entfällt.
   `display: none` statt Absolutposition: Der Kopf trägt keine Information mehr, die
   ein Bildschirmleser zusätzlich braucht — jede Zelle nennt ihre Spalte selbst, und
   jedes Feld hat ohnehin ein `aria-label`. */
table.erfassung thead {
  display: none;
}
table.erfassung tbody {
  counter-reset: erfassungszeile;
}
table.erfassung tbody tr {
  counter-increment: erfassungszeile;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0 16px;
  align-items: start;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px 4px;
  margin: 0 0 14px;
  background: var(--weiss);
}
table.erfassung tbody tr::before {
  content: "Eintrag " counter(erfassungszeile);
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 10px;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.95rem;
}
table.erfassung tbody tr.neu::before {
  content: "Neuer Eintrag";
  color: var(--gruen);
}
table.erfassung td {
  border-bottom: 0;
  padding: 0 0 12px;
}
/* ⚠️ `min-height` statt bloßem Text: Ohne sie steht die Zelle ohne Beschriftung
   (der Entfernen-Knopf) um eine Zeilenhöhe höher als ihre Nachbarn — genau die
   „nicht einheitlich eingelayouteten Felder“ aus Christians Meldung. Die leere
   Beschriftung hält den Platz frei, statt ihn wegfallen zu lassen. */
table.erfassung td::before {
  content: attr(data-spalte);
  display: block;
  margin-bottom: 2px;
  min-height: 1.5em;
  color: var(--leise);
  font-weight: 700;
  font-size: 0.9rem;
}
table.erfassung td:not([data-spalte])::before {
  content: none;
}
table.erfassung td[data-spalte=""]::before {
  content: "";
}
table.erfassung td.entfernen {
  white-space: normal;
}
table.erfassung td.entfernen button {
  width: 100%;
}

/* Nur für Bildschirmleser sichtbar.
   ⚠️ `position: absolute` OHNE Koordinaten setzt das Element an seine statische
   Position — und die lag hier in einer breiten Tabellenzelle bei x = 452 px. Das
   Element selbst ist 1 px breit, schob das Dokument bei 390 px Viewport aber trotzdem
   auf 452 px auf. Der Layoutlauf zeigte den Überlauf, ohne dass eine sichtbare
   Tabelle zu breit gewesen wäre; erst die Messung Element für Element fand den
   eigentlichen Verursacher.
   Deshalb: `left/top: 0` verankert es an der Zelle, und die Zelle wird zum
   Bezugspunkt (`position: relative` unten). */
.nurleser {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
th,
td {
  position: relative;
}

/* ⚠️ `max-width`, seit die Hülle 1120 px breit ist: Ohne sie stünde die Bezeichnung
   ganz links und der Betrag über 1000 px weiter rechts — zwei Angaben, die zusammen
   gehören, mit einem halben Bildschirm dazwischen. Das Auge verliert die Zeile. */
/* ⚠️ Ein Link in einer Übersichtszeile ist ein Tap-Ziel wie jeder andere. Gemessen
   am 26.08.2026 auf der Maklerliste: 96 Fallnummer-Links à 20 px — in ALLEN vier
   gemessenen Breiten, auf dem Handy wie auf 1920 px. Der Befund lag ausserhalb der
   Kundenstrecke und war deshalb nie gemessen worden.
   Die negativen Ränder nutzen das Zellpolster mit, statt jede Zeile um 24 px
   aufzublähen: Bei 96 Vorgängen wären das über 2000 px zusätzliche Liste. */
table.uebersicht td a {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -8px;
  padding: 8px;
}

.summen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  max-width: 34rem;
  margin: 0 0 16px;
}
.summen dt {
  color: var(--leise);
}
.summen dd {
  margin: 0;
  text-align: right;
}

/* --- Aufklappbarer Infotext ---------------------------------------------- */
/* `<details>` statt eines Tooltips: Es funktioniert ohne JavaScript, auf dem Handy und
   mit der Tastatur — ein Tooltip an einem Fragezeichen tut das alles nicht. */
.infotext {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-size: 0.94rem;
}
.infotext summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.infotext p {
  margin: 8px 0 0;
}

/* --- Vorschläge zum Nachlegen -------------------------------------------- */
.vorschlaege {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--grund);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
}
.vorschlaege p {
  margin: 0 0 8px;
}
.chipreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chipreihe button {
  background: var(--weiss);
}

/* --- Rückmeldung nach dem Speichern -------------------------------------- */
/* Ein Zwischenstand, der still gespeichert wird, fühlt sich wie ein verlorener an.
   Deshalb bestätigt das Portal jedes Speichern sichtbar und nennt die Uhrzeit. */
.gespeichert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--erfolg-grund);
  border: 1px solid var(--gruen);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 14px;
  color: #1d4633;
  font-weight: 700;
}
.gespeichert .haken {
  font-size: 1.1rem;
}

.fuss {
  border-top: 1px solid var(--linie);
  padding: 18px 0 28px;
  color: var(--leise);
  font-size: 0.87rem;
}

/* =========================================================================
   Schmale Bildschirme: die Erfassungstabelle wird zur Karte je Eintrag.

   ⚠️ Was hier VORHER stand, war `table { display: block; overflow-x: auto;
   white-space: nowrap }`. Das erfüllte die Zusage „kein waagerechter Seitenüberlauf“
   und war trotzdem unbrauchbar: Der Kunde musste die Tabelle seitlich schieben, und
   in den Auswahlfeldern stand „mor“ statt „monatlich“. Gemessen am 26.08.2026 bei
   390 px: 20 von 20 Auswahlfeldern zu eng, 108 Tap-Ziele unter 44 px, 10 Elemente,
   die nur mit Seitwärtsscrollen erreichbar waren — bei null Seitenüberlauf.
   Lehre: „Passt auf den Bildschirm“ ist nicht dasselbe wie „ist lesbar und bedienbar“.
   Beides muss getrennt gemessen werden.
   ========================================================================= */
@media (max-width: 760px) {
  .karte {
    padding: 16px;
    min-width: 0;
  }

  /* Tabellen, die weder Erfassung noch Übersicht sind (Maklerlisten), dürfen weiter
     scrollen — dort steht kurzer Text, kein Eingabefeld und keine Kontrollansicht. */
  table:not(.erfassung):not(.uebersicht) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Die Übersicht der Prüfseite wird zur Karte je Eintrag. Gerade sie darf nicht
     seitwärts scrollen: Sie ist die Seite, auf der der Kunde kontrolliert.
     Die ERFASSUNG braucht hier nichts mehr — sie ist auf jeder Breite eine Karte
     (siehe Basisabschnitt); auf dem Handy ergibt ihr Raster schlicht eine Spalte. */
  table.uebersicht,
  table.uebersicht tbody,
  table.uebersicht tr,
  table.uebersicht td {
    display: block;
    width: auto;
  }
  table.uebersicht {
    font-size: 1rem;
    white-space: normal;
    border-collapse: separate;
  }
  table.uebersicht thead {
    display: none;
  }
  table.uebersicht tbody tr {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 10px 14px 4px;
    margin: 0 0 12px;
  }
  table.uebersicht td {
    border-bottom: 0;
    padding: 0 0 8px;
  }
  table.uebersicht td a {
    margin: 0;
    padding: 0;
  }
  table.uebersicht td::before {
    content: attr(data-spalte);
    display: block;
    color: var(--leise);
    font-weight: 700;
    font-size: 0.85rem;
  }
  table.uebersicht td:not([data-spalte])::before {
    content: none;
  }
  table.uebersicht tr.leerhinweis {
    border-style: dashed;
    color: var(--leise);
  }
  /* Auf 390 px zählt jeder Pixel: Die Zeilenkarte rückt näher an den Rand. */
  table.erfassung tbody tr {
    padding: 14px 14px 4px;
  }

  .summen,
  .knopfreihe,
  form.zeile {
    min-width: 0;
  }
  .linkfeld code {
    white-space: normal;
  }
  .summen {
    grid-template-columns: 1fr;
  }
  .summen dd {
    text-align: left;
    margin-bottom: 8px;
  }

  /* Die Aktionsleiste bleibt am unteren Rand stehen. Bei fünf Einträgen ist der
     Speichern-Knopf sonst drei Bildschirmhöhen entfernt — genau die Situation, in der
     ein Zwischenstand verloren geht. */
  /* ⚠️ KEINE negativen Ränder, um die Leiste bis an den Kartenrand zu ziehen: Gemessen
     am 26.08.2026 machte `margin: 16px -16px 0` das Formular 16 px breiter als seinen
     Inhaltsbereich — ein Überhang, den man nicht sieht, der aber genau die Art von
     stillem Layoutfehler ist, die dieses Portal schon einmal hatte. */
  .knopfreihe {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--weiss);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 14px rgba(28, 36, 34, 0.06);
  }
  /* Zwei Knöpfe nebeneinander statt drei übereinander: Die klebende Leiste bleibt
     flach und frisst nicht ein Viertel des Bildschirms. */
  .knopfreihe .knopf,
  .knopfreihe button {
    flex: 1 1 44%;
    width: auto;
    text-align: center;
  }
  .knopfreihe .summenzeile {
    flex: 1 1 100%;
    margin: 0;
  }
  .zeilenaktion {
    margin-top: 12px;
  }
  .zeilenaktion .knopf,
  .zeilenaktion button {
    width: 100%;
    text-align: center;
  }
  table.erfassung td.entfernen.leer {
    display: none;
  }
  /* Auch der kleine Entfernen-Knopf ist auf dem Handy ein Tap-Ziel wie jedes andere. */
  .knopf.klein,
  button.klein {
    min-height: 48px;
  }
  .knopfreihe .summenzeile {
    order: -1;
    text-align: center;
  }

  /* Kopf und Schrittanzeige kosten auf einem 844 px hohen Bildschirm sonst fast die
     Hälfte, bevor das erste Eingabefeld beginnt. Die Tap-Ziele bleiben bei 44 px. */
  .kopf {
    padding: 10px 0;
  }
  .kopf .huelle {
    gap: 2px 12px;
  }
  .marke {
    font-size: 1rem;
  }
  .kopf-hinweis {
    font-size: 0.85rem;
  }
  main {
    padding-top: 14px;
  }
  h1 {
    font-size: 1.2rem;
  }
  .schrittzaehler {
    margin-bottom: 8px;
  }
  .schritte ol {
    gap: 6px;
    margin-bottom: 12px;
  }
  .schritte a {
    padding: 9px 11px;
    min-height: 44px;
    font-size: 0.88rem;
  }
}