/* Blutdruck: Oberfläche für 375 pt Breite (iPhone SE 2020, iPhone 12 mini), große Ziffern
   und Knöpfe, hell/dunkel über prefers-color-scheme (Plan Abschnitt 5.1). */

/* Das hidden-Attribut muss gewinnen: Sonst überschreibt z. B. .screen { display: flex }
   die Ausblendung, und alle Bildschirme stehen gleichzeitig untereinander. */
[hidden] { display: none !important; }

:root {
  color-scheme: light dark;
  --hintergrund: #f8f9fb;
  --flaeche: #ffffff;
  --text: #1a1a1a;
  --text-schwach: #6b7280;
  --rand: #d8dce3;
  --akzent: #2563eb;
  --akzent-text: #ffffff;
  --gefahr: #b91c1c;
  --gefahr-flaeche: #fef2f2;
  --unsicher: #b45309;
  --unsicher-flaeche: #fffbeb;
  /* Farbcodierung der Blutdruckwerte; Gelb dunkel genug für hellen Grund */
  --wert-rot: #dc2626;
  --wert-gelb: #ca8a04;
  --wert-gruen: #16a34a;
  --wert-blau: #2563eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #14161a;
    --flaeche: #1e2127;
    --text: #f2f3f5;
    --text-schwach: #9aa0ac;
    --rand: #343841;
    --akzent: #3b82f6;
    --akzent-text: #0b1220;
    --gefahr: #f87171;
    --gefahr-flaeche: #2a1414;
    --unsicher: #fbbf24;
    --unsicher-flaeche: #2a2110;
    --wert-rot: #f87171;
    --wert-gelb: #facc15;
    --wert-gruen: #4ade80;
    --wert-blau: #60a5fa;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font: 17px/1.45 -apple-system, system-ui, "Helvetica Neue", sans-serif;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  min-height: 100vh;
}

.screen { display: flex; flex-direction: column; gap: 14px; }

h1 { font-size: 24px; margin: 4px 0 4px; }
h2 { font-size: 16px; color: var(--text-schwach); margin: 12px 0 4px; }

label { font-size: 14px; color: var(--text-schwach); font-weight: 600; }

input[type=text], input[type=password], textarea {
  font: inherit;
  font-size: 20px;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  width: 100%;
}

textarea { font-size: 16px; resize: vertical; }

input[type=file] { display: none; }

.knopf {
  display: block;
  text-align: center;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: var(--akzent);
  color: var(--akzent-text);
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}

.knopf:disabled { opacity: .4; }

.knopf-sekundaer {
  background: transparent;
  color: var(--text-schwach);
  border: 1.5px solid var(--rand);
}

.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.wert-feld {
  border: 2px solid var(--rand);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  background: var(--flaeche);
}

.wert-feld.unsicher { border-color: var(--unsicher); background: var(--unsicher-flaeche); }

.wert-feld label { display: block; margin-bottom: 4px; }

.wert-feld input {
  border: none;
  background: transparent;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
}

#foto-vorschau {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--rand);
}

.hinweis { color: var(--text-schwach); font-size: 14px; margin: 0; }

.fehler {
  color: var(--gefahr);
  background: var(--gefahr-flaeche);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  margin: 0;
}

table#zusammenfassung-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

#zusammenfassung-tabelle th, #zusammenfassung-tabelle td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--rand);
}

#zusammenfassung-tabelle th { color: var(--text-schwach); font-weight: 600; font-size: 13px; }

.mittelwert { font-size: 20px; text-align: center; margin: 4px 0; }
.mittelwert b { font-size: 32px; font-variant-numeric: tabular-nums; }

#form-zusammenfassung, #form-anmeldung { display: flex; flex-direction: column; gap: 10px; }

.zeile-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zeile-zwei > div { display: flex; flex-direction: column; gap: 4px; }

/* Start: »Neue Messserie« breit, »Abmelden« klein daneben */
.zeile-start { display: flex; gap: 10px; align-items: center; }
.zeile-start .knopf { flex: 1; }

.knopf-klein {
  background: transparent;
  color: var(--text-schwach);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
}

table#verlauf-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

#verlauf-tabelle th, #verlauf-tabelle td {
  padding: 9px 6px;
  text-align: left;
  border-bottom: 1px solid var(--rand);
}

#verlauf-tabelle th { color: var(--text-schwach); font-weight: 600; font-size: 13px; }
#verlauf-tabelle th:nth-child(n+3), #verlauf-tabelle td.dosis, #verlauf-tabelle td.wert { text-align: right; }

.verlauf-zeile { cursor: pointer; }
.verlauf-zeile.offen td { border-bottom: none; }

#verlauf-tabelle td.wert { font-weight: 700; font-size: 18px; }
.wert-rot { color: var(--wert-rot); }
.wert-gelb { color: var(--wert-gelb); }
.wert-gruen { color: var(--wert-gruen); }
.wert-blau { color: var(--wert-blau); }

#verlauf-tabelle td.dosis { text-align: right; white-space: nowrap; color: var(--text); }

.verlauf-details td { font-size: 15px; padding-top: 0; }
.verlauf-details p { margin: 2px 0; }
.verlauf-details b { color: var(--text-schwach); font-weight: 600; }

#serie-fortsetzen {
  border: 1.5px dashed var(--rand);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}