/* urqivo SPORTS — Tagebuch (27.08.2026)
 *
 * Der Reiter ist wie ein Handy-Startbildschirm gebaut: Datumsband, Tagesstand, zwei
 * Flächen mit App-Kacheln, Checkliste. Alles hier gehört zu js/tagebuch-screens.js.
 *
 * ⚠ Die Farben kommen AUSSCHLIESSLICH aus den Variablen von styles.css. Eine fest
 *   verdrahtete Zweitfarbe (etwa #ff8a4f neben dem Orange) liefe bei cyanem Akzent
 *   sichtbar auseinander — die Anpassung darf den Akzent frei setzen. Wo eine zweite
 *   Farbe gebraucht wird, wird sie mit color-mix ABGELEITET.
 * ⚠ Die einzige Ausnahme sind die Kachelflächen: Ihre Verläufe sind das Kennzeichen
 *   des jeweiligen Bereichs (Essen orange, Gym violett …) und stehen im Katalog in
 *   tagebuch-screens.js, nicht hier.
 * ⚠ Bei „Bewegung reduzieren" steht alles still — das Wackeln beim Anordnen wird zu
 *   einem gestrichelten Rahmen.
 */

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.tb-kopf { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; }
.tb-kopf h1 { font-size: 26px; margin: 0; flex: 1; letter-spacing: -.02em; }

/* ── Datumsband ────────────────────────────────────────────────────────── */
.tb-datum { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tb-datum h2 { font-size: 19px; margin: 0; flex: 1; }
.tb-datum h2 small {
  display: block; font-weight: 600; color: var(--text-dim); font-size: 12.5px; margin-top: 2px;
}
.tb-woche {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 6px; margin-bottom: 14px;
}
.tb-woche button {
  background: none; border: 0; cursor: pointer; border-radius: 12px;
  padding: 6px 0 5px; display: grid; justify-items: center; gap: 4px;
  transition: background .18s ease;
}
.tb-woche button:hover { background: var(--surface-2); }
.tb-woche .wt { font-size: 10.5px; color: var(--text-mute); font-weight: 700; letter-spacing: .5px; }
.tb-woche .zahl { font-size: 15px; font-weight: 800; }
.tb-woche .ring { width: 100%; display: grid; place-items: center; }
.tb-woche button.aktiv { background: var(--surface-3); }
.tb-woche button.aktiv .zahl { color: var(--accent); }
.tb-woche button.heute .zahl::after {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-2); margin: 2px auto 0;
}
/* Ein Tag, der noch nicht war, ist blass — sein Ring steht auf 0, weil dort nichts
   gemessen wurde, nicht weil nichts geschafft wäre. */
.tb-woche button.zukunft { opacity: .45; }

/* ── Tagesstand ────────────────────────────────────────────────────────── */
.tb-stand {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 16px;
  box-shadow: var(--card-shadow);
}
.tb-stand .txt { flex: 1; min-width: 0; }
.tb-stand .txt b { font-size: 15.5px; }
.tb-stand .txt small { display: block; color: var(--text-dim); margin-top: 2px; }

/* Alles, was wie eine Karte aussieht, hebt sich unter der Maus — 3 px hoch, kräftigerer
   Schatten, ein Hauch Akzent am Rand. Dieselbe Bewegung wie auf der Homepage. */
.hebt { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.hebt:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.85);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
}

/* ── Die beiden Flächen ────────────────────────────────────────────────── */
.tb-seiten { overflow: hidden; }
.tb-spur { display: flex; transition: transform .32s cubic-bezier(.32,.72,0,1); }
/* ⚠ minmax(0, …) statt 100%: Eine Kachelreihe mit langem Namen zöge die Fläche sonst
   über den Rand hinaus (der min-content-Boden von Grid und Flex). */
.tb-seite { flex: 0 0 100%; min-width: 0; padding: 2px; }

/* Der Seitenwechsler: Pfeil — Seitenzahl — Pfeil (31.08.2026)
   Die klassische Blätterleiste. In der Mitte steht die Seite, auf der man IST; der Pfeil,
   der nirgendwohin führt, ist ausgegraut.
   ⚠ Die drei Teile stehen ZUSAMMEN in der Mitte, nicht `space-between`: Auf breiten
   Fenstern klebten die Pfeile sonst an den Rändern der Kachelfläche und hatten mit der
   Zahl sichtbar nichts mehr zu tun.
   ⚠ Die Zahl hat eine feste Mindestbreite — „Seite 1" und „Seite 10" sind verschieden
   breit, und die Pfeile dürfen beim Blättern nicht wandern. */
.tb-wechsler {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 16px 0 4px;
}
.tb-blaettern {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease,
              background .22s ease;
}
.tb-blaettern:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.85);
  border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line));
  background: var(--surface-3);
}
.tb-blaettern:active:not(:disabled) { transform: translateY(0); }
/* ⚠ Der Randpfeil verschwindet NICHT, er wird nur blass — sonst rutschte die Zahl beim
   Blättern zur Seite und die ganze Leiste wackelte. */
.tb-blaettern:disabled { opacity: .32; cursor: default; }

.tb-seitenzahl {
  min-width: 84px; text-align: center;
  font-size: 14.5px; font-weight: 800; letter-spacing: .3px; color: var(--text);
}

.tb-seitentitel {
  font-size: 12px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--text-mute); margin: 0 4px 10px;
}

/* ── Kacheln ───────────────────────────────────────────────────────────── */
.tb-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-kachel {
  position: relative; cursor: pointer; border: 0; padding: 0; background: none;
  display: grid; justify-items: center; gap: 7px; min-width: 0;
}
.tb-kachel .flaeche {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 22px;
  display: grid; place-items: center; align-content: center; gap: 4px;
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.09) inset;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative; overflow: hidden;
}
/* Der Glanz oben — er macht aus der Fläche ein App-Zeichen statt eines Kastens. */
.tb-kachel .flaeche::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%);
}
.tb-kachel:hover .flaeche {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -14px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.14) inset;
  border-color: rgba(255,255,255,.22);
}
.tb-kachel:active .flaeche { transform: translateY(-1px) scale(.97); }
.tb-kachel .name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.15; }
/* ⚠⚠ Einzeilig mit Auslassung (28.08.2026). Die Standzeile steht als eigene Grid-Zeile
   UNTER der Fläche — bei drei Spalten bleiben auf einem 390er-Gerät rund 110 px, also
   etwa 15 Zeichen. Eine längere Zeile brach vorher um und zog die GANZE Rasterzeile
   auseinander, weil die Zeilenhöhe im Grid vom höchsten Element kommt: Eine Kachel mit
   langem Text schob die zwei Nachbarn mit. `min-width:0` steht schon an `.tb-kachel`
   (Z. 92) — ohne das greift `overflow` im Grid nicht, weil ein Grid-Item von sich aus
   nicht unter seine Inhaltsbreite schrumpft.
   Das ist das Sicherheitsnetz, nicht die Lösung: Die Kacheln liefern von sich aus kurze
   Zeilen (`planKurz` in tagebuch-screens.js). */
.tb-kachel .wert {
  font-size: 11px; color: var(--text-dim); text-align: center; margin-top: -4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.tb-kachel .wert.leer { color: var(--text-mute); }
/* ⚠ z-index am Haken: Die Kachelfläche ist selbst positioniert und steht im Markup
   danach — ohne ihn läge sie darüber und der Haken wäre unsichtbar. */
.tb-kachel .haken {
  position: absolute; top: -5px; right: -5px; z-index: 3; width: 22px; height: 22px;
  border-radius: 50%; background: var(--good); color: #06210f;
  display: grid; place-items: center; border: 2.5px solid var(--bg);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.8);
}
.tb-kachel .balken {
  position: absolute; left: 12%; right: 12%; bottom: 10px; height: 4px;
  border-radius: 3px; background: rgba(0,0,0,.32); overflow: hidden;
}
.tb-kachel .balken i { display: block; height: 100%; background: rgba(255,255,255,.85); border-radius: 3px; }
.tb-kachel.zu { opacity: .5; }
.tb-kachel.zu .flaeche { filter: saturate(.25); }
.tb-kachel .bald {
  position: absolute; top: -4px; right: -4px; z-index: 3;
  font-size: 9px; font-weight: 800; letter-spacing: .4px;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 8px; padding: 2px 5px;
}

/* Anordnen: Die Kacheln wackeln wie auf dem Handy. */
.tb-raster.ordnen .tb-kachel .flaeche { animation: tb-wackel .5s infinite; }
.tb-raster.ordnen .tb-kachel.gewaehlt .flaeche {
  outline: 2px solid var(--accent-2); outline-offset: 3px; animation: none;
}
.tb-kachel .weg {
  position: absolute; top: -6px; left: -6px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface-3); color: var(--text);
  border: 2px solid var(--bg); display: grid; place-items: center; cursor: pointer;
  z-index: 4;
}
@keyframes tb-wackel {
  0% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } 100% { transform: rotate(-.7deg); }
}

.tb-hinweis {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px dashed var(--line);
  color: var(--text-dim); font-size: 12.5px;
}
.tb-hinweis b { color: var(--text); }
.tb-weggelegt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tb-weggelegt.leer { color: var(--text-mute); margin-top: 8px; }
.tb-zurueck {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.tb-zurueck:hover { color: var(--text); border-color: var(--accent-2); }

/* ── Checkliste ────────────────────────────────────────────────────────── */
.ck-kopf { display: flex; align-items: center; gap: 8px; margin: 22px 4px 8px; }
.ck-kopf .section-title { margin: 0; flex: 1; }
.ck-kopf .zahl {
  font-size: 12px; font-weight: 800; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.ck-zeile {
  display: flex; align-items: center; gap: 11px; padding: 11px 8px;
  border-radius: var(--radius-sm); transition: background .18s ease;
}
.ck-zeile + .ck-zeile { border-top: 1px solid var(--line); }
.ck-zeile:hover { background: var(--surface-2); }
.ck-box {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface-2);
  display: grid; place-items: center; color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ck-box:hover { border-color: var(--accent-2); }
.ck-zeile.fertig .ck-box { background: var(--good); border-color: var(--good); color: #06210f; }
.ck-txt {
  flex: 1; min-width: 0; font-size: 14.5px; cursor: pointer; text-align: left;
  background: none; border: 0; padding: 0; color: var(--text);
}
.ck-txt small { display: block; color: var(--text-mute); font-size: 11.5px; margin-top: 2px; }
.ck-zeile.fertig .ck-txt {
  color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-mute);
}
.ck-quelle {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-mute); border: 1px solid var(--line); border-radius: 7px;
  padding: 2px 6px; white-space: nowrap;
}
.ck-weg { background: none; border: 0; cursor: pointer; color: var(--text-mute); padding: 6px; border-radius: 9px; }
.ck-weg:hover { color: var(--bad); background: var(--surface-3); }
.ck-neu {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 8px; background: none; border: 0; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: 14.5px; text-align: left;
  border-top: 1px solid var(--line);
  transition: background .18s ease;
}
.ck-neu:hover { background: var(--surface-2); }
.ck-leer { padding: 18px 10px; text-align: center; color: var(--text-mute); font-size: 13.5px; }

/* ── Die Blätter der vier eigenen Kacheln ──────────────────────────────── */
.tb-blatt-kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; }
.tb-blatt-kopf .ico { display: grid; place-items: center; }
.tb-blatt-tag { margin: 0 0 14px; }
.tb-gross { display: grid; place-items: center; margin: 6px 0 4px; }
.tb-tasten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tb-taste {
  padding: 14px 10px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  font-weight: 800; font-size: 15px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.tb-taste small { display: block; font-weight: 600; font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.tb-taste:hover { transform: translateY(-2px); border-color: var(--accent-2); background: var(--surface-3); }
.tb-reihe { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.tb-reihe.wickeln { flex-wrap: wrap; }
.tb-feldzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); margin-top: 10px;
  font-size: 14px; font-weight: 700;
}
.tb-feldzeile input {
  width: 110px; text-align: right; font-size: 16px; font-weight: 800;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; color: var(--text);
}
.tb-feld {
  width: 100%; font-size: 16px; padding: 12px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.tb-notiz {
  width: 100%; font-size: 15px; line-height: 1.5; padding: 12px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  resize: vertical; font-family: inherit;
}
.tb-stimmung { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tb-smiley {
  display: grid; justify-items: center; gap: 6px; padding: 12px 4px;
  border-radius: 14px; cursor: pointer; font-size: 11.5px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.tb-smiley .gesicht { color: var(--text-mute); transition: color .18s ease; }
.tb-smiley:hover { transform: translateY(-3px); border-color: var(--accent-2); }
.tb-smiley.aktiv { color: var(--text); border-color: var(--accent); background: var(--surface-3); }
.tb-smiley.aktiv .gesicht { color: var(--accent); }
.tb-wochentage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.tb-wt {
  padding: 10px 0; border-radius: 11px; cursor: pointer; font-weight: 800; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.tb-wt.aktiv { color: var(--on-accent, #fff); background: var(--accent); border-color: var(--accent); }
.pill.aktiv { border-color: var(--accent); color: var(--text); background: var(--surface-3); }

@media (prefers-reduced-motion: reduce) {
  .tb-raster.ordnen .tb-kachel .flaeche {
    animation: none; outline: 1px dashed var(--text-mute); outline-offset: 3px;
  }
  .tb-spur { transition: none; }
  .hebt, .tb-kachel .flaeche, .tb-taste, .tb-smiley, .tb-blaettern { transition: none; }
  .hebt:hover, .tb-kachel:hover .flaeche, .tb-taste:hover, .tb-smiley:hover,
  .tb-blaettern:hover:not(:disabled) { transform: none; }
}

/* Auf schmalen Geräten passen vier Kacheln nebeneinander besser als drei sehr breite
   — dieselbe Rechnung wie auf jedem Handy-Startbildschirm. */
@media (max-width: 380px) {
  .tb-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .tb-kachel .flaeche { border-radius: 18px; }
  .tb-wechsler { gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Statistiken (27.08.2026)

   Vier Reiter, jeder mit eigener Signalfarbe und einem Lichtschein von oben.
   Die Farbe steckt in --stimmung und wird am Container gesetzt; jede Karte
   darunter zieht sie daraus.

   ⚠⚠ Der Lichtschein ist `position: fixed` und liegt HINTER dem Inhalt. Alles
      im Inhalt braucht deshalb `position: relative; z-index: 1` — sonst ist es
      unsichtbar, obwohl es im DOM steht.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠ Der Lichtschein steht seit dem 28.08.2026 NICHT mehr hier, sondern auf der
   Ambient-Ebene der App (#ambient, app.js → ambientBg("schein")). Er gilt damit auf
   JEDER Seite und nicht nur in den Statistiken. Eine zweite Fassung an dieser Stelle
   würde sich beim Routenwechsel mit ihr überblenden. */
.stat-kopf { position: relative; z-index: 1; }
.stat-reiter { display: flex; gap: 0; margin: 2px 0 18px; }
.stat-reiter button {
  flex: 1; min-width: 0; background: none; border: 0; cursor: pointer; padding: 8px 2px 10px;
  font-size: 15px; font-weight: 700; color: var(--text-dim);
  border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.stat-reiter button:hover { color: var(--text); }
.stat-reiter button.aktiv { color: var(--text); font-weight: 800; border-bottom-color: var(--stimmung); }

.stat-karte {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 16px 14px 12px; margin-bottom: 14px;
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.9);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stat-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -18px rgba(0,0,0,.95);
  border-color: color-mix(in srgb, var(--stimmung) 55%, var(--line));
}
.stat-karte .kopfzeile { display: flex; align-items: flex-start; gap: 10px; }
.stat-karte .kopfzeile .txt { flex: 1; min-width: 0; }
.stat-karte h3 {
  font-size: 18px; font-weight: 800; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-karte .zeitraum { color: var(--text-dim); font-size: 13.5px; }
.stat-karte .aend { font-size: 15px; font-weight: 700; white-space: nowrap; padding-top: 3px; }
.stat-karte .aend.hoch { color: var(--good); }
.stat-karte .aend.runter { color: var(--bad); }
.stat-karte .aend.gleich { color: var(--text-dim); }
.stat-karte .gross { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.stat-flaeche { margin-top: 14px; position: relative; }
/* ⚠ overflow: visible — sonst schneidet die Bühne die Werte über den Punkten ab. */
.stat-flaeche svg { display: block; width: 100%; overflow: visible; }

/* Leerzustand: liegt ÜBER dem blassen Diagramm. Das Diagramm bleibt schemenhaft
   stehen — man sieht, was einen erwartet, ohne es für eine Messung zu halten. */
.stat-leer {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 12px;
  align-content: center; text-align: center; padding: 0 10px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 72%, transparent),
    color-mix(in srgb, var(--surface) 92%, transparent));
  border-radius: 14px;
}
.stat-leer b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.stat-blass { opacity: .28; filter: saturate(.5); }

/* Diagramm-Bausteine */
.dg-wert { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-achse { font-size: 12.5px; fill: var(--text-dim); }
.dg-achse.aktiv { fill: var(--text); font-weight: 700; }
.dg-ziel { stroke: var(--text-mute); stroke-dasharray: 5 5; stroke-width: 1; }

/* Der Haken „Nur geführte Statistiken". Sitzt über der Liste, nicht in einem Menü:
   Er wird oft umgelegt und muss deshalb sichtbar sein. Ab Werk ist er gesetzt. */
.stat-filter {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px; margin: 0 0 14px;
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text-dim);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.stat-filter:hover { border-color: color-mix(in srgb, var(--stimmung) 55%, var(--line)); color: var(--text); }
.stat-filter .fbox {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 6px;
  border: 2px solid var(--line); background: var(--surface-2);
  display: grid; place-items: center; color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.stat-filter span:nth-child(2) { flex: 1; text-align: left; }
.stat-filter small { color: var(--text-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-filter.aktiv { color: var(--text); border-color: color-mix(in srgb, var(--stimmung) 60%, var(--line)); }
.stat-filter.aktiv .fbox { background: var(--stimmung); border-color: var(--stimmung); color: #0b0f14; }

/* Die Sportart-Leiste im Training-Reiter — waagerecht scrollbar, ohne Balken. */
.sport-leiste {
  position: relative; z-index: 1;
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  margin: 0 -2px 12px; scrollbar-width: none;
}
.sport-leiste::-webkit-scrollbar { display: none; }
.sport-knopf {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; cursor: pointer;
  padding: 10px 12px 9px; min-width: 74px; border-radius: 15px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
  font-size: 11.5px; font-weight: 700;
  transition: transform .22s ease, border-color .22s ease, color .22s ease, background .22s ease;
}
.sport-knopf:hover {
  transform: translateY(-3px); color: var(--text);
  border-color: color-mix(in srgb, var(--stimmung) 55%, var(--line));
}
.sport-knopf.aktiv {
  background: color-mix(in srgb, var(--stimmung) 20%, var(--surface));
  border-color: var(--stimmung); color: var(--text);
}
/* Eine Sportart ohne Daten steht blasser da — erreichbar, aber nicht aufdringlich. */
.sport-knopf.leer { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .stat-karte, .sport-knopf { transition: none; }
  .stat-karte:hover, .sport-knopf:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Anpassung — Farbfelder, Hintergrund-Proben, Form der Flächen
   ══════════════════════════════════════════════════════════════════════════ */
.anp-reihe { margin-top: 18px; }
.anp-reihe > b { font-size: 15px; display: block; }
.anp-reihe > small { display: block; color: var(--text-dim); font-size: 12.5px; margin: 2px 0 10px; }
.farbreihe { display: flex; flex-wrap: wrap; gap: 10px; }
.farbfeld {
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.14); display: grid; place-items: center;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.farbfeld:hover { transform: translateY(-3px); }
.farbfeld.aktiv { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.14); }

.grundreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grundfeld {
  display: grid; justify-items: center; gap: 8px; padding: 10px 6px;
  border-radius: 14px; cursor: pointer; font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.grundfeld:hover { transform: translateY(-3px); color: var(--text); }
.grundfeld.aktiv { border-color: var(--accent); color: var(--text); }
.grundfeld .probe {
  width: 100%; height: 34px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.1);
}
.grundfeld .probe i { display: block; width: 60%; height: 10px; border-radius: 5px; }

/* ══════════════════════════════════════════════════════════════════════════
   Feed: „Heute unterwegs" (27.08.2026)

   Der Streifen steht dort, wo bis dahin die eigene Profilkarte lag. Er zeigt nur
   Leute, die in den letzten 24 Stunden etwas geteilt haben — ist das niemand,
   erscheint er gar nicht.
   ══════════════════════════════════════════════════════════════════════════ */
.uq-heute { margin: 2px 0 14px; }
.uq-heute-streifen {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px;
  margin: 0 -2px; scrollbar-width: none;
}
.uq-heute-streifen::-webkit-scrollbar { display: none; }
.uq-heute-person {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 700; color: var(--text-dim); max-width: 64px;
  transition: transform .22s ease, color .22s ease;
}
.uq-heute-person span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.uq-heute-person:hover { transform: translateY(-3px); color: var(--text); }
/* Der Ring zeigt: Da war heute etwas. Er nutzt den Akzent, damit er die Anpassung
   mitmacht — eine feste Farbe liefe bei cyanem Akzent aus dem Rest heraus. */
.uq-heute-person .avatar {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .uq-heute-person { transition: none; }
  .uq-heute-person:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkliste: die Platzhalter (28.08.2026)

   „Die Aufgabenliste möchte ich als Platzhalter auf jeden Tag übernehmen." Also steht
   unter den heute fälligen Punkten die übrige Liste — blass, aber vollwertig bedienbar.
   ══════════════════════════════════════════════════════════════════════════ */
.ck-trenner {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 8px 2px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-mute);
}
/* ⚠ Nur gedämpft, nicht ausgegraut: Die Zeile bleibt anklickbar, und was anklickbar ist,
   darf nicht aussehen wie abgeschaltet. Beim Überfahren kommt sie ganz heran. */
.ck-zeile.platzhalter { opacity: .58; transition: opacity .18s ease, background .18s ease; }
.ck-zeile.platzhalter:hover { opacity: 1; }
.ck-zeile.platzhalter.fertig { opacity: .82; }
/* Was über den Plan hinaus erledigt wurde, steht neben dem Zähler — nicht darin. */
.ck-zusatz {
  font-style: normal; color: var(--good);
  margin-left: 4px;
}

/* Vorschläge (28.08.2026): die sechs Aufgaben aus der Vorlage. Sie stehen unter den
   Platzhaltern und werden durch Antippen zu echten Punkten.
   ⚠ Erkennbar anders als die eigenen Punkte — gestrichelter Kasten statt Zeile —, sonst
   sähe eine Anregung aus wie etwas, das man sich vorgenommen hat. */
.ck-zeile.vorschlag { opacity: .72; }
.ck-zeile.vorschlag:hover { opacity: 1; }
.ck-zeile.vorschlag .ck-box { border-style: dashed; }
.ck-plus {
  background: none; border: 0; cursor: pointer; color: var(--accent);
  padding: 6px; border-radius: 9px; display: grid; place-items: center;
}
.ck-plus:hover { background: var(--surface-3); }
.ck-alle {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: none; padding: 2px 4px; border-radius: 7px;
}
.ck-alle:hover { background: var(--surface-2); }

/* Sleepscore (28.08.2026): die Zahl aus Dauer und eigenem Urteil.
   ⚠ Sie steht nie allein — daneben in Worten, was sie bedeutet, und woraus sie entsteht.
   Eine nackte Zahl ist etwas, dem man glauben soll. */
.tb-score {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.tb-score b {
  font-size: 30px; font-weight: 900; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tb-score span { display: block; font-size: 14px; font-weight: 700; }
.tb-score small { display: block; font-weight: 600; color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.tb-score-leer { margin: 16px 2px 0; font-size: 12.5px; }

/* Der Tagesstand ist seit dem 28.08.2026 der Weg in die Checkliste — also ein Knopf.
   ⚠ Ein Knopf erbt weder Textausrichtung noch Schriftfamilie; beides muss hier stehen,
   sonst steht der Satz plötzlich mittig in der Systemschrift. */
button.tb-stand {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.tb-stand .pfeil { color: var(--text-mute); display: grid; place-items: center; }
/* Das Ziel liegt unter der Kopfleiste — ohne diesen Abstand verschwindet die Überschrift
   „Checkliste" beim Anspringen darunter. */
.ck-kopf { scroll-margin-top: 76px; }

/* ══════════════════════════════════════════════════════════════════════════
   Termine (28.08.2026) — Kästchen im Datumsband, Liste unter dem Tagesstand
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠ Feste Höhe, auch wenn ein Tag keine Termine hat: Sonst wären die Wochentage
   unterschiedlich hoch und das Band ruckelte beim Blättern. */
.tb-termine, .tb-termine-leer { display: flex; gap: 3px; height: 6px; align-items: center; justify-content: center; }
.tb-termine i { display: block; width: 5px; height: 5px; border-radius: 50%; }
.tb-termine b { font-size: 9px; font-weight: 800; color: var(--text-mute); line-height: 1; }

.tb-terminliste { display: grid; gap: 8px; margin: -6px 0 16px; }
.tb-termin {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 13px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); font: inherit; color: inherit;
  transition: transform .2s ease, border-color .2s ease;
}
.tb-termin:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.tb-termin i { width: 4px; align-self: stretch; border-radius: 3px; flex: 0 0 auto; }
.tb-termin span { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; }
.tb-termin small { display: block; font-weight: 600; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tb-termin b {
  font-size: 12.5px; font-weight: 800; color: var(--text-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .tb-termin { transition: none; }
  .tb-termin:hover { transform: none; }
}

/* ---------------------------------------------------------------- Kalender
   Der gemeinsame Monatskalender (28.08.2026).

   ⚠⚠ Das Gitter kommt aus dem Essens-Kalender (.ek-kal-* in essen-koerper.css) und wird
      bewusst WIEDERVERWENDET statt nachgebaut: Es ist gemessen, es hält die Woche ab
      Montag, und zwei Monatsraster mit leicht verschiedenen Zellen wären genau die Sorte
      Doppelung, die später auseinanderläuft. Hier steht nur, was der gemeinsame Kalender
      darüber hinaus braucht — die Punkte und der heutige Tag.
   ⚠ Eine Zelle ist auf einem 390er-Gerät rund 47 px breit. Deshalb PUNKTE, keine Texte:
     Drei Punkte à 5 px mit 3 px Abstand brauchen 21 px und passen; jede Beschriftung
     bräche um und risse die Rasterzeile auseinander. */
.tb-kalpunkte {
  display: flex; gap: 3px; height: 6px; align-items: center; justify-content: center;
  margin-top: 1px;
}
.tb-kalpunkte i { display: block; width: 5px; height: 5px; border-radius: 50%; }

/* Der heutige Tag ist immer erkennbar — auch wenn nichts darin steht. */
.tb-kal-heute {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
.tb-kal-heute .ek-kal-zahl { font-weight: 800; }

/* Der Herkunfts-Chip als Tür zum Training (31.08.2026)
   ---------------------------------------------------------------------------
   In der Checkliste ist der Chip „Training" zugleich der Weg zur geplanten
   Einheit. Als Knopf braucht er die Schriftfamilie und den durchsichtigen Grund
   zurück, die der Browser ihm nimmt.

   ⚠ Jede `transition` braucht ihren Gegenspieler unter „Bewegung reduzieren" —
     der Prüfstand test-essen-koerper-screens.mjs verlangt das für alle Kapseln. */
button.ck-quelle {
  background: none; cursor: pointer; font-family: inherit;
  transition: transform .22s ease, background .22s ease;
}
button.ck-quelle:hover { transform: translateY(-2px); background: var(--surface-3); }
@media (prefers-reduced-motion: reduce) {
  button.ck-quelle { transition: none; }
  button.ck-quelle:hover { transform: none; }
}