/* urqivo SPORTS — Bereich „Ziele" (Trainer): eigene Gestaltungsschicht.
 *
 * ERGÄNZT styles.css, ersetzt nichts. Eigenes Präfix .tr- für alles, was es nur hier
 * gibt; Bausteine wie .uq-zahl/.uq-label/.card kommen weiter aus styles.css. Farben
 * ausschließlich über die vorhandenen Tokens — der Nacht-Rot-Modus färbt dann von
 * selbst um. Je Trainer ein Farbton als Modifikator an der Hülle (currentColor färbt
 * das Avatar-SVG):
 *   .tr-maren -> var(--good) · .tr-jonas -> var(--accent-2)
 *   .tr-ella  -> var(--accent) · .tr-samir -> var(--warn)
 *
 * ⚠ Zu jeder transition steht unten der prefers-reduced-motion-Gegenspieler —
 *   der CSS-Prüfblock verlangt das Paar.
 */

/* ------------------------------------------------ Trainerfarben (currentColor-Hülle) */

.tr-maren { color: var(--good); }
.tr-jonas { color: var(--accent-2); }
.tr-ella  { color: var(--accent); }
.tr-samir { color: var(--warn); }

/* In Grid-Hüllen darf der lange Wochenstreifen nicht die Karten-Mindestbreite
   bestimmen; er scrollt innerhalb der Karte, niemals die ganze Seite. */
.card.tr-maren, .card.tr-jonas, .card.tr-ella, .card.tr-samir {
  width: 100%; max-width: 100%; min-width: 0;
}

/* ------------------------------------------------ Avatar-Chip */

.tr-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2); border: 1.5px solid currentColor;
  flex: 0 0 auto;
}
.tr-avatar.gross { width: 76px; height: 76px; }
.tr-avatar.klein { width: 40px; height: 40px; }
.tr-avatar svg { display: block; }

/* ------------------------------------------------ Trainer-Kopf und Sprechkarte */

.tr-kopf { display: flex; align-items: center; gap: 12px; }
.tr-kopf .name { font-weight: 700; font-size: 17px; color: var(--text); }
.tr-kopf .fach { color: var(--text-dim); font-size: 13px; margin-top: 2px; }

/* Die Nachricht des Trainers: Avatar links, Text als leise Fläche daneben.
   Bewusst KEINE Chat-Optik mit Blasenschwänzen — es ist eine Karte, kein Dialogtheater. */
.tr-sprech { display: flex; gap: 12px; align-items: flex-start; }
.tr-sprech .text {
  flex: 1; min-width: 0;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--text); font-size: 15px; line-height: 1.45;
}
.tr-sprech .wer { color: var(--text-mute); font-size: 11px; margin-top: 6px; }

/* ------------------------------------------------ Zielkarten in der Liste */

.tr-zielkarte {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  color: var(--text); text-align: left; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-zielkarte .mitte { flex: 1; min-width: 0; }
.tr-zielkarte .titel { font-weight: 700; font-size: 16px; }
.tr-zielkarte .unten { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.tr-zielkarte .stand { text-align: right; flex: 0 0 auto; }

/* Alles, was wie eine Karte aussieht, hebt sich unter der Maus an (Dauerregel). */
@media (hover: hover) {
  .tr-zielkarte:hover, .tr-kachel:hover, .tr-wahlkarte:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    border-color: var(--accent-2);
  }
}

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

.tr-balken {
  height: 6px; border-radius: 3px; background: var(--surface-3);
  overflow: hidden; margin-top: 8px;
}
.tr-balken > i {
  display: block; height: 100%; border-radius: 3px;
  background: currentColor;
  transition: width .22s ease;
}

.tr-held { margin: 2px 0 0; }
.tr-held .uq-zahl { font-size: clamp(34px, 11vw, 46px); }
.tr-held .einheit { font-size: 16px; color: var(--text-dim); font-weight: 700; }

/* Wochen-Slots: Kontur = Soll, Füllung = Ist. Rückstand ist die LEERE Kontur — kein Rot. */
.tr-slots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tr-slot {
  min-width: 64px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid currentColor; color: var(--text-dim);
  font-size: 12px; text-align: center;
}
.tr-slot .uq-label { display: block; }
.tr-slot.voll { background: var(--surface-2); color: var(--text); }
.tr-slot.ruhe { border-style: dashed; }

/* Trainingskalender: jede Planwoche bleibt unabhängig von der aktuellen KW erreichbar. */
.tr-kalender-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.tr-kalender-kopf h3 { margin: 3px 0 0; color: var(--text); font-size: 18px; }
.tr-kalender-kopf p { margin: 3px 0 0; color: var(--text-dim); font-size: 12.5px; }
.tr-kalender-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.tr-kalender-nav .iconbtn { font-size: 24px; line-height: 1; }
.tr-kalender-nav button:disabled { opacity: .3; cursor: default; }

.tr-wochenwerte {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 14px;
}
.tr-wochenwerte article {
  display: flex; flex-direction: column; min-width: 0; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.tr-wochenwerte strong { margin-top: 2px; color: var(--text); font-size: 20px; }
.tr-wochenwerte small { margin-top: 3px; color: var(--text-mute); font-size: 11.5px; line-height: 1.35; }
.tr-metrik { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.tr-metrik > i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.tr-metrik.intensitaet > i { background: var(--accent-2); }

/* Tagesplan: eine echte Einheit je Datum, darunter der vollständige Ablauf. */
.tr-einheiten {
  display: grid; gap: 10px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tr-einheit {
  display: grid; grid-template-columns: minmax(76px, .28fr) 1fr; gap: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
}
.tr-einheit.zusatz { border-style: dashed; background: transparent; }
/* Der Tag steht in einem eigenen Feld — immer, nicht nur wenn etwas eingetragen ist
   (Florian, 26.08.2026). Erledigte Einheiten färben es grün, daneben steht der Zustand
   groß genug, um ihn beim Durchblättern zu sehen. */
.tr-einheit-tag {
  display: flex; flex-direction: column; gap: 3px; align-self: start;
  padding: 8px 10px; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.tr-einheit-tag > span { font-size: 12px; font-weight: 750; color: var(--text); }
.tr-einheit-tag > small { font-size: 11px; color: var(--text-mute); }
.tr-einheit-tag > .tr-tag-marke {
  margin-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase;
}
.tr-einheit.gefuehrt.erledigt .tr-einheit-tag {
  background: color-mix(in srgb, var(--good, #34c759) 26%, var(--surface-3));
  border-color: var(--good, #34c759);
}
.tr-einheit.gefuehrt.erledigt .tr-einheit-tag > span,
.tr-einheit.gefuehrt.erledigt .tr-einheit-tag > .tr-tag-marke { color: var(--good, #34c759); }
.tr-einheit.gefuehrt.erledigt .tr-einheit-tag > small { color: color-mix(in srgb, var(--good, #34c759) 70%, var(--text)); }
.tr-einheit.gefuehrt.ausgesetzt .tr-einheit-tag { background: var(--surface-3); border-style: dashed; }
.tr-einheit.gefuehrt.ausgesetzt .tr-einheit-tag > .tr-tag-marke { color: var(--text-dim); }
.tr-einheit.gefuehrt.verschoben .tr-einheit-tag {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-3));
  border-color: var(--accent);
}
.tr-einheit.gefuehrt.verschoben .tr-einheit-tag > .tr-tag-marke { color: var(--accent); }
.tr-einheit-inhalt { min-width: 0; }
.tr-einheit-inhalt > strong { display: block; font-size: 14px; line-height: 1.35; color: var(--text); }
.tr-einheit-meta { margin: 3px 0 0; color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.tr-einheit-ablauf { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tr-einheit-ablauf li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 10px; font-size: 12.5px; }
.tr-einheit-ablauf li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 7px 3px 0 0; flex: 0 0 auto; }
.tr-einheit-ablauf li > span { flex: 1 1 150px; color: var(--text); }
.tr-einheit-ablauf li > small { flex: 0 1 auto; color: var(--text-mute); font-size: 11px; }
.tr-einheit-hinweis { margin: 9px 0 0; color: var(--text-dim); font-size: 11.5px; line-height: 1.45; }

@media (max-width: 460px) {
  .tr-einheit { grid-template-columns: 1fr; gap: 7px; }
  .tr-einheit-tag { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* Phasenleiste über alle Wochen: ein anklickbares Segment je Woche. */
.tr-phasen { display: flex; gap: 3px; margin-top: 10px; }
.tr-phasen > button {
  flex: 1; height: 8px; border-radius: 2px;
  min-width: 2px; padding: 0; border: 0; cursor: pointer;
  background: var(--surface-3); position: relative; color: inherit;
}
.tr-phasen > button.voll { background: currentColor; }
.tr-phasen > button.teil { background: currentColor; opacity: .45; }
.tr-phasen > button.entlastung { height: 5px; align-self: center; }
.tr-phasen > button.jetzt::after {
  content: ""; position: absolute; left: 0; right: 0; top: -5px;
  height: 2px; border-radius: 1px; background: var(--text);
}
.tr-phasen > button.ausgewaehlt { outline: 2px solid var(--text); outline-offset: 2px; }
.tr-phasen-legende { display: flex; justify-content: space-between; margin-top: 4px; }
.tr-wochen-hinweis { margin: 12px 0 7px; font-size: 12px; }
.tr-wochenstreifen {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 1px 8px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.tr-wochenmini {
  display: flex; flex: 0 0 82px; flex-direction: column; gap: 3px;
  padding: 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer;
  scroll-snap-align: start;
}
.tr-wochenmini > span { color: var(--text-mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.tr-wochenmini > strong { font-size: 13px; white-space: nowrap; }
.tr-wochenmini > small { color: var(--text-dim); font-size: 10.5px; }
.tr-wochenmini > i { height: 4px; margin-top: 3px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.tr-wochenmini > i > b { display: block; height: 100%; background: var(--accent-2); }
.tr-wochenmini.aktiv { border-color: currentColor; background: var(--surface-3); }
.tr-wochenmini.jetzt > span::after { content: " · jetzt"; color: currentColor; }

@media (max-width: 520px) {
  .tr-kalender-kopf { flex-direction: column; }
  .tr-kalender-nav { width: 100%; justify-content: space-between; }
  .tr-wochenwerte { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Dialog (Zielgespräch) */

.tr-punkte { display: flex; gap: 6px; justify-content: center; margin: 4px 0 12px; }
.tr-punkte > i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3);
}
.tr-punkte > i.da { background: var(--accent); }

.tr-frage { font-size: 18px; font-weight: 700; margin: 6px 0 12px; }

.tr-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-antworten.eine { grid-template-columns: 1fr; }
.tr-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1.5px solid var(--line);
  color: var(--text); text-align: left; cursor: pointer; min-height: 64px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-kachel .oben { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.tr-kachel .unten { color: var(--text-dim); font-size: 12.5px; line-height: 1.35; }
.tr-kachel.aktiv { border-color: var(--accent); background: var(--surface-3); }

/* Zwischenkommentar des Trainers im Dialog — kleiner als die Sprechkarte. */
.tr-zwischen {
  display: flex; gap: 10px; align-items: center; margin-top: 12px;
  color: var(--text-dim); font-size: 13.5px; line-height: 1.4;
}

/* Empfehlungskorridor beim Tempo: drei Kacheln, die Empfehlung trägt ein Etikett. */
.tr-empfohlen {
  font-size: 10.5px; letter-spacing: .085em; text-transform: uppercase;
  color: var(--good); font-weight: 700;
}

/* Realitäts-Check: die Korrektur ist eine ruhige Karte, kein Warnkasten. */
.tr-check { border-left: 3px solid currentColor; padding-left: 12px; }
.tr-check .vorher-nachher { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.tr-check .posten { min-width: 120px; }

/* ------------------------------------------------ Trainerwahl */

.tr-filter { display: flex; gap: 8px; margin-bottom: 12px; }

.tr-wahl { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tr-wahlkarte {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--line);
  color: var(--text); text-align: left; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tr-wahlkarte.aktiv { border-color: var(--accent); }
.tr-wahlkarte .mitte { flex: 1; min-width: 0; }
.tr-wahlkarte .name { font-weight: 700; font-size: 16px; }
.tr-wahlkarte .fach { color: var(--text-dim); font-size: 13px; }
.tr-wahlkarte .philo { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; line-height: 1.35; }

/* ------------------------------------------------ Check-in */

.tr-befinden { display: flex; gap: 8px; }
.tr-befinden .tr-kachel { flex: 1; align-items: center; min-height: 52px; padding: 10px 6px; }

/* ------------------------------------------------ Meilensteine */

.tr-meilenstein { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.tr-meilenstein .wann { color: var(--text-mute); font-size: 12px; margin-left: auto; }
.tr-meilenstein.erreicht .was { color: var(--text); }

/* ------------------------------------------------ Fußnote (Arzt-Hinweis) */

.tr-fussnote {
  color: var(--text-mute); font-size: 11.5px; line-height: 1.45; margin-top: 16px;
}

/* ------------------------------------------------ Bewegung reduziert: alles ruhig */

@media (prefers-reduced-motion: reduce) {
  .tr-zielkarte, .tr-kachel, .tr-wahlkarte, .tr-balken > i { transition: none; }
  @media (hover: hover) {
    .tr-zielkarte:hover, .tr-kachel:hover, .tr-wahlkarte:hover { transform: none; }
  }
}

/* Zielzeit: Stunden, Minuten und Sekunden nebeneinander. Drei getrennte Felder statt
   eines Textfelds — „3:30" wäre bei 10 km und beim Marathon zweierlei, und am Handy
   ist eine Zifferntastatur je Feld schneller als jede Trennzeichen-Eingabe. */
.tr-zeitfelder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tr-zeitfelder label.field { margin-bottom: 8px; }
.tr-zeitfelder input { text-align: center; }

/* ---------------------------------------------------------------- Einheit führen
   Jede Einheit im Kalender ist antippbar (Florian, 26.08.2026). Was aus ihr wurde,
   steht neben dem Geplanten — nie an seiner Stelle. */
.tr-einheit[data-tr] { cursor: pointer; transition: transform .22s, box-shadow .22s, border-color .22s; }
.tr-einheit[data-tr]:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.35)); border-color: var(--accent); }
.tr-einheit[data-tr]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tr-einheit[data-tr]:hover { transform: none; }
}
.tr-einheit.gefuehrt.erledigt { border-left: 3px solid var(--good, #34c759); }
.tr-einheit.gefuehrt.ausgesetzt { border-left: 3px solid var(--text-dim); opacity: .82; }
.tr-einheit.gefuehrt.verschoben { border-left: 3px solid var(--accent); }

.tr-marke {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px; vertical-align: middle;
  background: var(--surface-3); color: var(--text-dim);
}
.tr-marke.erledigt { background: color-mix(in srgb, var(--good, #34c759) 22%, transparent); color: var(--good, #34c759); }
.tr-marke.verschoben { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }

.tr-einheit-ist { margin: 4px 0 0; font-size: 13px; color: var(--text); font-weight: 600; }
.tr-einheit-ist.leise { font-weight: 400; color: var(--text-dim); font-size: 12.5px; }
.tr-einheit-tag small.leise { color: var(--accent); font-size: 11px; }

/* Gefühl und Anstrengung: Reihen aus kleinen Knöpfen statt Schiebereglern — auf dem
   Handy trifft man sie sicherer, und der gewählte Wert bleibt ablesbar. */
.tr-stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; margin: 6px 0 4px; }
.tr-stufe, .tr-rpe {
  padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-dim); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.tr-stufe.aktiv, .tr-rpe.aktiv { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tr-rpe-reihe { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 6px 0 4px; }
.tr-rpe { padding: 9px 0; font-size: 13px; text-align: center; }

/* ---------------------------------------------------------------- Bewegungsablauf
   Die Figur bekommt eine feste Bühne: Ohne Höhe hätte das Canvas keine und bliebe
   unsichtbar. Der Hintergrund macht die Tiefenwirkung erst sichtbar. */
.tr-ablauf {
  position: relative; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
  overflow: hidden;
}
.tr-ablauf canvas {
  display: block; width: 100%; height: 260px;
  touch-action: none;      /* Ziehen dreht die Figur, statt die Seite zu scrollen */
  cursor: grab;
}
.tr-ablauf canvas:active { cursor: grabbing; }
.tr-ablauf-stand {
  position: absolute; left: 12px; bottom: 10px; margin: 0;
  font-size: 12.5px; color: var(--text-dim);
}
/* Der Hinweis „ansehen" an einer Übung, zu der es einen Ablauf gibt. */
.tr-einheit-ablauf li.zeigbar { cursor: pointer; border-radius: 8px; }
.tr-einheit-ablauf li.zeigbar:hover { background: var(--surface-3); }
.tr-ablauf-hinweis {
  font-style: normal; margin-left: 8px; font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: .3px;
}

/* ------------------------------------------------ Die gemeinsame Woche (Trainerteam)

   Florian, 26.08.2026: ein Plan statt drei, die sich schlagen. Die Tafel zeigt alle
   sieben Tage — auch die freien, denn ein leerer Tag ist eine Aussage und keine Lücke. */

.tr-woche-karte { padding: 14px; }

.tr-woche-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tr-woche-kopf h3 { margin: 0; font-size: 18px; color: var(--text); }
.tr-woche-kopf p { margin: 3px 0 0; font-size: 12.5px; }

.tr-woche { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }

.tr-woche-tag {
  /* Dritte Spalte fuer die Tageszufuhr. `auto` heisst: Sie kostet nichts, solange es
     keine Energierechnung gibt (ohne Koerperdaten) — dann bleibt die Zeile genau so,
     wie sie vorher war. */
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 7px 8px; border-radius: 10px; background: var(--surface-2);
  min-height: 40px;
}
/* ⚠ minmax(0, 1fr) statt 1fr: Ein reines 1fr bekommt den min-content-Boden seines
   Inhalts und sprengt die Zeile, sobald ein Einheitenname lang wird. */
.tr-woche-tag.frei { background: transparent; border: 1px dashed var(--line); }
.tr-woche-tag > .wt { font-size: 12px; font-weight: 750; color: var(--text-dim); }
.tr-woche-tag > .inhalt { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tr-woche-tag.frei .inhalt em { font-style: normal; font-size: 12.5px; color: var(--text-mute); }

.tr-woche-einheit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 3px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  max-width: 100%;
}
.tr-woche-einheit .tr-avatar { width: 22px; height: 22px; flex: 0 0 auto; }
.tr-woche-einheit .tr-avatar svg { width: 22px; height: 22px; }
.tr-woche-einheit b { font-size: 12.5px; font-weight: 700; color: var(--text); }
/* Verlegt: leise, aber sichtbar — es ist eine Absprache, keine Störung. */
.tr-woche-einheit i {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-mute);
}

/* Die Zufuhr des Tages, rechts am Rand. Sie ist die sichtbare Form des Wochenbudgets:
   am langen Tag die groesste Zahl, an den ruhigen die kleinsten.
   ⚠ tabular-nums, damit die Spalte untereinander flurchtet — sonst tanzen die Ziffern
   und man vergleicht Tage nicht mehr auf einen Blick. */
.tr-woche-kcal {
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Ein Tag ohne Kuerzung: die Zahl steht auf voller Hoehe und wird dadurch sichtbar,
   ohne dass ein zweites Zeichen dazukommt. */
.tr-woche-kcal.voll { color: var(--good); }

.tr-woche-ern {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; line-height: 1.45; color: var(--text-dim);
}
/* Der Wochensatz steht direkt unter dem Anker und gehoert sichtbar dazu. */
.tr-woche-energie { margin-top: 6px; }

/* ---------------------------------------- Was ein Ziel fuers Essen heisst (31.08.2026)
   Zwei Zahlen und ein Satz, im Zielgespraech direkt vor „Plan erstellen". Gleiche
   Bauform wie .tr-woche-ern — ein abgesetzter Kasten, keine zweite Karte. */
.tr-essen {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 13px; line-height: 1.45;
}
.tr-essen-kopf { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tr-essen-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 3px 0; color: var(--text-dim);
}
/* ⚠ Tabularziffern und nowrap wie in der Wochentafel: Untereinander stehende Betraege
   fransen sonst rechts aus, und „2.750 kcal" bricht mitten in der Zahl um. */
.tr-essen-zeile b {
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tr-essen-satz { margin: 8px 0 0; font-size: 12.5px; }

/* Die Bruecke zum Tagebuch. ⚠ Sie sitzt IM Kasten, direkt unter den Zahlen: Genau dort
   entsteht die Frage, ob diese Zahlen auch dort gelten, wo gegessen wird. */
.tr-essen-frei { margin-top: 10px; }
.tr-essen-frei p { margin: 0 0 8px; font-size: 12.5px; color: var(--text-dim); }
.tr-essen-frei.an { margin-top: 10px; font-size: 12.5px; color: var(--good); }
/* ⚠ width:auto — .btn bringt width:100% mit; und drei Klassen fuer die Hoehe, weil
   .btn.sm mit min-height:36px sonst gewinnt (0,2,0 schlaegt 0,1,0). 44 px ist die
   Mindestgroesse fuers Tippen am Handy. */
.tr-essen-frei .btn { width: auto; }
.tr-essen-frei .btn.secondary.sm { min-height: 44px; }
/* In der Wochenkarte der Zielliste steht dieselbe Zeile ohne umgebenden Kasten. */
.tr-woche-ern + .tr-essen-frei { margin-top: 10px; }

.tr-woche-absprache { margin-top: 10px; }
.tr-woche-absprache > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  padding: 6px 0; list-style: none;
}
.tr-woche-absprache > summary::-webkit-details-marker { display: none; }
.tr-woche-absprache > summary::before { content: "▸ "; }
.tr-woche-absprache[open] > summary::before { content: "▾ "; }
.tr-woche-absprache ul { margin: 4px 0 0; padding-left: 18px; }
.tr-woche-absprache li { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin: 3px 0; }

.tr-woche-schwerpunkt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tr-woche-schwerpunkt > .uq-label { flex: 0 0 100%; }
/* ⚠ .btn bringt aus styles.css width:100% mit — ohne width:auto steht jeder Knopf
   auf eigener Zeile, auch wenn zwei kurze Namen längst nebeneinander passten. */
.tr-woche-schwerpunkt .btn { flex: 1 1 0; width: auto; min-width: 0; }

@media (hover: hover) {
  .tr-woche-tag:not(.frei):hover {
    background: var(--surface-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-woche-tag { transition: none; }
}

/* ------------------------------------------------ Wochentage im Gespräch

   Sieben gleich breite Felder — Mo bis So so, wie ein Kalender gelesen wird.
   ⚠ Auf 375 px bleiben rund 44 px je Feld: genau die Tippfläche, die ein Finger
   braucht. Deshalb gleiche Spalten statt flex-wrap, das bei sieben Elementen
   unweigerlich eine krumme zweite Zeile erzeugt. */

.tr-wt-reihe {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; margin-top: 12px;
}

.tr-wt {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 6px 2px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text-dim); cursor: pointer;
  font: 750 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.tr-wt .kurz { pointer-events: none; }
.tr-wt.aktiv {
  background: var(--accent-2); border-color: var(--accent-2);
  color: var(--on-accent, #08131f);
}

@media (hover: hover) {
  .tr-wt:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    border-color: var(--accent-2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tr-wt { transition: none; }
  .tr-wt:hover { transform: none; }
}

.tr-wt-stand {
  margin: 10px 0 0; font-size: 12.5px; font-weight: 700;
  color: var(--text-mute);
}
.tr-wt-stand.voll { color: var(--good); }

.tr-wt-lang { margin-top: 18px; }
.tr-wt-lang > .uq-label { display: block; }

/* ------------------------------------------------ Absprache im Team (Check-in)

   Wechselrede statt Protokoll: Wer den Check-in macht, hört, wie sein Trainer die
   Woche mit den anderen abstimmt. Deshalb dieselbe Sprechblase wie sonst — nur
   enger gesetzt, weil mehrere Züge untereinander stehen. */

.tr-absprache { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.tr-absprache > .uq-label { display: block; margin-bottom: 10px; }
.tr-absprache .tr-sprech + .tr-sprech { margin-top: 8px; }
.tr-absprache .tr-sprech .text { font-size: 13.5px; line-height: 1.45; }
.tr-absprache .tr-sprech .wer { margin-top: 4px; }

/* Der Sprung aus dem Tagebuch (31.08.2026)
   ---------------------------------------------------------------------------
   Wer im Tagebuch auf sein Training tippt, landet direkt hier. Damit klar ist,
   WELCHE der Einheiten dieser Woche gemeint war, trägt sie einen Rand in der
   Akzentfarbe und darüber eine Zeile, die den Weg benennt.

   ⚠ Keine Bewegung, kein Blinken: Die Markierung steht, während gelesen wird —
     eine Animation wäre hier Störung statt Hinweis (und bräuchte einen Gegenspieler
     unter „Bewegung reduzieren").
   ⚠⚠ Das Label ist ein Kind des Grids und braucht die volle Breite: Ohne
      `grid-column` setzte es sich in die Tagesspalte und schöbe den Rest um eine
      Zeile nach unten. */
.tr-einheit.hervor {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.tr-einheit-heute {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--accent);
}