/* #P-ME01-01: Die Farben und Masse stammen aus Bantus Vorlage medi-tracker.html. Sie stehen
   hier als Tokens an einer Stelle, damit die spaeteren Schritte sie nur noch benutzen und
   niemand eine Farbe zweimal erfindet. */
:root {
  --grund: #F3F5F4;
  --karte: #FFFFFF;
  --karte-rand: #E1E6E4;
  --radius: 16px;
  --text: #17211E;
  --text-leise: #4A5552;
  --akzent: #0F6E63;
  --akzent-hell: #E6F2F0;
  --akzent-text: #0B4A43;
  --feld: #F7F9F8;
  --feld-rand: #CBD3D0;
  --feld-rand-dosis: #B9C3BF;
  --balken: #5FB3A8;
  --warn: #C62828;
  /* #P-ME01-18: Diese vier standen in Bantus Vorlage und fehlten hier noch. */
  --zeit: #3F5A55;        /* die Uhrzeit unter einer Dosis */
  --chip: #DCEEEB;        /* der gewaehlte Chip */
  --reiter: #EDF1EF;      /* der Grund unter den Reitern */
  --warn-hell: #FBE9E7;   /* heller roter Grund, wenn Rot zu laut waere */
  /* #P-ME01-07: Bantu wollte orange ab 66 Prozent, ohne einen Ton zu nennen. Dieses Orange
     ist dunkel genug, um auf dem hellen Grund gut lesbar zu sein, und deutlich genug vom
     Rot der Ueberschreitung unterscheidbar. */
  --orange: #C2690B;
  /* #P-ME01-18: genau die Schriftfolge der Vorlage. */
  --schrift: "IBM Plex Sans", system-ui, sans-serif;
  --tippziel: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* Zahlen stehen untereinander gleich breit - sonst huepfen die Summen beim Tippen. */
.zahl, .summe, .dosis { font-variant-numeric: tabular-nums; }

/* #P-ME01-18.1 (Wache, 01.11.2026): Die Vorlage ist 480 breit. */
.seite {
  max-width: 480px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 16px env(safe-area-inset-bottom) 16px;
}
/* #P-ME01-09: Ohne diese Zeile gewinnt das display oben gegen hidden - die Liste blieb
   beim Oeffnen der Einstellungen stehen. */
.seite[hidden] { display: none; }

/* #P-ME01-18: Abstaende wie in der Vorlage - oben mehr Luft als unten. */
.kopf {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 24px 0 14px;
}
.kopf-text { flex: 1 1 auto; min-width: 0; }
.kopf .datum { color: var(--text-leise); font-size: 13px; }
.kopf h1 { margin: 2px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.kopf-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; }

button.symbol {
  width: var(--tippziel); height: var(--tippziel);
  border: 0; border-radius: 12px; background: none;
  color: var(--text-leise); font-size: 20px; line-height: 1; cursor: pointer;
}
button.symbol:hover { background: var(--akzent-hell); color: var(--akzent-text); }

.liste { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }

.leer {
  color: var(--text-leise); text-align: center;
  padding: 40px 16px; font-size: 15px;
}

/* #P-ME01-03: Die Karte je Medikament. Links der Name, rechts die Tagessumme und darunter
   klein das Datum - so wie in Bantus Vorlage. */
.karte {
  background: var(--karte); border: 1px solid var(--karte-rand);
  border-radius: var(--radius); padding: 14px 14px 12px;
}
.karte-kopf { display: flex; align-items: flex-start; gap: 12px; }
.karte-name {
  flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.karte-rechts { flex: 0 0 auto; text-align: right; }
.summe { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
/* #P-ME01-07: Die vier Stufen. Nichts genommen - die Zahl soll nicht rufen. */
.summe.null { color: var(--text-leise); font-weight: 600; }
.summe.normal { color: var(--text); }
/* Ab 66 Prozent der Hoechstmenge: es wird knapp. */
.summe.warnung { color: var(--orange); }
/* Darueber: rot und fett, das ist nicht mehr zu uebersehen. */
.summe.drueber { color: var(--warn); font-weight: 700; }
.karte-datum { color: var(--text-leise); font-size: 12px; margin-top: 2px; }

/* #P-ME01-04: Der Ablauf Name. Das Label sieht aus wie Text, ist aber ein Knopf - ein Tipp
   macht wieder ein Feld daraus. Darum muss es den Knopf-Stil ablegen. */
button.karte-name {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer; min-height: 28px;
}
.name-feld {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 17px; font-weight: 600;
  padding: 6px 10px; border: 1px solid var(--feld-rand); border-radius: 10px;
  background: var(--feld); color: var(--text);
}
.name-feld:focus { outline: none; border-color: var(--akzent); }

.einheit-wahl { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
/* #P-ME01-18.1: In der Vorlage sitzt der Umschalter auf hellgrauem Grund, und das
   gewaehlte Feld ist weiss mit Akzentfarbe. */
.umschalter {
  display: inline-flex; background: var(--reiter); border-radius: 11px; padding: 3px;
}
.umschalter-teil {
  border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--text-leise); padding: 0 18px; height: 38px; border-radius: 8px; cursor: pointer;
}
.umschalter-teil.gewaehlt {
  background: #fff; color: var(--akzent); box-shadow: 0 1px 2px rgba(23, 33, 30, .12);
}
button.ok {
  border: 0; border-radius: 10px; background: var(--akzent); color: #fff;
  font: inherit; font-weight: 600; height: var(--tippziel); padding: 0 18px; cursor: pointer;
}

/* Was schiefging, steht kurz unten am Rand - nicht in einem Fenster, das man wegtippen muss. */
.meldung {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--text); color: #fff; padding: 10px 16px; border-radius: 12px;
  font-size: 14px; max-width: 92vw; z-index: 20;
}
.meldung[hidden] { display: none; }

/* #P-ME01-05: Die Dosen. Kacheln und leere Felder stehen nebeneinander.
   #ME6 (Bantu 02.11.2026: "Das 4 feld in gleicher rwihe"): Sie brechen NICHT mehr um -
   eine Karte ist eine Reihe. Die Kacheln duerfen dafuer schmaler werden als die 74 aus
   Bantus Vorlage; bis 56 geht es herunter, danach laesst sich die Reihe schieben. So
   passen vier Dosen auf ein schmales Handy und acht sind trotzdem erreichbar. */
.dosen { margin-top: 12px; }
.dosis-kacheln {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;                 /* die Leiste wuerde die Karte hoeher machen */
  padding-bottom: 2px;
}
.dosis-kacheln::-webkit-scrollbar { display: none; }

.dosis, .dosis-feld {
  flex: 1 1 74px; width: 74px; max-width: 74px; min-width: 56px;
  height: 58px; border-radius: 12px;
  font: inherit; font-size: 15px; text-align: center;
}
.dosis {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: 1px solid var(--feld-rand); background: var(--feld);
  color: var(--text); cursor: pointer; padding: 0;
}
.dosis-menge { font-weight: 600; }
.dosis-zeit { color: var(--zeit); font-size: 11px; }

/* Leere Felder gestrichelt - man sieht sofort, wo noch nichts steht. */
.dosis-feld {
  border: 1px dashed var(--feld-rand-dosis); background: var(--feld); color: var(--text);
  padding: 0 6px;
}
.dosis-feld:focus { outline: none; border-style: solid; border-color: var(--akzent); }

.dosis-plus {
  margin-top: 10px; border: 0; background: none; color: var(--akzent-text);
  font: inherit; font-weight: 600; font-size: 15px;
  height: var(--tippziel); padding: 0 4px; cursor: pointer;
}

/* #P-ME01-06: Die Fussleiste mit dem grossen Knopf. Sie klebt unten, damit der Weg zu einem
   neuen Medikament immer gleich weit ist - auch bei langer Liste. */
.fussleiste {
  position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(243,245,244,0), var(--grund) 28%);
}
.gross-knopf {
  width: 100%; min-height: var(--tippziel); padding: 14px 16px;
  border: 0; border-radius: 14px; background: var(--akzent); color: #fff;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.gross-knopf:active { opacity: .9; }
.liste { padding-bottom: 4px; }

/* #P-ME01-08: Die Anmeldung liegt ueber allem. Sie deckt die Seite ganz zu - niemand soll
   im Vorbeigehen lesen koennen, welche Medikamente dastehen. */
.anmeldung {
  position: fixed; inset: 0; z-index: 50; background: var(--grund);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.anmeldung[hidden] { display: none; }
.anmeldekasten { width: 100%; max-width: 360px; }
.anmeldekasten h1 { margin: 0 0 6px; font-size: 26px; }
.anmeldetext { margin: 0 0 16px; color: var(--text-leise); font-size: 15px; line-height: 1.4; }
#wortfeld {
  width: 100%; height: var(--tippziel); padding: 0 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--feld-rand); border-radius: 12px;
  background: var(--karte); color: var(--text);
}
#wortfeld:focus { outline: none; border-color: var(--akzent); }
.anmeldegrund { color: var(--warn); font-size: 14px; margin-top: 10px; }
.anmeldegrund[hidden] { display: none; }
.anmeldekasten .gross-knopf { margin-top: 14px; }

/* #P-ME01-08: Der zweite Weg hinein - weniger laut als der grosse Knopf. */
.zweit-knopf {
  width: 100%; min-height: var(--tippziel); margin-top: 10px; padding: 12px 16px;
  border: 1px solid var(--akzent); border-radius: 14px; background: none;
  color: var(--akzent-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.zweit-knopf[hidden] { display: none; }

/* #P-ME01-09: Die Einstellungen liegen ueber der Liste, nicht daneben - am Handy ist kein
   Platz fuer zwei Spalten. */
.unterseite {
  max-width: 480px; margin: 0 auto; min-height: 100dvh;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom)) 16px;
}
.unterseite[hidden] { display: none; }
.abschnitt { margin-top: 10px; }
.abschnitt h2 { font-size: 15px; margin: 0 0 4px; }
/* #ME13: Zugeklappter Abschnitt. Der Titel bleibt sichtbar und ist der Schalter. */
.klappe > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: '\25B8'; color: var(--text-leise); font-size: 13px; }
.klappe[open] > summary::before { content: '\25BE'; }
.klappe > summary h2 { margin: 0; }
.abschnitt-text { color: var(--text-leise); font-size: 13px; margin: 0 0 12px; line-height: 1.4; }

.maxzeile {
  display: flex; align-items: center; gap: 10px;
  background: var(--karte); border: 1px solid var(--karte-rand);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.maxname {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maxfeld {
  flex: 0 0 90px; height: var(--tippziel); padding: 0 10px; text-align: right;
  font: inherit; font-size: 15px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--feld-rand); border-radius: 10px;
  background: var(--feld); color: var(--text);
}
.maxfeld:focus { outline: none; border-color: var(--akzent); }
.maxeinheit { flex: 0 0 auto; color: var(--text-leise); font-size: 14px; width: 22px; }

/* #P-ME01-10: Der Schalter fuer den Alarm. Rund und einfarbig - an oder aus, mehr gibt es
   nicht zu sagen. Ohne Hoechstmenge ist er blass und laesst sich nicht druecken. */
.alarmschalter {
  flex: 0 0 auto; width: 46px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid var(--feld-rand); border-radius: 14px; background: var(--feld);
  position: relative; transition: background .15s, border-color .15s;
}
.alarmschalter::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--text-leise);
  transition: transform .15s, background .15s;
}
.alarmschalter.an { background: var(--akzent-hell); border-color: var(--akzent); }
.alarmschalter.an::after { transform: translateX(18px); background: var(--akzent); }
.alarmschalter:disabled { opacity: .4; cursor: default; }

/* #P-ME01-11: Die Erinnerungen. Uhrzeit gross, denn danach sucht man. */
.erinnerzeile {
  display: flex; align-items: center; gap: 10px;
  background: var(--karte); border: 1px solid var(--karte-rand);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.erinnerzeit { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erinnerwofuer {
  flex: 1 1 auto; min-width: 0; color: var(--text-leise); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.erinnerweg {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; background: none; color: var(--text-leise); font-size: 16px;
}
.erinnerweg:hover { background: var(--feld); color: var(--warn); }

.erinnerneu { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.erinnerneu select, .erinnerneu input[type=time] {
  height: var(--tippziel); padding: 0 10px; font: inherit; font-size: 15px;
  border: 1px solid var(--feld-rand); border-radius: 10px;
  background: var(--feld); color: var(--text);
}
.erinnerneu select { flex: 1 1 auto; min-width: 0; }
.erinnerneu input[type=time] { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* #P-ME01-12: Der rote Knopf und die Rueckfrage. */
/* #ME4: das Kreuz auf der Karte. Es soll da sein, aber nicht laut - gedaempft, und erst
   beim Antippen in der Warnfarbe. 44 Pixel, damit man es mit dem Daumen trifft. */
.kartenweg {
  flex: 0 0 auto; width: 44px; height: 44px; margin: -6px -8px -6px 2px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-leise); font-size: 17px; line-height: 1;
  border-radius: 10px;
}
.kartenweg:active { color: var(--warn); background: var(--warn-hell); }

.gross-knopf.rot { background: var(--warn); }
/* #ME3: heller Knopf fuer den Fingerabdruck in den Einstellungen - er ist ein Angebot,
   kein Hauptweg, darum in der hellen Akzentfarbe statt in voller. */
.gross-knopf.hell { background: var(--akzent-hell); color: var(--akzent-text); }
.gross-knopf[hidden] { display: none; }

/* #ME3: die beiden Passwortfelder nebeneinander, der Knopf daneben; auf schmalen
   Handys bricht die Zeile um, statt die Felder zu quetschen. */
.passwortzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.passwortzeile input {
  flex: 1 1 140px; min-width: 0; padding: 10px 12px; font: inherit;
  background: var(--feld); border: 1px solid var(--feld-rand); border-radius: 10px;
  color: var(--text);
}
.passwortzeile .ok { flex: 0 0 auto; }
#passwortgrund { margin-top: 8px; }
#passwortgrund[hidden] { display: none; }
.rueckfrage {
  position: fixed; inset: 0; z-index: 60; background: rgba(23, 33, 30, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.rueckfrage[hidden] { display: none; }
.rueckfragekasten {
  width: 100%; max-width: 360px; background: var(--karte);
  border: 1px solid var(--karte-rand); border-radius: 16px; padding: 18px;
}
.rueckfragekasten h2 { margin: 0 0 8px; font-size: 18px; }
.rueckfragekasten p { margin: 0 0 16px; color: var(--text-leise); font-size: 14px; line-height: 1.45; }
.rueckfrageknoepfe { display: flex; flex-direction: column; gap: 8px; }
.rueckfrageknoepfe .zweit-knopf, .rueckfrageknoepfe .gross-knopf { margin: 0; }

/* #P-ME01-13: Der Alarm. Er deckt die Seite ab, damit er nicht uebersehen wird. */
.alarm {
  position: fixed; inset: 0; z-index: 70; background: rgba(23, 33, 30, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.alarm[hidden] { display: none; }
.alarmkasten {
  width: 100%; max-width: 360px; background: var(--warn-hell);
  border: 2px solid var(--warn); border-radius: 16px; padding: 20px; text-align: center;
}
.alarmzeichen { font-size: 34px; line-height: 1; color: var(--warn); }
.alarmkasten h2 { margin: 8px 0 6px; font-size: 19px; color: var(--warn); }
.alarmkasten p { margin: 0 0 16px; font-size: 15px; line-height: 1.45; }

/* #P-ME01-15: Die Statistik. */
/* #P-ME01-18.1: Die Reiter stehen in der Vorlage mittig, ohne Grund, mit 28 Abstand und
   Schrift 19. Das Hellgrau gehoert hinter den Umschalter mg und ml. */
.reiter {
  display: flex; justify-content: center; gap: 28px; padding: 4px 0 6px; margin-top: 8px;
  overflow-x: auto;
}
.reiter button {
  border: 0; background: transparent; font: inherit; font-size: 19px; font-weight: 500;
  color: var(--text-leise); padding: 8px 2px; border-bottom: 3px solid transparent;
  border-radius: 0; white-space: nowrap; cursor: pointer; min-height: var(--tippziel);
}
.reiter button.gewaehlt { color: var(--akzent); border-bottom-color: var(--akzent); }

/* #P-ME01-18.1: Chips wie in der Vorlage - weiss mit Rand, gewaehlt in Akzentfarbe. */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.chip {
  height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--feld-rand); background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-leise);
  white-space: nowrap; cursor: pointer;
}
.chip.gewaehlt { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.zeitraum { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.zeitraumtext { flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 600; }
.zeitraum button:disabled { opacity: .3; cursor: default; }

.statgesamt { margin-top: 14px; }
.statgesamtzahl { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.statgesamtwort { color: var(--text-leise); font-size: 13px; }

.balken {
  display: flex; align-items: flex-end; gap: 3px; height: 170px; margin-top: 14px;
  border-bottom: 1px solid var(--karte-rand); padding-bottom: 2px;
}
/* #P-ME01-16.1: Die Saeule ist nur die Flaeche - keine Beschriftung darin, sonst waere der
   Balken kleiner als die Hoehe, mit der die rote Linie rechnet. */
.saeule {
  flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer;
}
.saeuleflaeche { width: 100%; background: var(--balken); border-radius: 4px 4px 0 0; min-height: 2px; }
/* Dieselbe Aufteilung wie die Balken, damit jedes Wort unter seinem Balken steht. */
.balkenwoerter { display: flex; gap: 3px; margin-top: 4px; }
.balkenwort {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-size: 10px; color: var(--text-leise); white-space: nowrap;
}
.balkenwort.drueber { color: var(--warn); font-weight: 700; }
.statwert { margin-top: 8px; font-size: 14px; color: var(--text-leise); min-height: 20px; }

/* #P-ME01-16: Tage ueber der Hoechstmenge und die Grenze als Linie. */
.balkenraum { position: relative; }
.saeuleflaeche.drueber { background: var(--warn); }
/* Im Jahr: der rote Anteil sitzt oben im Balken des Monats. */
.saeuleflaeche { position: relative; }
.saeuleanteil {
  position: absolute; left: 0; right: 0; top: 0;
  background: var(--warn); border-radius: 4px 4px 0 0;
}
.hoechstlinie {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--warn); pointer-events: none;
}
.hoechstlinie[hidden] { display: none; }
.hoechstlinie .linienwert {
  position: absolute; right: 0; top: -17px;
  background: var(--grund); color: var(--warn);
  font-size: 11px; font-weight: 600; padding: 0 4px;
}

/* #P-ME01-17: Die vier Kacheln. Zwei nebeneinander, damit die Zahlen gross bleiben. */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.kachel {
  background: var(--karte); border: 1px solid var(--karte-rand);
  border-radius: 12px; padding: 12px;
}
.kachelzahl {
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kachelzahl.drueber { color: var(--warn); }
.kachelwort { color: var(--text-leise); font-size: 12px; margin-top: 2px; line-height: 1.3; }