/* urqivo SPORTS — Essens-Tagebuch + Körper: Stylesheet der Oberflächen-Kapsel
 *
 * ERGÄNZT styles.css, ersetzt nichts: Karten, Blätter, Knöpfe und die uq-Klassen
 * kommen von dort — hier steht nur, was es NUR in diesen beiden Bereichen gibt
 * (Präfix .ek-): Tagesnavigation, Vollbild-Overlays für Kamera und Bildverlauf,
 * Spiegelung der Frontkamera-Vorschau, Countdown-Zahl.
 *
 * Alle Farben über var(--…): So färbt der Nacht-Rot-Modus (body.night in styles.css)
 * auch diese Bereiche um, ohne dass hier eine zweite Palette entsteht. Die einzige
 * feste Farbe ist Schwarz hinter Foto und Sucher — ein Kamerabild liegt IMMER auf
 * Schwarz, egal welches Theme.
 *
 * Bewegung: genau zwei Animationen (Overlay-Einblendung, Countdown-Puls), beide
 * zurückhaltend und beide unter „Bewegung reduzieren" abgeschaltet. Nichts ist ohne
 * JavaScript unsichtbar — die Einblendung startet bei voller Sichtbarkeit am Ende.
 */

/* ---------------------------------------------------------------- Bilanz und Bedarf */

/* Drei eigene Töne für die drei Makronährstoffe. Sie unterscheiden, sie bewerten
   NICHT — es gibt kein „gutes" und kein „schlechtes" Makro, und deshalb kommt hier
   auch kein Rot und kein Grün vor (--good/--bad bleiben, wo sie hingehören).
   Im Nacht-Rot-Modus wandern alle drei ins Warme, sonst wäre die Nachtsicht dahin. */
:root {
  --ek-kh:      #25d7e6;
  --ek-eiweiss: #9A8BFF;
  --ek-fett:    #F2C14E;
}
html[data-night="true"] {
  --ek-kh:      #FF9B7A;
  --ek-eiweiss: #E07A5F;
  --ek-fett:    #FFC08A;
}

/* ⚠ position:relative gehört an die Karte, nicht an .uq-aktkarte allgemein: Der
   Teilen-Knopf hängt daran, und eine globale Regel würde jede Aktenkarte der App
   zum Bezugsrahmen für fremde Kinder machen. */
.ek-bilanz { padding-bottom: 14px; position: relative; }

/* ── Teilen-Knopf oben rechts in der Tagesbilanz ──────────────────────────────
   Erzeugt ein PNG der Tagesbilanz zum Weitergeben (js/teilbild.js).
   ⚠ Er liegt ÜBER dem Kartenrand-Padding; deshalb sitzt er auf 10 px statt 14 —
     bündig zum Text sähe er verrutscht aus, weil er rund ist und Text eckig. */
.ek-teilen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-dim, #9AA7B4);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line, #2A3644);
  transition: transform .22s, box-shadow .22s, color .22s, border-color .22s, background .22s;
}
.ek-teilen svg { display: block; }
/* Dieselbe Bewegung wie überall: 3 px nach oben, kräftigerer Schatten, ein Hauch
   Akzentfarbe am Rand. */
.ek-teilen:hover, .ek-teilen:focus-visible {
  transform: translateY(-3px);
  color: var(--accent, #4C8DFF);
  background: rgba(76, 141, 255, .12);
  background: color-mix(in srgb, var(--accent, #4C8DFF) 12%, transparent);
  border-color: rgba(76, 141, 255, .5);
  border-color: color-mix(in srgb, var(--accent, #4C8DFF) 50%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  outline: none;
}
.ek-teilen:active { transform: translateY(-1px); }
/* Bei reduzierter Bewegung bleibt der Knopf ruhig — Farbe und Schatten reichen. */
@media (prefers-reduced-motion: reduce) {
  .ek-teilen { transition: none; }
  .ek-teilen:hover { transform: none; }
  .ek-teilen:focus-visible { transform: none; }
}
/* ⚠ Der Knopf darf die Zahl daneben nicht bedrängen: Auf 320 px steht die große
   kcal-Zahl dicht am rechten Rand. Deshalb bekommt die Neben-Spalte rechts Luft,
   solange der Knopf da ist. */
.ek-bilanz .ek-bilanz-kopf { padding-right: 44px; }

.ek-bilanz-titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ek-bilanz-titel b { font-size: 17px; letter-spacing: -.01em; }

.ek-bilanz-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ek-bilanz-neben {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ek-kcal-zahl { font-size: 22px; letter-spacing: -.02em; }

/* .uq-label ist ein ETIKETT: 10,5 px, Versalien, gesperrt. Für „von 2.400 kcal Bedarf"
   ist das der falsche Ton — das ist die Aussage der Karte, keine Beschriftung, und
   Kommazahlen in gesperrten Versalien liest niemand gern. Also hier zurückgedreht. */
.ek-bilanz-neben .uq-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  line-height: 1.35;
}

/* Der Ring. Die Spur ist immer da — auch ohne Bedarf, damit die Zahl in der Mitte
   einen Rahmen hat und die Karte nicht halb leer wirkt. */
/* ── Ringe ────────────────────────────────────────────────────────────────────
   Jeder Ring zieht seine zwei Verlaufsfarben aus --ring-a und --ring-b. Eine neue
   Ringsorte braucht deshalb nur diese beiden Zeilen, kein eigenes Markup.
   ⚠ Die <stop>-Elemente bekommen ihre Farbe über CSS, nicht über ein stop-color-
     Attribut — sonst ließe sich der Verlauf nicht je Ringsorte umstellen. */
.ek-ring {
  flex: 0 0 auto;
  display: block;
  --ring-a: var(--accent, #4C8DFF);
  /* ⚠⚠ Die zweite Verlaufsfarbe wird ABGELEITET, nie fest gesetzt. Die Akzentfarbe ist
     in dieser App vom Nutzer wählbar (acht Voreinstellungen in app.js, dazu der
     Nacht-Rot-Modus). Ein fest eingetragenes Cyan sähe neben einem grün oder rot
     gewählten Akzent aus wie ein Fehler — und im Nacht-Modus zerstörte es genau die
     Nachtsicht, die dieser Modus schützen soll.
     Weil --ring-a je Ringsorte überschrieben wird und Custom Properties erst bei der
     Verwendung aufgelöst werden, stimmt die Ableitung für jeden Ring von selbst. */
  --ring-b: color-mix(in srgb, var(--ring-a) 55%, #ffffff);
  overflow: visible;
}
/* ⚠ Der zweite Stop nennt einen eigenen Rückfall: Wo color-mix fehlt, wird --ring-b gar
   nicht erst gesetzt, und ohne diesen Rückfall stünde dort Schwarz statt einer Farbe. */
.ek-ring-stop-a { stop-color: var(--ring-a); }
.ek-ring-stop-b { stop-color: var(--ring-b, var(--accent-2, #25d7e6)); }

/* Die Spur bleibt zurückhaltend, gewinnt aber Substanz: Auf --surface-2 verschwand
   der alte --line-Ton fast völlig, und ein Ring ohne sichtbare Spur wirkt bei
   kleinen Werten wie ein abgeschnittener Strich statt wie ein Kreis. */
.ek-ring-spur { stroke: var(--line, #2A3644); opacity: .55; }

/* Das Leuchten ist der eigentliche Unterschied zwischen „Diagramm" und „das habe ich
   heute geschafft". Es liegt auf dem Strich selbst, nicht als Kasten dahinter.
   ⚠ drop-shadow gehört an das <circle>, NICHT an das <svg>: Am svg würde auch die
     Spur mitleuchten, und der Ring bekäme einen schmutzigen Halo. */
.ek-ring-fuell {
  stroke: var(--accent, #ff6a2f);
  /* Erst ein fester Wert als Rückfall, dann der abgeleitete: Wo color-mix fehlt, wird
     die zweite Zeile verworfen und die erste bleibt stehen — der Ring leuchtet dann
     eben in der Grundfarbe statt gar nicht. */
  filter: drop-shadow(0 0 6px rgba(255, 106, 47, .5));
  filter: drop-shadow(0 0 7px var(--ring-glow, color-mix(in srgb, var(--accent, #ff6a2f) 55%, transparent)));
}

/* Der Sport-Bogen: das Stück Tagesbudget, das erst durchs Training entstanden ist.
   Halbdurchsichtig, damit die Füllung ihn überdeckt, sobald man dort ankommt. */
.ek-ring-sport {
  stroke: var(--good, #2FBF71);
  opacity: .8;
  filter: drop-shadow(0 0 5px rgba(47, 191, 113, .45));
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--good, #2FBF71) 50%, transparent));
}

.ek-ring-zahl {
  fill: var(--text, #E6EDF3);
  font-weight: 800;
  letter-spacing: -.035em;
}
.ek-ring-wort {
  fill: var(--text-dim, #9AA7B4);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: lowercase;
}

/* Drei Ringe nebeneinander — Kohlenhydrate, Eiweiß, Fett. Gleiche Bauart wie der
   kcal-Ring darüber, nur kleiner: dieselbe Sprache für dieselbe Sache. Bei 375 px
   bleiben je Ring rund 100 px, das trägt die Zahl in der Mitte gerade noch. */
.ek-makros {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ek-makro-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
/* Der Ring skaliert mit der Spalte, statt bei schmalen Geräten überzustehen. */
.ek-makro-ring .ek-ring { width: 100%; height: auto; max-width: 100px; }
.ek-makro-name {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.ek-makro-ziel {
  font-size: 11.5px;
  color: var(--text-mute, #6B7885);
  text-align: center;
  line-height: 1.2;
}

/* Jedes Makro trägt seine Farbe im Ring — Unterscheidung, keine Bewertung. */
/* Je Makro ein eigener Verlauf samt passendem Leuchten. Die zweite Farbe ist bewusst
   eine HELLERE Verwandte der ersten, kein Fremdton: Drei Ringe nebeneinander sollen
   als Satz erkennbar bleiben und nicht wie drei Zufälle wirken. */
/* Je Makro nur die GRUNDfarbe — die hellere Verwandte und das Leuchten leiten sich
   daraus ab (siehe .ek-ring oben). */
.ek-makro-kh .ek-ring {
  --ring-a: var(--ek-kh);
  --ring-glow: color-mix(in srgb, var(--ek-kh) 55%, transparent);
}
.ek-makro-eiweiss .ek-ring {
  --ring-a: var(--ek-eiweiss);
  --ring-glow: color-mix(in srgb, var(--ek-eiweiss) 55%, transparent);
}
.ek-makro-fett .ek-ring {
  --ring-a: var(--ek-fett);
  --ring-glow: color-mix(in srgb, var(--ek-fett) 55%, transparent);
}
.ek-makro-kh .ek-ring-fuell      { stroke: var(--ek-kh); }
.ek-makro-eiweiss .ek-ring-fuell { stroke: var(--ek-eiweiss); }
.ek-makro-fett .ek-ring-fuell    { stroke: var(--ek-fett); }
.ek-makro-name { color: var(--text, #E6EDF3); }

.ek-bezugnote { margin-top: 10px; font-size: 12px; }
.ek-bedarf-knopf { margin-top: 12px; width: 100%; }
.ek-ohne { font-size: 12px; }

/* ------------------------------------------------- Woher die Zahl im Ring kommt
   Der Vorschlag des Trainerteams für DIESEN Tag. Er sitzt unter den Zahlen und ist
   durch eine Linie abgesetzt statt durch eine eigene Karte: Es ist eine Erklärung zur
   Bilanz darüber, kein zweiter Inhalt. */
.ek-teamnote {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #2A3644);
}
.ek-teamnote-kopf {
  font-size: 14px;
  color: var(--text, #E6EDF3);
  margin-bottom: 2px;
}
/* ⚠ Eigene Farbe statt der geerbten: .uq-label steht auf --text-mute, und das ergibt
   auf --surface-2 nur 3,4:1 — zu wenig für einen Satz, den man wirklich lesen soll.
   Gemessen am 26.08.2026, nicht geschätzt. */
.ek-teamnote .uq-label { font-size: 12px; color: var(--text-dim, #9AA7B4); }
.ek-teamnote-riegel { margin-top: 4px; }
/* ⚠ width:auto ist Pflicht: .btn bringt aus styles.css width:100% mit, und der Knopf
   stünde sonst über die volle Breite — hier soll er neben dem Text stehen bleiben. */
.ek-teamnote-knopf {
  width: auto;
  margin-top: 10px;
}
/* ⚠⚠ DREI Klassen, und das ist kein Zufall: .btn.sm setzt min-height:36px und hätte
   gegen eine einklassige Regel gewonnen (0,2,0 schlägt 0,1,0). Gemessen wurden 36 px,
   wo 44 stehen müssen — die übliche Mindestgröße für ein Tippziel am Handy. */
.ek-teamnote .btn.ek-teamnote-knopf { min-height: 44px; }

/* ------------------------------------------------- Wie die Zahl im Ring entsteht
   Vier Zeilen mit der Zahl rechts — ein Beleg, kein Absatz. Sie sitzt unter der
   Herkunftszeile und beantwortet die Frage, die dort aufkommt: warum heute 2.180?

   ⚠ Die Zahlenspalte steht in TABULARZIFFERN (font-variant-numeric). Ohne sie sind
     Ziffern proportional breit, und untereinander stehende Beträge fransen rechts aus —
     bei einer Rechnung fällt genau das sofort auf. */
.ek-herleitung {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #2A3644);
}
.ek-herleitung-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  padding: 3px 0;
}
.ek-herleitung-name {
  color: var(--text-dim, #9AA7B4);
  /* ⚠ min-width:0 ist die Voraussetzung dafür, dass ein Flex-Kind unter seine
     Inhaltsbreite schrumpfen darf — ohne das schiebt ein langer Name die Zahl aus der
     Karte. Dieselbe Falle wie in der Kachelzeile des Tagebuchs. */
  min-width: 0;
}
.ek-herleitung-wert {
  color: var(--text, #E6EDF3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Die Zwischensumme und das Ergebnis werden durch eine Linie abgesetzt — so liest sich
   die Spalte als Rechnung und nicht als Aufzählung. */
.ek-herleitung-zwischen,
.ek-herleitung-ende {
  border-top: 1px solid var(--line, #2A3644);
  margin-top: 4px;
  padding-top: 7px;
}
.ek-herleitung-ende .ek-herleitung-name { color: var(--text, #E6EDF3); }
.ek-herleitung-ende .ek-herleitung-wert { font-size: 15px; }
.ek-herleitung-riegel { margin-top: 8px; font-size: 12px; color: var(--text-dim, #9AA7B4); }

/* ------------------------------------------------- Passt der Bedarf noch zum Körper?
   Der Abgleich zwischen der gespeicherten Zahl und dem, was heute herauskäme. Gleiche
   Bauform wie die Teamnote — eine abgesetzte Erklärung, keine zweite Karte.

   ⚠ Bewusst KEIN Warnrot: Ein veralteter Bedarf ist kein Fehler des Menschen, sondern
     der Beweis, dass er abgenommen hat. Der Akzent hebt die Zeile heraus, ohne sie
     anzuklagen — und er zieht die vom Nutzer gewählte Akzentfarbe, statt eine eigene
     zu setzen. */
.ek-abgleich {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #2A3644);
}
.ek-abgleich-kopf {
  font-size: 14px;
  color: var(--text, #E6EDF3);
  margin-bottom: 2px;
}
/* ⚠ Dieselbe Kontrastkorrektur wie bei .ek-teamnote: .uq-label steht auf --text-mute
   und käme auf --surface-2 nur auf 3,4:1. */
.ek-abgleich .uq-label { font-size: 12px; color: var(--text-dim, #9AA7B4); }
.ek-abgleich-riegel { margin-top: 4px; }
/* ⚠ width:auto — .btn bringt width:100% aus styles.css mit. Und drei Klassen für die
   Höhe, weil .btn.sm mit min-height:36px sonst gewinnt (0,2,0 schlägt 0,1,0); 44 px
   ist die Mindestgröße fürs Tippen am Handy. */
.ek-abgleich-knopf {
  width: auto;
  margin-top: 10px;
}
.ek-abgleich .btn.ek-abgleich-knopf { min-height: 44px; }

/* ------------------------------------------------- Was das Training beigetragen hat
   Gleiche Bauform wie die Teamnote — eine abgesetzte Erklärung unter der Bilanz, keine
   zweite Karte. Steht sie unter der Teamnote, greift deren border-top nicht doppelt:
   Beide setzen dieselbe Linie, und zwei Linien untereinander wären ein Kasten. */
/* ── Heute trainiert ──────────────────────────────────────────────────────────
   Löst .ek-trainingnote ab. Dort stand ein Erklärabsatz; hier stehen die Einheiten
   selbst, weil das die Frage ist, die sich jeden Tag neu stellt. */
.ek-training {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line, #2A3644);
}
.ek-training-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ek-training-titel {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-dim, #9AA7B4);
}
.ek-training-summe {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--good, #2FBF71);
  flex: none;
}

.ek-training-liste { display: grid; gap: 6px; }
/* Drei Spalten: Zeichen — Name — Zahl. Der Name bekommt minmax(0,1fr), sonst gibt ihm
   das Raster einen min-content-Boden und ein langer Titel schiebt die Zahl hinaus. */
.ek-training-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface, #131C25);
  border: 1px solid var(--line, #2A3644);
}
/* Das Sportzeichen in einer eigenen Scheibe — es trägt die Farbe, die die Zeile aus
   der Liste heraushebt. */
.ek-training-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--accent, #ff6a2f);
  background: rgba(255, 106, 47, .15);
  background: color-mix(in srgb, var(--accent, #ff6a2f) 15%, transparent);
}
.ek-training-ikon svg { display: block; }
.ek-training-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #E6EDF3);
}
.ek-training-kcal {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text, #E6EDF3);
  font-variant-numeric: tabular-nums;
}
/* ⚠ Dieselbe Kontrastkorrektur wie bei .ek-teamnote: --text-mute reicht auf
   --surface-2 nur für 3,4:1. Wer das entfernt, macht den Hinweis unlesbar. */
.ek-training .uq-label { font-size: 12px; color: var(--text-dim, #9AA7B4); }
.ek-training-mangel { margin-top: 8px; }

/* ── Das Sport-Band ───────────────────────────────────────────────────────────
   Sitzt zwischen Ring und Makro-Ringen, über die volle Kartenbreite.
   ⚠ Es lag zuerst als Chip in der Spalte NEBEN dem Ring — dort blieben nur 151 von
     315 Pixeln, und der Text brach mitten im Wort um. Wer es dorthin zurückschiebt,
     holt sich den Umbruch zurück. */
.ek-sportband {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(47, 191, 113, .13);
  background: color-mix(in srgb, var(--good, #2FBF71) 13%, transparent);
  border: 1px solid rgba(47, 191, 113, .38);
  border-color: color-mix(in srgb, var(--good, #2FBF71) 38%, transparent);
  box-shadow: 0 0 18px rgba(47, 191, 113, .17);
  box-shadow: 0 0 18px color-mix(in srgb, var(--good, #2FBF71) 17%, transparent);
}
/* Die Scheibe trägt das Zeichen der Sportart, die am meisten beigetragen hat. */
.ek-sportband-ikon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--good, #2FBF71);
  background: rgba(47, 191, 113, .18);
  background: color-mix(in srgb, var(--good, #2FBF71) 18%, transparent);
}
.ek-sportband-ikon svg { display: block; }
/* ⚠ min-width:0 gehört an das Textfeld, sonst bekommt es im Flex einen
   min-content-Boden und sprengt die Blase — dieselbe Falle wie bei 1fr im Grid. */
.ek-sportband-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ek-sportband-zahl {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: var(--good, #2FBF71);
  font-variant-numeric: tabular-nums;
}
.ek-sportband-wort {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim, #9AA7B4);
}

/* Die obere Zeile des Bands: Zeichen und Zahl nebeneinander. Sie war früher das ganze
   Band; seit der Legende darunter braucht sie eine eigene Ebene. */
.ek-sportband-haupt { display: flex; align-items: center; gap: 11px; }

/* ── Legende zum Ring ─────────────────────────────────────────────────────────
   Florian, 27.08.: „kann man leicht in den grünen rahmen auch rein schreiben wofür
   grün steht, wofür blau steht wofür schwarz steht“ — berechtigt: Der Ring
   bestand aus drei Farben, die niemand erklärt hat.

   ⚠⚠ Die Punkte MÜSSEN dieselben Farben tragen wie der Ring, und zwar über dieselben
      Variablen. Eine Legende, die eine Farbe nennt, die daneben anders aussieht, ist
      schlimmer als gar keine. Beim Gegessen-Punkt heißt das: derselbe Verlauf wie in
      der Ringfüllung, nicht nur --accent flach. */
.ek-sportband-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 9px;
  border-top: 1px solid rgba(47, 191, 113, .25);
  border-top-color: color-mix(in srgb, var(--good, #2FBF71) 25%, transparent);
}
.ek-legende-teil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-dim, #9AA7B4);
  white-space: nowrap;
}
.ek-legende-punkt {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
/* Derselbe Verlauf und dasselbe Leuchten wie die Ringfüllung. */
.ek-legende-gegessen {
  background: var(--accent, #4C8DFF);
  background: linear-gradient(135deg, var(--accent, #4C8DFF),
    color-mix(in srgb, var(--accent, #4C8DFF) 55%, #ffffff));
  box-shadow: 0 0 5px rgba(76, 141, 255, .55);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent, #4C8DFF) 55%, transparent);
}
.ek-legende-sport {
  background: var(--good, #2FBF71);
  box-shadow: 0 0 5px rgba(47, 191, 113, .5);
  box-shadow: 0 0 5px color-mix(in srgb, var(--good, #2FBF71) 50%, transparent);
}
/* Die freie Spur. ⚠ Sie trägt im Ring opacity .55 — der Punkt bekommt denselben Wert,
   sonst sieht er kräftiger aus als das, was er benennt. */
.ek-legende-frei { background: var(--line, #2A3644); opacity: .55; }
/* Die große Zahl neben dem Ring darf mitziehen — sie ist die zweite Hauptzahl. */
.ek-bilanz-neben .ek-kcal-zahl {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--text, #E6EDF3);
}

/* Der Freigabe-Schalter im Bedarfsblatt, abgesetzt vom Bedarf selbst: Er entscheidet
   etwas anderes als die vier Zahlen darüber. */
.ek-freigabe {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #2A3644);
}
.ek-freigabe-haken { min-height: 44px; align-items: flex-start; }
.ek-freigabe-haken span { line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .ek-tagpfeil { transition: none; }
}

/* ------------------------------------------------- Mahlzeit-Liste: Zeilen und Knöpfe */

/* Diese Klassen kommen aus ernaehrung.js und hatten bis zum 19.08. GAR KEINE Regeln —
   „+ Eintrag" und „Löschen" trugen die Standardoptik des Browsers und fielen aus dem
   Haus heraus. */

/* ── Die Eintragszeile ────────────────────────────────────────────────────────
   Seit dem 27.08. öffnet die ganze Zeile das Ändern-Blatt; nur der Löschknopf ist ein
   eigenes Ziel. Das Flex-Layout stand vorher als inline-style im Markup — es gehört
   hierher, sonst müsste jede Änderung an zwei Orten passieren. */
.uq-es-zeile { display: flex; align-items: center; gap: 4px; }

/* Der große Klickbereich: Name, Menge, Kalorien, Stift. Er sieht NICHT wie ein Knopf
   aus — die Zeile soll wirken wie zuvor, nur eben anfassbar.
   ⚠ text-align:left und font:inherit sind Pflicht: Ein <button> bringt sonst zentrierten
     Text und die Schrift des Systems mit, und die Liste liefe optisch auseinander. */
.uq-es-haupt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 4px 11px 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background .22s ease;
}
/* ⚠ min-width:0 gehört an das Textfeld, nicht nur an den Knopf: Ohne ihn bekommt ein
   langer Name im Flex einen min-content-Boden und schiebt die kcal-Zahl hinaus. */
.uq-es-text { flex: 1; min-width: 0; }
@media (hover: hover) {
  .uq-es-haupt:hover { background: rgba(255, 255, 255, .045); }
  .uq-es-haupt:hover .uq-es-stift { color: var(--text, #E8EDF2); }
}
.uq-es-haupt:focus-visible {
  outline: 2px solid var(--accent, #4C8DFF);
  outline-offset: -2px;
}
/* Der Stift ist nur noch ein Zeichen, kein Ziel — er sagt „hier lässt sich etwas
   ändern", ohne dass man ihn treffen müsste. */
.uq-es-stift {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  color: var(--text-mute, #6B7885);
  transition: color .22s ease;
}
.uq-es-stift svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .uq-es-haupt { transition: none; }
  .uq-es-stift { transition: none; }
}

.uq-es-zeile + .uq-es-zeile,
.uq-es-mzzeile + .uq-es-mzzeile,
.uq-es-gzeile + .uq-es-gzeile { border-top: 1px solid var(--line, #2A3644); }

/* Der Löschknopf steht in jeder Zeile und darf sie nicht dominieren: rund, ruhig,
   trotzdem mit 36 px Fläche gut zu treffen. */
.uq-es-zeile > button:not(.uq-es-haupt),
.uq-es-mzzeile > button,
.uq-es-gzeile > button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-mute, #6B7885);
  font: inherit;
  cursor: pointer;
  transition: color .22s ease, border-color .22s ease;
}
@media (hover: hover) {
  .uq-es-zeile > button:not(.uq-es-haupt):hover,
  .uq-es-mzzeile > button:hover,
  .uq-es-gzeile > button:hover {
    color: var(--accent, #ff6a2f);
    border-color: var(--line, #2A3644);
  }
}

/* ── Die Entfernen-Frage (28.08.2026) ─────────────────────────────────────────
   Der Papierkorb ist aus der Zeile verschwunden (Florian: „Papierkorb Button weg, wenn
   man Stück auf 0 stellt ist der Artikel entfernt … dann färbt sich das Feld zu wirklich
   entfernen?"). Wer den Runter-Pfeil bis auf 0 drückt, bekommt die Frage — und die Zeile
   färbt sich, weil sie als einzige in der Liste eine Antwort erwartet.

   ⚠ Getönt (`--bad-bg`, 14 % Rot), nicht knallrot: Der Eintrag ist noch da, es ist nichts
     passiert. Ein Warnrot würde einen Schaden behaupten, den es nicht gibt.
   ⚠⚠ Kein Rot AUF dem roten Grund — Hausregel. Frage und Zahl bleiben in normaler
      Textfarbe; rot ist allein der Löschknopf, und der steht auf seinem eigenen Rand. */
.uq-es-zeile.entfernen {
  background: var(--bad-bg, rgba(255, 69, 96, .14));
  border-radius: 10px;
  padding-right: 8px;
  margin: 2px 0;
}
/* Die Frage selbst: fett, damit sie gelesen wird, darunter klein der Name.
   ⚠ Ohne den Namen ist die Frage in einer Liste aus acht Zeilen nicht beantwortbar. */
.uq-es-frage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 4px 11px 8px;
  font-weight: 700;
}
.uq-es-frage .uq-label { font-weight: 500; }
/* Der Löschknopf trägt jetzt ein WORT statt eines Symbols — er beantwortet eine Frage,
   und ein Papierkorb-Zeichen allein tut das nicht.
   ⚠ Eigene Regel nötig, weil `.uq-es-zeile > button:not(.uq-es-haupt)` ihn sonst auf
     36 px Breite zwingt und der Text herausliefe. */
.uq-es-zeile.entfernen > .uq-es-weg {
  flex: 0 0 auto;
  width: auto;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--bad, #FF4560);
  background: none;
  color: var(--bad, #FF4560);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
@media (hover: hover) {
  .uq-es-zeile.entfernen > .uq-es-weg:hover { background: var(--bad, #FF4560); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .uq-es-zeile.entfernen > .uq-es-weg { transition: none; }
}

/* ── Der Zukunfts-Hinweis (28.08.2026) ────────────────────────────────────────
   Ein Döner lag fünf Tage in der Zukunft und überdauerte dort unbemerkt eine Woche.
   Der Kopf zeigte nur „So, 31.08.2026" — von einem beliebigen Vergangenheitstag nicht
   zu unterscheiden.

   ⚠⚠ Der Hinweis steht in den BLÄTTERN, nicht nur in der Tagesleiste. Beim Eintragen
      liegt das Blatt als eigenes Overlay über dem Schirm; die Leiste sieht dann niemand
      mehr — und genau dort passiert der Fehler.
   ⚠ Ruhiger Ton, kein Warnrot: Auf einem künftigen Tag einzutragen ist erlaubt (Meal
     Prep), nur selten gewollt. Rot behauptete einen Fehler, wo eine Auskunft reicht. */
.ek-zukunft {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--warn-bg, rgba(245, 182, 47, .12));
  color: var(--warn, #F5B62F);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.ek-zukunft svg { flex: 0 0 auto; display: block; }
/* In der Tagesleiste sitzt derselbe Gedanke enger — dort ist der Tag schon genannt. */
.ek-tag-mitte .ek-tag-zukunft { color: var(--warn, #F5B62F); font-weight: 700; }

/* „+ Eintrag": der Weg, um etwas hinzuzufügen — vollbreit am Fuß der Karte, gestrichelt
   umrandet (das unterscheidet ihn von den gefüllten Knöpfen, die etwas ABSCHICKEN) und
   mit 44 px hoch genug für den Daumen. */
.uq-es-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: var(--radius-sm, 12px);
  border: 1px dashed var(--line, #2A3644);
  background: none;
  color: var(--text-dim, #9AA7B4);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, transform .22s ease;
}
.uq-es-add svg { flex: 0 0 auto; }
@media (hover: hover) {
  .uq-es-add:hover {
    border-color: var(--accent, #ff6a2f);
    color: var(--accent, #ff6a2f);
    transform: translateY(-1px);
  }
}

/* Die Gerichte-Auswahl ist eine Liste von Knöpfen — sie soll wie eine Liste aussehen,
   nicht wie ein Formular voller Schaltflächen. */
.uq-es-gzeile[data-act="kcal-gericht-wahl"] {
  padding: 10px 4px;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Jeder Selektor einzeln: Ein Sammelselektor sieht für die Prüfung des Prüfstands nicht
   wie ein Gegenspieler aus — und was nicht geprüft wird, fällt beim nächsten Umbau raus. */
@media (prefers-reduced-motion: reduce) {
  .uq-es-add { transition: none; }
  .uq-es-zeile > button:not(.uq-es-haupt) { transition: none; }
  .uq-es-mzzeile > button { transition: none; }
  .uq-es-gzeile > button { transition: none; }
}

/* ---------------------------------------------------------------- Mahlzeit-Karte */

/* Der Kartenkopf ist ein Knopf: Antippen schlägt die Mahlzeit auf. Er sieht aus wie
   eine Zeile, nicht wie ein Knopf — die Karte selbst ist das Bedienelement, der Pfeil
   sagt, dass es weitergeht. */
.ek-mz-kopf,
.ek-mz-kopf-tot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 2px 0 6px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ek-mz-kopf-tot { cursor: default; }
.ek-mz-namen { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Auch hier: Nährwerte sind Zahlen, keine Etiketten — ohne Versalien und Sperrung
   bleibt „KH 58,4 g · Eiweiß 17,2 g · Fett 11,5 g" bei 375 px in einer Zeile. */
.ek-mz-makros,
.ek-zeile-makros {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.ek-mz-pfeil {
  flex: 0 0 auto;
  color: var(--text-mute, #6B7885);
  font-size: 20px;
  line-height: 1;
}
/* Nur mit echtem Zeigegerät — auf dem Touchscreen bliebe der Zustand kleben. */
@media (hover: hover) {
  .ek-mz-kopf:hover .ek-mz-pfeil { color: var(--accent, #ff6a2f); }
}

/* Die Nährwerte eines einzelnen Eintrags stehen unter seinem Namen, nicht daneben —
   in einer Zeile mit Name, Menge und kcal wäre bei 375 px kein Platz mehr. */
.ek-zeile-makros { display: block; margin-top: 2px; }

.ek-zurueck { margin-bottom: 10px; }


/* Die Live-Zeile unter dem Mengenfeld: „Ergibt 312 kcal · KH 40 g · …". Sie ändert
   sich beim Tippen und darf deshalb nicht wie ein grauer Kleingedruckter-Satz
   verschwinden — aber auch nicht schreien: eine Stufe heller als die Hinweise ringsum.
   ⚠ Bewusst OHNE Übergang: Eine Zahl, die sich beim Tippen weich einblendet, hinkt der
   Eingabe sichtbar hinterher (und bräuchte einen reduced-motion-Gegenspieler). */
.ek-vorschau {
  margin: 6px 0 10px;
  color: var(--text-dim, #9AA7B4);
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

/* ---------------------------------------------------------------- Rückweg ins Training

   Die Zeile ganz oben, wenn der Sprung ins Tagebuch aus einer Trainingseinheit kam. Sie
   sieht bewusst nicht aus wie ein Knopf der Tagesansicht, sondern wie ein Schild am Weg:
   Pfeil links, darunter der Name der Einheit — man soll auf einen Blick sehen, wohin sie
   führt, ohne sie zu lesen.
   ⚠ Sie trägt die Akzentfarbe nur am Rand. Ein voll eingefärbter Balken zöge mehr Blick
     auf sich als der Tagesring, um den es hier eigentlich geht. */
.ek-rueckweg {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 14px;
  text-align: left;
  border-radius: 14px;
  background: var(--surface-2, #1B2530);
  border: 1px solid var(--line, #2A3644);
  border-left: 3px solid var(--accent, #ff6a2f);
  color: var(--text, #E6EDF3);
  font: inherit;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ek-rueckweg-pfeil { font-size: 22px; line-height: 1; color: var(--accent, #ff6a2f); }
.ek-rueckweg-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ek-rueckweg-text b { font-size: 14.5px; }
/* ⚠ Der Name der Einheit kann lang sein („Grundlagenausdauer · 45 Min"). Er bricht nicht
     um, sondern endet mit Auslassungspunkten — sonst wüchse die Zeile über zwei Zeilen
     und schöbe den Tagesring unter die Falz. */
.ek-rueckweg-text small {
  font-size: 12px;
  color: var(--text-dim, #9AA7B4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Dieselbe Bewegung wie überall: 3 px nach oben, kräftigerer Schatten, Akzent am Rand. */
@media (hover: hover) {
  .ek-rueckweg:hover, .ek-rueckweg:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255, 106, 47, .5);
    border-color: color-mix(in srgb, var(--accent, #ff6a2f) 50%, transparent);
    /* ⚠ NACH `border-color`: Die Kurzform färbt alle vier Seiten und nähme dem linken
         Streifen sonst genau die Farbe, die ihn ausmacht. */
    border-left-color: var(--accent, #ff6a2f);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    outline: none;
  }
}
.ek-rueckweg:active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .ek-rueckweg { transition: none; }
  .ek-rueckweg:hover, .ek-rueckweg:focus-visible, .ek-rueckweg:active { transform: none; }
}

/* ---------------------------------------------------------------- Tagesnavigation */

/* Drei klar getrennte Felder: Pfeil — Tag — Pfeil. Die Pfeile sind runde Flächen mit
   eigenem Rand, damit sie nicht mit dem Datum verschwimmen; die Mitte trägt den Tag und,
   wenn es nicht heute ist, den Rückweg darunter. */
.ek-tagnav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 14px;
}
.ek-tagpfeil {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface-2, #1B2530);
  border: 1px solid var(--line, #2A3644);
  color: var(--text, #E6EDF3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .22s ease, transform .22s ease;
}
@media (hover: hover) {
  .ek-tagpfeil:hover { border-color: var(--accent, #ff6a2f); transform: translateY(-1px); }
}
.ek-tag-mitte {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}
button.ek-tag-mitte { cursor: pointer; }
.ek-tag-mitte b { font-size: 17px; letter-spacing: -.01em; }
.ek-tag-zurueck {
  font-size: 11.5px;
  color: var(--accent, #ff6a2f);
}
/* Der festgenagelte Tag (Verpflegung eines Trainings): dieselbe Zeile, aber ohne Pfeile
   und ohne Farbe — sie ist eine Auskunft, kein Knopf. `justify-content:center` ist nötig,
   weil die beiden Pfeile fehlen, die den Block sonst in die Mitte klemmen. */
.ek-tagnav-fest { justify-content: center; }
.ek-tag-fest { font-size: 11.5px; color: var(--text-dim, #9AA7B4); }
/* ⚠ Für „in der Zukunft" ist KEINE eigene Regel nötig: Die Zeile steht in `.ek-tag-mitte`,
     und dort färbt `.ek-tag-zukunft` schon (Zeile darüber). Eine zweite Regel wäre nur
     eine zweite Stelle, an der dieselbe Farbe auseinanderlaufen kann. */

/* Ein Eingabefeld zwischen den beiden Pfeilen — im Übernehmen-Blatt steht dort ein
   Datumswähler statt einer Beschriftung.
   ⚠ NICHT `.ek-tag-mitte` dafür nehmen: die Klasse setzt `background:none;border:0`
     und eine Spaltenrichtung, gedacht für zwei Textzeilen. Ein Feld darin verlöre
     seinen Rahmen. */
.ek-tag-feld {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.ek-fuss { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ek-fuss .btn { flex: 1 1 40%; }

/* ---------------------------------------------------------------- Kalender & Verlauf */

/* Ohne Monatspfeile bleibt die Mitte trotzdem mittig: Der Platzhalter hält die Breite
   eines Pfeils frei, sonst rutschte der Zeitraum bei jedem Moduswechsel zur Seite. */
.ek-tagpfeil-platz { flex: 0 0 auto; width: 44px; height: 44px; }

.ek-zeitwahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ek-zeitwahl .btn { flex: 1 1 0; white-space: nowrap; }
/* Der gewählte Zeitraum trägt den Akzent — als Zustand, nicht als Wertung. */
.ek-zeitwahl [aria-pressed="true"] {
  border: 1px solid var(--accent, #ff6a2f);
  color: var(--accent, #ff6a2f);
}

/* Kennzahlen: zwei Spalten, damit auch „insgesamt darunter" bei 375 px lesbar bleibt. */
.ek-kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}
.ek-kennzahl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ek-kennzahl b { font-size: 17px; letter-spacing: -.01em; }

.ek-kal-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
/* Sagt, was die Zahl in der Zelle ist — gegessen, nicht offen. */
.ek-kal-legende {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute, #6B7885);
  white-space: nowrap;
}
.ek-kal-gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.ek-kal-wtag {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-mute, #6B7885);
  padding-bottom: 2px;
}
.ek-kal-leer { min-height: 1px; }

/* Eine Tageszelle. Ohne Erfassung bleibt sie ruhig und leer — nicht erfasst ist etwas
   anderes als „0 kcal", und genau das muss man sehen können. */
.ek-kal-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  min-height: 46px;
  padding: 4px 2px 3px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-dim, #9AA7B4);
  font: inherit;
  text-align: center;
}
.ek-kal-tag.ek-kal-voll {
  background: var(--surface-2, #1B2530);
  border-color: var(--line, #2A3644);
  color: var(--text, #E6EDF3);
  cursor: pointer;
  transition: border-color .22s ease, transform .22s ease;
}
@media (hover: hover) {
  .ek-kal-tag.ek-kal-voll:hover {
    border-color: var(--accent, #ff6a2f);
    transform: translateY(-2px);
  }
}
/* Tage außerhalb des gewählten Zeitraums stehen im Raster, gehören aber nicht dazu. */
.ek-kal-fremd { opacity: .35; }
.ek-kal-zahl { font-size: 11px; line-height: 1.1; }
.ek-kal-kcal { font-size: 11.5px; font-weight: 700; line-height: 1.15; }
/* Der Balken ist die Anteilsanzeige der Zelle: wie viel des Tagesbedarfs an diesem Tag
   zusammenkam. Voll heißt voll, mehr zeigt er nicht — die Zahl darüber sagt die Wahrheit. */
.ek-kal-balken {
  display: block;
  width: 78%;
  height: 3px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--line, #2A3644);
  overflow: hidden;
}
.ek-kal-balken i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #ff6a2f);
}

@media (prefers-reduced-motion: reduce) {
  .ek-kal-tag.ek-kal-voll { transition: none; }
}

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

/* Essen/Getränk-Umschalter im Scan-Bestätigen-Blatt: Zustand über aria-pressed, damit
   die Auswahl auch ohne Neuzeichnen des Blatts sichtbar umspringt. */
.sheet [data-ek="art"][aria-pressed="true"] {
  border: 1px solid var(--accent, #ff6a2f);
  color: var(--accent, #ff6a2f);
}

/* Trefferliste der Essenssuche: eine Zeile je Produkt, Marke klein darunter, rechts die
   Kalorien je 100 g/ml — die einzige Zahl, mit der sich zwei Treffer vergleichen lassen. */
/* Der Trefferraum wird beim Tippen laufend ausgetauscht. Eine Mindesthöhe hält das
   Blatt ruhig, statt es bei jedem Buchstaben springen zu lassen. */
#ek-treffer-raum { min-height: 72px; }
/* Der Hinweis im Trefferraum ist ein Satz, kein Etikett — .uq-label-Versalien wären
   hier Geschrei. */
.ek-such-hinweis {
  display: block;
  padding: 14px 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.ek-treffer {
  margin-top: 12px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ek-treffer-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line, #2A3644);
  color: var(--text, #E6EDF3);
  font: inherit;
  cursor: pointer;
}
.ek-treffer-zeile:last-child { border-bottom: 0; }
/* Die Namensspalte: eine Zeile Name, darunter Herkunft bzw. Marke.
   ⚠ Produktnamen aus der Online-Datenbank sind lang („Prepmymeal Rinderbolognese mit
   Linsenfusilli") und machten die Zeile dreizeilig — daneben stand die zweizeilige Zahl
   und die Liste wirkte ausgefranst. Zwei Zeilen für den Namen, eine für die Herkunft;
   damit ist JEDE Trefferzeile gleich hoch. Der volle Name steht danach in der
   Überschrift des Mengen-Blattes, es geht also nichts verloren. */
.ek-treffer-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* ⚠⚠ EINE Zeile je Name, mit Auslassungspunkten. Zwei Zeilen wären lesbarer für den
   einzelnen langen Namen, machen die LISTE aber unruhig: Gemessen am 29.08.2026 war
   die Zeile mit „Prepmymeal Rinderbolognese mit Linsenfusilli" 84 px hoch, alle
   anderen 61 — eine Liste mit springender Zeilenhöhe liest sich nicht als Spalte.
   Der volle Name geht nicht verloren: Er steht im `title` der Zeile und danach in der
   Überschrift des Mengen-Blattes. */
.ek-treffer-titel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ek-treffer-name > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Das Herkunftszeichen: Korb = Vorrat im Haus, Wolke = Online-Datenbank.
   Bewusst klein und ruhig — es ist eine Auskunft, keine Wertung. Der Vorrat trägt den
   Akzent, weil seine Zahlen die verlässlicheren sind: Sie gelten für die Ware selbst,
   nicht für irgendeine Packung, in der sie vorkommt. */
.ek-treffer-quelle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--surface-2, #1B2530);
  color: var(--text-mute, #6B7885);
}
.ek-treffer-zeile.ek-treffer-haus .ek-treffer-quelle { color: var(--accent, #ff6a2f); }

/* Der Nachsatz unter den sofort gezeigten Vorratstreffern: „es wird noch gesucht" bzw.
   „die Datenbank antwortet nicht". Er steht UNTER der Liste, nicht an ihrer Stelle —
   ein Ausfall darf nicht wegnehmen, was schon dasteht. */
.ek-such-nachlauf {
  padding: 8px 4px 2px;
  border-top: 1px solid var(--line, #2A3644);
  font-size: 12px;
}
/* ⚠ Der Name darf nicht schmaler werden, wenn das Zeichen fehlt: `ikon` kann eine
   Attrappe sein, die "" liefert (so arbeitet der Prüfstand). Deshalb steht die Breite
   am Zeichen und nicht als Einrückung an der Zeile. */
/* ⚠⚠ DIE ZAHLENSPALTE HAT EINE FESTE BREITE — sonst zappelt sie. Am 29.08.2026 in der
   Live-App auf 375 px nachgemessen: Die rechten Kanten standen zwar alle bei 297 px,
   die LINKEN aber bei 238, 247 und 256 — je nachdem, ob dort „8 kcal", „64 kcal" oder
   „130 kcal" stand. Untereinander sah das aus wie eine ausgefranste Kante, und weil die
   Einheit („/100 ml" gegen „/100 g") noch einmal anders breit ist, franste die zweite
   Zeile eigenständig aus.

   Drei Dinge zusammen machen die Spalte sauber:
   1. `min-width` reserviert die Breite der längsten vorkommenden Zahl,
   2. `text-align: right` legt beide Zeilen an dieselbe rechte Kante,
   3. `tabular-nums` gibt jeder Ziffer dieselbe Laufweite — ohne das wäre eine 1
      schmaler als eine 8 und die Spalte wackelte trotz fester Breite.

   ⚠ Die Breite ist an der Einheitszeile bemessen, nicht an der Zahl: „/100 ml" ist
   breiter als jede dreistellige kcal-Angabe und bestimmt damit das Maß. */
.ek-treffer-zeile .uq-zahl {
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 62px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  /* ⚠⚠ DIESELBE INNERE BAUFORM WIE DIE NAMENSSPALTE — sonst sitzen die beiden Spalten
     nicht auf einer Höhe. Am 29.08.2026 nachgemessen: Der Namensblock war 40,1 px hoch
     (22,4 Titel + 2 Abstand + 15,8 Untertitel), der Zahlenblock nur 37,1 (22,4 + 14,7,
     ohne Abstand). Bei `align-items: center` schob das die Zahl um 2 px nach unten —
     die erste Zeile links und die erste Zeile rechts standen nicht auf einer Linie.
     Gleicher Abstand und gleiche Zeilenhöhe machen beide Blöcke exakt gleich hoch. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ek-treffer-zeile .uq-zahl small {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-mute, #6B7885);
  font-variant-numeric: tabular-nums;
}
/* Der Untertitel der Namensspalte trägt dieselbe Zeilenhöhe — die beiden zweiten
   Zeilen sollen ebenfalls auf einer Linie liegen, nicht nur die ersten. */
.ek-treffer-name > small { font-size: 10.5px; line-height: 1.5; }
@media (hover: hover) {
  .ek-treffer-zeile:hover { color: var(--accent, #ff6a2f); }
}

/* ⚠ 44 px Mindesthöhe. Das Label war 24 px hoch, das Kästchen 18 — und es ist die
   einzige Stelle des Handeintrags, an der eine Fehlbedienung bleibt: Ein versehentlich
   gemerktes Gericht steht danach in der Gerichteliste. Es sitzt außerdem direkt über
   dem grünen „Eintragen". Die Schrift bleibt an derselben Stelle stehen, das Label ist
   ohnehin ein Flexcontainer mit align-items:center. */
.ek-haken {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 6px 0 4px;
  padding: 0 4px;
  font-size: 14px;
  color: var(--text, #E6EDF3);
  cursor: pointer;
}
.ek-haken input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #ff6a2f);
}

/* Der jüngste Gewichtseintrag im Blatt — abgesetzt, damit Speichern und Löschen nicht
   wie zwei gleichrangige Wege aussehen. */
.ek-juengster {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line, #2A3644);
  font-size: 13px;
  color: var(--text-dim, #9AA7B4);
}

/* Ruhige Hinweis-Karte (keine Verbindung): keine Extra-Optik nötig, nur etwas Luft. */
.ek-hinweis { margin-top: 4px; }

/* ---------------------------------------------------------------- Vollbild-Overlays */

/* Kamera und Bildverlauf liegen ÜBER allem, auch über einem offenen Blatt
   (.sheet-backdrop hat z-index 50) — deshalb 60. Eigener Hintergrund aus --bg,
   damit der Nacht-Rot-Modus auch hier gilt. */
.ek-vollbild {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg, #0B0F14);
  color: var(--text, #E6EDF3);
  animation: ek-einblenden .22s ease;
}
@keyframes ek-einblenden {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ek-vollbild-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line, #2A3644);
}
.ek-vollbild-kopf b {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  letter-spacing: -.01em;
}

/* Schließen-Knopf im Muster von .sheet-x — nur eben im Overlay-Kopf statt schwebend. */
.ek-x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface-2, #18202B);
  border: 1px solid var(--line, #2A3644);
  color: var(--text, #E6EDF3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ek-vollbild-inhalt {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------- Kamera */

/* Der Sucher soll groß sein, aber Pillen und Auslöser müssen ohne Scrollen erreichbar
   bleiben — deshalb eine Deckelhöhe statt der vollen Fläche. */
.ek-vollbild #kam-video {
  max-height: 62vh;
  background: #000;
}

/* Gespiegelt wird NUR die Vorschau der Frontkamera (Selfie-Gefühl: rechts bleibt
   rechts). Das gespeicherte Foto entsteht aus drawImage und bleibt ungespiegelt. */
#kam-video.ek-gespiegelt { transform: scaleX(-1); }

/* Die Countdown-Zahl pulst je Sekunde einmal kurz auf. Bei „Bewegung reduzieren"
   entfällt nur der Puls — die Zahl selbst wechselt weiter (setzt app-seitig der
   Text-Inhalt, nicht die Animation). */
#kam-zahl.ek-tick { animation: ek-zahl .9s ease; }
@keyframes ek-zahl {
  from { transform: scale(1.35); opacity: .35; }
  to { transform: scale(1); opacity: 1; }
}

/* Die Vorschau des aufgenommenen Bilds.
 *
 * ⚠⚠ HIESS BIS ZUM 29.08.2026 EBENFALLS .ek-vorschau — genau wie die Live-Rechnung
 *   unter dem Mengenfeld (Zeile 760). Gleiche Spezifität, diese Regel steht später,
 *   also gewann sie: Der Textabsatz „Ergibt 377 kcal · KH 79 g …" bekam
 *   `background:#000` und lag in VIER Blättern (Mengengriff, Gericht, Scan-Menge,
 *   Änderung) auf einem pechschwarzen Balken. Wer hier wieder umbenennt, prüft
 *   zuerst nach, wie viele Bedeutungen der neue Name schon hat. */
.ek-fotovorschau {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
  display: block;
}

/* ---------------------------------------------------------------- Bildverlauf */

/* Die Bühne des Bildverlaufs. ⚠ Sie kam am 31.08.2026 dazu, weil ein ausgerichtetes
   Bild vergrößert wird: Ohne overflow:hidden liefe es über den Rand und legte sich über
   Regler und Abspielen-Knopf darunter. Feste 3:4-Form, damit alle Bilder gleich sitzen —
   nur so heißt „an derselben Stelle" auch wirklich dieselbe Stelle. */
.uq-koerper-buehne {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  margin: 0 auto;
}
.uq-koerper-buehne #kf-bild { width: 100%; height: 100%; display: block; }

.ek-lade {
  text-align: center;
  color: var(--text-mute, #6B7885);
  font-size: 13px;
  margin-top: 10px;
}

/* Der Slider in Akzentfarbe — folgt damit auch dem Nacht-Rot-Modus. */
.ek-vollbild #kf-slider { accent-color: var(--accent, #ff6a2f); }

/* --------------------------------------------- Favoriten und „Zuletzt" (27.08.2026) */

/* Eine Griffzeile besteht aus ZWEI Knöpfen nebeneinander: links die ganze Zeile
   (nimmt den Griff), rechts der Stern. Sie liegen als Geschwister im selben <div> —
   ein <button> im <button> wäre ungültiges HTML, der Browser bräche den äußeren auf
   und die halbe Zeile fiele aus der Liste (Lehre der Feedkarte vom 27.08.2026). */
.ek-griff { padding: 2px 0; }

/* ⚠ Muss NACH `.uq-es-gzeile > button` stehen und höher wiegen: Jene Regel macht aus
   JEDEM Knopf einer Gerichtszeile einen runden 36er — die Zeile selbst wäre damit auf
   36 px zusammengequetscht. Zwei Klassen schlagen Klasse+Element. */
.ek-griff > .ek-griff-nehmen {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 44px;
  border-radius: 10px;
  justify-content: flex-start;
  color: inherit;
  padding: 4px 2px;
}

/* Der Favoritenstern hatte gar keine eigene Größenregel und erbte die 36×36 von
   `.uq-es-gzeile > button`.
   ⚠⚠ 36 px sind zu wenig, und hier besonders: Der Stern sitzt mit 8 px Abstand
     NEBEN dem 44 px hohen Zeilenknopf — wer danebentippt, öffnet die Zeile, statt
     den Favoriten zu setzen. Im Wege-Blatt mit zwanzig Zeilen waren das 20 zu kleine
     Ziele auf einmal (gemessen 29.08.2026).
   ⚠ Die FLÄCHE wächst auf 44, das Bild bleibt bei 18 px — ein größeres Sternzeichen
     würde die Zeile optisch dominieren.
   ⚠ Zwei Klassen, sonst gewinnt `.uq-es-gzeile > button` (Klasse + Element). */
.ek-griff > .ek-stern,
.uq-es-gzeile > .ek-stern {
  width: 44px;
  height: 44px;
}

/* ⚠ Produktnamen aus OpenFoodFacts sind lang („Prepmymeal Rinderbolognese mit
   Linsenfusilli"). Ungeklemmt wuchs eine einzige Zeile auf 114 px (gemessen am
   27.08.2026, 375 px breit) — bei zwanzig Griffen scrollt man an der Liste vorbei,
   statt sie zu überblicken. Zwei Zeilen für den Namen, eine für die Herkunft; der
   volle Name steht danach im Mengen-Blatt in der Überschrift. */
.ek-griff-text { flex: 1; min-width: 0; }
.ek-griff-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ek-griff-unten {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Stern trägt den Zustand: leer = noch nicht gemerkt, gefüllt und in Akzentfarbe =
   Favorit. Gefüllt wird über CSS, nicht über ein zweites Symbol — der Satz kennt nur
   eine Sternform, und zwei Formen liefen irgendwann auseinander. */
.ek-stern-an { color: var(--accent, #ff6a2f); }
.ek-stern-an svg { fill: currentColor; }
@media (hover: hover) {
  .ek-stern:hover { color: var(--accent, #ff6a2f); }
}

/* Der Stern im Änderungsblatt ist ein breiter Knopf mit Wort: Er steht allein zwischen
   Eingabefeldern, und ein Symbol ohne Beschriftung müsste dort geraten werden. Zeichen
   und Wort liegen nebeneinander, deshalb flex statt der Textzentrierung von .btn. */
.ek-favknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Gesetzt: derselbe gefüllte Stern in Akzentfarbe wie in den Listen (.ek-stern-an
   trägt die Füllung), dazu ein Rand, der den Zustand auch ohne Farbe zeigt.
   ⚠ ZWEI Klassen nötig: `.btn.secondary` in styles.css wiegt ebenso viel und setzt
   eine eigene Schriftfarbe — mit `.ek-stern-an` allein bliebe der Stern grau, weil
   `fill: currentColor` dann die graue Schriftfarbe erbt (im Browser nachgemessen). */
.ek-favknopf.ek-stern-an {
  color: var(--accent, #ff6a2f);
  border-color: var(--accent, #ff6a2f);
}

/* Die Listen in den Blättern bekommen einen eigenen Bildlauf: Zwanzig Griffe passen
   auf kein Handy, und ein Blatt, das über den Bildschirmrand hinauswächst, verliert
   seinen Schließen-Knopf. */
.ek-griffliste {
  max-height: 46vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------- Die Wege ins Tagebuch (29.08.2026)

   Vorher standen hier fünf vollbreite Wortknöpfe untereinander: gleiche Farbe, gleiche
   Höhe, gleiche Form, nur anderer Text. Im Browser gemessen (375 px): 290 px für die
   fünf Knöpfe, Blatthöhe 823 px — und weil `.sheet` bei 86 vh abschneidet, lagen die
   letzten beiden Wege beim Öffnen unter der Kante. Als Kachelraster sind es rund
   190 px, alle fünf sichtbar, und sie unterscheiden sich ohne Lesen.

   ⚠⚠ EIGENER CONTAINER, KEIN .btn-row. `.btn-row .btn` erzwingt `min-width:130px`
     (styles.css:390) — drei Kacheln nebeneinander wären auf 375 px unmöglich, die
     Reihe bräche um und wir hätten die Balken zurück.
   ⚠⚠ Und NICHT in .uq-es-zeile/-mzzeile/-gzeile hängen: dieser Sammelselektor
     (weiter oben in dieser Datei) drückt jeden Knopf darin stumm auf 36×36 und rund. */
.ek-wege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0 4px;
}
/* Bleibt in der letzten Reihe genau eine Kachel übrig, nimmt sie die volle Breite —
   eine einzelne Kachel neben zwei Löchern sieht aus wie ein Fehler. */
.ek-wege > .ek-weg:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.ek-wege > .ek-weg:last-child:nth-child(3n + 2) { grid-column: span 2; }

.ek-weg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 84px;
  padding: 12px 6px 10px;
  border-radius: 14px;
  background: var(--surface-2, #1B2530);
  border: 1px solid var(--line, #2A3644);
  color: var(--text, #E6EDF3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  /* Die Bewegung des Hauses: 3 px hoch, kräftigerer Schatten, ein Hauch Akzent. */
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ek-weg-bild {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-3, #22303D);
  color: var(--accent, #ff6a2f);
  flex: 0 0 auto;
}
.ek-weg-wort {
  display: block;
  /* Zwei Zeilen sind genug: „Anderer Tag" bricht einmal, mehr fasst die Kachel nicht.
     Die volle Beschriftung steht ohnehin im aria-label. */
  overflow: hidden;
  text-overflow: ellipsis;
  hyphens: auto;
}
@media (hover: hover) {
  .ek-weg:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
    border-color: var(--accent, #ff6a2f);
  }
}
.ek-weg:active { transform: scale(.97); }

/* Der Barcode ist der Weg, den Florian ausdrücklich als BILD wollte — er trägt
   deshalb als einziger den Akzent schon im Ruhezustand. Nicht als Wertung, sondern
   als Wegweiser: Er ist der schnellste Weg für alles mit Packung.
   ⚠ Zwei Klassen, damit die Regel die Grundfassung sicher schlägt. */
.ek-weg.ek-weg-stark {
  border-color: color-mix(in srgb, var(--accent, #ff6a2f) 55%, var(--line, #2A3644));
}
.ek-weg.ek-weg-stark .ek-weg-bild {
  background: color-mix(in srgb, var(--accent, #ff6a2f) 16%, var(--surface-3, #22303D));
}
/* ⚠ color-mix braucht überall einen Rückfall in der Zeile davor — sonst steht dort
   im Zweifel Schwarz statt einer Farbe (dieselbe Falle wie bei den Ringen). Die
   Grundfassungen oben liefern ihn: --line bzw. --surface-3 stehen bereits. */

@media (prefers-reduced-motion: reduce) {
  .ek-weg { transition: none; }
  .ek-weg:hover { transform: none; }
  .ek-weg:active { transform: none; }
}

/* ---------------------------------------------------------------- Bewegung reduzieren */

/* Jede Animation dieser Datei hat hier ihren Gegenspieler. */
@media (prefers-reduced-motion: reduce) {
  .ek-vollbild { animation: none; }
  #kam-zahl.ek-tick { animation: none; }
}

/* Der Mengengriff LINKS in der Eintragszeile (28.08.2026): Pfeil hoch, Zahl, Pfeil runter.
   ⚠ SENKRECHT statt nebeneinander — so braucht er ein Drittel der Breite, und der Name
     bekommt sie (Florian: „So gewinnt man mehr in der Breite bei dem Rest").
   ⚠ Eigene Knöpfe NEBEN dem Zeilenknopf — verschachtelte Knöpfe sind ungültiges HTML.
   ⚠ Feste Breite, sonst wandert der Name bei jedem Tipp. */
.uq-es-griff {
  flex: 0 0 auto; width: 38px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 1px 0;
}
.uq-es-stufe {
  width: 100%; height: 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--accent); line-height: 1;
  display: grid; place-items: center;
  transition: background .16s ease;
}
.uq-es-stufe svg { display: block; }
.uq-es-stufe:hover { background: var(--surface-3); }
.uq-es-stufe.leer { cursor: default; }
/* Im Griff steht die ANZAHL — die Menge steht daneben im Zeilenknopf. */
.uq-es-anzahl {
  font-size: 15px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.uq-es-menge {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums; margin-right: 10px; white-space: nowrap;
}

/* Der Mengengriff im Änderungsblatt: − Menge + */
.ek-mengengriff {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 12px; padding: 8px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.ek-mengengriff span { font-weight: 800; font-variant-numeric: tabular-nums; }
.ek-mengengriff .btn { min-width: 44px; font-size: 19px; font-weight: 800; }

/* „Weitere Werte deiner Waage" — zusammengeklappt, damit sie sich nicht aufdrängen. */
.ek-mehr { margin: 4px 0 10px; }
.ek-mehr > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--accent);
  padding: 8px 2px; list-style: none;
}
.ek-mehr > summary::-webkit-details-marker { display: none; }
.ek-mehr > summary::before { content: "▸ "; }
.ek-mehr[open] > summary::before { content: "▾ "; }

@media (prefers-reduced-motion: reduce) {
  /* ⚠ Auch ein Farbwechsel ist Bewegung — der Prüfstand besteht zu Recht darauf. */
  .uq-es-stufe { transition: none; }
}

/* ================================================================ Foto-Archiv
 *
 * „Die Fortschrittfotos kann man alle einsehen mit Datum im Archiv" (Florian,
 * 31.08.2026). Raster im Vollbild, jüngstes zuerst, jedes Feld mit seinem Datum.
 *
 * ⚠ auto-fill statt fester Spaltenzahl: Auf dem Handy stehen zwei Felder nebeneinander,
 *   auf dem Desktop fünf — ohne eigene Abfragepunkte.
 */
.ek-archiv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.ek-archiv-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line, #2A3644);
  border-radius: 14px;
  background: var(--surface, #12181F);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  /* Das Anheben unter der Maus ist Hausregel (3 px, kräftigerer Schatten, blauer Hauch,
     0,22 s) — eine Kachel, die sich nicht rührt, wirkt tot. */
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover: hover) {
  .ek-archiv-feld:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
    border-color: color-mix(in srgb, var(--accent-2, #4C8DFF) 55%, var(--line, #2A3644));
  }
}
.ek-archiv-feld:focus-visible {
  outline: 2px solid var(--accent, #ff6a2f);
  outline-offset: 2px;
}

/* Der Rahmen hält das Seitenverhältnis fest: Ausgerichtete Bilder sitzen nur dann alle
   gleich, wenn auch ihr Rahmen überall dieselbe Form hat. 3:4 ist das Hochformat, in
   dem ein Mensch in ganzer Höhe steht. */
.ek-archiv-rahmen {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}
.ek-archiv-rahmen img {
  width: 100%;
  height: 100%;
  display: block;
  /* object-fit und transform setzt das Markup je Bild: contain, solange nichts
     ausgerichtet ist — cover, sobald es sitzt. */
}
/* Die Marke für ein noch nicht ausgerichtetes Bild. Klein und ruhig: Es ist kein
   Fehler, nur ein Hinweis, dass hier noch etwas möglich wäre. */
.ek-archiv-schief {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  line-height: 1;
}
.ek-archiv-datum {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ek-archiv-unten {
  font-size: 12px;
  color: var(--text-dim, #9AA7B4);
}

/* Das einzelne Bild im Archiv — dieselbe Rahmenform wie die Kachel, nur groß. */
.ek-archiv-gross {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  max-height: 58vh;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}
.ek-archiv-gross img { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- Ausrichten
 *
 * ⚠ `touch-action: none` ist Pflicht: Ohne sie scrollt der Browser die Seite, sobald
 *   der Finger sich bewegt, und das Bild bleibt stehen. Die Zeigerhorcher bekämen die
 *   Bewegung nie zu sehen.
 */
.ek-ausr-rahmen {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  aspect-ratio: 3 / 4;
  max-height: 52vh;
  margin: 0 auto;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.ek-ausr-rahmen:active { cursor: grabbing; }
.ek-ausr-rahmen img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;   /* der Finger gehört dem Rahmen, nicht dem Bild */
}
/* Der gestrichelte Umriss über dem Bild zeigt, WO der Körper sitzen soll. Er darf das
   Bild führen, nicht verdecken — deshalb nur Linien, keine Flächen. */
.ek-ausr-hilfe {
  position: absolute;
  inset: 8% 18%;
  pointer-events: none;
  color: rgba(255, 255, 255, .62);
}
.ek-vollbild #ek-ausr-zoom { accent-color: var(--accent, #ff6a2f); }

@media (prefers-reduced-motion: reduce) {
  /* ⚠ Der Prüfstand verlangt zu jeder transition einen Gegenspieler — und er hat
     recht: Auch ein Anheben ist Bewegung. */
  .ek-archiv-feld { transition: none; }
  @media (hover: hover) {
    .ek-archiv-feld:hover { transform: none; }
  }
}