/* ============================================================
   kalender.css — Kalender (Monatsraster) und Tagesansicht.
   Baut ausschließlich auf system.css auf; jede Regel hier ist
   mit .kalender- bzw. .tag- vorangestellt und färbt nichts um,
   was dem Grundsystem gehört.
   ============================================================ */

/* ---------- Kopf: Monat + Pfeile ---------- */
.kalender { touch-action: pan-y; } /* horizontales Wischen gehört dem Monatswechsel */

.kalender-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px;
}
.kalender-pfeile { display: flex; gap: 8px; }
.kalender-pfeil {
  width: 56px; height: 56px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte);
  transition: border-color var(--wechsel), opacity var(--wechsel), transform 80ms ease-out;
}
.kalender-pfeil:active:not(:disabled) { transform: scale(0.95); }
.kalender-pfeil:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .kalender-pfeil:hover:not(:disabled) { border-color: var(--tinte-leise); } }
.kalender-pfeil--rechts .symbol { transform: scaleX(-1); }

/* ---------- Monatsraster Mo–So ---------- */
.kalender-wochentage {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  margin-bottom: 8px;
}
.kalender-wochentage span { text-align: center; font-size: 13px; color: var(--tinte-gedimmt); }

.kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kalender-tag {
  aspect-ratio: 1; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  transition: filter var(--wechsel), transform 80ms ease-out;
}
.kalender-tag:active:not(:disabled) { transform: scale(0.92); }
@media (hover: hover) { .kalender-tag:hover:not(:disabled) { filter: brightness(1.15); } }

/* Heute: Glutrand, durch einen schmalen Grund-Spalt von jeder Stufe abgesetzt */
.kalender-tag--heute { box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--akzent); }

/* Noch nicht gelebte Tage: still und nicht greifbar */
.kalender-tag--zukunft { color: var(--tinte-leise); font-weight: 500; cursor: default; }

/* Monatswechsel: dezentes Hereingleiten aus der Wischrichtung */
.kalender-raster--links  { animation: kalender-herein-links 160ms ease-out; }
.kalender-raster--rechts { animation: kalender-herein-rechts 160ms ease-out; }
@keyframes kalender-herein-links  { from { opacity: 0; transform: translateX(-10px); } }
@keyframes kalender-herein-rechts { from { opacity: 0; transform: translateX(10px); } }

/* ---------- Schmale Legende: leer → glüht ---------- */
.kalender-legende {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 24px;
}
.kalender-legende-stufe { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.kalender-legende-stufe.heat-leer { border: 1px solid var(--linie); }
.kalender-legende-wort { font-size: 13px; color: var(--tinte-gedimmt); }
.kalender-legende-wort:first-child { margin-right: 4px; }
.kalender-legende-wort:last-child  { margin-left: 4px; }

/* ---------- Tagesansicht ---------- */

/* Leiser Zurück-Pfeil; die Greiffläche bleibt 56 px, der Rand rückt optisch ein */
.tag-zurueck {
  width: 56px; height: 56px;
  margin: -8px 0 0 -16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinte-gedimmt);
  border-radius: var(--radius);
  transition: color var(--wechsel), background-color var(--wechsel);
}
.tag-zurueck:active { color: var(--tinte); }
@media (hover: hover) { .tag-zurueck:hover { color: var(--tinte); background: var(--flaeche); } }

.tag-titel { margin: 4px 0 20px; }

/* Kopf: Glut-Kachel mit Tageswert + Teil-Leisten */
.tag-kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.tag-kachel { min-width: 72px; height: 72px; font-size: 22px; }
.tag-teile { flex: 1; min-width: 0; display: grid; gap: 14px; }
.tag-teil {
  display: grid; grid-template-columns: 68px 1fr 2rem;
  gap: 10px; align-items: center;
}
.tag-teil-wort { font-size: 13px; color: var(--tinte-gedimmt); }
.tag-teil-wert {
  font-size: 13px; font-weight: 600;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Fehlt ein Bereich, wird das benannt — er zählt mit null in den Tageswert. */
.tag-teil--fehlt .tag-teil-wert { color: var(--warnung); }

/* Training: die eine Karte des Tages */
.tag-uebungen { list-style: none; margin: 0; padding: 0; }
.tag-uebung {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding: 10px 0;
}
.tag-uebung + .tag-uebung { border-top: 1px solid var(--linie); }
.tag-uebung:first-child { padding-top: 0; }
.tag-uebung:last-child  { padding-bottom: 0; }
.tag-uebung-name { font-size: 15px; color: var(--tinte-gedimmt); }
.tag-uebung-saetze {
  margin-left: auto;
  font-size: 17px; font-weight: 600; letter-spacing: -0.005em;
  text-align: right;
}
/* Ein Lauf ("80 kg × 10/9/8") bricht nie in sich um — nur zwischen Läufen */
.tag-uebung-lauf { white-space: nowrap; }

/* Staffel: Ernährung, Bewegung, Morgenwerte, Review — ruhige Zeilen */
.tag-staffel { margin-top: 24px; }
.tag-abschnitt {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline;
  padding: 16px 0; border-top: 1px solid var(--linie);
}
.tag-abschnitt-wort { font-size: 13px; color: var(--tinte-gedimmt); }
.tag-abschnitt-werte { display: grid; gap: 3px; justify-items: end; text-align: right; }
.tag-abschnitt-wert { font-size: 17px; font-weight: 600; }
.tag-abschnitt--review { grid-template-columns: 1fr; gap: 8px; }
.tag-review-text { font-size: 15px; line-height: 1.55; }

/* Ganz leerer Tag: ein ruhiger Satz */
.tag-leer { margin-top: 40px; }