/*
 * Module an die neue Linie angeglichen (App 2. Version, Paket P12, 18.10.2026): Stressmaster,
 * Ernaehrungstagebuch, Training. Vorlagen 07_Ernaehrungstagebuch.md, 08_Stressmaster.md,
 * 09_Training.md und 00_Uebergreifend.md.
 *
 * Der Modul-Kopf ist die Kopf-Komponente .hj-kopf (v1-extra.css): klebt mit top = -Einfahrweg,
 * app.js (modulKopfNeu, kopfScroll) setzt --einfahrweg, --k und --kr. Hier nur, was die Module
 * dazu brauchen: Farbpaare, Titelzeile mit kleinem Zurueck, Zahlen links, Ring rechts, Tagessaeulen,
 * Reiter mit Symbol, der schmale Kopf der Unterseiten und das Vollbild der Timer.
 *
 * Farben nur ueber Tokens bzw. die Farbpaare der Bereiche (wie fahrplan-seite.css). Weiss steht nur
 * auf Farbe. Keine fremde Schrift, kein CDN.
 */

/* ---------------------------------------------------------------- Farbpaare (dunkel -> hell) */
[data-mk-farbe="stress"]     { --mk-dunkel:#171A5E; --mk-hell:#4A4C9E; }
[data-mk-farbe="ernaehrung"] { --mk-dunkel:#17657E; --mk-hell:#5DBB72; }
[data-mk-farbe="training"]   { --mk-dunkel:#10155F; --mk-hell:#2E7299; }
[data-mk-farbe] { --kopf-grad:linear-gradient(150deg, var(--mk-dunkel) 0%, var(--mk-hell) 100%); }

/* ---------------------------------------------------------------- Modul-Kopf */
.hj-kopf.hj-mkopf { margin:-8px -20px 12px; }
@media (min-width: 900px) { .hj-kopf.hj-mkopf { margin:0 0 12px; border-radius:32px; } }
.hj-mk-titelzeile { display:flex; align-items:center; gap:6px; min-height:34px; }
.hj-mk-zurueck { flex:none; width:32px; height:32px; margin-left:-8px; display:grid; place-items:center; border:0; border-radius:50%;
  background:transparent; color:inherit; cursor:pointer; }
.hj-mk-zurueck .hji { width:22px; height:22px; }
.hj-mk-zurueck:focus-visible { outline:2px solid #fff; outline-offset:1px; }
.hj-mk-titel { margin:0; font-size:20px; font-weight:800; letter-spacing:-.3px; line-height:1.2; color:#fff; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hj-mk-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; margin-top:6px; }
.hj-mk-links { min-width:0; }
.hj-mk-zahl { font-size:32px; font-weight:800; letter-spacing:-1px; line-height:1.05; font-variant-numeric:tabular-nums; }
.hj-mk-zahl small { font-size:15px; font-weight:700; letter-spacing:0; margin-left:0; opacity:.88; }  /* Abstand: echtes Leerzeichen davor („3 von 4“, Texte 54) */
.hj-mk-zahl.klein { font-size:21px; letter-spacing:-.4px; }
.hj-mk-unter { font-size:13px; font-weight:600; opacity:.85; margin-top:4px; }
.hj-mk-ring { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hj-mk-ringtext { text-align:right; line-height:1.25; }
.hj-mk-ringtext b { display:block; font-size:13px; font-weight:800; }
.hj-mk-ringtext span { display:block; font-size:11px; font-weight:600; opacity:.78; margin-top:2px; white-space:nowrap; }
.hj-mk-ringfeld { position:relative; width:60px; height:60px; flex:0 0 auto; }
.hj-mk-ringfeld > svg { position:absolute; inset:0; width:60px; height:60px; transform:rotate(-90deg); }
.hj-mk-ringfeld .g { fill:none; stroke:rgba(255,255,255,.24); stroke-width:6; }
.hj-mk-ringfeld .v { fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; }
.hj-mk-ringmitte { position:absolute; inset:0; display:grid; place-items:center; }
.hj-mk-ringmitte .hji { width:22px; height:22px; }

/* Tagessaeulen Montag bis Sonntag (wie die Wochenleiste im Fahrplan) */
.hj-mk-woche { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px; }
.hj-mk-wtag { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hj-mk-saeule { position:relative; width:100%; height:40px; border-radius:10px; background:rgba(255,255,255,.18); overflow:hidden; }
.hj-mk-saeule i { position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,.9); }
.hj-mk-wtag span { font-size:12px; font-weight:700; opacity:.75; }
.hj-mk-wtag.heute .hj-mk-saeule { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75); }
.hj-mk-wtag.heute span { opacity:1; font-weight:800; }
.hj-mk-wtag.zukunft .hj-mk-saeule { background:rgba(255,255,255,.08); }
.hj-mk-wtag.zukunft span { opacity:.55; }

/* Reiter mit Symbol. Offen: Symbol und Wort. Eingefahren (--kr gegen 0): gleich breite, abgerundete
   Rechtecke nur mit Symbol, der Punkt fuer Offenes sitzt in der Ecke. */
.hj-mk-reiter [role="tab"] { min-height:calc(34px + 8px * var(--kr)); gap:calc(6px * var(--kr)); }
.hj-mk-reiter .hji { width:calc(20px - 3px * var(--kr)); height:calc(20px - 3px * var(--kr)); flex:none; }
.hj-mk-reiter .hj-r__wort { display:inline-block; max-width:calc(140px * var(--kr)); opacity:var(--kr); }
.hj-mk-reiter [role="tab"] { padding:0 4px; font-size:12.5px; }

/* Kurze Reiter bekommen unten Luft, damit der Kopf auch dort eingefahren bleiben kann (Reiterregel). */
.hj-mk-inhalt { min-height:100vh; min-height:100dvh; }
@supports (height:100dvh) { .hj-mk-inhalt { min-height:100dvh; } }

/* ---------------------------------------------------------------- Schmaler Kopf (Unterseiten) */
.hj-skopf { position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:6px; min-height:52px;
  margin:-8px -20px 12px; padding:8px 16px 8px 12px; color:#fff; background:var(--kopf-grad);
  border-radius:0 0 22px 22px; box-shadow:0 8px 20px rgba(16,21,95,.14); }
.hjm-app.imp-on .hj-skopf { top:38px; }
.hj-skopf .hji { --ic-acc:currentColor; }
.hj-skopf__titel { margin:0; flex:1 1 auto; min-width:0; font-size:17px; font-weight:800; line-height:1.25; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hj-skopf__rechts { flex:none; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
@media (min-width: 900px) { .hj-skopf { margin:0 0 12px; border-radius:22px; } }

/* ---------------------------------------------------------------- Vollbild (laufender Timer)
   Fabio 18.10.: waehrend der Uebung keine Leiste oben, keine unten, kein Modul-Kopf. Oben links nur
   der Zurueck-Pfeil der Uebung (fragt nach). */
.hjm-frame[data-vollbild] .apphead,
.hjm-frame[data-vollbild] .tabbar,
.hjm-frame[data-vollbild] .hj-skopf,
.hjm-frame[data-vollbild] .hj-mkopf { display:none !important; }
.hjm-frame[data-vollbild] .app { padding-bottom:0; }

/* ================================================================ Stressmaster (08_Stressmaster.md) */
/* Lauf im Vollbild: oben links nur der Zurueck-Pfeil, daneben der Name, rechts die Restzeit. */
.ae-uleiste { align-items:center; gap:10px; }
.ae-uleistename { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ae-vollzurueck { flex:none; width:36px; height:36px; margin-left:-6px; display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.ae-vollzurueck .hji { width:22px; height:22px; --ic-acc:currentColor; }
.hjm-frame[data-vollbild] .ae-uebung.dunkel { min-height:100vh; min-height:100dvh; padding-top:env(safe-area-inset-top); }
@supports (height:100dvh) { .hjm-frame[data-vollbild] .ae-uebung.dunkel { min-height:100dvh; } }
.hjm-frame[data-vollbild] .ae-ufuss { bottom:0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }

/* Auswertung: vier Reiter mit Symbol, alle sichtbar (auch „Hebel") */
.sm-areiter { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin:0 0 14px; }
.sm-areiter [role="tab"] { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:8px 4px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.sm-areiter [role="tab"] span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sm-areiter [role="tab"] .hji { width:20px; height:20px; }
.sm-areiter [role="tab"][aria-selected="true"] { background:var(--tab-on); color:var(--tab-on-ink); border-color:var(--tab-on); --ic-acc:url(#hjg-h); }

/* Rueckblick: gemachte Uebungen mit eigener Bewertung */
.ae-rbgemacht { padding:4px 0 8px; }
.ae-rbuebung { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line-2); }
.ae-rbuebung:first-of-type { border-top:0; }
.ae-rbhaken { flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--card2); color:var(--green-d); }
.ae-rbutext { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; font-size:14px; line-height:1.3; }
.ae-rbutext small { color:var(--muted); font-size:12px; font-weight:600; }
.ae-rbwirkung { flex:none; font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--card2); color:var(--muted); }
.ae-rbwirkung.w3 { color:var(--green-d); }
.ae-rbdatum small { margin-left:4px; }

/* ================================================================ Ernaehrungstagebuch (07_Ernaehrungstagebuch.md) */
/* Kopf: gruener Verlauf, kein Titel, keine Reiter. Links Zurueck und die Zahl, rechts Ring mit Flamme. */
.es-mkopf .hj-mk-zeile { margin-top:0; }
.es-mk-links { display:flex; align-items:center; gap:4px; min-width:0; }
.es-mkopf .hj-mk-zahl small { font-size:14px; }
.es-mk-ring.drueber .hj-mk-ringtext b { color:#C0392B; background:#fff; padding:1px 7px; border-radius:999px; }
/* Makros mit vollem Namen, auch bei 375 px: zwei Spalten. Farben und Regeln wie bisher (es-tk-*). */
.es-mk-makros { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; margin-top:12px; }
.es-mkopf .es-tk-satz { margin-top:8px; }
/* Datumsleiste: bleibt beim Einfahren stehen, dann mit „569 / 2.050 kcal" und vier kleinen Balken. */
.es-mk-datumleiste { align-items:center; gap:6px; margin-top:12px; }
.es-mk-pfeil { flex:none; width:36px; height:36px; display:grid; place-items:center; border:0;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; }
.es-mk-pfeil:disabled { opacity:.35; cursor:default; }
/* E6 (Fabio 24.10., Prototyp pz-er-leiste): das Datum steht frei, ohne Kasten; die Pfeile sind blasse runde Knoepfe am Rand. */
.es-mk-datum { flex:1 1 auto; min-width:0; min-height:38px; display:flex; align-items:center; justify-content:center; gap:calc(4px + 6px * var(--kr));
  border:0; border-radius:999px; background:none; color:#fff;
  font:inherit; font-size:calc(13px + 1px * var(--kr)); font-weight:800; cursor:pointer; white-space:nowrap; overflow:hidden; }
.es-mk-datum .es-mk-kal { width:15px; height:15px; flex:none; opacity:.9; }
.es-mk-datumtext { overflow:hidden; text-overflow:ellipsis; }
.es-mk-mini { display:inline-flex; align-items:center; gap:3px; overflow:hidden; max-width:calc(140px * (1 - var(--kr)));
  opacity:calc(1 - var(--kr)); font-size:11.5px; }
.es-mk-mini b { font-weight:800; }
/* Muss 2 (B2): vier beschriftete Mini-Makrobalken unter der Datumsleiste, sichtbar erst im eingefahrenen Kopf. */
.es-mk-datumleiste { flex-wrap:wrap; }
.es-mk-minireihe { flex:1 0 100%; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; padding:0 4px;
  max-height:calc((1 - var(--kr)) * 30px); opacity:calc(1 - var(--kr)); overflow:hidden; margin-top:calc((1 - var(--kr)) * 2px); }
.es-mk-minib { display:flex; flex-direction:column; gap:3px; min-width:0; }
.es-mk-minib small { font-size:10px; font-weight:800; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-mk-minib i { display:block; height:4px; border-radius:2px; background:rgba(0,0,0,.3); overflow:hidden; }
.es-mk-minib b { display:block; height:100%; border-radius:2px; background:#fff; }
.es-mk-minib b.n-p { background:#FFA98C; } .es-mk-minib b.n-kh { background:#7FC8FF; }
.es-mk-minib b.n-f { background:#FFCE4D; } .es-mk-minib b.n-b { background:#D6EE8C; }
.es-mk-minib b.drueber { background:repeating-linear-gradient(135deg, #fff 0 3px, rgba(255,255,255,.45) 3px 6px); }
/* Ohne gespeichertes Makroziel steht rechts statt des Rings ein Satz (Fabio 22.10.). */
.es-mk-ohneziel { flex:none; max-width:46%; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; }
.es-mk-ohneziel b { font-size:14px; font-weight:800; color:#fff; line-height:1.2; }
.es-mk-ohneziel small { font-size:12px; font-weight:700; color:rgba(255,255,255,.82); line-height:1.25; }
/* Woche und Monat ohne Makroziel (E4, Fabio 27.10.): der Ring steht leer, der Satz bricht zweizeilig um. */
.es-aw-ohneziel .hj-mk-ringtext b { max-width:84px; white-space:normal; line-height:1.2; }

/* Listenzeile „Ziele & Protokolle" und die Karten Woche/Monat */
.es-zeilenlink, .es-awkarte { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  font:inherit; color:var(--ink); border:1px solid var(--line-2); margin:0; }
.es-zl-ic { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:var(--card2); color:var(--teal); }
.es-zl-ic .hji { width:20px; height:20px; }
.es-zl-tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.es-zl-tx b { font-size:14.5px; font-weight:800; color:var(--navy); }
.es-zl-tx small { font-size:12px; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es-awkarten { display:grid; grid-template-columns:1fr; gap:10px; }

/* Mahlzeiten-Karten wie im Prototyp (pz-er-mz, Muss 3): eigene Symbol-Kachel je Mahlzeit, Titel normal
   geschrieben, darunter die Uhrzeit, Teilen und Loeschen klein im Kopf, kcal gross rechts. Eingeklappt
   nur Kopf und eine Inhaltszeile; leere Mahlzeit als schmale Zeile mit Plus. */
.es-sec { margin:22px 0 4px; }
.card.es-mz { margin-top:12px; padding:14px 16px 12px; border-radius:24px; gap:0; }
.es-mz-kopf { display:flex; align-items:center; gap:8px; padding-bottom:0; }
.es-mz-kachel { flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:14px;
  background:var(--card2); color:var(--navy); }
.es-mz-kachel .hji { width:24px; height:24px; --ic-acc:url(#hjg-h); }
.es-mz-zuknopf { flex:none; display:grid; place-items:center; padding:0; border:0; background:none; font:inherit; cursor:pointer; border-radius:15px; }
.es-mz-tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.es-mz-tx b, .es-mz-name { font-size:15.5px; font-weight:800; color:var(--navy); line-height:1.2; }
.es-mz-name { display:block; max-width:100%; padding:0; border:0; background:none; font-family:inherit; text-align:left; cursor:pointer;
  text-transform:none; letter-spacing:0; margin:0; white-space:normal; overflow-wrap:break-word; }
.es-mz-tx small { font-size:13px; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.es-mz-unter { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:22px; }
.es-mz-unter .es-zeitknopf { font-size:13px; color:var(--muted); padding:0; }
.es-mz-unter .es-mz-eigen { margin-left:0; }
.es-mz-klein { flex:none; display:flex; gap:0; }
.es-rund { width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:var(--card2); color:var(--navy); cursor:pointer; flex:none; }
.es-rund .hji { width:18px; height:18px; --ic-acc:currentColor; }
.es-rund.k { width:28px; height:28px; background:none; color:var(--muted); }
.es-rund.k .hji { width:17px; height:17px; }
.es-rund.k.rot { color:var(--rose-t, #B4233C); }
.es-rund:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.es-mz .es-mz-summe { flex:none; gap:2px; font-size:15px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.es-mz .es-mz-summe .es-pfeil { color:var(--muted-2); }
.es-mz-kurz { display:block; width:100%; margin:6px 0 0 48px; max-width:calc(100% - 48px); padding:0; border:0; background:none; font:inherit;
  font-size:13px; font-weight:600; color:var(--muted); text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-mz-zeilen { margin-top:10px; border-top:1px solid var(--line-2); }
.es-mz-zeilen > .es-wisch:first-child { border-top:0; }
.es-mz-weitere { display:block; width:100%; padding:12px 0 4px; border:0; border-top:1px solid var(--line-2); background:none; font:inherit;
  font-size:13.5px; font-weight:800; color:var(--teal); text-align:left; cursor:pointer; }
/* Ein Rezept als eine aufklappbare Zeile (Prototyp pz-er-rzkopf), die Zutaten eingerueckt darunter. */
.es-rzgruppe { border-top:1px solid var(--line-2); }
.es-mz-zeilen > .es-rzgruppe:first-child { border-top:0; }
.es-rzkopf { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; border:0; background:none; font:inherit;
  text-align:left; color:inherit; cursor:pointer; }
.es-rzkopf .tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.es-rzkopf b { font-size:15px; font-weight:800; color:var(--navy); overflow-wrap:anywhere; }
.es-rzkopf small { font-size:12.5px; font-weight:600; color:var(--muted); }
.es-rzkopf .wert { flex:none; font-size:15px; font-weight:800; color:var(--navy); text-align:right; }
.es-rzkopf .wert small { display:block; font-size:11px; }
.es-rzkopf .es-pfeil { color:var(--muted-2); }
.es-rzkopf .es-pfeil.auf { transform:rotate(90deg); }
.es-rzteile { padding-left:12px; border-left:3px solid var(--card2); margin-bottom:6px; }
.es-rzteile > .es-wisch:first-child { border-top:0; }
/* Fussleiste: „+ Hinzufügen" als Pille, das Befinden, Notiz und Foto als runde Knoepfe. */
.es-mz .es-mz-fuss { gap:5px; flex-wrap:nowrap; margin-top:2px; padding-top:12px; }
.es-mz .es-hinzu { flex:none; height:36px; gap:5px; padding:0 12px 0 9px; border-radius:999px; background:var(--navy); color:var(--card);
  font-size:13px; font-weight:800; }
.es-mz .es-mz-fuss .es-befpille { min-height:36px; margin-right:auto; min-width:0; gap:4px; padding:4px 9px 4px 7px; font-size:12.5px; }
.es-mz-rundgr { flex:none; display:flex; gap:4px; }
.es-mz-rundgr .es-ico { width:32px; height:32px; border-radius:50%; background:var(--card2); }
.es-mz-speichern { display:flex; align-items:center; gap:6px; width:100%; padding:10px 0 2px; border:0; border-top:1px solid var(--line-2);
  background:none; font:inherit; font-size:13px; font-weight:800; color:var(--muted); cursor:pointer; text-align:left; }
.es-mz-speichern .hji { width:16px; height:16px; --ic-acc:currentColor; }
.es-mz-rundgr .es-ico-bild img { width:28px; height:28px; border-radius:50%; }
.es-mz-leer { display:flex; align-items:center; gap:6px; margin-top:10px; padding:10px 12px 10px 12px; border-radius:22px;
  border:0; background:var(--card); box-shadow:var(--shadow-card, none); }
.es-mz-leer-auf { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; padding:0; border:0; background:none;
  font:inherit; color:var(--ink); cursor:pointer; text-align:left; }
.es-mz-plus { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--card2); color:var(--navy); }

/* Befinden als Pille: „Wie ging’s?", „Verträglich" (gruen), Beschwerde mit Wort (bernstein, nie rot) */
.es-befpille { display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:30px; padding:4px 11px 4px 8px;
  border-radius:999px; border:1px solid var(--line-2); background:var(--card2); color:var(--muted); font:inherit;
  font-size:12.5px; font-weight:800; cursor:pointer; }
.es-befpille span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es-befpille .hji { width:17px; height:17px; flex:none; }
.es-befpille.gut { background:color-mix(in srgb, #3E9E6C 14%, var(--card)); border-color:color-mix(in srgb, #3E9E6C 35%, var(--card)); color:var(--green-d); }
.es-befpille.da { background:var(--amber-100); border-color:color-mix(in srgb, var(--amber) 40%, var(--card)); color:var(--amber-t); }

/* Befinden-Blatt von unten */
.es-blatt-ov { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(16,21,95,.32); }
.es-blatt { position:relative; width:min(480px, 100%); max-height:88vh; overflow:auto; box-sizing:border-box;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:var(--card);
  box-shadow:0 -10px 30px rgba(16,21,95,.18); animation:es-blatt-rein .22s ease-out; }
@keyframes es-blatt-rein { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
.es-blatt-griff { display:block; width:40px; height:5px; border-radius:3px; background:var(--line); margin:0 auto 8px; }
.es-blatt-zu { position:absolute; top:10px; right:12px; width:34px; height:34px; display:grid; place-items:center; border:0;
  border-radius:50%; background:var(--card2); color:var(--muted); cursor:pointer; }
.es-blatt .es-symfeld { margin:0; border:0; padding:0; background:none; }

/* Menge in der Zeile: graue Pille „130 g". Antippen = Zahlentastatur, die alte Menge als Platzhalter. */
.es-tm { flex-direction:row; align-items:baseline; justify-content:center; gap:2px; width:74px; padding:6px 10px; border-radius:999px; }
.es-tm input { width:38px; text-align:right; }
.es-tm input::placeholder { color:var(--muted-2); opacity:1; }
.es-tm > span { font-size:12px; }

/* Mengen-Seite (E1, Fabio 24.10., Prototyp pz-er-kopf--menge): schmaler gruener Kopf, Zurueck rund links,
   mittig gross „+32 kcal" und „Mit diesem Eintrag …", rechts das Lesezeichen. Darunter fuenf Mini-Balken mit
   Zuwachs. Die Zahlen stehen nur hier, die gruene Karte im Inhalt ist weg. Leiste unten aus. */
.es-mg-skopf { display:block; padding:12px 16px 14px; border-radius:0 0 28px 28px; }
/* 30 (Fabio 27.10., iPhone): bei offener Tastatur schiebt Safari den sichtbaren Ausschnitt nach unten,
   der klebende Kopf haengt aber am Layout und rutschte aus dem Bild. Er klebt dann an der Oberkante
   des sichtbaren Ausschnitts (--hj-vv-oben misst app.js, tastaturWaechter) und laeuft weiter mit.
   Das Mengenfeld bleibt bei 16 px, sonst zoomt iOS beim Antippen hinein. */
html.hj-tastatur-offen .es-mg-skopf { top:var(--hj-vv-oben, 0px); }
html.hj-tastatur-offen .hjm-app.imp-on .es-mg-skopf { top:calc(38px + var(--hj-vv-oben, 0px)); }
#es-g { font-size:16px; }
.es-mg-k1 { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:6px; }
.es-mg-k1-links, .es-mg-k1-rechts { display:flex; align-items:center; gap:6px; }
.es-mg-k1-rechts { justify-content:flex-end; }
.es-mg-platz { width:40px; height:40px; flex:none; }
/* Mit ✕ stehen rechts zwei Knoepfe: etwas schmaler, damit „Mit diesem Eintrag 1.145 / 2.050 kcal" bei 375 px Platz hat. */
.es-mg-mitx .es-mg-k1 { gap:4px; }
.es-mg-mitx .es-mg-k1-links, .es-mg-mitx .es-mg-k1-rechts { gap:2px; }
.es-mg-skopf.es-mg-mitx .es-mg-rund, .es-mg-mitx .es-mg-platz { width:36px; height:36px; }
.es-mg-skopf .es-mg-rund { width:40px; height:40px; margin:0; border:0; border-radius:50%; padding:0; display:grid; place-items:center;
  background:rgba(255,255,255,.18); color:#fff; cursor:pointer; flex:none; }
.es-mg-skopf .es-mg-rund .hji { width:22px; height:22px; }
.es-mg-skopf .es-mg-rund:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.es-mg-k1-mitte { text-align:center; line-height:1.2; min-width:0; }
.es-mg-k1-mitte b { display:block; font-size:20px; font-weight:800; letter-spacing:-.3px; color:#fff; font-variant-numeric:tabular-nums; }
.es-mg-k1-mitte small { display:block; font-size:12px; font-weight:700; color:rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* F1 (Blatt 0l): „Mit diesem Eintrag 1.145 / 2.050 kcal" ist bei 375 px mit ✕ zu lang fuer eine Zeile.
   Es bricht dann zwischen Satz und Zahl um, nie mitten in der Zahl. */
.es-mg-k1-mitte small { white-space:normal; }
.es-mg-k1-mitte small span { white-space:nowrap; }
.es-mg-k2 { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin-top:12px; }
.es-mg-minib { display:flex; flex-direction:column; gap:4px; min-width:0; }
.es-mg-minib small { font-size:9.5px; font-weight:700; color:rgba(255,255,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-mg-minib small b { color:#fff; font-weight:800; }
.es-mg-minib i { display:flex; height:4px; border-radius:2px; background:rgba(0,0,0,.3); overflow:hidden; }
.es-mg-minib em { display:block; height:100%; background:rgba(255,255,255,.45); }
.es-mg-minib i b { display:block; height:100%; min-width:3px; }
.es-mg-minib b.es-mg-k { background:#fff; } .es-mg-minib b.n-p { background:#FFA98C; } .es-mg-minib b.n-kh { background:#7FC8FF; }
.es-mg-minib b.n-f { background:#FFCE4D; } .es-mg-minib b.n-b { background:#D6EE8C; }
/* Name gross mit Etikett, darunter die Herkunft; Hinweise als kleine Zeile unter der Menge. */
.es-mg-kopf .es-mg-name { margin:0; font-size:22px; line-height:1.2; }
.es-mg-kopf .es-mg-name .pill { margin-left:4px; }
.es-mg-hinweis { margin:8px 0 0; }
/* Punkt 23: ✕ oben rechts in der Kopfzeile des Ernaehrungs-Ablaufs (statt Glocke und Konto). */
.apphead .es-x { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--navy);
  display:grid; place-items:center; cursor:pointer; flex:none; padding:0; }
.apphead .es-x .hji { width:20px; height:20px; }
.apphead .es-x[hidden], .apphead .bell[hidden], .apphead .av[hidden] { display:none; }
/* Muss 9: Ziele-Seite ohne gespeichertes Ziel. */
.es-ohneziel { display:flex; flex-direction:column; gap:1px; margin:0 0 10px; }
.es-ohneziel b { font-size:14px; font-weight:800; color:var(--navy); }
.es-ohneziel span { font-size:12.5px; font-weight:600; color:var(--muted); }
/* Muss 17 (G4): eigene Lebensmittel in der Suche mit Bearbeiten-Knopf neben der Trefferzeile. */
.es-eigenzeile { display:flex; align-items:center; gap:4px; border-top:1px solid var(--line-2); }
.es-eigenzeile:first-child { border-top:0; }
.es-eigenzeile > .es-zeile { flex:1 1 auto; min-width:0; border-top:0; }
/* Punkt 16: die Suchleiste klebt unter der Kopfzeile und springt nicht, wenn darunter „Gerade eingetragen" waechst. */
.es-suchfeld { position:sticky; top:var(--es-suchfeld-oben, 64px); z-index:6; background:var(--bg); margin:0 -4px 10px; padding:4px 4px 6px; }
.hjm-frame[data-ohneleiste] .tabbar { display:none; }
.hjm-frame[data-ohneleiste] .es-mg-leiste { bottom:calc(16px + env(safe-area-inset-bottom)); }

/* Woche/Monat: eine Kernzeile, der Rest hinter „Mehr" (E2/E20) */
.es-aw-kern { margin:0; font-size:14px; font-weight:600; color:var(--ink); }
.es-aw-kern b { color:var(--navy); }
.es-mehr-auf { margin-top:8px; }
.es-mehr-auf > summary { cursor:pointer; font-size:13px; font-weight:800; color:var(--teal); list-style:none; }
.es-mehr-auf > summary::-webkit-details-marker { display:none; }
.es-mehr-auf[open] > summary { margin-bottom:8px; }

/* Ziele & Protokolle: Protokolle vom Coach, gesperrt, mit „Änderung anfragen" */
.es-prot-kopf { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:12px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; }
.es-prot-kopf .hji { width:15px; height:15px; }
.es-chip.statisch { cursor:default; }

/* ================================================================ Mein Training (09_Training.md) */
/* Kopf der Huelle: die Woche und der Split unter dem Titel */
.hj-kopf--training .tr-kopf-woche { font-size:14px; font-weight:700; opacity:.9; margin-top:0; }
/* Karten und Listen wie im Rest der App: grosser Radius, weicher Schatten, Zeilen als eine Liste */
.fxh1-block, .fxh1-kachel { border-radius:20px; border-color:var(--line-2); box-shadow:var(--shadow-sm, 0 4px 14px rgba(16,21,95,.06)); }
.card.list.fxh1-liste { padding:0; overflow:hidden; }
.fxh1-liste .fxh1-zeile { border:0; border-radius:0; margin:0; border-top:1px solid var(--line-2); }
.fxh1-liste .fxh1-zeile:first-child { border-top:0; }
.fxh1-zeile .ic .hji, .fxh1-art .hji { width:20px; height:20px; }
.fxh1-art { color:#2E7299; }
/* Verlauf: offener Wochenabschluss mit Punkt */
.fxh1-wabschluss { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  border:1px solid var(--line-2); margin:0; }
.fxh1-wabschluss .tx { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.fxh1-wabschluss .tx b { font-size:15px; font-weight:800; color:var(--navy); }
.fxh1-wabschluss .tx span { font-size:12.5px; font-weight:600; color:var(--muted); }
.fxh1-wpunkt { flex:none; width:10px; height:10px; border-radius:50%; background:var(--red); }
/* Bilanz: aufrechte Ueberschrift (T20) */
.fxh1-bikopf .satz { font-style:normal; }
/* Workout: schmale Leiste im Trainings-Farbverlauf ueber die volle Breite, klebt oben */
.fx-head.fx-leiste { position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:8px; margin:-8px -20px 10px;
  padding:8px 14px 8px 10px; min-height:56px; color:#fff; background:var(--kopf-grad); border-radius:0 0 22px 22px;
  box-shadow:0 8px 20px rgba(16,21,95,.14); }
.hjm-app.imp-on .fx-head.fx-leiste { top:38px; }
.fx-leiste .hji { --ic-acc:currentColor; }
.fx-leiste .ttl { color:#fff; font-size:16px; }
.fx-leiste .ttl b { color:#fff; }
.fx-leiste-unter { font-size:12px; font-weight:600; opacity:.88; font-variant-numeric:tabular-nums; }
.fx-leiste .btn { background:#fff; color:#10155F; box-shadow:none; }
@media (min-width: 900px) { .fx-head.fx-leiste { margin:0 0 10px; border-radius:22px; } }

/* E6 (Fabio 18.10., 375 px): nichts abschneiden. Der Name einer offenen Mahlzeit bricht um statt
   „Frühstü…", die Makronamen im Tageskopf und in der Mahlzeit ebenso statt „Kohl…"; im Tageskopf
   rutscht der Wert unter den Namen, wenn beides nicht in eine Zeile passt. */
.es-mz-offen .es-mz-links { flex:1 1 auto; }
.es-mz-offen .es-mz-name { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:break-word; line-height:1.2; }
.es-mz-mname span { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.15; }
.es-tk-zeile { flex-wrap:wrap; row-gap:1px; }
.es-tk-name { white-space:nowrap; overflow:visible; text-overflow:clip; }

/* E2/E3 Essen suchen (Fabio 24.10.): die Zeile oeffnet die Mengen-Seite, nur das „+" traegt ein.
   Zwei Knoepfe nebeneinander; das Plus hat 44 px Tippflaeche um das 30-px-Feld. */
.es-zeile.es-zweig { gap:6px; cursor:default; padding:6px 0; }
.es-zweig-tx { flex:1 1 auto; min-width:0; min-height:44px; display:flex; align-items:center; padding:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left; cursor:pointer; }
.es-zweig-plus { flex:none; width:44px; height:44px; margin-right:-7px; display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; }
.es-zweig-tx:focus-visible, .es-zweig-plus:focus-visible { outline:2px solid var(--teal); outline-offset:1px; border-radius:10px; }
.es-zweig .es-stern-klein { width:32px; height:44px; color:var(--teal); }
.es-lm-zeilen { display:flex; flex-direction:column; padding:0 0 8px 10px; border-left:2px solid var(--line-2); margin:0 0 6px 4px; }
.es-lm-zeile { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-height:40px; padding:8px 0; border:0; background:none;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--ink); text-align:left; cursor:pointer; }
.es-lm-zeile small { flex:none; font-size:12px; font-weight:600; color:var(--muted-2); }

/* E4 Woche und Monat (Fabio 24.10., Prototyp _kopfteil): derselbe grosse Kopf wie im Tag. Eiweiß,
   Kohlenh. und Fett in einer Reihe, Ballaststoffe in eigener Zeile. Darunter „‹ Zurück zu heute" und
   die andere Ansicht. */
.es-mk-makros.es-aw-makros3 { grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px 12px; }
.es-aw-makros3 .es-tk-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.es-aw-makrobs { margin-top:10px; }
.es-aw-mkopf .es-mk-datum { cursor:default; }
.es-aw-wm { display:flex; justify-content:space-between; align-items:center; margin:0 2px 2px; }
.es-aw-heute { min-height:40px; border:0; background:none; padding:8px 0; font:inherit; font-size:14px; font-weight:800; color:var(--teal); cursor:pointer; }
.es-aw-heute.leise { color:var(--muted); }
.es-aw-heute:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:8px; }

/* N3 (Fabio 24.10.): kommende Tage lassen sich oeffnen; ihre Eintraege sind „geplant". */
.es-kal .fxk-tag.zukunft.es-kal-geplant { color:var(--ink); cursor:pointer; }
.es-kal .fxk-tag.es-kal-geplant i.punkt { background:transparent; box-shadow:inset 0 0 0 1.5px var(--teal); }
.es-zukunft { display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; padding:10px 12px; border-radius:14px;
  background:var(--card2); color:var(--ink); font-size:12.5px; font-weight:600; line-height:1.45; }
.es-zukunft .hji { width:18px; height:18px; flex:none; color:var(--teal); margin-top:1px; }

/* 45 an der Mahlzeit (Fabio 24.10.): Tippflaechen mindestens 32 px, ohne dass die Karte waechst.
   Teilen und Loeschen 32 statt 28, die Uhrzeit und der Titel bekommen 32 px Hoehe. */
.es-rund.k { width:32px; height:32px; }
.es-mz-name { min-height:32px; display:flex; align-items:center; margin:-6px 0; }
.es-mz-unter .es-zeitknopf { min-height:32px; min-width:44px; margin:-6px 0; }
.es-mz-speichern + .es-mz-frage { border-top:0; padding-top:6px; }
.es-mz-frage { min-height:36px; }

/* ---------------------------------------------------------------- Blatt 0l, Paket 5 (Fabio 04.11.2026) */
/* I1: Zurueck-Pfeil im Modul-Kopf (Stressmaster, Ernaehrung, Training) 44 statt 32 Punkte. Die Raender
   gleichen die Groesse aus, der Kopf wird nicht hoeher. */
.hj-mk-zurueck { width:44px; height:44px; margin:-5px 0 -5px -14px; }
/* F9: Ernaehrung › Mahlzeit auf kleinen iPhones. Teilen und Loeschen rutschen in eine eigene Zeile unter
   die kcal, statt in den Titel („Frühstück"). */
@media (max-width: 360px) {
  .es-mz-kopf { flex-wrap:wrap; row-gap:0; }
  .es-mz-klein { order:3; flex-basis:100%; justify-content:flex-end; margin:-4px -6px -2px 0; }
}