/* Kalorien-Tracker — Oberflaeche nach Apple-Art
   ============================================================================

   Eine Seite, mobil zuerst. Drei Gedanken tragen das ganze Blatt:

   1. MATERIAL STATT KASTEN. Schwebende Schichten (Kopfzeile, Blaetter) sind
      durchscheinend und lassen den Inhalt darunter durchscheinen, statt ihn
      mit einer undurchsichtigen Leiste abzuschneiden. Tiefe entsteht durch
      Licht und Schatten, nicht durch 1-px-Rahmen um alles.

   2. ANTWORT VOR ANIMATION. Rueckmeldung kommt beim Druecken, nicht beim
      Loslassen, und sie ist sofort da. Bewegung, die jemand mit dem Finger
      fuehrt, steht in blatt.js und laeuft ueber Federn - CSS-Uebergaenge
      koennen mitten im Flug nicht gegriffen und umgedreht werden.

   3. SCHRIFT IN GROESSEN, NICHT IN EINER GROESSE. Laufweite und Zeilenhoehe
      haengen an der Schriftgroesse: grosse Zahlen enger, kleine Beschriftung
      etwas weiter. Ein fester letter-spacing-Wert ist irgendwo immer falsch.

   Abstaende stehen in rem, nicht in px: wer die Systemschrift groesser
   stellt, bekommt ein groesseres Layout und keinen Bruch. */

:root {
  color-scheme: light dark;

  /* --- Farbe ---------------------------------------------------------------
     Gruen bleibt die Hausfarbe, aber es traegt nur noch, was wirklich
     Handlung oder Erfolg ist. Alles andere ist Grau in abgestuften Rollen. */
  --gruen: #0a8f60;
  --gruen-hell: #dcf3ea;
  --gruen-wach: #0e9f6e;
  --rot: #d92d20;
  --gelb: #b45309;

  --grund: #f2f2f7;          /* Seitenhintergrund */
  --karte: #ffffff;          /* gehobene Flaeche */
  --karte-tief: #f7f7fa;     /* Eingabefelder, Mulden */
  --text: #0b0c0e;
  --text-zweit: #3c3c43;
  --text-leise: #77777f;
  --spur: #e4e4ea;           /* leere Balken, Ringspur */
  --rand: #dededf;
  --blau: #0a6fd8;

  --getraenk-wasser:   #0a6fd8;
  --getraenk-frei:     #10996b;
  --getraenk-kalorien: #b07400;

  /* --- Material ------------------------------------------------------------
     Die schwebenden Schichten. Zwei Staerken, mehr braucht es nicht: duenn
     fuer die Kopfzeile, dick fuer Blaetter. Eine helle Kante oben faengt das
     Licht - das ist es, was eine Flaeche als Material lesbar macht. */
  --material-duenn: rgba(242, 242, 247, .72);
  --material-dick: rgba(255, 255, 255, .82);
  --material-kante: rgba(255, 255, 255, .65);
  --schleier: rgba(0, 0, 0, .32);

  /* Schatten in zwei Stufen. Grosse Flaechen tragen den tieferen - eine
     groessere Flaeche liest sich als dickeres Material. */
  --hebung-klein: 0 1px 2px rgb(16 18 22 / .05), 0 4px 14px rgb(16 18 22 / .05);
  --hebung-gross: 0 -1px 0 rgb(255 255 255 / .5) inset,
                  0 -8px 40px rgb(16 18 22 / .18);

  --radius: 1.125rem;        /* 18px bei Standardschrift */
  --radius-klein: .75rem;
  --radius-blatt: 1.5rem;

  /* Kurven. "weich" ist die Standardbewegung ohne Ueberschwingen, "raus"
     die Beschleunigung fuer Dinge, die verschwinden. Beide sind bewusst
     asymmetrisch: schnell anspringen, ruhig ankommen. */
  --weich: cubic-bezier(.32, .72, 0, 1);
  --raus: cubic-bezier(.4, 0, .84, .32);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gruen: #2ec08a;
    --gruen-hell: #0e3728;
    --gruen-wach: #34d399;
    --rot: #ff5f56;
    --gelb: #f0b429;

    --grund: #000000;
    --karte: #1c1c1e;
    --karte-tief: #2c2c2e;
    --text: #ffffff;
    --text-zweit: #d8d8dc;
    --text-leise: #98989f;
    --spur: #3a3a3c;
    --rand: #38383a;
    --blau: #4a9dff;

    --getraenk-wasser:   #4a9dff;
    --getraenk-frei:     #34d399;
    --getraenk-kalorien: #f0b429;

    --material-duenn: rgba(28, 28, 30, .72);
    --material-dick: rgba(36, 36, 38, .84);
    --material-kante: rgba(255, 255, 255, .12);
    --schleier: rgba(0, 0, 0, .5);

    --hebung-klein: none;
    --hebung-gross: 0 -1px 0 rgb(255 255 255 / .1) inset,
                    0 -8px 40px rgb(0 0 0 / .5);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0 auto;
  padding: 0 1rem calc(2.5rem + env(safe-area-inset-bottom));
  max-width: 35rem;

  /* Systemschrift zuerst: sie bringt optische Groessen, Laufweitentabellen
     und Lesbarkeitsfeinschliff schon mit. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
               "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;      /* 17px, die iOS-Lesegroesse */
  line-height: 1.47;
  letter-spacing: -.011em;   /* Fliesstext minimal enger als die Defaults */

  background: var(--grund);
  color: var(--text);

  /* Kein grauer Kasten beim Antippen - die Rueckmeldung machen wir selbst,
     und zwar praeziser. */
  -webkit-tap-highlight-color: transparent;
}

/* --- Schrift ---------------------------------------------------------------
   Groesse, Gewicht, Laufweite und Zeilenhoehe als Satz gedacht: je groesser,
   desto enger und desto knapper die Zeilen. */

h1 {
  margin: 0;
  font-size: 2.125rem;
  line-height: 1.08;
  letter-spacing: -.024em;
  font-weight: 700;
}

h2 {
  margin: 0 0 .75rem;
  font-size: 1.3125rem;
  line-height: 1.19;
  letter-spacing: -.019em;
  font-weight: 650;
}

h3 {
  margin: 1.25rem 0 .25rem;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  font-weight: 620;
}

.versteckt { display: none !important; }

.klein {
  margin: .25rem 0;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: 0;          /* kleine Schrift NICHT enger stellen */
  color: var(--text-leise);
}

.leise { color: var(--text-leise); }

.datum {
  margin: .125rem 0 0;
  font-size: .9375rem;
  color: var(--text-leise);
  letter-spacing: 0;
}

/* Zahlen, die sich aendern, duerfen die Zeile nicht verschieben. */
.seitenwert strong, .ring-mitte strong, .balken-wert, .viz-tabelle td,
.blatt-fuss strong, .wasser-wert {
  font-variant-numeric: tabular-nums;
}

/* --- Kopfzeile -------------------------------------------------------------
   Schwebt als duennes Material ueber dem Inhalt, statt einen festen Streifen
   zu verbrauchen. Der grosse Titel schrumpft beim Scrollen in eine kompakte
   Zeile - gesteuert von blatt.js ueber --kopf-fortschritt (0 bis 1). */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin: 0 -1rem;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem .75rem;

  background: var(--material-duenn);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);

  /* Kein harter Trennstrich: der Rand wird ausgeblendet, wo Inhalt unter die
     Leiste laeuft. Die Linie erscheint erst beim Scrollen.

     Die erste Zeile ist der Rueckfall fuer Browser ohne relative Farben
     (Safari vor 18): dort bleibt die Linie einfach weg, statt dass die
     ganze Regel ungueltig wird. */
  box-shadow: none;
  box-shadow: 0 .5px 0 rgb(from var(--rand) r g b / calc(var(--kopf-fortschritt, 0) * .9));
  transition: box-shadow .2s linear;
}

header .kopf-text { min-width: 0; }

header h1 {
  transform-origin: left center;
  transform: scale(calc(1 - var(--kopf-fortschritt, 0) * .28));
  transition: transform .1s linear;
}

header .datum {
  opacity: calc(1 - var(--kopf-fortschritt, 0) * 1.4);
  transition: opacity .1s linear;
}

/* --- Flaechen --------------------------------------------------------------
   Karten heben sich durch Licht ab, nicht durch einen Rahmen. Im Dunkeln
   traegt die hellere Flaeche selbst die Trennung - Schatten auf Schwarz sind
   unsichtbar und nur Rechenzeit. */

.karte {
  background: var(--karte);
  border-radius: var(--radius);
  padding: 1.125rem;
  margin-bottom: 1.125rem;
  box-shadow: var(--hebung-klein);
}

@media (prefers-color-scheme: dark) {
  .karte { box-shadow: none; }
}

/* --- Ring ------------------------------------------------------------------ */

.ring-zeile {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}

.seitenwert { text-align: center; min-width: 0; }
.seitenwert strong {
  display: block;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 620;
}
.seitenwert span {
  font-size: .8125rem;
  color: var(--text-leise);
}

.ring { position: relative; width: 9.375rem; height: 9.375rem; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.ring circle {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 326.7;   /* 2 * pi * 52 */
}
.ring-spur { stroke: var(--spur); }
.ring-fuellung {
  stroke: var(--gruen);
  stroke-dashoffset: 326.7;
  /* Federartig statt linear: der Ring laeuft schnell an und legt sich ruhig
     auf den Endwert. */
  transition: stroke-dashoffset .7s var(--weich), stroke .3s ease;
}
.ring-fuellung.drueber { stroke: var(--rot); }

.ring-mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.ring-mitte strong {
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -.03em;    /* grosse Zahl: deutlich enger */
  font-weight: 680;
}
.ring-mitte span {
  font-size: .8125rem;
  color: var(--text-leise);
}

/* --- Balken ---------------------------------------------------------------- */

.balken-zeile {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .875rem; margin-top: 1.375rem;
}
.balken-block { text-align: center; }
.balken-titel {
  font-size: .8125rem;
  color: var(--text-leise);
  letter-spacing: 0;
}
.balken {
  height: .4375rem; background: var(--spur);
  border-radius: 99px; margin: .4375rem 0; overflow: hidden;
}
.balken-fuellung {
  height: 100%; width: 0;
  background: var(--gruen); border-radius: 99px;
  transition: width .7s var(--weich), background .3s ease;
}
.balken-fuellung.drueber { background: var(--rot); }
.balken-wert { font-size: .8125rem; font-weight: 620; }

/* --- Fluessigkeit ---------------------------------------------------------- */

.wasser {
  margin-top: 1.375rem; padding-top: 1.125rem;
  border-top: .5px solid var(--rand);
}
.wasser-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
}
.glaeser {
  display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem;
}

/* Grosszuegige Trefferflaeche: die Glaeser werden mit dem Daumen getroffen,
   ein Fehltipp bedeutet eine falsche Zahl. Rueckmeldung kommt beim Druecken
   und ist sofort da - Skalieren, nicht Faerben, damit auch das volle Glas
   antwortet. */
.glas {
  border: none; background: none; padding: .375rem .25rem;
  border-radius: .5rem; line-height: 0;
  transition: transform .22s var(--weich);
}
.glas:active {
  transform: scale(.88);
  transition-duration: .08s;
}
.glas-umriss { fill: none; stroke: var(--text-leise); stroke-width: 1.5; }
.glas.voll .glas-umriss { stroke: var(--text); }
.glas-fuellung {
  fill: var(--getraenk-wasser);
  transition: y .45s var(--weich), height .45s var(--weich);
}
.glas-fuellung.gruppe-wasser        { fill: var(--getraenk-wasser); }
.glas-fuellung.gruppe-kalorienfrei  { fill: var(--getraenk-frei); }
.glas-fuellung.gruppe-kalorien      { fill: var(--getraenk-kalorien); }

#wasser-gescannt {
  display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .625rem;
}
.wasser-teilung {
  flex-basis: 100%; font-weight: 620; color: var(--text);
}
.wasser-teilung, .quelle {
  display: inline-flex; align-items: center; gap: .3125rem;
}
.getraenk-punkt {
  flex: 0 0 .5625rem; align-self: center;
  width: .5625rem; height: .5625rem; border-radius: 50%;
  background: var(--getraenk-wasser);
}
.getraenk-punkt.gruppe-kalorienfrei { background: var(--getraenk-frei); }
.getraenk-punkt.gruppe-kalorien     { background: var(--getraenk-kalorien); }

.hinweis {
  margin: 1rem 0 0; padding: .625rem .75rem;
  background: var(--gruen-hell); border-radius: var(--radius-klein);
  font-size: .8125rem;
}

/* --- Knoepfe ---------------------------------------------------------------
   Jeder Knopf antwortet auf den DRUCK, nicht auf das Loslassen: 80 ms hinein,
   220 ms zurueck. Das Zurueckfedern darf ruhig laenger dauern - der Weg
   hinein ist der, den man spuert. */

button, .foto-knopf {
  font: inherit;
  letter-spacing: -.011em;
  cursor: pointer;
  border-radius: var(--radius-klein);
  border: .5px solid var(--rand);
  background: var(--karte); color: var(--text);
  padding: .75rem 1rem;
  transition: transform .22s var(--weich), opacity .22s var(--weich),
              background-color .22s var(--weich);
}

button:active, .foto-knopf:active {
  transform: scale(.97);
  transition-duration: .08s;
}

.foto-knopf {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  width: 100%; margin-bottom: 1.625rem; padding: 1rem;
  background: var(--gruen); color: #fff; border: none;
  font-weight: 620;
  box-shadow: 0 4px 16px rgb(14 159 110 / .28);   /* Rueckfall, s. header */
  box-shadow: 0 4px 16px rgb(from var(--gruen) r g b / .28);
}
.foto-knopf:active { transform: scale(.975); }

.haupt {
  background: var(--gruen); color: #fff; border: none;
  font-weight: 620; padding: .8125rem 1.375rem;
}

.schlicht {
  width: 100%; margin-top: .625rem;
  background: var(--karte-tief); border: .5px solid transparent;
  color: var(--text-zweit);
}
.schlicht:active { background: var(--spur); }

.rund {
  width: 2.5rem; height: 2.5rem; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--karte-tief); border: none;
  color: var(--text-zweit);
}

button:disabled { opacity: .4; cursor: default; transform: none; }

/* --- Mahlzeitenliste -------------------------------------------------------
   Zusammenhaengende Eintraege ruecken zusammen zu einer Gruppe, wie in den
   Systemlisten: eine Flaeche, innen getrennt, aussen rund. */

.mahlzeit {
  background: var(--karte);
  border-radius: var(--radius);
  padding: .875rem 1rem; margin-bottom: .625rem;
  box-shadow: var(--hebung-klein);
}
@media (prefers-color-scheme: dark) { .mahlzeit { box-shadow: none; } }

.mahlzeit-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem;
}
.mahlzeit-kopf .zeit {
  color: var(--text-leise); font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.mahlzeit-kopf strong {
  font-size: 1.0625rem; letter-spacing: -.015em; font-weight: 620;
}
.mahlzeit ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.mahlzeit li {
  display: flex; justify-content: space-between; gap: .75rem;
  font-size: .875rem; color: var(--text-leise); padding: .1875rem 0;
}
.mahlzeit .loeschen {
  border: none; background: none; color: var(--text-leise);
  padding: .25rem; font-size: .8125rem;
}
.leerer-tag {
  color: var(--text-leise); font-size: .875rem;
  padding: .375rem .125rem 1.125rem;
}

.marke {
  font-size: .6875rem; padding: .0625rem .375rem; border-radius: .375rem;
  background: var(--spur); color: var(--text-leise); margin-left: .375rem;
  letter-spacing: .01em;      /* sehr kleine Schrift: etwas weiter */
}

/* --- Ziele ----------------------------------------------------------------- */

.ziel-block { margin-bottom: 1.125rem; }
.ziel-kopf {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .875rem; margin-bottom: .125rem;
}
.ziel-kopf span:last-child { font-weight: 620; }

.ziel-felder {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .75rem; margin-top: 1.25rem;
  border-top: .5px solid var(--rand); padding-top: 1.125rem;
}
.ziel-felder label {
  display: flex; flex-direction: column; gap: .3125rem;
  font-size: .8125rem; color: var(--text-leise);
}
.ziel-felder .breit { grid-column: 1 / -1; }

input, select {
  font: inherit; letter-spacing: -.011em;
  color: var(--text); background: var(--karte-tief);
  border: .5px solid transparent; border-radius: var(--radius-klein);
  padding: .625rem .75rem; width: 100%;
  transition: border-color .18s var(--weich), background-color .18s var(--weich);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--gruen);
  background: var(--karte);
}

.einheit { position: relative; }
.einheit span {
  position: absolute; right: .75rem; top: 50%;
  transform: translateY(-50%); color: var(--text-leise); font-size: .875rem;
  pointer-events: none;
}
.einheit input { padding-right: 2.375rem; }

.gespeichert { color: var(--gruen); font-size: .8125rem; margin: .75rem 0 0; }
.fehler { color: var(--rot); font-size: .875rem; margin: .625rem 0 0; }
.warnung {
  background: var(--gruen-hell); color: var(--gelb);
  padding: .625rem .75rem; border-radius: var(--radius-klein);
  font-size: .875rem;
}

/* --- Anleitung fuer den Kurzbefehl ----------------------------------------- */

.anleitung { padding-left: 1.25rem; line-height: 1.5; }
.anleitung li { margin: .5rem 0; }
.anleitung ul { padding-left: 1rem; margin: .25rem 0; }

.kb-wert {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; background: var(--karte-tief); color: var(--text);
  padding: .125rem .375rem; border-radius: .375rem;
  word-break: break-all; cursor: pointer;
  letter-spacing: 0;
}

/* --- Blaetter (Ueberlagerungen) --------------------------------------------
   Ein Blatt ist ein Material, das ankommt: es faehrt herein UND wird
   schaerfer. blatt.js fuehrt die Bewegung ueber eine Feder und laesst sich
   dabei jederzeit mit dem Finger greifen - deshalb steht hier kein
   transition auf transform. Was hier steht, ist nur das Aussehen. */

.ueberlagerung {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
}

/* Der Schleier ist eine EIGENE Schicht, nicht die Deckkraft der Huelle.
   Teuer gelernt: opacity auf dem Elternelement macht aus allem darin eine
   Gruppe - und ein backdrop-filter darin filtert dann nur noch die Gruppe
   selbst statt der Seite dahinter. Das Blatt war glasklar statt milchig.
   So blendet der Schleier fuer sich, und das Material bleibt Material. */
.ueberlagerung::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--schleier);
  opacity: var(--schleier-anteil, 1);
  transition: opacity .3s var(--weich);
}

.blatt {
  position: relative;
  background: var(--material-dick);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-top: .5px solid var(--material-kante);
  width: 100%; max-width: 35rem;
  max-height: 92vh; overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-blatt) var(--radius-blatt) 0 0;
  padding: .75rem 1.125rem calc(1.5rem + env(safe-area-inset-bottom));
  box-shadow: var(--hebung-gross);
}

/* Waehrend das Blatt faehrt oder am Finger haengt: KEIN backdrop-filter.
   Eine Milchglasflaeche muss bei jedem Bild neu berechnen, was hinter ihr
   liegt - waehrend sie sich bewegt, also 60-mal je Sekunde ueber die halbe
   Seite. Genau das war das Haengen bei der Einfahrt. Solange sie sich
   bewegt, sieht ohnehin niemand hin; steht sie, ist das Material wieder da.

   will-change steht auch nur hier: dauerhaft gesetzt haelt es fuer jedes
   der elf Fenster eine eigene Ebene im Speicher. */
.blatt.bewegt {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--karte);
  will-change: transform;
  /* Auch der grosse Schatten kostet: 40 px Weichzeichnung um eine Flaeche,
     die sich bewegt, wird bei jedem Bild neu gerechnet. Waehrend der Fahrt
     genuegt eine harte Kante - gesehen hat den Schatten in der Bewegung
     ohnehin noch niemand. */
  box-shadow: 0 -1px 0 var(--material-kante) inset;
  /* Waehrend der Fahrt gibt es nichts zu scrollen, und ein scrollbarer
     Kasten in Bewegung ist fuer den Browser teurer als ein fester. */
  overflow: hidden;
}

/* Solange ein Blatt offen ist, steht der Hintergrund. Ohne das scrollt die
   Seite unter dem Fenster weiter - man wischt im Fenster, trifft daneben,
   und der Tag darunter verschiebt sich.
   position: fixed statt overflow: hidden, weil iOS Safari sich um zweiteres
   nicht kuemmert. Die Scrollhoehe merkt sich blatt.js und setzt sie beim
   Schliessen zurueck, sonst springt die Seite nach oben. */
body.blatt-offen {
  position: fixed;
  left: 0; right: 0;
  width: auto;
  overflow-y: scroll;   /* die Leiste bleibt, sonst ruckt die Seite seitlich */
}

/* Der Griff. Sagt ohne ein Wort, dass sich das Blatt anfassen laesst -
   eingehaengt von blatt.js, damit die 15 Fenster im HTML unberuehrt bleiben. */
.griff {
  position: sticky; top: 0; z-index: 2;
  display: block; width: 2.25rem; height: .3125rem;
  margin: 0 auto .5rem;
  border-radius: 99px;
  background: var(--text-leise);
  opacity: .3;
  /* Der Griff ist der Anfasser, aber gezogen werden darf ueberall - siehe
     blatt.js. Er faengt nur den Blick. */
  touch-action: none;
}

.blatt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .75rem;
}
.blatt-kopf h2 { flex: 1; margin: 0; }

.blatt-fuss {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.375rem; padding-top: 1rem; border-top: .5px solid var(--rand);
}
.blatt-fuss strong { font-size: 1.25rem; letter-spacing: -.02em; }

.anmeldung {
  position: fixed; inset: 0; z-index: 30;
  background: var(--grund);
  display: grid; place-items: center; padding: 1.25rem;
}
.anmeldung .karte { width: 100%; max-width: 23.75rem; }
.anmeldung input { margin: .875rem 0 .75rem; }
.anmeldung button { width: 100%; }

/* --- Zutatenzeilen --------------------------------------------------------- */

.zutat {
  display: grid;
  grid-template-columns: 1fr 4rem 4.875rem 2rem;
  gap: .5rem; align-items: center;
  padding: .625rem 0; border-bottom: .5px solid var(--rand);
}
.zutat input { padding: .5rem .625rem; font-size: .9375rem; }
.zutat .weg {
  border: none; background: none; color: var(--text-leise); padding: 0;
}
.zutat-kopf {
  display: grid; grid-template-columns: 1fr 4rem 4.875rem 2rem;
  gap: .5rem; font-size: .75rem; color: var(--text-leise);
  padding-bottom: .25rem;
}
.zutat-notiz {
  grid-column: 1 / -1; font-size: .75rem; color: var(--text-leise);
  margin: .125rem 0 0;
}

.rueckfrage { margin: .75rem 0; }
.rueckfrage p { margin: 0 0 .375rem; font-size: .9375rem; }

/* --- Kalender -------------------------------------------------------------- */

.wochentage, .kalender {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .375rem;
}
.wochentage span {
  text-align: center; font-size: .75rem; color: var(--text-leise);
  padding-bottom: .375rem;
}
.kalender-tag {
  aspect-ratio: 1; border-radius: .625rem;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--karte-tief); font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  transition: transform .22s var(--weich);
}
.kalender-tag:active { transform: scale(.92); transition-duration: .08s; }
.kalender-tag.gut { background: var(--gruen); color: #fff; }
.kalender-tag.drueber { background: var(--rot); color: #fff; }
.kalender-tag .kcal { font-size: .625rem; opacity: .85; }
.kalender-tag.leer { opacity: .35; }

.legende { display: flex; align-items: center; gap: .375rem; margin-top: 1rem; }
.punkt {
  width: .625rem; height: .625rem; border-radius: 50%;
  display: inline-block; margin-left: .625rem;
}
.punkt.gut { background: var(--gruen); margin-left: 0; }
.punkt.drueber { background: var(--rot); }
.punkt.leer { background: var(--spur); }

/* --- Ladeanzeige ----------------------------------------------------------- */

.laden { text-align: center; padding: 2.5rem 0; }
.spinner {
  width: 2.125rem; height: 2.125rem; margin: 0 auto 1rem;
  border: 3px solid var(--spur); border-top-color: var(--gruen);
  border-radius: 50%; animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

footer { text-align: center; padding: .625rem 0 0; }

/* --- Unbekannte Zutaten ---------------------------------------------------- */

.unbekannt {
  background: var(--karte-tief); border-radius: var(--radius-klein);
  padding: .75rem; margin-bottom: .625rem;
}
.unbekannt-name { font-weight: 620; margin-bottom: .5rem; }
.naehrwert-felder {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.naehrwert-felder label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .6875rem; color: var(--text-leise); text-align: center;
}
.naehrwert-felder input {
  padding: .5rem .375rem; text-align: center; font-size: .9375rem;
  background: var(--karte);
}
.je-100 { font-size: .75rem; color: var(--text-leise); margin: .5rem 0 0; }

.ladefehler {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .875rem;
  padding: .75rem .875rem; border-radius: var(--radius-klein);
  background: var(--gruen-hell); color: var(--gelb); font-size: .875rem;
}
.ladefehler button {
  background: var(--gelb); color: #fff; border: none;
  padding: .5rem .875rem; font-size: .875rem; flex-shrink: 0;
}

/* --- Auswahl aus der Historie ---------------------------------------------- */

/* Eine Flaeche, vier Zeilen. Innen Haarlinien statt Luecken - das ist der
   Unterschied zwischen "vier Dinge" und "eine Gruppe mit vier Wegen". */
.knopf-gruppe {
  background: var(--karte);
  border-radius: var(--radius);
  margin-bottom: 1.625rem;
  overflow: hidden;
  box-shadow: var(--hebung-klein);
}
@media (prefers-color-scheme: dark) { .knopf-gruppe { box-shadow: none; } }

.zweit-knopf {
  display: flex; align-items: center; gap: .625rem;
  width: 100%; margin: 0; padding: .875rem 1rem;
  background: none; color: var(--text); border: none; border-radius: 0;
  text-align: left;
}
/* Zwischen JEDEM Knopf eine Linie - nur nicht ueber dem ersten.
   Nicht mit "+": zwischen den Knoepfen stehen im Markup versteckte
   Dateifelder, und der Nachbarschafts-Wahlschalter sieht die. Sichtbar war
   deshalb genau eine Linie von dreien, naemlich die zwischen den beiden
   Knoepfen, zwischen denen zufaellig kein Feld liegt.
   :not(:first-of-type) zaehlt nur Knoepfe - Dateifelder sind ein anderer
   Typ und stoeren nicht mehr. */
.knopf-gruppe .zweit-knopf:not(:first-of-type) {
  box-shadow: inset 0 .5px 0 var(--rand);
}
.zweit-knopf svg { flex: none; color: var(--text-leise); }
.zweit-knopf:active { transform: none; background: var(--karte-tief); }

#bekanntes-suche { margin-bottom: .25rem; }

.treffer-gruppe { margin-top: 1.125rem; }
.treffer-gruppe h3 {
  margin: 0 0 .5rem; font-size: .875rem; color: var(--text-leise);
  font-weight: 590;
}

.treffer {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 0; border-bottom: .5px solid var(--rand);
}
/* Hier stand kurz content-visibility: auto, um Zeilen unterhalb des Randes
   gar nicht erst zu setzen. Wieder entfernt: der Browser meldet fuer ein
   Blatt mit uebersprungenem Inhalt eine viel zu kleine Hoehe (in der Probe
   37 px statt 700), und genau diese Hoehe rechnet das Ziehen in Prozent um.
   Bei zwanzig Zeilen ist der Gewinn klein und die Falle gross. */
.treffer-text { flex: 1; min-width: 0; cursor: pointer; }
.treffer-name {
  font-weight: 620;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.treffer-zeile {
  font-size: .8125rem; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.treffer-spanne { font-size: .75rem; color: var(--gelb); margin-top: .1875rem; }

.treffer .kamera {
  width: 2.625rem; height: 2.625rem; padding: 0; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--karte-tief); border: none;
}

.zutat-notiz.korrektur { color: var(--gruen); }
.zutat-notiz.korrektur .vergessen {
  border: none; background: none; padding: 0 0 0 .375rem;
  color: var(--text-leise); font-size: .75rem;
  text-decoration: underline;
}

/* --- Verlauf ---------------------------------------------------------------
   Farben gegen die Kartenflaeche geprueft. Gruen und Rot liegen bei
   Rotblindheit dicht beieinander - deshalb traegt zusaetzlich die Lage ueber
   oder unter der Nulllinie die Aussage. */

.viz {
  --viz-linie:   #0a6fd8;
  --viz-unter:   #0a8f60;
  --viz-ueber:   #d92d20;
  --viz-achse:   #e4e4ea;
  --viz-mittel:  #98989f;
}
@media (prefers-color-scheme: dark) {
  .viz {
    --viz-linie:  #4a9dff;
    --viz-unter:  #2ec08a;
    --viz-ueber:  #ff5f56;
    --viz-achse:  #38383a;
    --viz-mittel: #77777f;
  }
}

.viz-titel {
  font-size: .8125rem; font-weight: 620; color: var(--text-leise);
  margin: 1.125rem 0 .125rem;
}
.viz svg { width: 100%; height: auto; display: block; }

.viz .achse { stroke: var(--viz-achse); stroke-width: 1; }
.viz .nulllinie { stroke: var(--viz-mittel); stroke-width: 1; }
.viz .beschriftung { fill: var(--text-leise); font-size: 9px; }
.viz .wert { fill: var(--text); font-size: 10px; font-weight: 620; }

.viz .linie {
  fill: none; stroke: var(--viz-linie);
  stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.viz .punkt { fill: var(--viz-linie); stroke: var(--karte); stroke-width: 2; }
.viz .balken-unter { fill: var(--viz-unter); }
.viz .balken-ueber { fill: var(--viz-ueber); }
.viz .tagfeld { fill: transparent; cursor: pointer; }
.viz .tagfeld.aktiv { fill: var(--spur); opacity: .5; }

.viz-ablesung {
  font-size: .8125rem; color: var(--text-leise);
  margin: .875rem 0 0; min-height: 1.25rem;
}

.auswertung {
  margin-top: 1.25rem; padding: 1rem;
  background: var(--gruen-hell); border-radius: var(--radius-klein);
  font-size: .875rem;
}
.auswertung h3 { margin: 0 0 .5rem; font-size: .9375rem; }
.auswertung p { margin: .375rem 0; }
.auswertung .zahl { font-weight: 620; }
.auswertung .knopf-zeile { margin-top: .75rem; }

/* --- Rezepte --------------------------------------------------------------- */

.rezept { padding: .875rem 0; border-bottom: .5px solid var(--rand); }
.rezept:last-child { border-bottom: none; }
.rezept-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .625rem;
}
.rezept p { margin: .25rem 0 0; }
.rezept .leise { color: var(--text-leise); }

.portionen { display: flex; gap: .5rem; margin-top: .625rem; }
.portion {
  flex: 1; padding: .625rem .25rem;
  font-size: .875rem; font-weight: 620;
  color: var(--text); background: var(--karte-tief);
  border: .5px solid transparent; border-radius: .625rem;
  font-variant-numeric: tabular-nums;
}
.portion:active { background: var(--spur); }
.portion:disabled { opacity: .4; }

.rezept-merken {
  display: block; width: 100%; margin-top: .625rem; padding: .5625rem .625rem;
  font-size: .8125rem; color: var(--text-leise);
  background: var(--karte-tief); border: none; border-radius: .625rem;
}

.stift {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.125rem; height: 2.125rem; padding: 0;
  border: none; background: none; border-radius: 50%;
  color: var(--text-leise);
}
.stift:active { color: var(--text); background: var(--spur); }

.rezept-leer p { margin: 0 0 .625rem; font-size: .875rem; }
.rezept-leer .leise { color: var(--text-leise); }

/* --- Rueckmeldung ----------------------------------------------------------
   Kommt von unten herein, geht nach unten hinaus - derselbe Weg zurueck. */

.hinweis-blase {
  position: fixed; left: 50%; bottom: calc(1.75rem + env(safe-area-inset-bottom));
  z-index: 50; max-width: min(90vw, 26rem);
  padding: .75rem 1.125rem; border-radius: var(--radius-klein);
  background: var(--material-dick);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: .5px solid var(--material-kante);
  color: var(--text);
  font-size: .875rem; text-align: center;
  box-shadow: 0 8px 30px rgb(0 0 0 / .22);
  transform: translateX(-50%);
  animation: blase-herein .42s var(--weich);
}
@keyframes blase-herein {
  from { transform: translate(-50%, 1.25rem) scale(.96); opacity: 0; }
  to   { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* --- Automatische Nachfuehrung --------------------------------------------- */

.automatik {
  margin-top: 1rem; padding-top: .875rem;
  border-top: .5px solid var(--rand);
}
.automatik h3 { margin: 0 0 .5rem; font-size: .9375rem; }
.automatik p { margin: .375rem 0; }
.automatik .leise { color: var(--text-leise); }

.verlauf-liste {
  margin: .625rem 0 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--text-leise);
}
.verlauf-liste li { padding: .3125rem 0; border-top: .5px solid var(--rand); }
.verlauf-liste .zahl { color: var(--text); font-weight: 620; }

.viz-tabelle { margin-top: 1rem; font-size: .8125rem; }
.viz-tabelle table { width: 100%; border-collapse: collapse; }
.viz-tabelle th, .viz-tabelle td {
  text-align: right; padding: .3125rem .25rem;
  border-bottom: .5px solid var(--rand);
}
.viz-tabelle th:first-child, .viz-tabelle td:first-child { text-align: left; }
.viz-tabelle th { color: var(--text-leise); font-weight: 550; }

/* --- Getraenke ------------------------------------------------------------- */

.gefaesse {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .625rem; margin: .625rem 0 1.125rem;
}
.gefaess {
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .875rem .375rem; line-height: 1.2;
  background: var(--karte-tief); border: .5px solid transparent;
}
.gefaess .ml { font-size: .75rem; color: var(--text-leise); }
.frei { display: block; font-size: .8125rem; color: var(--text-leise); }
.frei .einheit { margin-top: .375rem; }

/* --- Konto und Verwaltung -------------------------------------------------- */

.konto-zeile { display: flex; gap: .625rem; margin-top: .875rem; }
.konto-zeile .schlicht { margin-top: 0; }

#konto-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; word-break: break-all; text-align: left;
  letter-spacing: 0;
}

.person {
  display: flex; align-items: center; justify-content: space-between;
  gap: .625rem; padding: .75rem 0; border-bottom: .5px solid var(--rand);
}
.person:last-child { border-bottom: none; }
.person-knoepfe { display: flex; gap: .375rem; flex: none; }
.person-knoepfe .schlicht { width: auto; margin-top: 0; }
.person-text { min-width: 0; }
.offen { color: var(--gelb); }

/* --- Massstaebe und Einrichtung -------------------------------------------- */

.mess-zeile {
  display: flex; align-items: center; gap: .625rem; margin-top: .375rem;
}
.mess-zeile .einheit { flex: 1; min-width: 0; margin-top: 0; }
.mess-kamera {
  width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--karte-tief); border: none;
}

.mess-wort {
  display: block; margin-top: .25rem; font-style: italic; opacity: .85;
}

.referenz-neu {
  margin-top: .875rem; padding-top: .875rem; border-top: .5px solid var(--rand);
  display: flex; flex-direction: column; gap: .625rem;
}
.referenz-neu .schlicht { margin-top: 0; }

.ankreuz {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; color: var(--text-leise);
}
.ankreuz input { width: 1.125rem; height: 1.125rem; }

#einrichtung-profil .frei, #einrichtung-hand .frei { margin-top: .875rem; }
#einrichtung-profil .haupt, #einrichtung-hand .haupt { margin-top: 1.125rem; }

/* --- Wiegen von Hand ------------------------------------------------------- */

.wiegen {
  padding-bottom: 1rem; margin-bottom: .25rem;
  border-bottom: .5px solid var(--rand);
}
.wiegen-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .625rem;
}
.wiegen-felder { display: flex; gap: .5rem; align-items: center; }
.wiegen-felder .einheit { flex: 1; min-width: 0; }
.wiegen-felder .haupt { flex: none; padding: .6875rem 1rem; }
.wiegen .klein { margin-top: .5rem; }

/* --- Zugaenglichkeit -------------------------------------------------------
   Drei unabhaengige Signale, drei unterschiedliche Antworten. Weniger
   Bewegung heisst NICHT weniger Rueckmeldung: geblendet wird weiter, nur
   nicht mehr geschoben. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Farbe und Deckkraft duerfen bleiben - sie erklaeren, ohne zu bewegen. */
  button:active, .foto-knopf:active, .glas:active, .kalender-tag:active {
    transform: none;
    opacity: .6;
  }
  .blatt { transition: opacity .2s ease !important; }
  .ring-fuellung, .balken-fuellung { transition: none; }
  .hinweis-blase { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  header { background: var(--grund); backdrop-filter: none; }
  .blatt, .hinweis-blase {
    background: var(--karte);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root { --text-leise: #55555c; --rand: #8a8a8f; }
  .karte, .mahlzeit, .zweit-knopf { border: 1px solid var(--rand); }
  .blatt, header { background: var(--karte); backdrop-filter: none; }
  input, select { border-color: var(--rand); }
}