/* Seitenspezifische Feinheiten. */

.start-hero {
  text-align: left;
}

.start-hero h1 {
  font-size: 1.6rem;
}

.heute-frage {
  font-size: 0.95rem;
  color: var(--farbe-schrift-gedaempft);
}

.heute-grid {
  display: grid;
  gap: var(--abstand-3);
}

.wochenkreis-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-4);
}

.wochenkreis {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.wochenkreis svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.wochenkreis__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.wochenkreis__text small {
  font-weight: 400;
  font-size: 0.6rem;
  color: var(--farbe-schrift-gedaempft);
}

.today-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}

.today-liste li {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-2) 0;
  border-bottom: 1px solid var(--farbe-rand);
}

.today-liste li:last-child {
  border-bottom: none;
}

.plan-auswahl {
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: 1fr 1fr;
}

.einheit-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}

.einheit-karte {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
}

.uebung-log-karte {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-mittel);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
}

.uebung-log-karte__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-2);
}

.satz-kopfzeile {
  display: grid;
  /* minmax(0, 1fr) statt reinem 1fr, siehe ausführliche Begründung bei
     .satz-zeile in components.css: verhindert horizontales Overflow bei
     390px, weil die Spuren sonst nie unter den intrinsischen
     Mindestinhalt ihrer Zellen schrumpfen könnten. Letzte Spalte auf 40px
     verbreitert (statt 32px), damit "Erledigt" auf sehr schmalen Screens
     zumindest zweizeilig lesbar bleibt statt stark abgeschnitten zu
     werden; die Erledigt-Checkbox selbst (22px) bleibt unverändert
     mittig zentriert. */
  grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 40px;
  gap: var(--abstand-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--farbe-schrift-gedaempft);
  margin-bottom: 4px;
}

.satz-kopfzeile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die letzte Kopfzeile ("Erledigt") darf umbrechen statt abgeschnitten zu
   werden: bei sehr schmalen Screens zweizeilig ("ERLE-" / "DIGT" je nach
   Sprache) statt "ER…", ohne dass ein Inhalt verloren geht. */
.satz-kopfzeile span:last-child {
  overflow-wrap: break-word;
  white-space: normal;
  text-align: center;
  line-height: 1.1;
}

.satz-zeile--mit-erledigt {
  grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 40px;
}

.satz-zeile--mit-erledigt input[type='checkbox'] {
  width: 22px;
  height: 22px;
  justify-self: center;
  margin: 0;
}

.uebung-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-2);
}

.letzte-werte {
  margin: 0 0 var(--abstand-2);
}

.ersetzt-hinweis {
  font-size: 0.8rem;
  color: var(--farbe-schrift-gedaempft);
  background: var(--farbe-akzent-flaeche);
  border-radius: var(--radius-klein);
  padding: var(--abstand-2) var(--abstand-3);
  margin: 0 0 var(--abstand-2);
}

.ersatz-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-2);
  padding: var(--abstand-2);
  background: var(--farbe-hintergrund);
  border-radius: var(--radius-klein);
}

.progressions-hinweis {
  border-radius: var(--radius-klein);
  padding: var(--abstand-2) var(--abstand-3);
  margin-bottom: var(--abstand-3);
  font-size: 0.85rem;
  background: var(--farbe-akzent-flaeche);
}

.progressions-hinweis--reduktion {
  background: var(--farbe-warnung-flaeche);
}

.progressions-hinweis--steigerung {
  background: var(--farbe-erfolg-flaeche);
}

.progressions-hinweis summary {
  cursor: pointer;
  color: var(--farbe-akzent-dunkel);
  font-size: 0.8rem;
  margin-top: 4px;
}

.timer-start-auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-3);
  padding: var(--abstand-2);
  background: var(--farbe-hintergrund);
  border-radius: var(--radius-klein);
}

.timer-start-auswahl__label {
  font-size: 0.8rem;
  color: var(--farbe-schrift-gedaempft);
}

.timer-start-auswahl__eigene {
  display: flex;
  gap: 4px;
  align-items: center;
}

.timer-start-auswahl__eigene input {
  width: 72px;
  min-height: 36px;
  padding: 4px 8px;
}

.planungs-aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}

.planungs-aktionen__tauschen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}

.verlauf-eintrag {
  border-left: 3px solid var(--farbe-akzent);
  padding-left: var(--abstand-3);
  margin-bottom: var(--abstand-3);
}

.ampel-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}

.ampel-zeile {
  display: flex;
  gap: var(--abstand-3);
  align-items: flex-start;
  padding: var(--abstand-2);
  border-radius: var(--radius-klein);
}

.ampel-zeile--gruen {
  background: var(--farbe-erfolg-flaeche);
}

.ampel-zeile--gelb {
  background: var(--farbe-warnung-flaeche);
}

.ampel-zeile--rot {
  background: var(--farbe-gefahr-flaeche);
}

.ampel-punkt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.ampel-zeile--gruen .ampel-punkt {
  background: var(--farbe-erfolg);
}

.ampel-zeile--gelb .ampel-punkt {
  background: var(--farbe-warnung);
}

.ampel-zeile--rot .ampel-punkt {
  background: var(--farbe-gefahr);
}

.foto-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-2);
}

.foto-gitter img,
.foto-gitter__leer {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-klein);
  border: 1px solid var(--farbe-rand);
}

.foto-gitter__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-schrift-gedaempft);
  font-size: 1.6rem;
  background: var(--farbe-akzent-flaeche);
  cursor: pointer;
  padding: var(--abstand-1);
  text-align: center;
}

.foto-gitter__leer-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  border-radius: var(--radius-klein);
}

.foto-gitter__leer-inhalt svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.foto-gitter__leer-text {
  font-size: 0.62rem;
  line-height: 1.15;
  font-weight: 600;
  color: var(--farbe-akzent-dunkel);
}

/* Der Datei-Input bleibt technisch im Fokus- und Tab-Ablauf (kein display:none),
   ist aber visuell verborgen. Die sichtbare Beschriftung liefert das Label. */
.foto-input--versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.foto-input--versteckt:focus-visible {
  outline: none;
}

.foto-input--versteckt:focus-visible + .foto-gitter__leer-inhalt {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.gewichtstrend-hinweis {
  font-size: 0.8rem;
  color: var(--farbe-schrift-gedaempft);
}

.reflexion-woche-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.reflexion-woche-tabs button {
  flex-shrink: 0;
  border: 1px solid var(--farbe-rand-stark);
  background: var(--farbe-flaeche);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}

.reflexion-woche-tabs button[aria-current='true'] {
  background: var(--farbe-akzent);
  color: #fff;
  border-color: var(--farbe-akzent);
}

@media (max-width: 400px) {
  .plan-auswahl {
    grid-template-columns: 1fr;
  }
}