/* ══════════════════════════════════════════════════════════════════
   Die Woche — auf der Gruppenseite und im Bereich Training.

   Beide Seiten zeichnen dieselbe Woche mit demselben Baustein
   (feature/woche/woche.js), also mit denselben Regeln.

   Seit v.35.42.0 senkrecht, wie bei Spond: oben blättert man die Woche,
   darunter steht jeder Tag mit seinen Terminen und Einheiten. Bis dahin
   ein Streifen aus sieben Tagen, damit die Woche auf dem Telefon nicht
   zwei Bildschirme hoch wird — darum sind leere Tage hier eine einzige
   Zeile, und nur Tage mit Inhalt nehmen Platz.

   Alle Abstände kommen aus der Skala in kit.css. Freie Zahlen stehen
   nur dort, wo es um eine physische Grösse geht — ein Knopf, den ein
   Daumen treffen muss, ist 40 Pixel hoch.
   ══════════════════════════════════════════════════════════════════ */

/* ── Der Kopf: blättern ────────────────────────────────────────────*/

.agenda__kopf {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4);
}
.agenda__pfeil,
.agenda__heute {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; flex: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.agenda__pfeil { width: 40px; border-radius: var(--r-icon); }
.agenda__heute {
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700;
}
.agenda__pfeil:hover,
.agenda__heute:hover { border-color: var(--accent); color: var(--accent); }

.agenda__zeitraum {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.agenda__daten { font-size: 16px; font-weight: 800; }
/* Die Woche, wie die Excel sie nennt ("KW 31 · TW 17"). Leer, wenn
   kein Plan in der Woche liegt — die Höhe bleibt trotzdem, sonst
   springt der Kopf beim Blättern. */
.agenda__kw { min-height: 1.4em; font-size: 12px; font-weight: 600; color: var(--ink-soft); }

/* ── Die Tage ──────────────────────────────────────────────────────*/

.agenda__tage { display: flex; flex-direction: column; gap: var(--s4); }
/* Wer zu heute springt, landet unter dem Kopf der Seite, nicht dahinter. */
.agenda__tag { scroll-margin-top: calc(61px + var(--s3)); }

.agenda__datum {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 32px;
  margin-bottom: var(--s2);
}
.agenda__wtag { font-size: 14px; font-weight: 800; }
.agenda__dnum { font-size: 13px; color: var(--ink-soft); }

/* Heute ist markiert, egal wohin man blättert — der Bezugspunkt. */
.agenda__tag.ist-heute .agenda__wtag { color: var(--accent); }
.agenda__tag.ist-heute .agenda__datum {
  padding-left: var(--s2);
  border-left: 3px solid var(--accent);
}

/* Ein leerer Tag ist eine Zeile, blass — er soll da sein, aber
   keinen Platz fressen. */
.agenda__tag.ist-leer .agenda__datum { margin-bottom: 0; }
.agenda__tag.ist-leer .agenda__wtag,
.agenda__tag.ist-leer .agenda__dnum { opacity: 0.6; }

/* "+" für einen Termin an genau diesem Tag — nur die Leitung sieht es. */
.agenda__neu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: auto; flex: none;
  border: 1px dashed var(--border);
  border-radius: var(--r-icon);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.agenda__neu:hover { border-color: var(--accent); color: var(--accent); }

/* Abgesagt bleibt stehen — sonst fährt jemand hin —, aber durchgestrichen. */
.agenda__termin.ist-abgesagt .row__title { text-decoration: line-through; color: var(--ink-soft); }

.agenda__nichts { margin-bottom: var(--s3); text-align: center; }
.agenda__danach { margin-top: var(--s5); }

/* Vormittag / Nachmittag steht am Eintrag, nicht als Zwischentitel:
   ein Kasten je Tageshälfte wäre viel Rahmen um oft eine Zeile. */
.eintrag__slot {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
}

/* Im Plan genannt, aber ohne Blatt — "evtl. Spiel (Tennis…)". Nichts
   zum Antippen, und das muss man sehen, bevor man tippt. */
.row--ohneBlatt { cursor: default; background: var(--surface-2); }
.row--ohneBlatt .row__icon { background: var(--surface); color: var(--ink-soft); }

.row__zaehler {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
}
.row__zaehler.ist-fertig { color: var(--ok); }

/* Die Fortschrittsleiste ist .row__bar aus dem Kit — sie sitzt im
   .row__body und läuft damit unter dem Namen statt neben ihm.
   Fertig färbt sie um; sonst müsste man die Zahl daneben lesen,
   um zu wissen, ob es fertig ist. */
.row__bar > i.ist-fertig { background: var(--ok); }

/* Die Personenwahl der Leitung sitzt rechts in der Überschrift. */
.marke--reihe .woche__person { width: auto; max-width: 60%; }

@media (prefers-reduced-motion: reduce) {
  .agenda__pfeil, .agenda__heute, .agenda__neu { transition: none; }
}