/* ============================================================
   onboarding.css — Ansicht „Onboarding“
   Eine Frage pro Schirm: oben der leise Zurück-Pfeil neben der
   dünnen Fortschrittslinie, darunter die Frage groß, dann die
   großen Antwortkarten; „Weiter“ (wo es ihn gibt) sitzt unten
   am Daumen. Baut ausschließlich auf system.css auf (.segment,
   .stepper, .knopf, .fortschritt-linie); hier stehen nur
   Anordnung und die eigenen Züge der Ansicht.
   ============================================================ */

/* ---------- Gerüst: ein Schirm füllt die Höhe ---------- */
.onboarding {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Kopf: Zurück-Pfeil links, die 2px-Linie füllt den Rest */
.onboarding-kopf {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  margin-bottom: 24px;
}
.onboarding-zurueck {
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -10px;              /* Pfeil optisch auf der Textkante */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--tinte-gedimmt);
  transition: color var(--wechsel);
}
.onboarding-zurueck:active { color: var(--tinte); }
@media (hover: hover) { .onboarding-zurueck:hover { color: var(--tinte); } }
.onboarding-fortschritt { flex: 1; }

/* ---------- Schirm: Frage oben, Fuß unten ---------- */
.onboarding-schirm {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: ob-herein 160ms ease-out;
}
@keyframes ob-herein {
  from { opacity: 0; transform: translateY(6px); }
}

.onboarding-frage { max-width: 24ch; }
.onboarding-frage + .hinweis { margin-top: 10px; max-width: 44ch; }

/* Fuß: „Weiter“ rutscht ans Blattende, in Daumennähe */
.onboarding-fuss {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  gap: 12px;
}

/* ---------- Antworten ---------- */
.ob-antworten {
  margin-top: 32px;
  display: grid;
  gap: 8px;
  align-content: start;
}

/* Antwortkarte: Titel + eine Zeile Erklärung, linksbündig */
.ob-antwort {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 14px 18px;
  text-align: left;
}
.ob-antwort-titel { font-size: 17px; font-weight: 600; }
.ob-antwort-erklaerung {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--tinte-gedimmt);
}
/* Auf der Glut-Fläche wird der Zweittext aus der Akzent-Tinte getönt, nie grau */
.segment[aria-pressed="true"] .ob-antwort-erklaerung { color: rgba(20, 16, 11, 0.72); }

/* Trainingstage: fünf große Stufen 2–6 */
.ob-tage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ob-tag {
  min-height: 64px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Wochentage: Mo–So in einer Reihe */
.ob-wochen {
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.ob-wochen .segment {
  min-height: 56px;
  padding: 8px 0;
  font-weight: 600;
}
.ob-wochen-zeile { margin-top: 14px; min-height: 1.4em; }

/* Dreier-Reihe (Schrittziel, Schlafbedarf): Wert groß, Einheit klein darunter */
.ob-reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ob-reihe .segment {
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ob-einheit {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tinte-gedimmt);
}
.segment[aria-pressed="true"] .ob-einheit { color: rgba(20, 16, 11, 0.72); }

/* ---------- Zusammenfassung ---------- */
.ob-block { margin-top: 32px; }

/* Sollwert-Zeile: Wort klein, Wert groß, Stift rechts */
.ob-soll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
}
.ob-soll + .ob-soll { border-top: 1px solid var(--linie); padding-top: 16px; }
.ob-soll-wort { font-size: 15px; color: var(--tinte-gedimmt); }
.ob-soll-wert {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.ob-soll-einheit {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tinte-gedimmt);
}
.ob-stift {
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--tinte-gedimmt);
  transition: border-color var(--wechsel), color var(--wechsel), transform 80ms ease-out;
}
.ob-stift:active { transform: scale(0.95); }
@media (hover: hover) { .ob-stift:hover { border-color: var(--tinte-leise); color: var(--tinte); } }

/* Nach dem Stift: dieselbe Zeile, jetzt mit Stepper */
.ob-soll--stepper {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

/* Ruhiger Abriss der übrigen Angaben */
.ob-recap {
  margin-top: 24px;
  padding: 0 6px;
  display: grid;
  gap: 6px;
  font-size: 15px;
  color: var(--tinte-gedimmt);
}