/* Kunden-App — eigene Stile ueber basis.css.
   Die App folgt dem Kundenweg von Oliver: ein Tag, eine Hauptaktion.
   Das Cockpit nutzt diese Datei nicht. */

/* ---- Band fuer den Trainer in der Kundenansicht */
#trainerband {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--karte-tief); border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten);
  padding: 8px 14px; font-size: 12px; color: var(--mittel);
}
#trainerband a { color: var(--akzent); font-weight: 500; }

/* ---- Rhythmus der Abstaende: enger als die Vorgabe, damit weniger
   gescrollt werden muss, dafuer mehr Luft innerhalb der Karten. */
.seite { padding: 16px 16px 20px; }
.seite .abschnitt { margin-top: 20px; }
.seite h1 { font-size: 28px; }

/* ---- Kopf: Datum klein ueber dem Gruss, Monogramm als Knopf */
/* Wochentag und Datum stehen unter dem Namen, in normaler Schreibweise. */
.kopf-datum { font-size: 13px; color: var(--mittel); margin-top: 3px; }
.monogramm {
  appearance: none; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--karte-tief); color: var(--stark);
  box-shadow: var(--kante), var(--schatten);
  font-family: var(--titel); font-weight: 700; font-size: 13px; letter-spacing: -.02em;
  display: grid; place-items: center;
  transition: background .2s var(--weich);
}
.monogramm:hover { filter: brightness(1.25); }

/* ---- Jede Ansicht taucht weich auf statt hart umzuspringen */
.seite { animation: auftauchen .35s var(--weich); }
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- Buehne: die eine Karte, die gerade zaehlt */
.held { padding: 20px 16px 18px; text-align: center; position: relative; overflow: hidden; }
/* Ein Lichtkegel hinter den Ringen: die Hauptflaeche der App soll nicht
   flach wirken, sondern wie beleuchtet. */
.held::before {
  content: ''; position: absolute; left: 50%; top: -30%;
  width: 340px; height: 340px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(61, 140, 224, .20) 0%, transparent 62%);
  pointer-events: none;
}
.held > * { position: relative; }
.held h2 { font-size: 21px; }
.held .zeile { font-size: 13px; color: var(--mittel); margin-top: 6px; }

/* ---- Hinweis unter den Ringen */
.tipp { font-size: 12px; color: var(--schwach); margin-top: 10px; }

/* ---- Die grosse Karte: das Training des Tages ist der Blickfang.
   Sie traegt die Markenfarbe als Flaeche, damit sie sich von den
   uebrigen Karten abhebt und die Handlung sofort sichtbar ist. */
.karte.gross {
  background: linear-gradient(160deg, #0e5aa8 0%, #084484 62%, #063a72 100%);
  box-shadow: var(--kante), 0 10px 30px rgba(8, 68, 132, .38);
  padding: 20px 18px;
}
.karte.gross .augbraue {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin-bottom: 8px;
}
.karte.gross h2 { font-size: 23px; color: var(--auf-akzent); letter-spacing: -.02em; }
.karte.gross .gross-text {
  font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .84);
  margin: 8px 0 0; max-width: 46ch;
}
/* Ruhetag: dieselbe Groesse, aber ohne Farbe, weil nichts zu tun ist. */
.karte.gross.ruhig {
  background: var(--karte-tief);
  box-shadow: var(--kante), var(--schatten);
}
.karte.gross.ruhig h2 { color: var(--stark); }
.karte.gross.ruhig .augbraue { color: var(--schwach); }
.karte.gross.ruhig .gross-text { color: var(--mittel); }

/* Kennzahlen der Einheit, wie auf einer Anzeigetafel */
.kennzahlen {
  display: flex; gap: 8px; margin: 16px 0 16px;
  padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .18);
}
.kennzahlen > div { flex: 1; }
.kennzahlen b {
  display: block; font-family: var(--titel); font-weight: 700; font-size: 21px;
  letter-spacing: -.03em; color: var(--auf-akzent);
}
.kennzahlen span {
  display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); margin-top: 2px;
}

/* Der Knopf auf der farbigen Flaeche kehrt sich um: weiss mit dunkler Schrift. */
.knopf.auf-akzent {
  background: var(--auf-akzent); color: var(--akzent-tief);
  font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.knopf.auf-akzent:hover { filter: brightness(.94); }

/* ---- Tageszeile: das Training von heute als kompakte Handlung */
.tageszeile { display: flex; align-items: center; gap: 12px; }
.tageszeile .zeichenflaeche {
  width: 40px; height: 40px; border-radius: var(--r-12); flex: none;
  display: grid; place-items: center;
  background: var(--karte-tief); box-shadow: var(--kante); color: var(--akzent-mittel);
}

/* ---- 14-Tage-Streifen ueber der Terminliste */
.tage { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tage::-webkit-scrollbar { display: none; }
.tag {
  flex: none; width: 44px; padding: 8px 0 7px; text-align: center;
  appearance: none; border: 0; background: var(--karte-tief); color: inherit;
  border-radius: var(--r-12); cursor: pointer; font-family: var(--text);
  box-shadow: var(--kante); transition: filter .2s var(--weich);
}
.tag:hover { filter: brightness(1.25); }
.tag .wtag { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--schwach); }
.tag .ztag { font-family: var(--titel); font-weight: 700; font-size: 15px; margin: 1px 0 5px; }
.tag .lage { width: 7px; height: 7px; border-radius: 50%; margin: 0 auto; }
.tag .lage.geplant { background: var(--akzent-verlauf); box-shadow: 0 0 8px rgba(61, 140, 224, .5); }
.tag .lage.guenstig { box-shadow: inset 0 0 0 1.6px var(--akzent-hell); }
.tag .lage.offen { width: 9px; height: 3px; border-radius: 2px; background: var(--flaeche-2); }
.tag.gebucht { box-shadow: inset 0 0 0 1px var(--akzent), var(--kante); }

/* ---- Athletikfaktoren als Pyramide: Flaeche statt Zahlenraster */
.pyramide { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.p-stufe { width: 100%; }
.p-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.p-balken { display: flex; gap: 4px; align-items: flex-end; }
.p-faktor { flex: 1; }
/* Die Saeule traegt den Wert als Hoehe, der Name steht darunter im Klartext. */
.p-faktor > .saeule {
  height: 72px; border-radius: var(--r-8); overflow: hidden;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  display: flex; align-items: flex-end;
}
.p-faktor > .saeule > .fuell {
  width: 100%; height: 0; border-radius: var(--r-8);
  background: var(--fuell-farbe, var(--akzent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: height .9s var(--weich);
}
.p-faktor > .name {
  display: block; font-size: 9px; line-height: 1.2; color: var(--schwach);
  margin-top: 6px; text-align: center;
}
.p-stufe.gesperrt { opacity: .4; }

/* ---- Einstieg: drei Schritte, einer offen */
.schritt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  appearance: none; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit; padding: 12px 2px;
  font-family: var(--text);
}
.schritt + .schritt { border-top: 1px solid var(--linie); }
.schritt .punkt {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--karte-tief); color: var(--schwach);
  box-shadow: var(--kante); font-size: 12px; font-weight: 500;
}
.schritt.fertig .punkt {
  background: var(--akzent-verlauf); color: var(--auf-akzent);
  box-shadow: var(--akzent-schein), var(--kante);
}
.schritt.fertig .schritt-name { color: var(--schwach); }
.schritt.dran .punkt { box-shadow: inset 0 0 0 1.6px var(--akzent-mittel); color: var(--akzent); }
.schritt-name { font-size: 14px; color: var(--stark); }
.schritt-hinweis { font-size: 12px; color: var(--schwach); }

/* ---- Muster-Marken in der Tageskarte */
.muster-marken { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.muster-marke {
  width: 26px; height: 26px; border-radius: var(--r-8);
  display: grid; place-items: center;
  background: var(--karte-tief); box-shadow: var(--kante); color: var(--akzent-mittel);
  font-family: var(--titel); font-weight: 700; font-size: 12px;
}

/* ---- Zeilen fuer «Als Naechstes» */
.naechstes {
  display: flex; align-items: center; gap: 12px; width: 100%;
  appearance: none; border: 0; cursor: pointer; text-align: left; color: inherit;
  background: var(--karte); border-radius: var(--r-12); padding: 12px 14px;
  box-shadow: var(--kante), var(--schatten); font-family: var(--text);
  transition: filter .2s var(--weich), transform .2s var(--weich);
}
.naechstes:hover { filter: brightness(1.15); transform: translateX(2px); }
.naechstes + .naechstes { margin-top: 8px; }
.naechstes svg { color: var(--schwach); flex: none; }

/* ---- Handlungszeile unter den Ringen */
.deutung { font-size: 13px; color: var(--mittel); max-width: 300px; margin: 10px auto 0; }
.deutung strong { color: var(--stark); font-weight: 500; }

/* ---- Wochenpunkte im Rhythmus */
.wochenpunkte { display: flex; gap: 6px; }
.wochenpunkte > i { flex: 1; height: 6px; border-radius: 3px; background: var(--flaeche-2); }
.wochenpunkte > i.voll { background: var(--akzent-verlauf); box-shadow: 0 0 6px rgba(61, 140, 224, .45); }