/* Phase E, Paket C: Aufsatz-Training (5 Schritte) und Probeklausur mit Uhr. Nur Farben aus basis.css (hell, dunkel). */

/* ---- Schritt-Leiste: fünf gleich breite Knöpfe, nie seitliches Wischen */
.schritt-leiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.schritt-knopf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px;
  border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); color: var(--text2); font: inherit; min-width: 0;
}
.schritt-knopf .schritt-nr { font-weight: 900; font-size: 1.05rem; line-height: 1.1; }
.schritt-knopf .schritt-name { font-size: 0.64rem; line-height: 1.15; overflow-wrap: anywhere; text-align: center; max-width: 100%; }
.schritt-knopf.an { background: var(--knopf); border-color: var(--knopf); color: #fff; }
@media (min-width: 420px) { .schritt-knopf .schritt-name { font-size: 0.72rem; } }
@media (min-width: 600px) { .schritt-knopf .schritt-name { font-size: 0.82rem; } }

.schritt-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.schritt-titel { font-size: 1.15rem; font-weight: 900; margin: 4px 0 0; }
.schritt-titel:focus { outline: none; }
.schritt-weiter .knopf { flex: 1 1 9rem; }

/* ---- Stichpunkte */
.stichpunkt { display: flex; flex-direction: column; gap: 4px; }
.stichpunkt-label { font-weight: 700; overflow-wrap: anywhere; }
.stichpunkt-feld { min-height: 7rem; line-height: 1.4; }
.speicher-status { margin: 0; }

/* ---- Uhr */
.uhr-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 14px; }
.uhr-zeit { font-size: 1.8rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.uhr-zeit.ueber { color: var(--nochmal-text); }
.uhr-seite { display: flex; flex-direction: column; gap: 6px; flex: 1 1 10rem; min-width: 0; }
.uhr-knopf { align-self: flex-start; }

/* ---- Verlaufsplan-Raster: eine Karte je Phase */
.plan-raster { display: flex; flex-direction: column; gap: 10px; }
.plan-zeile { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); padding: 8px 12px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-legende { font-weight: 900; padding: 0 6px; }
.plan-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
.plan-felder .plan-ziel, .plan-felder .plan-inhalt, .plan-felder .plan-methode, .plan-felder .plan-medien { grid-column: 1 / -1; }
.plan-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.plan-label { font-size: 0.8rem; font-weight: 700; color: var(--text2); }
.plan-weg { align-self: flex-end; }
@media (min-width: 700px) {
  .plan-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr); }
  .plan-felder .plan-ziel { grid-column: auto; }
  .plan-felder .plan-inhalt, .plan-felder .plan-methode, .plan-felder .plan-medien { grid-column: 1 / -1; }
}

/* ---- Musterlösung mit eigenen Stichpunkten */
.muster-abschnitt { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--rand-fein); min-width: 0; }
.muster-titel { font-size: 1.05rem; font-weight: 900; overflow-wrap: anywhere; }
.eigen-box { background: var(--box); border: 1px dashed var(--rand); border-radius: 12px; padding: 8px 12px; }
.eigen-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.muster-inhalt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ---- Bewertungsbogen */
.bewertung { display: flex; flex-direction: column; gap: 10px; }
.bewertung-kriterium { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); padding: 8px 12px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bewertung-legende { font-weight: 700; padding: 0 6px; overflow-wrap: anywhere; max-width: 100%; }
.bewertung-legende .marke { margin-left: 8px; white-space: nowrap; }
.stufen-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stufe-knopf { min-height: 48px; padding: 4px 6px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); color: var(--text); font: inherit; font-weight: 700; font-size: 0.9rem; overflow-wrap: anywhere; }
.stufe-knopf.an { color: #fff; border-color: transparent; }
.stufe-knopf.stufe-erfuellt.an { background: var(--gut); }
.stufe-knopf.stufe-teilweise.an { background: var(--unsicher); }
.stufe-knopf.stufe-nicht.an { background: var(--nochmal); }
.bewertung-summe { display: flex; align-items: center; gap: 14px; background: var(--hervor); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; }
.bewertung-zahl { font-size: 1.9rem; font-weight: 900; font-variant-numeric: tabular-nums; flex: none; }
.bewertung-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bewertung-note { font-weight: 900; font-size: 1.05rem; }

/* ---- Frühere Versuche */
.versuche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.versuch { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 12px; }
.versuch-text { min-width: 0; overflow-wrap: anywhere; }

/* ---- Probeklausur */
.klausur-leiste {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--schatten);
}
.klausur-leiste.ueber { border-color: var(--nochmal); background: var(--warn-bg); }
.klausur-uhr { display: flex; flex-direction: column; min-width: 0; }
.klausur-uhr .uhr-zeit { font-size: 1.6rem; }
.klausur-reiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.klausur-reiter .stufe-knopf.an { background: var(--knopf); }
/* BE: fünf Aufgaben – Reiter nur mit Nummer, alle in einer Reihe */
.klausur-reiter.viele { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.klausur-reiter.viele .stufe-knopf { min-width: 0; padding-left: 4px; padding-right: 4px; }
.klausur-aufgabe-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.klausur-stichpunkte .stichpunkt-feld { min-height: 16rem; line-height: 1.45; }
.gesamt-box { background: var(--hervor); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.gesamt-noten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 8px; }
.gesamt-note { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 12px; }
.gesamt-note b { font-size: 1.3rem; display: block; }
.klausur-hinweis { margin: 0; }