/* easyblutdruck — Oberfläche.
   Zuerst für das Telefon gebaut, dann für größere Fenster erweitert. Das ist
   nicht dasselbe wie „läuft auch auf dem Telefon": Wer morgens um sieben mit
   einer Manschette am Arm einen Wert einträgt, hat eine Hand frei und hält das
   Gerät womöglich mit derselben. Deshalb liegt die Navigation unten in
   Daumenreichweite, sind alle Bedienflächen mindestens 44 Punkt hoch, und die
   Zifferneingabe ist so groß, dass man sie ohne Brille trifft. */

:root{
  /* Nur hell. Die Anwendung wird morgens und abends benutzt, oft mit einer
     Manschette am Arm und ohne Brille — ein einziges, durchgehend helles Bild
     ist dort verlässlicher als eines, das je nach Tageszeit die Farben
     tauscht. `color-scheme: light` sagt das auch dem Browser, damit er
     Formularfelder, Bildlaufleisten und die Datumsauswahl hell zeichnet
     statt dunkel. */
  color-scheme: light;

  --grund:#F5F6F8;
  --flaeche:#FFFFFF;
  --flaeche-2:#EEF0F4;
  --flaeche-3:#E4E7EC;

  --tinte:#14161C;
  --tinte-2:#4C5160;
  --tinte-3:#7A8090;

  --linie:#E1E4EA;
  --linie-stark:#C6CAD4;

  --akzent:#1F6FD0;
  --akzent-2:#1A5CAF;
  --akzent-sanft:#E8F0FB;
  --akzent-rand:#BFD5F2;

  --gut:#1C7A4C;
  --gut-sanft:#E3F3E9;

  /* Eigene Farben für die beiden Kurven. Oberer und unterer Wert unterscheiden
     sich sonst nur in der Helligkeit desselben Blaus — auf einem Telefon im
     Sonnenlicht sind sie dann nicht auseinanderzuhalten. Verschiedene
     Farbtöne tragen weiter, und die Verbindungsstriche zwischen den Punkten
     zeigen die Zusammengehörigkeit ohnehin. */
  --kurve-sys:#1F6FD0;
  --kurve-dia:#7B4FC0;
  --info:#2C5AA0;
  --info-sanft:#E7EDF8;
  --warn:#8F5E0B;
  --warn-sanft:#FBF0DA;
  --krit:#B02A22;
  --krit-sanft:#FBE6E4;

  --schatten:0 1px 2px rgba(20,22,28,.06), 0 1px 3px rgba(20,22,28,.04);
  --schatten-2:0 6px 20px -8px rgba(20,22,28,.22);

  --rund:14px;
  --rund-klein:10px;

  --schrift:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --zahlen:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --kopf-hoehe:52px;
  --leiste-hoehe:60px;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--grund);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:16px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  padding-bottom:calc(var(--leiste-hoehe) + env(safe-area-inset-bottom));
}

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

.kopf{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  height:calc(var(--kopf-hoehe) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0;
  background:color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--linie);
}
.kopf h1{ font-size:1.0625rem; font-weight:650; margin:0; letter-spacing:-.01em; }

.kopfknopf{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--linie-stark); background:var(--flaeche);
  color:var(--tinte-2); font-size:.9375rem; font-weight:600; cursor:pointer;
}

main{ padding:14px 14px 22px; max-width:760px; margin:0 auto; }
main:focus{ outline:none; }

/* --- Navigationsleiste --------------------------------------------------- */

.leiste{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}
.leiste button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:var(--leiste-hoehe);
  border:0; background:none; cursor:pointer;
  font:inherit; font-size:.6875rem; font-weight:550;
  color:var(--tinte-3);
  -webkit-tap-highlight-color:transparent;
}
.leiste button svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.leiste button[aria-current]{ color:var(--akzent); }

/* --- Bausteine ----------------------------------------------------------- */

.karte{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--rund);
  box-shadow:var(--schatten);
  padding:14px;
  margin-bottom:12px;
}
.karte h2{ font-size:.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--tinte-3); margin:0 0 10px; }
.karte h3{ font-size:1rem; font-weight:620; margin:0 0 6px; }

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 18px;
  border-radius:var(--rund-klein); border:1px solid transparent;
  background:var(--akzent); color:#fff;
  font:inherit; font-weight:600; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.knopf:active{ transform:translateY(1px); }
.knopf.breit{ width:100%; }
.knopf.leise{ background:var(--flaeche); color:var(--tinte); border-color:var(--linie-stark); }
.knopf.gefahr{ background:var(--krit-sanft); color:var(--krit); border-color:color-mix(in srgb, var(--krit) 30%, transparent); }
.knopf.klein{ min-height:38px; padding:0 12px; font-size:.875rem; }
.knopf:disabled{ opacity:.5; cursor:default; }

.knopfreihe{ display:flex; gap:10px; flex-wrap:wrap; }
.knopfreihe > *{ flex:1 1 auto; }

.feld{ display:block; margin-bottom:12px; }
.feld > span{ display:block; font-size:.8125rem; font-weight:560; color:var(--tinte-2); margin-bottom:5px; }
.feld input, .feld select, .feld textarea{
  width:100%; min-height:46px; padding:10px 12px;
  border:1px solid var(--linie-stark); border-radius:var(--rund-klein);
  background:var(--flaeche); color:var(--tinte);
  font:inherit;
}
.feld textarea{ min-height:70px; resize:vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible,
.knopf:focus-visible, .leiste button:focus-visible{
  outline:2px solid var(--akzent); outline-offset:2px;
}

.hinweis{ font-size:.8125rem; color:var(--tinte-3); margin:6px 0 0; }
.trenner{ height:1px; background:var(--linie); margin:14px -14px; }

.marke{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px;
  font-size:.75rem; font-weight:620;
}
.marke.gut{ background:var(--gut-sanft); color:var(--gut); }
.marke.info{ background:var(--info-sanft); color:var(--info); }
.marke.warn{ background:var(--warn-sanft); color:var(--warn); }
.marke.krit{ background:var(--krit-sanft); color:var(--krit); }

.warnkasten{
  border-radius:var(--rund-klein); padding:12px 14px; margin-bottom:12px;
  background:var(--krit-sanft); color:var(--krit);
  border:1px solid color-mix(in srgb, var(--krit) 28%, transparent);
  font-size:.875rem; font-weight:520;
}
.warnkasten b{ display:block; font-weight:700; margin-bottom:2px; }

/* --- Heute --------------------------------------------------------------- */

.datumzeile{ display:flex; align-items:baseline; justify-content:space-between; margin:2px 0 14px; }
.datumzeile b{ font-size:1.375rem; font-weight:680; letter-spacing:-.02em; }
.datumzeile span{ color:var(--tinte-3); font-size:.875rem; }

.schlitze{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }

.schlitz{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund);
  padding:12px; box-shadow:var(--schatten);
  display:flex; flex-direction:column; gap:2px; min-height:104px;
}
.schlitz .titel{ font-size:.75rem; font-weight:620; text-transform:uppercase; letter-spacing:.05em; color:var(--tinte-3); }
.schlitz .wert{ font-family:var(--zahlen); font-size:1.75rem; font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.schlitz .wert small{ font-size:.8125rem; font-weight:500; color:var(--tinte-3); font-family:var(--schrift); }
.schlitz .offen{ color:var(--tinte-3); font-size:.9375rem; margin-top:6px; }
.schlitz.erledigt{ border-color:color-mix(in srgb, var(--gut) 35%, var(--linie)); }

.grossknopf{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:60px; padding:12px 16px; margin-bottom:10px;
  border-radius:var(--rund); border:1px solid transparent;
  background:var(--akzent); color:#fff; font:inherit; text-align:left; cursor:pointer;
  box-shadow:var(--schatten-2);
}
.grossknopf.leise{ background:var(--flaeche); color:var(--tinte); border-color:var(--linie-stark); box-shadow:var(--schatten); }
.grossknopf svg{ width:26px; height:26px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.grossknopf b{ display:block; font-weight:640; }
.grossknopf small{ display:block; font-size:.8125rem; opacity:.8; font-weight:450; }

/* --- Erfassen ------------------------------------------------------------ */

.werte{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.werte .feld{ margin-bottom:0; }
.werte input{
  font-family:var(--zahlen); font-size:1.625rem; font-weight:700;
  text-align:center; min-height:64px; padding:6px;
  letter-spacing:-.02em;
}
.werte .einheit{ display:block; text-align:center; font-size:.6875rem; color:var(--tinte-3); margin-top:4px; }

.schalter{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--linie-stark); border-radius:var(--rund-klein); overflow:hidden; }
.schalter button{
  min-height:46px; border:0; background:var(--flaeche); color:var(--tinte-2);
  font:inherit; font-weight:580; cursor:pointer;
}
.schalter button[aria-pressed="true"]{ background:var(--akzent); color:#fff; }

.vorschau{ position:relative; margin-bottom:12px; border-radius:var(--rund); overflow:hidden; background:var(--flaeche-3); }
.vorschau canvas{ display:block; width:100%; height:auto; }
.vorschau .band{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 12px; font-size:.8125rem; font-weight:560;
  background:color-mix(in srgb, #000 62%, transparent); color:#fff;
}

.lade{ display:flex; align-items:center; gap:10px; padding:16px; color:var(--tinte-2); font-size:.9375rem; }
.kringel{
  width:20px; height:20px; border-radius:50%; flex:none;
  border:2.5px solid var(--linie-stark); border-top-color:var(--akzent);
  animation:dreh .8s linear infinite;
}
@keyframes dreh{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .kringel{ animation-duration:2.4s; } }

/* --- Verlauf ------------------------------------------------------------- */

/* Wertachse fest, Verlauf scrollbar: Der Maßstab muss stehen bleiben, sonst
   ist die Linie beim Blättern nicht mehr abzulesen. */
.diagramm{ display:flex; align-items:flex-start; margin-right:-14px; }
.diagrammachse{ flex:none; }
.diagrammachse svg{ display:block; }
.diagrammrahmen{ flex:1 1 auto; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.diagrammrahmen svg{ display:block; }
.d-ziel{ fill:var(--gut); opacity:.09; }
.d-raster{ stroke:var(--linie); stroke-width:1; }
.d-schwelle{ stroke:var(--warn); stroke-width:1; stroke-dasharray:3 3; opacity:.6; }
.d-achse{ fill:var(--tinte-3); font-size:9px; font-family:var(--schrift); }
.d-leer{ fill:var(--tinte-3); font-size:13px; font-family:var(--schrift); }
.d-sys{ stroke:var(--kurve-sys); stroke-width:2.2; fill:none; }
.d-dia{ stroke:var(--kurve-dia); stroke-width:2.2; fill:none; }
.d-puls{ stroke:var(--tinte-3); stroke-width:1; fill:none; stroke-dasharray:2 3; }
.d-spanne{ stroke:var(--tinte-3); stroke-width:1; opacity:.4; }
.d-punkt{ fill:var(--akzent); }
.d-punkt.d-ton-gut{ fill:var(--gut); }
.d-punkt.d-ton-info{ fill:var(--info); }
.d-punkt.d-ton-warn{ fill:var(--warn); }
.d-punkt.d-ton-krit{ fill:var(--krit); }
.d-punkt-puls{ fill:var(--tinte-3); }
.d-alarm{ fill:none; stroke:var(--krit); stroke-width:1.5; }

.legende{ display:flex; gap:14px; flex-wrap:wrap; font-size:.75rem; color:var(--tinte-3); margin-top:8px; }
.legende i{ display:inline-block; width:12px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; }

.tagliste{ list-style:none; margin:0; padding:0; }
.tag{ border-bottom:1px solid var(--linie); padding:10px 0; }
.tag:last-child{ border-bottom:0; }
.tag > b{ display:block; font-size:.8125rem; font-weight:620; color:var(--tinte-2); margin-bottom:6px; }
.eintrag{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  width:100%; min-height:52px; padding:6px 4px;
  border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;
  border-radius:var(--rund-klein);
}
.eintrag:active{ background:var(--flaeche-2); }
.eintrag .zeit{ font-size:.75rem; color:var(--tinte-3); width:64px; }
.eintrag .zahlen{ font-family:var(--zahlen); font-size:1.125rem; font-weight:700; letter-spacing:-.02em; }
.eintrag .zahlen{ white-space:nowrap; }
.eintrag .zahlen small{ font-family:var(--schrift); font-size:.75rem; font-weight:500; color:var(--tinte-3); margin-left:6px; white-space:nowrap; }

.leerzustand{ text-align:center; padding:34px 16px; color:var(--tinte-3); }
.leerzustand b{ display:block; color:var(--tinte-2); font-size:1rem; margin-bottom:4px; }

/* --- Bericht ------------------------------------------------------------- */

.kennzahlen{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.kennzahl b{ display:block; font-family:var(--zahlen); font-size:1.5rem; font-weight:700; letter-spacing:-.03em; }
.kennzahl span{ display:block; font-size:.75rem; color:var(--tinte-3); }

.zeitraumwahl{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.zeitraumwahl button{
  min-height:40px; padding:0 14px; border-radius:999px;
  border:1px solid var(--linie-stark); background:var(--flaeche); color:var(--tinte-2);
  font:inherit; font-size:.875rem; font-weight:560; cursor:pointer;
}
.zeitraumwahl button[aria-pressed="true"]{ background:var(--akzent); color:#fff; border-color:var(--akzent); }

/* --- Meldung ------------------------------------------------------------- */

.meldung{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 12px);
  z-index:40; max-width:calc(100% - 28px);
  padding:11px 16px; border-radius:999px;
  background:var(--tinte); color:var(--grund);
  font-size:.875rem; font-weight:560;
  box-shadow:var(--schatten-2);
}
.meldung.fehler{ background:var(--krit); color:#fff; }

/* --- Größere Fenster ----------------------------------------------------- */

@media (min-width:720px){
  /* Die Leiste steht im Dokument nach dem Inhalt — auf dem Telefon gehört sie
     dorthin, weil sie unten klebt. Im breiten Fenster soll sie oben stehen,
     und dafür muss die Reihenfolge umgestellt werden; sonst klebt sie unter
     dem Inhalt statt unter dem Kopf. */
  body{ padding-bottom:0; padding-top:0; display:flex; flex-direction:column; min-height:100vh; }
  .kopf{ order:0; }
  .leiste{ order:1; }
  main{ order:2; width:100%; }
  .meldung{ order:3; }
  .leiste{
    position:sticky; top:calc(var(--kopf-hoehe) + env(safe-area-inset-top));
    grid-template-columns:repeat(4,auto); justify-content:center; gap:6px;
    border-top:0; border-bottom:1px solid var(--linie); padding:6px 0;
  }
  .leiste button{ flex-direction:row; gap:8px; height:42px; padding:0 16px; border-radius:999px; font-size:.875rem; }
  .leiste button[aria-current]{ background:var(--akzent-sanft); }
  .meldung{ bottom:24px; }
  .kennzahlen{ grid-template-columns:repeat(4,1fr); }
  main{ padding:20px 20px 40px; }
}

@media print{
  .kopf,.leiste,.meldung,.knopfreihe,.grossknopf{ display:none !important; }
  body{ background:#fff; padding:0; }
}