/* Eisenwerk: verspielt, rund, Orange aus dem App-Icon als Hauptfarbe (hell als Standard, dunkel wählbar). Mobile first. */

:root {
  /* Dunkel (Kohle wie das dunkle App-Icon): Orange = Fortschritt & Aktionen, kühles Blau = Training */
  --bg: #0e1013;
  --bg-2: #1c1f25;
  --karte: #15181d;
  --text: #eef2f6;
  --muted: #8b95a5;
  --linie: #252c36;
  --primaer: #ff8c1a;
  --primaer-2: #ffb35c;
  --primaer-text: #16181c;
  --verlauf: linear-gradient(135deg, #ffa51e 0%, #f25a0d 100%);
  --glow: 255, 140, 26;
  --training: #3aa8ff;
  --training-2: #6fd3ff;
  --verlauf-training: linear-gradient(135deg, #4cc3ff 0%, #2f6bff 100%);
  --cardio: #2ee6c8;
  --gelb: #ffd23f;
  --gruen: #34e89e;
  --rot: #ff4d6d;
  --orange: #ff9f1c;
  --blau: #3aa8ff;
  --protein: #ff5c7a;
  --kh: #ffc23d;
  --fett: #4dabf7;
  --schatten: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --radius: 22px;
  --radius-klein: 14px;
  --tabbar-h: 68px;
  --karte-oben: #1a1d23;
  color-scheme: dark;
}

/* Hell: html.hell (darstellung.js – nach Einstellung oder wie das Handy). Farben, die auf Weiss lesbar bleiben. */
html.hell {
  --bg: #f2f4f8;
  --bg-2: #e7ebf1;
  --karte: #ffffff;
  --karte-oben: #ffffff;
  --text: #121821;
  --muted: #5f6b7a;
  --linie: #dbe1e8;
  --primaer: #e2620a;
  --primaer-2: #f59a3c;
  --glow: 242, 90, 13;
  --training: #1f8ae8;
  --training-2: #4cb4f0;
  --cardio: #0aa891;
  --gelb: #d99a00;
  --gruen: #12a865;
  --rot: #e23a55;
  --orange: #ee8a00;
  --blau: #1f8ae8;
  --schatten: 0 4px 18px rgba(20, 30, 50, 0.08), 0 0 0 1px rgba(20, 30, 50, 0.05);
  --akzent: #5b78b8;
  --verlauf-text: linear-gradient(135deg, #ff9a1a 0%, #e04e08 100%);
  color-scheme: light;
}
html.hell .blau { --primaer-text: #ffffff; --glow: 31, 138, 232; }

/* Alles rund ums Training: dieselben Bausteine, aber in kühlem Blau */
.blau {
  --primaer: var(--training);
  --primaer-2: var(--training-2);
  --primaer-text: #ffffff;
  --verlauf: var(--verlauf-training);
  --glow: 58, 168, 255;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* Keine Scrollleiste rechts (wie eine App) – Scrollen geht weiterhin, auch in Fenstern und Listen */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
body.modal-offen { overflow: hidden; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--primaer); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
pre { white-space: pre-wrap; overflow: auto; }

.muted { color: var(--muted); }
.klein { font-size: 0.82rem; }
.mitte { text-align: center; }
.erfolg { color: var(--gruen); font-weight: 600; }
.warnung { color: var(--orange); font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 12px) 16px calc(var(--tabbar-h) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 20px);
}
.stapel { display: flex; flex-direction: column; gap: 12px; }
.stapel.eng { gap: 6px; }
.seite { animation: einblenden 0.25s ease-out; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drei-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.knopfreihe.links { justify-content: flex-start; }
.knopfreihe.klein { margin-top: 10px; justify-content: flex-start; }

.karte {
  /* Tiefe: leichter Farbschimmer oben links in der Farbe des Bereichs, feine Lichtkante oben, Hauch Rand */
  --a: var(--akzent, var(--primaer));
  background:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--a) 13%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--karte-oben) 0%, var(--karte) 100%);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px color-mix(in srgb, var(--a) 14%, transparent);
  border: 0;
  text-align: left;
  width: 100%;
}
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.karte-kopf select { max-width: 60%; }

@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.einblenden { animation: einblenden 0.3s ease-out; }

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

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px; }
.gruss { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.kopf > div:first-child { min-width: 0; }
.gruss-oben { font-size: 0.85rem; font-weight: 700; }
.kopf .gruss { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-chips { display: flex; gap: 6px; text-decoration: none; flex: none; }
.profil-kopf { justify-content: flex-start; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verlauf); color: var(--primaer-text); font-weight: 800; font-size: 1.5rem;
}
.avatar.mit-bild { object-fit: cover; background: var(--bg-2); }
.avatar.klein { width: 40px; height: 40px; font-size: 1.05rem; flex: none; }
.avatar.gross { width: 140px; height: 140px; font-size: 3.4rem; }
.avatar-knopf { position: relative; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.avatar-knopf:active { transform: scale(0.96); }
.avatar-kamera {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--karte); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); font-size: 0.8rem;
}
.profilbild-vorschau { display: grid; place-items: center; padding: 6px 0 4px; }
.kopf-person { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.kopf-person > div { min-width: 0; }

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer;
  background: var(--bg-2); color: var(--text); text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s;
  min-height: 42px;
}
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn.primary { background: var(--verlauf); color: var(--primaer-text); box-shadow: 0 6px 16px rgba(var(--glow), 0.3); }
.btn.gefahr { background: var(--rot); color: #fff; }
.btn.ghost { background: var(--bg-2); }
.btn.link { background: none; color: var(--primaer); min-height: 0; padding: 8px; font-weight: 600; }
.btn.link.gefahr { color: var(--rot); background: none; }
.btn.breit { width: 100%; }
.btn.gross { min-height: 52px; font-size: 1.05rem; }
.btn.klein { min-height: 34px; padding: 6px 14px; font-size: 0.9rem; }

.icon-btn {
  border: 0; background: var(--bg-2); border-radius: 50%; width: 38px; height: 38px; flex: none;
  display: inline-grid; place-items: center; cursor: pointer; font-size: 1rem; line-height: 1;
  transition: transform 0.12s;
}
.icon-btn:active { transform: scale(0.9); }
.icon-btn.klein { width: 30px; height: 30px; font-size: 0.85rem; }
.icon-btn:disabled { opacity: 0.35; }
.icon-btn.hell { background: rgba(255, 255, 255, 0.2); color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px;
  padding: 7px 13px; background: var(--bg-2); font-weight: 650; font-size: 0.9rem; cursor: pointer;
  text-decoration: none; color: var(--text); white-space: nowrap; transition: transform 0.12s;
}
.chip:active { transform: scale(0.95); }
.chip.aktiv { background: var(--primaer); color: var(--primaer-text); }
.chip.klein { padding: 5px 10px; font-size: 0.8rem; }
/* Serie und Level oben: nur leicht getönt, damit sie nicht mit den Knöpfen um Aufmerksamkeit kämpfen */
.chip.feuer { background: color-mix(in srgb, var(--orange) 14%, var(--bg-2)); color: var(--text); font-weight: 600; }
.chip.feuer.aus { background: var(--bg-2); color: var(--muted); }
.chip.level { background: var(--bg-2); color: var(--text); font-weight: 600; }

.plus-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--verlauf); color: var(--primaer-text);
  font-size: 1.5rem; font-weight: 700; display: grid; place-items: center; cursor: pointer; flex: none;
  box-shadow: 0 4px 12px rgba(var(--glow), 0.35); text-decoration: none; line-height: 1;
  transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1);
}
.plus-btn:active { transform: scale(0.85) rotate(90deg); }
.plus-btn.kamera { font-size: 1.15rem; }
.plus-btn.kamera:active { transform: scale(0.85); }
/* Knöpfe in den Mahlzeiten: leise (nur der grosse + unten leuchtet) */
.plus-btn.leise { width: 36px; height: 36px; background: var(--bg-2); color: var(--primaer); box-shadow: none; font-size: 1.35rem; }
.plus-btn.leise.kamera { font-size: 1rem; }
.mahlzeit-knoepfe { display: flex; gap: 8px; flex: none; }

/* ---------- Formular ---------- */

input, select, textarea {
  width: 100%; border: 2px solid var(--linie); background: var(--karte); border-radius: var(--radius-klein);
  padding: 11px 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; min-height: 46px;
}
input:focus, select:focus, textarea:focus { border-color: var(--primaer); box-shadow: 0 0 0 4px rgba(var(--glow), 0.15); }
input[type="checkbox"] { width: auto; min-height: 0; }
.feld { display: flex; flex-direction: column; gap: 5px; }
.feld-label { font-weight: 700; font-size: 0.88rem; }
.feld-hinweis { color: var(--muted); font-size: 0.78rem; }
.formfehler { color: var(--rot); font-weight: 600; min-height: 1.2em; font-size: 0.9rem; }

.segmente { display: grid; gap: 8px; }
.segmente.zwei { grid-template-columns: 1fr 1fr; }
.segmente.vier { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.segmente.raster { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.segmente.mahlzeiten-wahl { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.segment {
  border: 2px solid var(--linie); background: var(--karte); border-radius: var(--radius-klein);
  padding: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 700; transition: transform 0.12s, border-color 0.15s, background 0.15s; text-align: center;
}
.segment:active { transform: scale(0.97); }
.segment.aktiv { border-color: var(--primaer); background: rgba(var(--glow), 0.1); }
.segment-emoji { font-size: 1.7rem; }
.segment-sub { font-weight: 500; font-size: 0.78rem; color: var(--muted); }
/* Liste: Symbol links (über beide Zeilen), Titel und Erklärung rechts daneben – auch wenn der Titel umbricht */
.segmente.liste .segment { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; align-content: center; justify-items: start; text-align: left; }
.segmente.liste .segment:not(:has(.segment-emoji)) { grid-template-columns: minmax(0, 1fr); }
.segmente.liste .segment-emoji { font-size: 1.4rem; }
.segmente.liste .segment:has(.segment-sub) .segment-emoji { grid-row: span 2; }
.segmente.liste .segment-text, .segmente.liste .segment-sub { grid-column: -2; }
.segmente.liste.zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.segmente.mahlzeiten-wahl .segment { padding: 8px 2px; font-size: 0.72rem; }
.segmente.mahlzeiten-wahl .segment-emoji { font-size: 1.3rem; }

.schalter { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter-ui { flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--linie); position: relative; transition: background 0.2s; }
.schalter-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s cubic-bezier(.3, 1.4, .5, 1); }
.schalter input:checked + .schalter-ui { background: var(--gruen); }
.schalter input:checked + .schalter-ui::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalter-ui { box-shadow: 0 0 0 4px rgba(var(--glow), 0.25); }

.einstellungen { padding: 6px; display: flex; flex-direction: column; }
.einstellung { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 14px; text-decoration: none; color: inherit; transition: background 0.15s; }
.einstellung + .einstellung { border-top: 1px solid var(--linie); }
.einstellung:hover, .einstellung:focus-visible, .einstellung:active { background: var(--bg-2); }
.einstellung-emoji { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.einstellung-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.einstellung-text .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einstellung-pfeil { font-size: 1.5rem; color: var(--muted); }
.unterseite-kopf { display: flex; align-items: center; gap: 12px; padding: 4px 2px; }
.unterseite-kopf .icon-btn { text-decoration: none; color: inherit; font-size: 1.4rem; }
.unterseite-kopf .gruss { font-size: 1.3rem; }

.widget-liste { display: flex; flex-direction: column; }
.widget-zeile { padding: 10px 0; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 8px; }
.widget-zeile .schalter { flex: 1; min-width: 0; }
.widget-text { display: flex; flex-direction: column; min-width: 0; }
.widget-pfeile { display: flex; gap: 4px; flex: none; }
.widget-fest { flex: none; }
.widget-zeile:last-child { border-bottom: 0; }
.widget-emoji { font-size: 1.4rem; width: 30px; text-align: center; flex: none; }

.anteil-zeile { display: grid; grid-template-columns: 1fr 70px auto 80px; align-items: center; gap: 8px; }
.anteil-zeile input { min-height: 40px; padding: 6px; text-align: center; font-weight: 700; }
.anteil-kcal { text-align: right; }

details summary { cursor: pointer; font-weight: 700; padding: 6px 0; }

/* ---------- Tabbar ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--tabbar-h) + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); padding: 0 max(8px, calc((100% - 640px) / 2)) var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  /* so viele gleich breite Spalten wie sichtbare Einträge (Fasten und + sind abschaltbar) */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center;
  /* gleiche Farbe wie die Seite: kein heller Balken unter dem Menü (Android-Wischleiste, iPhone-Strich) */
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; color: var(--muted);
  font-size: 0.7rem; font-weight: 700; padding: 6px 0; transition: color 0.15s, transform 0.15s;
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabbar a.aktiv { color: var(--primaer); }
.tabbar a.aktiv[data-route="training"] { color: var(--training); }
.tabbar [hidden] { display: none; }
.tabbar a.aktiv .tab-emoji { transform: translateY(-2px) scale(1.15); }
.tab-emoji { font-size: 1.35rem; transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1); filter: saturate(0.9); }
.tabbar a:not(.aktiv) .tab-emoji { opacity: 0.6; filter: grayscale(0.6); }
.tab-plus {
  justify-self: center; width: 58px; height: 58px; margin-top: -30px; border: 4px solid var(--bg); border-radius: 50%;
  background: var(--verlauf); color: var(--primaer-text); font-size: 2rem; font-weight: 700; cursor: pointer; line-height: 1;
  box-shadow: 0 8px 20px rgba(var(--glow), 0.45); transition: transform 0.18s cubic-bezier(.3, 1.6, .5, 1);
}
.tab-plus:active { transform: scale(0.88) rotate(90deg); }

/* Mini-Leiste „Training läuft“ (verkleinertes Training): antippen = zurück ins Training */
.laeuft {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tabbar-h) + 10px);
  width: min(608px, calc(100% - 24px)); background: linear-gradient(135deg, #1d4ed8, var(--blau)); color: #fff; border-radius: 18px; padding: 10px 16px;
  text-decoration: none; display: flex; align-items: center; gap: 12px; z-index: 19; box-shadow: 0 10px 30px rgba(58, 168, 255, 0.35);
  animation: mini-rein 0.25s ease-out;
}
@keyframes mini-rein { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.laeuft-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.laeuft-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laeuft-info { font-size: 0.8rem; opacity: 0.9; font-variant-numeric: tabular-nums; }
.laeuft-pfeil { font-size: 0.9rem; opacity: 0.85; }
.puls { width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); animation: puls 1.2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } }

/* ---------- Ernährung (Tagesansicht) ---------- */

.kalorien { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; padding: 10px 8px 8px; }
.kal-seite { text-align: center; }
.kal-wert { font-weight: 800; font-size: 1.15rem; }
.kal-label { color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.kal-fuss { grid-column: 1 / -1; text-align: center; margin-top: 2px; }

.ring { position: relative; width: var(--g); height: var(--g); }
.ring svg { display: block; }
.ring-bg { fill: none; stroke: var(--bg-2); }
.ring-wert { fill: none; stroke: var(--primaer); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.3, 1, .4, 1); }
.ring.kcal .ring-wert { stroke: var(--primaer); filter: drop-shadow(0 0 6px rgba(var(--glow), 0.55)); }
.ring-wert.ueber { stroke: var(--rot) !important; }
.ring-inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-emoji { font-size: 0.95rem; animation: wackeln 2.5s ease-in-out infinite; }
.ring-zahl { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.ring-label { font-size: 0.64rem; color: var(--muted); font-weight: 700; }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-10deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(0); } }

.makros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px 12px; }
.makros .makro { min-width: 0; }
.makros .balken { height: 8px; }
.makros .makro-kopf { font-size: 0.75rem; margin-bottom: 4px; line-height: 1.25; align-items: center; text-align: center; }
.makros .makro-kopf > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.makros .makro-kopf .muted { font-size: 0.7rem; font-weight: 600; }
.makro-kopf { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
.balken { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.balken-fill {
  --p: 0; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--verlauf);
  transition: width 0.9s cubic-bezier(.3, 1, .4, 1);
}
.balken-fill.protein { background: var(--protein); }
.balken-fill.kh { background: var(--kh); }
.balken-fill.fett { background: var(--fett); }
.balken-fill.xp { background: linear-gradient(90deg, var(--gelb), var(--orange)); }
.balken-fill.ziel { background: linear-gradient(90deg, var(--gruen), #86efac); }
.balken-fill.ueber { background: var(--rot); }

.mahlzeit-kopf, .uebung-kopf { display: flex; align-items: center; gap: 12px; }
.mahlzeit-emoji {
  width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; font-size: 1.3rem; flex: none;
}
.mahlzeit-titel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.eintraege { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.eintrag, .bewegung {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 8px 4px;
  border-radius: 12px; cursor: pointer; text-align: left;
}
.bewegung { cursor: default; }
.eintrag:hover, .eintrag:focus-visible { background: var(--bg-2); }
.eintrag-emoji { font-size: 1.3rem; width: 34px; text-align: center; flex: none; }
.eintrag-bild { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: #fff; }
.eintrag-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eintrag-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag-kcal { font-weight: 800; white-space: nowrap; }
.eintrag-kcal .einheit { font-size: 0.7rem; font-weight: 600; color: var(--muted); }

.shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.shortcut {
  border: 0; border-radius: var(--radius-klein); background: var(--bg-2); padding: 10px 4px; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; font-size: 0.8rem; color: var(--text);
  transition: transform 0.12s cubic-bezier(.3, 1.6, .5, 1), background 0.15s;
}
.shortcut:active { transform: scale(0.94); }
.shortcut-emoji { font-size: 1.4rem; }
.shortcut-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shortcuts-home { margin-top: 0; }
.shortcuts-home .shortcut { background: var(--karte); box-shadow: var(--schatten); padding: 12px 4px; }
.shortcut.erledigt { box-shadow: inset 0 0 0 2px var(--gruen), var(--schatten); }
.shortcut-stand { font-size: 0.72rem; color: var(--gruen); font-weight: 800; }

.wisch { position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; }
.wisch-vorne { --dx: 0px; position: relative; z-index: 1; transform: translateX(var(--dx)); }
/* Durchsichtig in Ruhe (Karte mit Verlauf scheint durch), deckend nur beim Wischen über dem Löschen-Knopf */
.wisch.zieht .wisch-vorne, .wisch.offen .wisch-vorne { background: var(--karte); }
.wisch-vorne.animiert { transition: transform 0.22s cubic-bezier(.2, .9, .3, 1); }
.wisch.zieht .wisch-vorne { user-select: none; }
.wisch-knopf {
  position: absolute; inset: 0 0 0 auto; width: 100%; border: 0; background: var(--rot); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 18px; cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.wisch.offen .wisch-knopf { opacity: 1; }
.wisch.weit .wisch-knopf { background: #c81e1e; }
.wisch.raus { transition: opacity 0.18s; opacity: 0.4; }
.auswahl-kreis {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linie); flex: none; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 900; color: #fff; transition: background 0.12s, border-color 0.12s, transform 0.15s cubic-bezier(.3, 1.6, .5, 1);
}
.auswahl-kreis.an { background: var(--primaer); border-color: var(--primaer); transform: scale(1.08); }
.auswahl-zeile.an .eintrag { background: rgba(var(--glow), 0.1); }
.auswahl-leiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tabbar-h) + 10px); z-index: 25;
  width: min(608px, calc(100% - 24px)); display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px;
  background: var(--karte); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.50); animation: toastRein 0.3s;
}
.auswahl-platz { height: 60px; }
.widgets.anordnen .widget { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; animation: wackeln-leicht 0.35s ease-in-out infinite alternate; }
.widgets.anordnen .widget:nth-child(even) { animation-delay: 0.17s; }
.widgets.anordnen .widget > :not(.widget-griff) { pointer-events: none; }
.widgets.anordnen .widget.gezogen { animation: none; transform: scale(1.03); z-index: 5; cursor: grabbing; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.60)); }
.widget-griff {
  position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--primaer); color: var(--primaer-text); font-size: 0.75rem; font-weight: 800; pointer-events: none; box-shadow: var(--schatten);
}
.widget-griff span { font-size: 1rem; }
@keyframes wackeln-leicht { from { transform: rotate(-0.6deg); } to { transform: rotate(0.6deg); } }
.widget { -webkit-touch-callout: none; }
.auswahl-anzahl { flex: 1; font-weight: 800; text-align: center; }
.toast.mit-aktion { pointer-events: auto; }
.toast-text { flex: 1; }
.toast-aktion { border: 0; background: transparent; color: var(--gelb); font-weight: 800; cursor: pointer; padding: 4px 6px; }

.glaeser { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.glas {
  height: 44px; border: 2px dashed var(--linie); border-radius: 10px 10px 14px 14px; background: transparent;
  cursor: pointer; font-size: 1.1rem; color: var(--muted); transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1), background 0.15s;
}
.glas { font-weight: 700; }
.glas.voll { border: 2px solid var(--blau); background: rgba(56, 189, 248, 0.15); }
.glas:active { transform: scale(0.85); }

.hinweis-karte { display: flex; align-items: center; gap: 12px; cursor: pointer; font: inherit; color: inherit; }
.hinweis-emoji { font-size: 2rem; }
.hinweis-karte.feuer { background: linear-gradient(135deg, rgba(255, 159, 28, 0.15), rgba(255, 94, 58, 0.12)); cursor: default; }

/* ---------- Essen ---------- */

.suchzeile { display: flex; gap: 8px; }
.suchzeile .suche { flex: 1; }
.scan-btn { width: 52px; padding: 0; font-size: 1.3rem; flex: none; }
.zaehler { color: var(--gruen); font-weight: 700; font-size: 0.85rem; }
.zaehler:empty { display: none; }
.essen-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.essen-optionen .chip { justify-content: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 9px 4px; font-size: 0.8rem; }
.scan-icon { display: block; }
.btn .scan-icon { width: 18px; height: 18px; }
.scan-btn .scan-icon { width: 24px; height: 24px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; scrollbar-width: none; }
.tabs.gleich { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.tabs.gleich .chip { justify-content: center; padding: 7px 2px; font-size: 0.78rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.wasser-stand { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.wasser-stand b { font-size: 1.05rem; }
.gruppe-titel { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 10px 0 4px; }
.foods { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.foods li { display: flex; align-items: center; gap: 4px; }
.food {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 6px; border: 0; background: transparent;
  border-radius: 14px; cursor: pointer; text-align: left; min-width: 0;
}
.food:hover, .food:focus-visible { background: var(--bg-2); }
.food-emoji { font-size: 1.5rem; width: 42px; height: 42px; display: grid; place-items: center; background: var(--bg-2); border-radius: 12px; flex: none; }
.food-bild { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; background: #fff; flex: none; }
.food-bild.gross, .food-emoji.gross { width: 64px; height: 64px; font-size: 2.2rem; }
.food-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.food-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.food-kcal { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.food-kopf { display: flex; align-items: center; gap: 12px; }
.stern { font-size: 1.3rem; color: var(--muted); transition: background 0.15s, color 0.15s, transform 0.15s; }
.stern .ic, .stern .ic[data-farbe] { width: 1.25em; height: 1.25em; color: inherit; }
.stern .ic .ic-flaeche { opacity: 0; }
.stern.an { color: #f5b301; background: color-mix(in srgb, #f5b301 18%, transparent); }
.stern.an .ic .ic-flaeche { opacity: 1; }
.stern.an:active { transform: scale(0.9); }
.menge-zeile { display: flex; align-items: center; gap: 10px; }
.menge-zeile input { font-size: 1.6rem; font-weight: 800; text-align: center; min-height: 60px; }
.menge-einheit { font-weight: 700; color: var(--muted); white-space: nowrap; }
.vorschau { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-2); border-radius: var(--radius-klein); padding: 12px 16px; flex-wrap: wrap; }
.vorschau-kcal { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.gross-zahl { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.02em; background: var(--verlauf-text, var(--verlauf)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.makro-pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.pille { padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 0.82rem; color: #fff; }
.pille.protein { background: var(--protein); }
.pille.kh { background: var(--kh); color: #3d2a00; }
.pille.fett { background: var(--fett); }
.nw-tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.nw-tabelle th, .nw-tabelle td { padding: 6px 4px; border-bottom: 1px solid var(--linie); text-align: right; }
.nw-tabelle th:first-child, .nw-tabelle td:first-child { text-align: left; }

/* ---------- Sheets ---------- */

.backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  animation: blende 0.2s ease-out; backdrop-filter: blur(2px);
}
.backdrop.weg { animation: blendeAus 0.22s ease-in forwards; }
.backdrop.weg .sheet { animation: runter 0.22s ease-in forwards; }
@keyframes blende { from { opacity: 0; } }
@keyframes blendeAus { to { opacity: 0; } }
@keyframes hoch { from { transform: translateY(100%); } }
@keyframes runter { to { transform: translateY(100%); } }
.sheet {
  background: var(--karte); width: 100%; max-width: 640px; max-height: 92dvh; border-radius: 28px 28px 0 0;
  display: flex; flex-direction: column; animation: hoch 0.3s cubic-bezier(.2, 1, .3, 1);
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}
.sheet.gross { height: 92dvh; }
.sheet-griff { width: 44px; height: 5px; border-radius: 999px; background: var(--linie); margin: 8px auto 0; flex: none; }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px 6px; flex: none; }
.sheet-body { padding: 6px 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
@media (min-width: 700px) {
  .backdrop { align-items: center; }
  .sheet { border-radius: 28px; max-height: 86dvh; }
  .sheet.gross { height: 86dvh; }
  .sheet-griff { display: none; }
}

.toasts { position: fixed; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 12px); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 32px)); pointer-events: none; }
.toast {
  background: var(--text); color: var(--bg); border-radius: 16px; padding: 12px 16px; font-weight: 650; display: flex; gap: 10px; align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: toastRein 0.35s cubic-bezier(.3, 1.5, .5, 1);
}
.toast.fehler { background: var(--rot); color: #fff; }
.toast.weg { opacity: 0; transform: translateY(-10px); transition: 0.3s; }
.toast-emoji { font-size: 1.3rem; }
@keyframes toastRein { from { opacity: 0; transform: translateY(-20px) scale(0.95); } }

.float-xp {
  position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 90; pointer-events: none;
  font-weight: 900; font-size: 1.8rem; color: var(--orange); text-shadow: 0 2px 0 #fff, 0 4px 14px rgba(255, 159, 28, 0.5);
  animation: xpHoch 1.6s ease-out forwards;
}
@keyframes xpHoch { 0% { opacity: 0; transform: translate(-50%, 20px) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(1); } }

.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.konfetti i {
  position: absolute; top: -20px; left: var(--x); width: var(--s); height: calc(var(--s) * 0.5); background: var(--c); border-radius: 2px;
  animation: faellt var(--d) cubic-bezier(.25, .6, .5, 1) var(--delay) forwards;
}
@keyframes faellt { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }

.laden { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; }
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--bg-2); border-top-color: var(--primaer); animation: dreh 0.8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

.leer { text-align: center; padding: 24px 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- Scanner ---------- */

.scanner { position: fixed; inset: 0; background: #000; z-index: 100; color: #fff; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-rahmen {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(80vw, 340px); height: min(46vw, 190px);
  border-radius: 20px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5); border: 3px solid rgba(255, 255, 255, 0.9); overflow: hidden;
}
.scan-linie { position: absolute; left: 8%; right: 8%; height: 3px; background: var(--primaer-2); box-shadow: 0 0 12px var(--primaer-2); animation: scanLinie 1.8s ease-in-out infinite alternate; }
@keyframes scanLinie { from { top: 10%; } to { top: 88%; } }
.scan-oben { position: absolute; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 12px); left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; }
.scan-unten { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 20px); display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 480px; margin: 0 auto; }
.scan-oben .spacer { flex: 1; }
.scan-foto { background: rgba(255, 255, 255, 0.92); color: #1d1933; }
.scan-status { text-align: center; font-weight: 650; text-shadow: 0 1px 4px #000; }
.scan-manuell { display: flex; gap: 8px; }
.scan-manuell input { background: rgba(255, 255, 255, 0.95); color: #111; border: 0; }

/* ---------- Login & Onboarding ---------- */

.onboarding { display: flex; flex-direction: column; justify-content: center; gap: 22px; max-width: 440px; margin: 0 auto; }
.login-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.login-hero h1 { font-size: 2.2rem; font-weight: 900; background: var(--verlauf-text, var(--verlauf)); -webkit-background-clip: text; background-clip: text; color: transparent; }

@keyframes huepfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.punkte { display: flex; justify-content: center; gap: 8px; }
.punkte span { width: 10px; height: 10px; border-radius: 999px; background: var(--linie); transition: width 0.3s, background 0.3s; }
.punkte span.fertig { background: var(--primaer); }
.punkte span.aktiv { width: 28px; background: var(--verlauf); }
.onboarding-karte { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.ergebnis { display: flex; flex-direction: column; gap: 14px; }
.ergebnis-kcal { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-weight: 700; }
.ergebnis-kcal .gross-zahl { font-size: 3.4rem; }
.ergebnis-kcal.klein .gross-zahl { font-size: 2.6rem; }
.makro-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.makro-kachel { border-radius: var(--radius-klein); padding: 10px 6px; text-align: center; font-size: 0.78rem; font-weight: 650; display: flex; flex-direction: column; color: #fff; }
.makro-kachel b { font-size: 1.2rem; }
.makro-kachel.protein { background: var(--protein); }
.makro-kachel.kh { background: var(--kh); color: #3d2a00; }
.makro-kachel.fett { background: var(--fett); }
.erklaerung { margin: 0; padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }

/* ---------- Training ---------- */

.start-karte { display: flex; align-items: center; gap: 10px; background: var(--verlauf); color: var(--primaer-text); padding: 10px 12px; }
.start-karte b { font-size: 0.95rem; }
.start-karte .muted { color: rgba(255, 255, 255, 0.85); }
.start-karte > div:nth-child(2) { flex: 1; }
.start-karte .btn.primary { background: #fff; color: var(--primaer); box-shadow: none; }
.start-emoji { font-size: 1.6rem; animation: huepfen 2.4s ease-in-out infinite; }

.statistik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: linear-gradient(180deg, var(--karte-oben) 0%, var(--karte) 100%); border-radius: var(--radius-klein); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; box-shadow: var(--schatten); }
.sheet .stat { background: var(--bg-2); box-shadow: none; }
.stat b { font-size: 1.15rem; font-weight: 800; }
.stat span { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.stat.feuer b { color: var(--orange); }
.stat select { min-height: 0; padding: 2px 6px; border: 0; background: transparent; font-weight: 800; text-align: center; width: auto; }

.routinen { display: flex; flex-direction: column; gap: 8px; }
.routine { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border-radius: var(--radius-klein); padding: 10px 12px; }
.routine-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.routine-text .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routine-uebung { background: var(--bg-2); border-radius: var(--radius-klein); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.routine-uebung-kopf { display: flex; align-items: center; gap: 6px; }
.routine-uebung-kopf b { flex: 1; }
.routine-werte { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.routine-werte input { width: 64px; min-height: 36px; padding: 6px; text-align: center; }
.stepper { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; }

.pr-badge { margin-left: 6px; font-size: 0.75rem; background: rgba(255, 201, 60, 0.25); padding: 1px 6px; border-radius: 999px; }
.detail-uebung { display: flex; flex-direction: column; gap: 2px; }
.saetze-liste { margin: 0; padding-left: 22px; color: var(--muted); }
.saetze-liste .aufwaermen { opacity: 0.7; }

.workout { padding-bottom: 90px; }
.workout-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 6px) 0 8px; }
.uhr { font-weight: 900; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.workout-name { font-size: 1.3rem; font-weight: 800; border-color: transparent; background: transparent; padding-left: 4px; }
.uebung { display: flex; flex-direction: column; gap: 10px; }
.saetze { display: flex; flex-direction: column; gap: 6px; }
.satz { display: grid; grid-template-columns: 12px 38px 1fr 1fr 1fr 44px; gap: 6px; align-items: center; position: relative; border-radius: 12px; padding: 2px; transition: background 0.2s; }
.satz.kopfzeile { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; text-align: center; }
.satz input { min-height: 40px; padding: 6px; text-align: center; font-weight: 700; }
.satz.fertig { background: rgba(52, 232, 158, 0.14); }
.satz.fertig input { border-color: transparent; background: transparent; }
.satz-nr { border: 0; background: var(--bg-2); border-radius: 10px; height: 36px; font-weight: 800; cursor: pointer; }
.satz.aufw .satz-nr { background: rgba(255, 201, 60, 0.3); color: var(--gelb); }
.vorher { text-align: center; }
.haken { border: 0; border-radius: 12px; height: 40px; background: var(--bg-2); font-weight: 900; font-size: 1.1rem; cursor: pointer; color: var(--muted); transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1), background 0.15s; }
.satz.fertig .haken { background: var(--gruen); color: #04201c; transform: scale(1.05); }
.haken:active { transform: scale(0.85); }
.satz-pr { position: absolute; right: 50px; top: -8px; font-size: 0.7rem; font-weight: 800; background: var(--gelb); color: #3d2a00; padding: 1px 6px; border-radius: 999px; animation: toastRein 0.4s; }
.satz-weg { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--linie); font-size: 0.65rem; cursor: pointer; display: none; }
.satz:hover .satz-weg, .satz:focus-within .satz-weg { display: block; }
.pause {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 14px); width: min(608px, calc(100% - 24px));
  background: var(--text); color: var(--bg); border-radius: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 8px; z-index: 30;
  overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); animation: toastRein 0.3s;
}
.pause-balken { --p: 1; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p) * 100%); background: var(--verlauf); transition: width 0.5s linear; }
.pause-titel { font-weight: 700; }
.pause-zeit { font-size: 1.4rem; font-variant-numeric: tabular-nums; flex: 1; }
.pause .chip { background: rgba(127, 127, 127, 0.3); color: inherit; }
.rekorde { list-style: none; padding: 0; margin: 0; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.xp-gewinn { font-weight: 900; font-size: 1.6rem; color: var(--orange); }

/* ---------- Fortschritt ---------- */

.level-karte { display: flex; align-items: center; gap: 14px; }
.level-emoji { font-size: 2.8rem; animation: huepfen 2.4s ease-in-out infinite; }
.level-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.abzeichen-kopf { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 0; }
.abzeichen-kopf h3 { flex: none; }
.abzeichen-vorschau { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: 1.05rem; }
.abzeichen-pfeil { font-size: 1.4rem; color: var(--muted); transition: transform 0.2s; }
.abzeichen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.badge { border-radius: var(--radius-klein); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg-2); opacity: 0.55; filter: grayscale(0.8); }
.badge.erreicht { opacity: 1; filter: none; background: linear-gradient(160deg, rgba(255, 210, 63, 0.22), rgba(var(--glow), 0.12)); }
.badge-emoji { font-size: 2rem; }
.badge.erreicht .badge-emoji { animation: wackeln 3s ease-in-out infinite; }
.badge b { font-size: 0.85rem; }
.xp-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.levelup { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.levelup-emoji { font-size: 4.5rem; animation: huepfen 1.6s ease-in-out infinite; }
.levelup-level { font-size: 2rem; font-weight: 900; background: var(--verlauf-text, var(--verlauf)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.karte.klickbar { cursor: pointer; transition: transform 0.12s; }
.karte.klickbar:active { transform: scale(0.99); }
.kopf-rechts { margin-left: auto; flex: none; }
.tabs.eng { margin: 0; padding: 0; }
.stat.gut b, .kennzahlen b.gut, .gewicht-diff.gut { color: var(--gruen); }
.stat.schlecht b, .kennzahlen b.schlecht, .gewicht-diff.schlecht { color: var(--orange); }
.gewicht-diff { font-weight: 800; white-space: nowrap; }
.gewicht-diff.neutral { color: var(--muted); }
.kennzahlen { list-style: none; margin: 0; padding: 0; }
.kennzahlen li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.kennzahlen li:last-child { border-bottom: 0; }
.kennzahlen b { text-align: right; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; }
.legende span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; background: var(--primaer); }
.legende .l-trend::before { background: var(--orange); }
.legende .l-gut::before { background: var(--gruen); }
.legende .l-ueber::before { background: var(--rot); }
.makro-kopf.zeile { flex-direction: row; justify-content: space-between; gap: 8px; }
.badge-fortschritt { width: 100%; display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.badge-ok { color: var(--gruen); font-weight: 800; font-size: 0.75rem; }
a.abzeichen-kopf { text-decoration: none; color: inherit; }
.legende .l-ziel::before { background: var(--gruen); }
.chart .trend { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 3; stroke-linecap: round; }

.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .raster { stroke: var(--linie); stroke-width: 1; }
.chart text { fill: var(--muted); font-size: 9px; font-family: inherit; }
.chart .linie { fill: none; stroke: var(--primaer); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart.sekundaer .linie { stroke: var(--primaer-2); }
.chart .flaeche { fill: var(--primaer); opacity: 0.1; }
.chart.sekundaer .flaeche { fill: var(--primaer-2); }
.chart .punkt { fill: var(--karte); stroke: var(--primaer); stroke-width: 2.5; }
.chart.sekundaer .punkt { stroke: var(--primaer-2); }
.chart .ziel { stroke: var(--gruen); stroke-width: 2; stroke-dasharray: 5 4; }
.chart .saeule { fill: var(--primaer); opacity: 0.85; }
.chart .linie { filter: drop-shadow(0 0 4px rgba(var(--glow), 0.5)); }
.chart .saeule.gut { fill: var(--gruen); }
.chart .saeule.ueber { fill: var(--rot); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Kalender (Ernährung + Training) ---------- */

.kal-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.kal-titel { font-weight: 800; font-size: 1rem; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; padding: 4px 6px; border-radius: 10px; cursor: pointer; min-width: 0; text-align: center; }
span.kal-titel { cursor: default; }
.kal-kopf > .kal-titel { flex: 1; }
.kal-kopf > .chip { flex: none; }
.kal-pfeil { color: var(--muted); font-size: 0.75rem; }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.kal-wt { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.kal-tag {
  position: relative; display: flex; align-items: center; justify-content: center; height: 30px; min-width: 0;
  border: 0; border-radius: 11px; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 0.9rem; padding: 0;
}
button.kal-tag { cursor: pointer; transition: transform 0.12s, background 0.15s; }
button.kal-tag:active { transform: scale(0.9); }
.kal-tag.zukunft { opacity: 0.45; }
.kal-tag.heute { color: var(--primaer); box-shadow: inset 0 0 0 2px var(--primaer); }

/* Ernährung: getrackte Tage als runde, eingefärbte Kreise (grün = im Ziel, orange = getrackt, rot = drüber) */
.kal-klein { padding: 8px 10px; }
.kal-klein .kal-raster { row-gap: 4px; }
.kal-klein .kal-tag { width: 30px; height: 30px; margin: 0 auto; font-size: 0.82rem; border-radius: 50%; --f: transparent; }
.kal-klein .kal-tag.an { --f: var(--orange); }
.kal-klein .kal-tag.ziel { --f: var(--gruen); }
.kal-klein .kal-tag.drueber { --f: var(--rot); }
.kal-klein .kal-tag:is(.an, .ziel, .drueber) { background: color-mix(in srgb, var(--f) 26%, transparent); color: var(--f); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--f) 55%, transparent); }
.kal-klein .kal-tag.heute:is(.an, .ziel, .drueber) { box-shadow: inset 0 0 0 2px var(--primaer); }
.kal-klein .kal-tag.gewaehlt { background: var(--verlauf); color: var(--primaer-text); box-shadow: none; }
.kal-klein .kal-tag.gewaehlt:is(.an, .ziel, .drueber) { background: var(--verlauf); color: var(--primaer-text); box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--f); }

/* Training: Trainingstage farbig gefüllt */
.kal-tag.kraft { background: var(--verlauf-training); color: #fff; }
.kal-tag.cardio { background: var(--cardio); color: #04201c; }
.kal-tag.kraft.cardio { background: linear-gradient(135deg, var(--training) 0 50%, var(--cardio) 50% 100%); }
.kal-tag.heute.kraft, .kal-tag.heute.cardio { box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--primaer); }
.tr-kalender { padding: 8px 10px; }
.tr-kalender .legende { margin-top: 6px; }

/* Aufklappen (Accordion) */
.kal-klapp { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; padding: 2px 4px; text-align: left; cursor: pointer; }
.kal-klapp.offen, .kal-klapp-zeile.offen { margin-bottom: 6px; }
.kal-klapp-zeile { display: flex; align-items: center; gap: 6px; }
.kal-klapp-zeile .kal-klapp { margin-bottom: 0; flex: 1; min-width: 0; }
.kal-klapp-zeile > .chip { flex: none; }
.kal-klapp-emoji { font-size: 1.2rem; flex: none; }
.kal-klapp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.kal-klapp-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-chevron { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); color: var(--muted); font-size: 0.8rem; transition: transform 0.2s; }
.kal-klapp.offen .kal-chevron { transform: rotate(180deg); }
.karte.zu { padding-top: 8px; padding-bottom: 8px; }
.legende .l-kraft::before, .legende .l-cardio::before, .legende .l-beides::before { width: 10px; height: 10px; border-radius: 3px; }
.legende .l-kraft::before { background: var(--verlauf-training); }
.legende .l-cardio::before { background: var(--cardio); }
.legende .l-beides::before { background: linear-gradient(135deg, var(--training) 0 50%, var(--cardio) 50% 100%); }

/* Jahresansicht */
.jahr-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jahr-monat { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; border-radius: var(--radius-klein); background: var(--bg-2); color: inherit; font: inherit; padding: 8px; cursor: pointer; text-align: left; }
.jahr-monat:active { transform: scale(0.97); }
.jahr-monat.jetzt { box-shadow: inset 0 0 0 2px var(--primaer); }
.jahr-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; }
.jahr-anzahl { font-weight: 800; color: var(--primaer); }
.kal-raster.mini { gap: 2px; }
.kal-raster.mini .kal-tag { height: auto; aspect-ratio: 1; border-radius: 3px; background: var(--linie); }
.kal-raster.mini .kal-tag.kraft { background: var(--training); }
.kal-raster.mini .kal-tag.cardio { background: var(--cardio); }
.kal-raster.mini .kal-tag.kraft.cardio { background: linear-gradient(135deg, var(--training) 0 50%, var(--cardio) 50% 100%); }
.kal-raster.mini .kal-tag.heute { box-shadow: 0 0 0 1.5px var(--primaer-2); }
.kal-raster.mini .kal-tag.zukunft { opacity: 0.4; }

/* ---------- Fortschrittsfotos ---------- */

.segmente.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmente.mini { grid-template-columns: 1fr 1fr; gap: 4px; }
.segmente.mini .segment { padding: 5px 10px; font-size: 0.78rem; min-height: 0; }
.foto-vorschau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.foto-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.foto-kachel {
  position: relative; display: block; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: 12px; overflow: hidden;
  background: var(--bg-2); cursor: pointer; min-width: 0;
}
button.foto-kachel:active { transform: scale(0.97); }
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-kachel.gewaehlt { box-shadow: 0 0 0 3px var(--primaer); }
.foto-datum, .foto-ansicht {
  position: absolute; bottom: 4px; padding: 1px 6px; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.6); color: #fff;
}
.foto-datum { left: 4px; }
.foto-ansicht { right: 4px; }

.vergleich-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vergleich-paar figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foto-knopf { border: 0; padding: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-2); cursor: pointer; }
.foto-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vergleich-label { display: flex; flex-direction: column; align-items: center; border: 0; background: none; color: inherit; font: inherit; font-size: 0.8rem; cursor: pointer; padding: 0; }
.vergleich-label b { color: var(--primaer); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.vergleich-labels { display: flex; justify-content: space-between; }
.vergleich-fazit { margin: 0; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--primaer); }

/* Schieber: unten „Vorher“, darüber „Nachher“ bis zur Linie */
.vergleich-schieber { --x: 50%; position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.vergleich-schieber img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich-schieber .vergleich-oben { clip-path: inset(0 0 0 var(--x)); }
.schieber-linie { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--primaer); box-shadow: 0 0 10px rgba(var(--glow), 0.8); pointer-events: none; }
.schieber-regler { width: 100%; accent-color: var(--primaer); }

.foto-neu img { width: 100%; max-height: 46vh; object-fit: contain; border-radius: 14px; background: #000; display: block; }
.foto-platzhalter { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 10px; border: 2px dashed var(--linie); border-radius: 14px; }
.foto-platzhalter span:first-child { font-size: 2.2rem; }

/* Vollbild (unter den Fenstern, damit Bearbeiten/Löschen darüber erscheinen) */
.betrachter { position: fixed; inset: 0; z-index: 45; background: #000; color: #fff; display: flex; flex-direction: column; touch-action: pan-y; user-select: none; }
.betrachter-oben { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 10px) 12px 8px; }
.betrachter-zaehler { flex: 1; text-align: center; font-weight: 700; font-size: 0.9rem; opacity: 0.8; }
.betrachter-mitte { flex: 1; min-height: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.betrachter-bild { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.betrachter-mitte .icon-btn:disabled { opacity: 0.2; }
.betrachter-info { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 16px); font-size: 0.9rem; text-align: center; }
.betrachter-notiz { opacity: 0.75; font-style: italic; }

/* Trainingsfokus Cardio: Start-Karte mit Lauf/Velo-Knöpfen, Bestwerte */
.start-knoepfe { display: flex; gap: 6px; flex: none; }
.start-knoepfe .btn { font-size: 1.15rem; padding: 6px 12px; }
.bestwerte li { flex-wrap: wrap; }
.bestwerte li .muted { flex-basis: 100%; text-align: right; margin-top: -6px; }
.wochen-statistik .gruppe-titel { margin: 0 2px 6px; }
.stat .stat-vorher { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 2px; opacity: 0.85; }

/* Profil: kurzer Fuss-Link, Quellen untereinander */
.fuss-link { display: block; text-align: center; text-decoration: none; padding: 6px; }
.quellen li { flex-direction: column; gap: 2px; }
.quellen b { text-align: left; font-weight: 600; font-size: 0.9rem; }

/* Einstellungen: Gruppen wie in den iOS-Einstellungen */
.einstellung-gruppe { margin: 6px 6px -4px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* Mikronährstoffe */
.makros.klickbar { position: relative; }
.mikro-gruppe { font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 6px; }
.mikro-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mikro-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 2px 8px; align-items: baseline; font-size: 0.88rem; }
.mikro-name { font-weight: 650; }
.mikro-wert { color: var(--muted); font-size: 0.78rem; }
.mikro-prozent { text-align: right; font-weight: 800; font-size: 0.8rem; }
.mikro-balken { grid-column: 1 / -1; }
.mikro-balken .balken { height: 6px; }
.mikro-balken.voll .balken-fill { background: var(--gruen); }
.mikro-balken.halb .balken-fill { background: var(--primaer); }
.mikro-balken.wenig .balken-fill { background: var(--orange); }
.nw-gruppe td { padding-top: 10px; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* Körpermasse */
.masse-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---------- Fasten ---------- */

.fasten-karte { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 20px; }
.fasten-karte .zwei-spalten { width: 100%; }
.ring.fasten .ring-wert.ueber { stroke: var(--gruen) !important; }
.ring.essfenster .ring-wert { stroke: var(--orange); }
.fasten-karte .ring-zahl { font-size: 2rem; }
.fasten-info { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.fasten-info b { font-size: 1.05rem; }
.fasten-phase { margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--bg-2); font-weight: 700; font-size: 0.85rem; }
.phasen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.phase { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.phase.aktiv { background: rgba(var(--glow), 0.1); box-shadow: inset 0 0 0 1.5px var(--primaer); }
.phase.vorbei { opacity: 0.55; }
.phase-emoji { font-size: 1.3rem; width: 30px; text-align: center; flex: none; }
.phase-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.phase-ab { flex: none; font-size: 0.75rem; font-weight: 800; color: var(--muted); }
.phase.vorbei .phase-ab { color: var(--gruen); }
.fasten-hinweis { padding: 0 8px; }

/* ---------- Koffein ---------- */

.koffein .wasser-stand { margin-bottom: 8px; }
.koffein .wasser-stand b { white-space: nowrap; }
.balken-fill.koffein { background: linear-gradient(90deg, #c08457, #e0a96d); }
.koffein-knoepfe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 44px; gap: 6px; margin-top: 12px; }
.koffein-alle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.koffein-knopf {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 2px;
  border: 1px solid var(--linie); border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1);
}
.koffein-knopf:active { transform: scale(0.9); }
.koffein-emoji { font-size: 1.25rem; line-height: 1.2; }
.koffein-name { font-size: 0.72rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.koffein-mg { font-size: 0.68rem; color: var(--muted); }
.koffein-knopf.mehr .koffein-emoji { color: var(--muted); }
.koffein .warnung, .koffein p { margin: 10px 0 0; }
.widget-text.wachsen { flex: 1; }
.koffein-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.koffein-aktionen .btn { white-space: nowrap; }

/* Einrichtung: ohne Tab-Leiste – die Seite füllt genau den Bildschirm und scrollt nur, wenn ein Schritt länger ist */
html.einrichtung .app {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
}
html.einrichtung .app > .onboarding { flex: 1; }
html.einrichtung, html.einrichtung body { overscroll-behavior: none; }
/* Anmeldeseite: füllt genau den Bildschirm, scrollt nur, wenn der Inhalt länger ist */
html.anmelden, html.anmelden body { overscroll-behavior: none; }
html.anmelden .app { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 16px); }
html.anmelden .app > .login-rahmen { flex: 1; display: flex; flex-direction: column; }
.login-rahmen > .login { flex: 1; width: 100%; }
.login { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 440px; margin: 0 auto; }
.login-hero p { margin: 0; color: var(--muted); }
@media (max-height: 640px) { .login { gap: 14px; } .login-marke img { width: 44px; height: 44px; } }

/* Tag wechseln per Wischen: die Widgets fahren aus der Wischrichtung ein */
.einfahren-rechts { animation: einfahren-rechts 0.22s ease-out; }
.einfahren-links { animation: einfahren-links 0.22s ease-out; }
@keyframes einfahren-rechts { from { transform: translateX(28px); } to { transform: none; } }
@keyframes einfahren-links { from { transform: translateX(-28px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .einfahren-rechts, .einfahren-links { animation: none; } }
.app { overflow-x: clip; }
.app-status { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(var(--glow), 0.15); color: var(--primaer); font-size: 0.7rem; font-weight: 800; vertical-align: middle; }
.app-version .btn { flex: none; text-decoration: none; }

/* Mahlzeiten einklappen: Kopf (Emoji + Titel) ist der Knopf, + und Scan bleiben daneben */
.mahlzeit-klapp { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.mahlzeit-klapp { cursor: pointer; }
.klapp-pfeil { display: inline-block; margin-left: 6px; color: var(--muted); font-size: 0.8em; transition: transform 0.2s; }
.mahlzeit.zu .klapp-pfeil { transform: rotate(-90deg); }
.test-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.test-knopf { justify-content: flex-start; gap: 8px; min-width: 0; text-align: left; }
.test-knopf span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bei offenem Fenster Meldungen unten zeigen – oben liegt das ✕ zum Schliessen */
body.modal-offen .toasts { top: auto; bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 24px); flex-direction: column-reverse; }

/* Muskel-Piktogramme (statt Emojis) */
.muskel { width: 100%; height: 100%; display: block; }
.muskel-teil { fill: #46525f; }
.muskel-teil.an { fill: var(--blau); }
.muskel-linie { stroke: var(--karte); stroke-width: 0.7; fill: none; }
.muskel-box { padding: 4px; }
.muskel-box .muskel { height: 100%; width: 100%; }
.muskel-zeile { display: inline-flex; align-items: center; gap: 6px; }
.muskel-zeile .muskel { width: 20px; height: 20px; }
/* Kategorien bei der Übungswahl: umbrechen, alle sichtbar */
.gruppen-wahl { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.gruppen-wahl .chip { padding: 6px 11px; font-size: 0.8rem; }

/* Routine: Sätze · Wdh · kg · Pause in einer bündigen Zeile */
.routine-raster { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 4px 8px; align-items: center; margin-top: 8px; }
.raster-titel { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; text-align: center; }
.routine-raster input, .routine-raster select { width: 100%; min-height: 38px; padding: 6px 4px; text-align: center; font-weight: 700; }
.routine-raster .stepper { gap: 2px; }
.routine-raster .stepper b { min-width: 18px; text-align: center; }
.routine-muskel { width: 28px; height: 34px; flex: none; }
.pause-auswahl { text-align-last: center; }
/* Pause pro Übung im Kopf der Übungskarte */
.uebung-pause { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; border-radius: 999px; background: var(--bg-2); flex: none; font-size: 0.8rem; }
.uebung-pause select { border: 0; background: transparent; min-height: 30px; padding: 2px 2px; font-weight: 700; font-size: 0.8rem; width: auto; color: var(--text); }
.muskel-teil.neben { fill: rgba(58, 168, 255, 0.45); }

/* ---------- Übungs-Detail ---------- */
.uebung-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uebung-chips .chip { pointer-events: none; }
/* Foto-Folge: Start- und Endposition blenden ineinander – wirkt wie ein kurzes Video */
.uebung-film { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 2; background: #fff; }
.uebung-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uebung-film img.zweites { animation: film 2.6s ease-in-out infinite; }
@keyframes film { 0%, 35% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .uebung-film img.zweites { animation-duration: 6s; } }
.film-hinweis { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(10, 12, 16, 0.7); color: #fff; font-size: 0.7rem; font-weight: 700; }
.uebung-schritte { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.uebung-tipp { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(58, 168, 255, 0.12); line-height: 1.4; }
.uebung-muskeln { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.uebung-figuren { display: flex; gap: 6px; }
.uebung-figuren .muskel.gross { width: 72px; height: 112px; }
.uebung-muskel-klein { width: 60px; height: 60px; }
.muskel-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--blau); }
.muskel-punkt.neben { background: rgba(58, 168, 255, 0.45); }
.rekorde li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.rekorde li .muted { grid-column: 1 / -1; margin-top: -2px; }
.quelle { margin: 0; }
/* Antippbares Übungs-Bild/-Name */
.uebung-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.routine-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.foods li > .uebung-link.food-emoji { margin-left: 6px; }

/* ---------- Level-Seite ---------- */
.rang { display: flex; flex-direction: column; gap: 10px; }
.rang-kopf { display: flex; align-items: center; gap: 12px; }
.rang-emoji { font-size: 1.8rem; width: 44px; text-align: center; flex: none; }
.rang-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rang-status { font-size: 0.78rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.rang.erreicht .rang-status { color: var(--gruen); font-size: 1.1rem; }
.rang.aktuell { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer) inset; }
.rang.aktuell .rang-status { color: var(--primaer); }
.rang.offen { opacity: 0.6; }
.level-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.level-punkt { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; background: var(--bg-2); color: var(--muted); }
.level-punkt.voll { background: rgba(var(--glow), 0.18); color: var(--primaer); }
.level-punkt.jetzt { background: var(--verlauf); color: var(--primaer-text); box-shadow: 0 0 12px rgba(var(--glow), 0.5); }

/* Admin: Konten-Liste */
.konto-zeile { text-decoration: none; color: inherit; }
.konto-zuletzt { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }

/* ---------- Sortieren per Griff (raue Fläche links) ---------- */
.zieh-griff {
  flex: none; align-self: stretch; width: 18px; min-height: 36px; border-radius: 6px; cursor: grab; touch-action: none;
  background-image: radial-gradient(circle, var(--muted) 1.1px, transparent 1.4px); background-size: 6px 6px; background-position: center; opacity: 0.55;
}
.zieh-griff:active { cursor: grabbing; opacity: 1; }
.wird-gezogen { position: relative; z-index: 3; transform: scale(1.02); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55); background: var(--bg-2); border-radius: 14px; }
.routine { gap: 10px; }

/* ---------- Satz-Typen ---------- */
.satz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.satz-chip { min-width: 34px; height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--linie); background: var(--bg-2); color: var(--text); font-weight: 800; font-size: 0.8rem; cursor: pointer; }
.typ-aufwaermen { color: var(--gelb) !important; background: rgba(255, 201, 60, 0.16) !important; border-color: rgba(255, 201, 60, 0.4) !important; }
.typ-fehler { color: var(--rot) !important; background: rgba(255, 77, 109, 0.15) !important; border-color: rgba(255, 77, 109, 0.4) !important; }
.typ-drop { color: #b794f6 !important; background: rgba(183, 148, 246, 0.16) !important; border-color: rgba(183, 148, 246, 0.4) !important; }
.satztyp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--linie); border-radius: 14px; background: var(--bg-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.satztyp.aktiv { border-color: var(--primaer); }
.satztyp.gefahr b { color: var(--rot); }
.satztyp-kurz { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: var(--karte); border: 1px solid var(--linie); flex: none; }
.satztyp-text { flex: 1; display: flex; flex-direction: column; }
.satztyp-haken { color: var(--primaer); font-weight: 900; }

/* ---------- Vorlagen & Community ---------- */
.vorschlag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 14px; background: var(--bg-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.vorschlag.klein { padding: 8px 10px; }
.vorschlag-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vorschlag-text .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlag-zahl, .vorschlag-plus { flex: none; font-weight: 800; font-size: 0.8rem; color: var(--primaer); }
.vorschlag-plus { font-size: 1.2rem; }
.vorschlag-kopf { display: flex; align-items: center; justify-content: space-between; }
.plan-text { margin: -2px 0 2px; }

/* Fotos aufnehmen: Vorne · Seite · Hinten in einem Fenster */
.foto-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.foto-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.foto-slot-bild { width: 100%; aspect-ratio: 3 / 4; border: 2px dashed var(--linie); border-radius: 14px; background: var(--bg-2); color: var(--muted); display: grid; place-items: center; align-content: center; gap: 2px; overflow: hidden; padding: 0; cursor: pointer; }
.foto-slot.voll .foto-slot-bild { border: 2px solid var(--primaer); }
.foto-slot-bild img { width: 100%; height: 100%; object-fit: cover; }
.foto-slot-emoji { font-size: 1.8rem; }
.foto-slot-plus { font-size: 1.3rem; font-weight: 800; color: var(--primaer); }
.foto-slot-weg { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(10, 12, 16, 0.75); color: #fff; font-size: 0.75rem; cursor: pointer; }
.foto-slot-name { font-size: 0.85rem; }
.foto-slot-knoepfe { display: flex; gap: 6px; }

/* Training: Griffleiste zum Verkleinern, Seite folgt beim Herunterziehen dem Finger */
.minimier-griff { display: block; width: 56px; height: 18px; margin: 0 auto -4px; border: 0; background: transparent; cursor: grab; touch-action: none; position: relative; }
.minimier-griff::after { content: ''; position: absolute; left: 8px; right: 8px; top: 7px; height: 5px; border-radius: 999px; background: var(--linie); }
.workout-kopf { touch-action: none; }
/* Nur während des Ziehens verschieben – ein dauerhaftes transform würde die fixierte Pausen-Leiste mitnehmen */
.seite.workout.wird-gezogen-seite, .seite.workout.zurueck { transform: translateY(var(--zug, 0px)); }
.seite.workout.zurueck { transition: transform 0.2s ease-out; }
.seite.workout.wird-gezogen-seite { opacity: 0.96; }
/* Griffe für Übungen und Sätze */
.uebung-kopf .zieh-griff { min-height: 40px; }
.satz-griff { width: 12px; min-height: 30px; background-size: 5px 5px; }
.satz.kopfzeile span:first-child { width: 12px; }
.karte-kopf .knopfreihe { flex-wrap: nowrap; flex: none; gap: 6px; }
.karte-kopf h3 { min-width: 0; }

/* Notiz pro Übung */
.uebung-notiz { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--blau); font: inherit; font-size: 0.78rem; font-weight: 700; text-align: left; cursor: pointer; }
.uebung-notiz.voll { color: var(--muted); font-weight: 500; font-style: italic; white-space: normal; }
.notiz-feld { width: 100%; resize: vertical; min-height: 96px; font: inherit; }

/* Pausen-Fenster */
.pause-knopf { border: 0; color: inherit; font: inherit; cursor: pointer; }
.pause-knopf b { font-size: 1.3rem; }
.pause-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pause-kachel { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border: 1px solid var(--linie); border-radius: 16px; background: var(--bg-2); color: inherit; font: inherit; cursor: pointer; }
.pause-kachel b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pause-kachel span { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.pause-kachel.klein { padding: 10px 4px; font-weight: 800; }
.pause-kachel.aktiv { border-color: var(--primaer); color: var(--primaer); background: rgba(var(--glow), 0.12); }
.pause-kachel:active { transform: scale(0.95); }
.pause-eigene { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--bg-2); }
.pause-eigene-zeit { flex: 1; text-align: center; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pause-laeuft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(58, 168, 255, 0.14); font-weight: 700; }
/* Ton-Auswahl */
.ton-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ton-kachel { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 14px; background: var(--bg-2); color: inherit; font: inherit; font-weight: 700; font-size: 0.85rem; text-align: left; cursor: pointer; }
.ton-kachel.aktiv { border-color: var(--primaer); color: var(--primaer); background: rgba(var(--glow), 0.1); }
.ton-emoji { font-size: 1.2rem; }

/* Neu zeichnen derselben Seite: keine Animationen (das Einfahren beim Tag-Wischen bleibt) */
html.ruhig .app *:not(.einfahren-links):not(.einfahren-rechts) { transition: none !important; animation: none !important; }

/* Ziehen zum Aktualisieren */
body { overscroll-behavior-y: contain; } /* Browser-eigenes Neuladen beim Ziehen aus – wir machen es selbst */
.ziehen { position: fixed; left: 50%; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) - 44px); z-index: 70; pointer-events: none; transform: translate(-50%, var(--y, 0px)); opacity: 0; }
.ziehen.sichtbar { opacity: 1; }
.ziehen.animiert { transition: transform 0.25s ease-out, opacity 0.25s; }
.ziehen-kreis { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); color: var(--muted); font-size: 1.25rem; font-weight: 900; transform: rotate(var(--dreh, 0deg)); transition: color 0.15s, background 0.15s; }
.ziehen-kreis.bereit { color: var(--primaer-text); background: var(--primaer); border-color: var(--primaer); }
.ziehen-kreis.dreht { animation: ziehen-dreht 0.7s linear infinite; color: var(--primaer); }
@keyframes ziehen-dreht { to { transform: rotate(360deg); } }

/* Schritte aus Health Connect: ausgegraut, mit Anbieter */
.shortcut.verbunden { opacity: 0.72; border-style: dashed; }
.shortcut.verbunden .shortcut-stand { color: var(--muted); }
.shortcut-quelle { font-size: 0.65rem; color: var(--muted); font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritte-verbunden { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; opacity: 0.85; }
.schritte-zahl { font-size: 2.6rem; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
.verbunden-hinweis { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--linie); background: var(--bg-2); color: var(--muted); font-weight: 700; }

/* Routine: Satz-Chips mit Gewicht × Wdh, antippen = Satz bearbeiten */
.satz-chip.mit-wert { height: auto; min-height: 38px; padding: 4px 9px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.satz-chip-wert { font-size: 0.68rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.satz-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.routine-raster input.verschieden::placeholder { font-size: 0.72rem; }

/* Gleiche Seite neu gezeichnet (neue Daten): keine Einblend-Animationen – bleibt bis zum Seitenwechsel */
.app.ruhig *:not(.einfahren-links):not(.einfahren-rechts):not(.zuklappen) { animation: none !important; }
/* Gelöschte Zeile klappt zusammen */
.wisch.zuklappen { max-height: var(--hoehe); overflow: hidden; animation: zuklappen 0.2s ease-in forwards; }
@keyframes zuklappen { to { max-height: 0; opacity: 0; margin: 0; padding: 0; } }
.kal-legende { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.kal-legende span { display: inline-flex; align-items: center; gap: 5px; }
.kal-legende i { width: 10px; height: 10px; border-radius: 50%; }
.kal-legende i.ziel { background: var(--gruen); }
.kal-legende i.an { background: var(--orange); }
.kal-legende i.drueber { background: var(--rot); }

/* Training: Verlauf-Kopf antippbar, Vorlagen-Symbol, „Leeres Training“ oben rechts */
.karte-kopf.klickbar-kopf { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; padding: 0; text-align: left; cursor: pointer; }
.mit-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.vorlagen-icon { flex: none; }
.kopf-start { flex: none; white-space: nowrap; }
.verlauf-filter { padding: 10px; border-radius: 14px; background: var(--bg-2); }
.verlauf-filter select, .verlauf-filter input[type=date] { width: 100%; }
.verlauf-filter .satz-felder > * { min-width: 0; }
.verlauf-filter input[type=date] { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ---------- Icons (Lucide, Linien – färben sich mit der Schrift) ---------- */
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.22em; }
.ic .ic-flaeche { opacity: 0.45; }
.tab-emoji { display: inline-flex; filter: none; }
.tab-emoji .ic { width: 24px; height: 24px; }
.tabbar a:not(.aktiv) .tab-emoji { filter: none; }
.tabbar a:not(.aktiv) .tab-emoji .ic-flaeche { opacity: 0; }
.tabbar a.aktiv .tab-emoji .ic-flaeche { opacity: 0.4; }
/* Icon vor einem Titel (h3, Knöpfe): mit Abstand, etwas gedämpft eingefärbt */
.mit-ic { display: inline-flex; align-items: center; gap: 0.45em; }
h3.mit-ic .ic, h2.mit-ic .ic { color: var(--primaer); }
.ic-box { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--bg-2); color: var(--primaer); flex: none; }
.ic-box .ic { width: 20px; height: 20px; }

/* Training: Fitness-Serie als schmale, horizontale Karte */
.serie-karte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.serie-karte .ic-box.feuer { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.serie-karte.aus .ic-box.feuer { background: var(--bg-2); color: var(--muted); }
.serie-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.serie-text b { font-size: 1.02rem; }
.serie-status { flex: none; font-size: 0.72rem; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); white-space: nowrap; }
.serie-status.ok { background: color-mix(in srgb, var(--gruen) 18%, transparent); color: var(--gruen); }
.serie-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kleiner Umschalter (z.B. Woche | Monat) */
.umschalter { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.umschalter button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.umschalter button.aktiv { background: var(--verlauf-training, var(--verlauf)); color: #fff; }
.karte.zu > .klickbar-kopf { margin: 0; } .klapp-pfeil { color: var(--muted); font-size: 0.8rem; }
/* Zeitraum-Leiste: alle 6 Knöpfe nebeneinander, gleich breit */
.tabs.zeitraum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; overflow: visible; }
.tabs.zeitraum .chip { justify-content: center; padding: 7px 2px; font-size: 0.76rem; white-space: nowrap; min-width: 0; }
/* Schmale Handys: Zeiträume in zwei Reihen à 3 statt sechs gequetschte */
@media (max-width: 380px) { .tabs.zeitraum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Profil: Verknüpfte Apps */
.verbindung-punkt { flex: none; font-size: 0.7rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.verbindung-punkt.an { background: color-mix(in srgb, var(--gruen) 18%, transparent); color: var(--gruen); }
.verbindung-punkt.an::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
.verbindung-kopf { display: flex; align-items: center; gap: 12px; }
.verbindung-kopf > div { flex: 1; min-width: 0; }
.verbindung.an .ic-box { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruen); }

/* Diagramme antippen: gewählte Säule/Punkt und Wert darunter */
.chart.antippbar svg { touch-action: pan-y; cursor: pointer; }
.chart-info { margin-top: 6px; min-height: 22px; display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 0.78rem; color: var(--muted); }
.chart-info.an { color: var(--text); }
.chart-info-titel { color: var(--muted); font-weight: 700; }
.chart-info b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.chart .saeule.gewaehlt { filter: brightness(1.25); stroke: var(--text); stroke-width: 1.5; }
.chart .spalte-gewaehlt { fill: color-mix(in srgb, var(--text) 8%, transparent); }
.chart .fuehrung { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .punkt.gewaehlt { stroke-width: 3; fill: var(--text); }

/* Wasser: eine Reihe = 1 Liter (4 Gläser), Reiter 1 l · 2 l · … */
.wasser .glaeser { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wasser-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.wasser-kopf .wasser-stand { margin: 0; }
.liter-reiter { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--bg-2); flex: none; }
.liter-reiter button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.72rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.liter-reiter button.fertig { color: var(--blau); }
.liter-reiter button.aktiv { background: var(--blau); color: #04121f; }

/* Anordnen-Modus muss sichtbar wackeln – auch nach einem ruhigen Neuzeichnen */
.app.ruhig .widgets.anordnen .widget { animation: wackeln-leicht 0.35s ease-in-out infinite alternate !important; }
.app.ruhig .widgets.anordnen .widget.gezogen { animation: none !important; }
.app.ruhig .auswahl-leiste { animation: none !important; }
/* Ein schliessendes Fenster fängt keine Tipps mehr ab */
.backdrop.weg { pointer-events: none; }
.satz-pr.session { white-space: nowrap; position: static; display: inline-block; width: fit-content; margin-top: 3px; animation: none; }
/* Übung: Satz-Rekorde (Wdh → bestes Gewicht) */
.satz-rekorde { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.satz-rekorde th { text-align: left; font-size: 0.7rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 6px 6px; }
.satz-rekorde td { padding: 7px 6px; border-top: 1px solid var(--linie); }
.satz-rekorde td:first-child, .satz-rekorde th:first-child { width: 3.5em; }
.satz-rekorde td:last-child, .satz-rekorde th:last-child { text-align: right; }

/* Profil → Ziel & Kalorien: Tagesziel */
.tagesziel-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 10px; }
.tagesziel-zahl { font-size: 2.3rem; font-weight: 900; line-height: 1; color: var(--primaer); font-variant-numeric: tabular-nums; }
.tagesziel-einheit { white-space: nowrap; margin-left: 8px; color: var(--muted); font-weight: 700; }
.tagesziel-kopf .chip { flex: none; margin-bottom: 4px; }
.tagesziel-kopf .chip.eigen { background: color-mix(in srgb, var(--gelb) 20%, transparent); color: var(--gelb); }
.makro-leiste { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.makro-leiste span { flex-basis: 0; }
.makro-leiste .protein, .makro-legende .protein .punkt { background: var(--protein, #ff5c7a); }
.makro-leiste .kh, .makro-legende .kh .punkt { background: var(--kh, #ffc23d); }
.makro-leiste .fett, .makro-legende .fett .punkt { background: var(--fett, #4dabf7); }
.makro-legende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.makro-legende > div { display: flex; gap: 7px; align-items: flex-start; }
.makro-legende .punkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; }
.makro-legende b { display: block; font-size: 1.05rem; }
.rechnung { border-top: 1px dashed var(--linie); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.rechen-zeile { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.rechen-zeile b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechen-zeile.summe { border-top: 1px solid var(--linie); padding-top: 6px; color: var(--text); font-weight: 800; }
.rechen-zeile.summe b { color: var(--primaer); }
.anteil-kurz { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--bg-2); color: var(--text); font: inherit; font-size: 0.86rem; font-weight: 700; text-align: left; cursor: pointer; }
.anteil-pfeil { flex: none; color: var(--primaer); font-size: 0.78rem; font-weight: 800; }
.eigene-zeile { display: flex; align-items: center; gap: 8px; } .eigene-zeile input { width: 90px; }
.fasten-methode .satztyp-kurz { width: auto; min-width: 54px; padding: 0 8px; font-size: 0.82rem; }

/* Training bei Fokus „Beides“: Kraft | Cardio umschalten */
.modus-umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-2); }
.modus-umschalter button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 800; padding: 9px 10px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s, color 0.15s; }
.modus-umschalter button.aktiv { background: var(--verlauf-training, var(--verlauf)); color: #fff; box-shadow: var(--schatten); }
.modus-cardio .modus-umschalter button.aktiv { background: var(--cardio); color: #04201c; }
.shortcut-karte { padding-bottom: 12px; } .shortcut-karte .shortcuts-home { margin-top: 8px; }
/* Tabs verschieben (lange drücken) */
.tabbar, .tabbar a { touch-action: none; } /* Leiste scrollt nicht – so bleibt langes Drücken + Ziehen ungestört */
.tabbar a.tab-gezogen { transform: translateY(-6px) scale(1.12); background: var(--bg-2); border-radius: 14px; box-shadow: var(--schatten); }
.tabbar a { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.verlauf-titel { display: inline-flex; align-items: center; gap: 8px; width: auto; }

/* Cardio mit Stoppuhr */
.cardio-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cardio-art { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px; border-radius: 18px; border: 1px solid var(--linie); background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer; }
.cardio-art-emoji { font-size: 2rem; display: inline-flex; }
.cardio-art-emoji .ic { width: 34px; height: 34px; color: var(--cardio); }
.cardio-karte { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 16px; }
.cardio-uhr { font-size: 4.2rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--cardio); }
.cardio-uhr.pausiert { color: var(--muted); }
.cardio-status { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cardio-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.cardio-ergebnis { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; }
.cardio-ergebnis b { font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.laeuft.cardio .puls { background: var(--cardio); }
a.start-karte { text-decoration: none; color: inherit; }
.serie-karte.cardio .ic-box.feuer { background: color-mix(in srgb, var(--cardio) 18%, transparent); color: var(--cardio); }
.cardio-farbe .saeule { fill: var(--cardio); } .karte.cardio-farbe h3 .ic { color: var(--cardio); }
.diagnose { white-space: pre-wrap; word-break: break-word; font-size: 0.72rem; background: var(--bg-2); padding: 10px; border-radius: 10px; max-height: 260px; overflow: auto; }
/* Cardio-Start: Text oben, Knöpfe als eigene Zeile darunter */
.start-karte.untereinander { flex-wrap: wrap; row-gap: 10px; }
.start-karte.untereinander > div:nth-child(2) { flex: 1 1 calc(100% - 60px); min-width: 0; }
.start-knoepfe.unten { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.start-knoepfe.unten .btn { font-size: 0.84rem; padding: 8px 6px; white-space: nowrap; justify-content: center; }
/* Antippbare Überschrift (z.B. „Verlauf“ im Fasten-Tab): ohne Standard-Knopfoptik des Browsers */
button.klickbar-kopf { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; margin: 0; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
button.verlauf-titel { display: inline-flex; align-items: center; gap: 8px; width: auto; flex: 1; min-width: 0; }

/* Einrichtung als Geschichte */
.story-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.story-balken { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.story-balken span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--verlauf); border-radius: 999px; transition: width 0.35s cubic-bezier(.3, 1.4, .5, 1); }
.story-emoji { font-size: 3rem; line-height: 1; margin-bottom: 4px; animation: huepfen 2.4s ease-in-out infinite; display: inline-flex; }
.story-emoji .ic { width: 52px; height: 52px; color: var(--primaer); }
.sprach-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sprach-knopf > span:last-child { min-width: 0; line-height: 1.2; }
.sprach-knopf { display: flex; align-items: center; gap: 10px; padding: 12px; min-width: 0; min-height: 52px; border-radius: 14px; border: 1px solid var(--linie); background: var(--bg-2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.sprach-knopf.aktiv { border-color: var(--primaer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primaer) 35%, transparent); }
.sprach-flagge { font-size: 1.4rem; }
.segmente.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Plan am Ende der Einrichtung: Kacheln zu zweit (Ziel über die ganze Breite) – Symbol links, Bezeichnung über dem Wert */
.plan-liste { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.plan-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); }
.plan-liste li:first-child { grid-column: 1 / -1; }
.plan-liste li > :first-child { grid-row: span 2; }
.plan-liste li span:nth-child(2) { color: var(--muted); font-size: 0.78rem; line-height: 1.2; }
.plan-liste li > :last-child { text-align: left; line-height: 1.25; }
.plan-liste li.breit { grid-column: 1 / -1; }
.plan-emoji { display: inline-flex; }

/* ---------- Einrichtung: dichter (steht am Ende, damit es die Grundregeln oben überschreibt) ---------- */
/* Kompakter auf kleinen Handys: Auswahl dichter, weniger Rand – damit möglichst jeder Schritt ohne Scrollen passt */
.onboarding .segmente.liste { gap: 6px; }
.onboarding .segmente.liste .segment { padding: 9px 12px; }
/* Zwei Spalten (Kalorienverteilung): etwas kleiner, damit „Automatisch“ & Co. in eine Zeile passen */
.onboarding .segmente.liste.zwei-spalten .segment { padding: 8px 9px; column-gap: 7px; font-size: 0.9rem; }
.onboarding .segmente.liste.zwei-spalten .segment-emoji { font-size: 1.2rem; }
.onboarding .segmente.liste.zwei-spalten .segment-sub { font-size: 0.72rem; }
/* Tempo: vier schmale Knöpfe */
.onboarding .segmente.vier .segment { padding-inline: 4px; }
.onboarding .segmente.vier .segment-sub { font-size: 0.68rem; }
@media (max-height: 760px), (max-width: 360px) {
  .onboarding { gap: 12px; }
  .onboarding-karte { padding: 16px; gap: 12px; }
  .onboarding-karte h1 { font-size: 1.45rem; }
  .story-kopf { margin-bottom: 0; }
  .story-emoji { font-size: 2.2rem; margin-bottom: 0; }
  .story-emoji .ic { width: 38px; height: 38px; }
  .onboarding .segmente.liste .segment { padding: 7px 10px; }
  .onboarding .segment { padding: 8px; }
  .sprach-knopf { padding: 9px 10px; gap: 8px; min-height: 46px; }
}
@media (max-width: 360px) {
  .sprach-knopf { font-size: 0.88rem; }
  .onboarding .segmente.liste.zwei-spalten .segment { font-size: 0.85rem; column-gap: 6px; padding: 7px 8px; }
  .onboarding .segmente.liste.zwei-spalten .segment-emoji { font-size: 1.15rem; }
}
@media (max-height: 760px) {
  .ergebnis-kcal .gross-zahl { font-size: 2.6rem; }
  .ergebnis { gap: 10px; }
}
/* Sehr schmale Handys (iPhone SE 1. Generation): Sprachen kleiner, Kalorienverteilung in einer Spalte */
@media (max-width: 340px) {
  .sprach-knopf { font-size: 0.82rem; padding: 8px; gap: 6px; }
  .onboarding .segmente.liste.zwei-spalten { grid-template-columns: minmax(0, 1fr); }
}
/* Sehr schmale Handys: Knopfreihen à drei Wörter wie „Ernährung / Training / Fortschritt“ etwas kleiner */
@media (max-width: 340px) { .segmente.drei .segment { font-size: 0.8rem; padding-inline: 4px; } }

/* ---------- Admin: E-Mail & Konten ---------- */
/* Zeile wie in der Profil-Übersicht, aber als Knopf (öffnet ein Fenster statt einer Seite) */
button.einstellung-knopf { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding-inline: 0; }
.zwei-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.gefahr-text { color: var(--rot); }
.karte h3 .chip { margin-left: 8px; vertical-align: middle; }
.chip.gut-chip { background: color-mix(in srgb, var(--gruen, #3ddc5a) 18%, transparent); color: var(--gruen, #3ddc5a); }
.chip.warnung-chip { margin-left: 6px; background: color-mix(in srgb, var(--gelb) 20%, transparent); color: var(--gelb); }

/* ---------- Login: Passwort, Code, Honeypot ---------- */
.passwort-wrap { position: relative; }
.passwort-wrap input { padding-right: 48px; }
.passwort-auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; border-radius: 10px; }
.passwort-info { display: flex; align-items: center; gap: 10px; }
.passwort-staerke { display: flex; gap: 4px; width: 84px; flex: none; }
.passwort-staerke span { flex: 1; height: 5px; border-radius: 999px; background: var(--linie); transition: background 0.2s; }
.passwort-staerke[data-stufe="0"] span:first-child, .passwort-staerke[data-stufe="1"] span:first-child { background: var(--rot); }
.passwort-staerke[data-stufe="2"] span:nth-child(-n+2) { background: var(--gelb); }
.passwort-staerke[data-stufe="3"] span { background: var(--gruen); }
.code-eingabe { text-align: center; font-size: 2rem; font-weight: 900; letter-spacing: 0.5em; padding-left: 0.5em; font-variant-numeric: tabular-nums; }
.login-emoji { font-size: 2.6rem; text-align: center; line-height: 1; }
.login-form .formfehler.erfolg { color: var(--gruen); }
/* Honeypot: aus dem Bild geschoben (nicht display:none – das erkennen manche Bots) */
.falle { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Passwort wiederholen, Zwei-Faktor */
.passwort-gleich.passt { color: var(--gruen); }
.passwort-gleich.passt-nicht { color: var(--rot); }
.code-eingabe.backup { letter-spacing: 0.15em; padding-left: 0.15em; font-size: 1.5rem; text-transform: lowercase; }
.zf-qr { display: block; margin: 0 auto; width: 200px; height: 200px; border-radius: 14px; background: #fff; padding: 8px; image-rendering: pixelated; }
.zf-schluessel summary { cursor: pointer; padding: 6px 0; }
.zf-schluessel-zeile { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.zf-schluessel-zeile code { flex: 1; min-width: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; word-break: break-all; background: var(--bg-2); padding: 8px 10px; border-radius: 10px; }
.backup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 12px 14px 12px 34px; background: var(--bg-2); border-radius: 14px; }
.backup-codes code { font-size: 1rem; font-weight: 800; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.warnung-text { color: var(--gelb); }

/* Farbige Icons: jede Gruppe hat ihre Farbe (ui.js → ICON_FARBE). Auf farbigen Knöpfen, in der Tab-Leiste und in
   aktiven Auswahlen bleibt das Icon in der Schriftfarbe. */
[data-farbe="orange"] { --ic: var(--orange); }
[data-farbe="wasser"] { --ic: #4dbbff; }
[data-farbe="kaffee"] { --ic: #e0a96d; }
[data-farbe="training"] { --ic: var(--training); }
[data-farbe="cardio"] { --ic: var(--cardio); }
[data-farbe="essen"] { --ic: #5fd47a; }
[data-farbe="gelb"] { --ic: var(--gelb); }
[data-farbe="violett"] { --ic: #b18cff; }
[data-farbe="rot"] { --ic: #ff6b81; }
[data-farbe="gruen"] { --ic: var(--gruen); }
[data-farbe="himmel"] { --ic: #6fd3ff; }
[data-farbe="pink"] { --ic: #ff7eb6; }
.ic[data-farbe], h3.mit-ic .ic[data-farbe], h2.mit-ic .ic[data-farbe], .ic-box .ic[data-farbe] { color: var(--ic); }
:is(.btn.primary, .btn.gefahr, .tabbar, .start-karte, .segment.aktiv, .chip.aktiv, .hinweis-karte.feuer, .toast, .modus-umschalter .aktiv, .icon-btn.hell) .ic[data-farbe] { color: inherit; }
.passwort-auge { display: grid; place-items: center; color: var(--muted); }
.passwort-auge .ic { width: 20px; height: 20px; }

/* ---------- Optik: Karten mit Tiefe, grosse Zahlen, Bewegung, Illustrationen ---------- */
/* Schimmer der Karten (.karte oben): Farbe des Icons in der Überschrift (emoji-icons.js setzt data-farbe an der Karte),
   sonst die Bereichsfarbe: ruhiges Graublau, Training blau, Cardio türkis, Fasten violett – kein Neongrün */
:root { --akzent: #7d93c4; }
/* Jeder Reiter hat seine Farbe für den Schimmer der Karten (app.js setzt data-tab): Ernährung Orange (wie das Icon),
   Training Blau, Fortschritt Grün, Fasten Violett, Einstellungen Hellblau (wie Konto & Daten) */
.app[data-tab="heute"] { --akzent: var(--primaer); }
.app[data-tab="training"] { --akzent: var(--training); }
.app[data-tab="fortschritt"] { --akzent: var(--gruen); }
.app[data-tab="fasten"] { --akzent: #b18cff; }
.app[data-tab="profil"] { --akzent: #4fb6f0; }
.blau { --akzent: var(--training); }
.fasten-seite { --akzent: #b18cff; }
.cardio-farbe { --akzent: var(--cardio); }
a.karte, button.karte, .karte.klickbar { transition: transform 0.15s ease, box-shadow 0.2s ease; }
a.karte:active, button.karte:active, .karte.klickbar:active, .einstellung:active, .eintrag:active { transform: scale(0.98); }
.einstellung, .eintrag { transition: transform 0.12s ease, background 0.15s; }

/* Grosse Zahlen: kräftiger, mit leichtem Verlauf in der Schrift */
.ring-zahl, .kal-wert, .stat b, .gross-zahl {
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--a, var(--primaer)) 45%, var(--text)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ring.kcal .ring-zahl { font-size: 1.6rem; }
.kal-wert { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em; }
.stat b { font-size: 1.3rem; font-weight: 900; letter-spacing: -0.02em; }
:is(.ring-zahl, .kal-wert, .stat b, .gross-zahl) .ic:not([data-farbe]) { color: var(--text); }

/* Seite neu geöffnet (nicht beim Neuzeichnen derselben Seite): Karten gleiten nacheinander herein */
/* Eigene Eigenschaften translate/scale statt transform – sonst überschreibt die Animation das transform von fest
   positionierten Elementen (z.B. Pausen-Leiste mit translateX(-50%) → sass plötzlich rechts) */
@keyframes karte-rein { from { opacity: 0; translate: 0 14px; scale: 0.985; } to { opacity: 1; translate: none; scale: none; } }
.app:not(.ruhig) .seite > :not(.pause), .app:not(.ruhig) .widgets > * { animation: karte-rein 0.45s cubic-bezier(.2, .9, .3, 1) both; }
.app:not(.ruhig) :is(.seite, .widgets) > :nth-child(2) { animation-delay: 40ms; }
.app:not(.ruhig) :is(.seite, .widgets) > :nth-child(3) { animation-delay: 80ms; }
.app:not(.ruhig) :is(.seite, .widgets) > :nth-child(4) { animation-delay: 120ms; }
.app:not(.ruhig) :is(.seite, .widgets) > :nth-child(5) { animation-delay: 160ms; }
.app:not(.ruhig) :is(.seite, .widgets) > :nth-child(6) { animation-delay: 200ms; }
.app:not(.ruhig) :is(.seite, .widgets) > :nth-child(n+7) { animation-delay: 240ms; }
/* Fortschrittsbalken mit leichtem Glanz, der einmal darüberläuft */
.balken-fill { position: relative; overflow: hidden; }
.balken-fill::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%); animation: glanz 1.6s 0.6s ease-out 1 both;
}
@keyframes glanz { to { transform: translateX(100%); } }

/* Leere Zustände: Icon gross in einer leuchtenden Kachel mit funkelnden Punkten */
.leer { padding: 22px 12px 18px; gap: 10px; }
.leer p { margin: 0; max-width: 28ch; line-height: 1.45; }
.leer-bild {
  --ic: var(--primaer); position: relative; width: 96px; height: 96px; border-radius: 32px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ic) 38%, transparent), color-mix(in srgb, var(--ic) 8%, var(--bg-2)) 72%);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ic) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: schweben 4s ease-in-out infinite;
}
.leer-bild > .ic { width: 56px; height: 56px; color: var(--ic); }
.leer-bild .ic .ic-flaeche { opacity: 0.4; }
.leer-punkt { position: absolute; border-radius: 50%; background: var(--ic); animation: funkeln 2.6s ease-in-out infinite; }
.leer-punkt.p1 { width: 8px; height: 8px; top: -6px; right: 4px; }
.leer-punkt.p2 { width: 5px; height: 5px; bottom: 6px; left: -10px; animation-delay: 0.9s; }
.leer-punkt.p3 { width: 6px; height: 6px; top: 22px; right: -14px; animation-delay: 1.7s; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes funkeln { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .leer-bild, .leer-punkt { animation: none; } }

/* Farbige Kachel für das Icon vorne in Überschriften */
.ic-kachel {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; margin-right: 6px; vertical-align: middle;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 30%, var(--bg-2)), color-mix(in srgb, var(--ic) 12%, var(--bg-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px color-mix(in srgb, var(--ic) 18%, transparent);
}
.ic-kachel > .ic { width: 19px; height: 19px; color: var(--ic); }
.ic-kachel .ic .ic-flaeche { opacity: 0.55; }
h2 .ic-kachel { width: 34px; height: 34px; }
:is(.einstellung-emoji, .ic-box, .mahlzeit-emoji)[data-farbe] .ic-flaeche { opacity: 0.55; }
:is(.einstellung-emoji, .ic-box, .mahlzeit-emoji)[data-farbe] {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 30%, var(--bg-2)), color-mix(in srgb, var(--ic) 12%, var(--bg-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.wasser-stand .ic-kachel { margin-right: 2px; }
:is(h2, h3):has(> .ic-kachel:first-child) { display: flex; align-items: center; white-space: nowrap; }
:is(h2, h3) > .ic-kachel { flex: none; margin-right: 10px; }
h3 > .ic-kachel { width: 28px; height: 28px; border-radius: 9px; margin-right: 8px; }
h3 > .ic-kachel > .ic { width: 17px; height: 17px; }
.karte-kopf h3:has(> .ic-kachel) { overflow: hidden; }
.karte-kopf .knopfreihe .chip { padding-inline: 10px; }

/* Farbige Emoji-Icons (Fluent Emoji) */
.ic.emo { max-width: none; width: 1.3em; height: 1.3em; vertical-align: -0.28em; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.ic-kachel > .ic.emo, h3 > .ic-kachel > .ic.emo { width: 22px; height: 22px; }
.einstellung-emoji .ic.emo, .mahlzeit-emoji .ic.emo, .ic-box .ic.emo { width: 26px; height: 26px; }
:is(.ring-zahl, .kal-wert, .stat b, .gross-zahl):has(img) { background: none; color: var(--text); }
.hinweis-emoji { flex: none; }
.ic-x .ic-flaeche { display: none; }

/* ---------- Anmeldung: Logo neben dem Namen, graues Gym-Video im Hintergrund ---------- */
.login-marke { display: flex; align-items: center; justify-content: center; gap: 12px; }
.login-marke img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.login-marke h1 { line-height: 1; }
.login-rahmen { position: relative; isolation: isolate; }
.login-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; z-index: 0; pointer-events: none; background: #0a0c10; }
.login-schleier {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0.35) 40%, rgba(10, 12, 16, 0.88) 100%);
}
html.hell .login-schleier { background: linear-gradient(180deg, rgba(242, 244, 248, 0.78) 0%, rgba(242, 244, 248, 0.62) 40%, rgba(242, 244, 248, 0.94) 100%); }
.login-rahmen > .login { position: relative; z-index: 1; }
/* Formular als Glas über dem Video */
.login .login-form { background: color-mix(in srgb, var(--karte) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.login-hero p { color: color-mix(in srgb, var(--text) 75%, transparent); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
html.hell .login-hero p { text-shadow: none; }
.login-quelle { margin: 0; text-align: center; font-size: 0.68rem; }
.login-quelle a { color: color-mix(in srgb, var(--text) 45%, transparent); text-decoration: none; }

/* Sprache: runde Flagge oben rechts (ausserhalb des Flusses, damit Logo + Formular genau mittig stehen) */
.login { padding: 8px 0 28px; }
.login > .sprach-flagge {
  position: absolute; top: 4px; right: 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  background: color-mix(in srgb, var(--karte) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
}
.login > .sprach-flagge select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.login > .login-quelle { position: absolute; left: 0; right: 0; bottom: 4px; }
/* Registrieren: kompakter, damit alles ohne Scrollen passt */
.login.registrieren { gap: 14px; }
.login.registrieren .login-hero p { display: none; }
.login.registrieren .login-form { gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.login.registrieren .login-form h2 { font-size: 1.15rem; }
.login-hinweis { margin: 0; }
.login-form .zwei-spalten { gap: 10px; }
.login-form .formfehler:empty { display: none; }
@media (max-height: 740px) {
  .login.registrieren { gap: 10px; }
  .login.registrieren .login-marke img { width: 40px; height: 40px; border-radius: 12px; }
  .login.registrieren .login-marke h1 { font-size: 1.8rem; }
  .login.registrieren .login-form { gap: 8px; }
  .login.registrieren input { min-height: 42px; padding-top: 9px; padding-bottom: 9px; }
  .login.registrieren .login-hinweis, .login.registrieren > .login-quelle { display: none; }
}
.login-video { transition: opacity 0.8s ease; }
.login-video.versteckt { opacity: 0; }
.app-icon-vorschau { width: 36px; height: 36px; border-radius: 10px; display: block; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }

/* Hauptkarten mit kräftigerem Verlauf in der Farbe des Reiters: Kalorien heute, Shortcuts, Level, Fasten-Ring */
:is(.karte.kalorien, .karte.level-karte, .karte.fasten-karte, .karte.shortcut-karte) {
  --a: var(--akzent, var(--primaer));
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--a) 26%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--a) 16%, var(--karte)) 0%, var(--karte) 75%);
  box-shadow: var(--schatten), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px color-mix(in srgb, var(--a) 22%, transparent);
}
html.hell :is(.karte.kalorien, .karte.level-karte, .karte.fasten-karte, .karte.shortcut-karte) {
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--a) 20%, transparent) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--a) 10%, #ffffff) 0%, var(--karte) 75%);
}
/* Konto löschen: eigene Karte mit viel Abstand zum Abmelden, roter Rahmen statt roter Fläche */
.gefahren-karte { margin-top: 36px; box-shadow: var(--schatten), 0 0 0 1px color-mix(in srgb, var(--rot) 35%, transparent); }
.gefahren-karte h3 { color: var(--rot); }
.btn.gefahr-rahmen { background: transparent; color: var(--rot); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rot) 60%, transparent); }
/* Notiz einer Übung im Training: eigene Zeile über die ganze Breite */
.uebung-notiz-zeile { margin: 8px 0 2px; }
.uebung-notiz-zeile .uebung-notiz { width: 100%; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); font-size: 0.85rem; line-height: 1.4; }
/* Training: oben weniger Luft – Statusleisten-Abstand nur einmal (vorher doppelt: Seite und Kopf), Griff schmaler */
.app:has(> .seite.workout) { padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); }
.seite.workout .workout-kopf {
  top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); padding-top: 2px;
  /* beim Scrollen den Streifen unter der Statusleiste mit abdecken */
  box-shadow: 0 calc(-1 * var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 0 0 var(--bg);
}
.seite.workout .minimier-griff { height: 14px; margin-bottom: -6px; }
.seite.workout .minimier-griff::after { top: 5px; }
.seite.workout .stat b { font-size: 1.15rem; white-space: nowrap; }
/* Nur Training / nur Ernährung: der ausgeschaltete Tab bleibt gedimmt da – antippen erklärt, wo alles ist */
.tabbar a.bereich-aus { opacity: 0.38; }
.bereich-hinweise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bereich-hinweise li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); }
.bereich-emoji { font-size: 1.4rem; flex: none; }
/* Kalorien-Karte: gegessen / verbrannt antippbar */
button.kal-knopf { border: 0; background: none; color: inherit; font: inherit; padding: 6px 4px; border-radius: 14px; cursor: pointer; transition: background 0.15s, transform 0.12s; }
button.kal-knopf:active { transform: scale(0.95); background: color-mix(in srgb, var(--a, var(--primaer)) 12%, transparent); }
.verbrannt-liste li.aus { opacity: 0.6; }
.verbrannt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.verbrannt-wert { flex: none; font-variant-numeric: tabular-nums; }
.verbrannt-summe { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 12px; font-weight: 800; font-size: 1.05rem; }
.verbrannt-summe b { color: var(--primaer); font-size: 1.3rem; }
.kal-label.mit-info::after { content: " ⓘ"; opacity: 0.7; }
/* Produktfoto gross (antippen auf das kleine Bild) */
img.zoombar { cursor: zoom-in; }
.bild-gross { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(10, 12, 16, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: einblenden 0.18s ease-out; cursor: zoom-out; }
.bild-gross.weg { opacity: 0; transition: opacity 0.18s; }
.bild-gross-bild { max-width: min(92vw, 520px); max-height: 80dvh; object-fit: contain; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.bild-gross-x { position: absolute; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 14px); right: 14px; }

/* ---------- Freunde, E-Mail ---------- */
.freund-neu { display: flex; gap: 8px; }
.freund-neu input { flex: 1; min-width: 0; }
.freund-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left;
}
.freund-zeile + .freund-zeile { border-top: 1px solid var(--linie); }
.freund-zeile.antippbar { cursor: pointer; }
.freund-zeile.antippbar:active { opacity: 0.7; }
.freund-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.freund-text b, .freund-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freund-chips { display: flex; gap: 4px; flex: none; }
.freund-zeile .knopfreihe { flex: none; gap: 6px; }
.freund-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.freund-werte > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--bg-2); }
.freund-werte b { font-size: 1.15rem; }
.email-zeile { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.email-wartet { padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--primaer) 10%, var(--bg-2)); }
.anfragen-zahl {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: var(--rot); color: #fff; font-size: 0.75rem; font-weight: 800;
}
.einladung-seite { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.einladung-seite > .karte { max-width: 420px; width: 100%; text-align: center; align-items: stretch; }
.einladung-seite h1 { font-size: 1.35rem; margin: 0; }
.einladung-logo { display: grid; place-items: center; }
.einladung-logo img { width: 72px; height: 72px; border-radius: 18px; }

/* Rechtstexte (datenschutz.html, nutzungsbedingungen.html, impressum.html – erzeugt von scripts/recht.mjs) */
.recht { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 32px; }
.recht-sprachen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.recht-sprachen .chip[aria-current] { background: var(--primaer); color: var(--primaer-text); }
.recht-liste { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.recht h2 { font-size: 1.05rem; }
.recht-fuss { line-height: 1.8; }
/* Zustimmung (Registrierung und neue Fassung der Rechtstexte) */
.zustimmung { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 0.9rem; line-height: 1.4; cursor: pointer; }
.zustimmung input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--primaer); }
.recht-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 0.85rem; }