/* 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);
}

.huelle {
  max-width: 960px;
  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;
}
.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;
}
.schritte a {
  display: inline-block;
  padding: 8px 14px;
  min-height: 40px;
  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;
}
label.ankreuz {
  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;
  width: auto;
  min-height: auto;
  margin-right: 6px;
}
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;
}

/* --- 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;
}
.knopf.klein,
button.klein {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 700;
}
.knopf.still,
button.still {
  border-color: var(--linie);
  background: var(--grund);
  color: var(--leise);
}
/* Kopfzeile jeder Erfassungszeile: „Eintrag 1“, „Neuer Eintrag“.
   Auf breiten Bildschirmen unsichtbar (die Tabellenköpfe erklären dort die Spalten),
   auf schmalen Bildschirmen die Überschrift der Zeilenkarte. */
.erfassung tbody {
  counter-reset: erfassungszeile;
}
.erfassung tbody tr {
  counter-increment: erfassungszeile;
}
.erfassung tbody tr::before {
  content: none;
}

/* 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;
}

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

/* --- 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;
  }

  /* Erfassung UND Übersicht werden zur Karte je Eintrag. Gerade die Prüfseite darf
     nicht seitwärts scrollen: Sie ist die Seite, auf der der Kunde kontrolliert. */
  table.erfassung,
  table.erfassung tbody,
  table.erfassung tr,
  table.erfassung td,
  table.uebersicht,
  table.uebersicht tbody,
  table.uebersicht tr,
  table.uebersicht td {
    display: block;
    width: auto;
  }
  table.erfassung,
  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::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);
  }
  /* Die Spaltenköpfe wandern in die Zellen (`data-spalte`), die Kopfzeile entfällt.
     `display: none` statt Absolutposition: Der Kopf trägt hier 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 tr {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 14px 14px 6px;
    margin: 0 0 14px;
    background: var(--weiss);
  }
  table.erfassung tbody tr::before {
    content: "Eintrag " counter(erfassungszeile);
    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;
  }
  table.erfassung td::before {
    content: attr(data-spalte);
    display: block;
    margin-bottom: 2px;
    color: var(--leise);
    font-weight: 700;
    font-size: 0.9rem;
  }
  table.erfassung td:not([data-spalte])::before,
  table.erfassung td[data-spalte=""]::before {
    content: none;
  }
  table.erfassung td.entfernen {
    white-space: normal;
    padding-top: 2px;
  }
  table.erfassung td.entfernen button {
    width: 100%;
  }

  .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;
  }
}