/*
 * Gefuehrter Unterrichtstag und Unterrichtsmodus (unterricht.js).
 *
 * Farben aus stil.css und mit derselben Bedeutung wie dort: Petrol = hier wird
 * gehandelt, Mint = gehalten und archiviert, Sonne = Hausaufgabe, Himmel =
 * Ueben und Rueckfragen, Koralle = braucht Aufmerksamkeit. Jeder Zustand steht
 * zusaetzlich als Text daneben - Farbe allein sagt nie etwas.
 *
 * Laedt nach stil.css und ueberschreibt dort bewusst nur das Raster der
 * Heute-Seite. Alles andere sind eigene Klassen mit dem Vorsatz `u-`, `tz-`
 * oder `tn-`, damit nichts mit bestehenden Regeln zusammenstoesst.
 */

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Heute: der Unterrichtstag bekommt die grosse Spalte ------------------- */

.heute-raster {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  /* Erste Zeile so hoch wie die Hausaufgaben, der Rest fuer "Die naechsten
     Tage" - sonst teilen sich beide die Hoehe des Unterrichtstags, und rechts
     klafft eine Luecke. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "tag aufgaben"
    "tag woche";
  align-items: start;
}
.heute-termine { grid-area: tag; }
.heute-aufgaben { grid-area: aufgaben; }
.heute-woche { grid-area: woche; }
@media (max-width: 75rem) {
  .heute-raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "aufgaben" "woche";
  }
}

.heute-karte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-4);
  margin-bottom: 0.8rem;
}
.heute-karte-kopf h3 { margin: 0; }
.heute-karte-kopf .hinweis { margin: 0; font-size: var(--text-s); }

/* Der naechste Termin, gross. */
.tag-naechster {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border: 1px solid #bfe3e6;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--petrol-hell), #f4fbfb 60%, var(--sonne-hell));
}
.tag-naechster.laeuft {
  border-color: #f0d49a;
  background: linear-gradient(135deg, var(--sonne-hell), #fffaf0 60%, var(--koralle-hell));
}
.tag-naechster.geschafft {
  border-color: #c5e5d2;
  background: linear-gradient(135deg, var(--mint-hell), #f7fcf9);
}
.tag-naechster.leer { border-color: var(--rand); background: var(--flaeche-leise); }
.tag-naechster:empty { display: none; }

.tn-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
.tn-zeit {
  font-family: var(--schrift-mono);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--petrol-dunkel);
}
.tn-wer { display: flex; flex: 1 1 12rem; flex-direction: column; min-width: 0; }
.tn-wer .augenbraue { margin: 0 0 0.15rem; color: var(--petrol-dunkel); }
.tag-naechster.laeuft .tn-wer .augenbraue { color: var(--koralle-dunkel); }
.tag-naechster.geschafft .tn-wer .augenbraue { color: var(--mint-dunkel); }
.tn-name {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.tn-wann { color: var(--schrift-leise); font-size: var(--text-m); }
.tn-kontext { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-m); }
.tn-kontext li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; min-width: 0; }
.tn-was {
  flex: none;
  min-width: 8.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}
.tn-wert { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.tn-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }

button.u-gross {
  min-height: 3.25rem;
  padding: 0.7rem 1.4rem;
  border-radius: 12px;
  font-size: var(--text-l);
}

/* Zeitleiste des Tages. */
.tageszeitleiste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tz-eintrag {
  display: grid;
  grid-template-columns: 3.6rem 1.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 0.6rem;
  padding: 0.55rem var(--abstand-1);
  border-radius: 10px;
}
.tz-eintrag + .tz-eintrag { border-top: 1px dashed var(--rand); }
.tz-eintrag.naechster { background: var(--petrol-hell); border-top-color: transparent; }
.tz-zeit { font-family: var(--schrift-mono); font-weight: 700; color: var(--petrol-dunkel); }
.tz-punkt {
  justify-self: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 3px solid var(--rand-stark);
  border-radius: 50%;
  background: var(--flaeche);
}
.tz-text { display: flex; flex-direction: column; min-width: 0; }
.tz-text strong,
.tz-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-text span { font-size: var(--text-s); color: var(--schrift-leise); }
.tz-rechts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.tz-eintrag.archiviert .tz-punkt { border-color: var(--mint); background: var(--mint); }
.tz-eintrag.naechster .tz-punkt { border-color: var(--petrol); background: var(--sonne); box-shadow: 0 0 0 4px #fff; }
.tz-eintrag.verpasst .tz-punkt { border-color: var(--koralle); }
.tz-eintrag.abgesagt .tz-punkt { border-style: dashed; }
.tz-eintrag.abgesagt .tz-text strong { color: var(--schrift-leise); text-decoration: line-through; }
@media (max-width: 40rem) {
  .tz-eintrag { grid-template-columns: 3.1rem 1rem minmax(0, 1fr); }
  .tz-rechts { grid-column: 3; justify-content: flex-start; }
}

.chip.archiviert { background: var(--mint-hell); color: var(--mint-dunkel); }
.chip.abgesagt { background: var(--flaeche-leise); color: var(--schrift-leise); box-shadow: inset 0 0 0 1px var(--rand-stark); }
.chip.jetzt { background: var(--petrol); color: #fff; }
.chip.privat { background: var(--beere-hell); color: var(--beere-dunkel); }

/* --- Unterrichtsansicht ----------------------------------------------------- */

.tafel.unterrichtsansicht {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.u-kopf {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-bottom: 1rem;
  padding: 0.7rem var(--abstand-4);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.u-zurueck { padding-inline: 0.8rem; }
.u-wer { flex: 1 1 16rem; min-width: 0; }
.u-wer .augenbraue { margin: 0 0 0.1rem; color: var(--petrol-dunkel); }
.u-wer h2 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; overflow-wrap: anywhere; }
.u-wer h2:focus { outline: none; }
.u-termin { margin: 0.15rem 0 0; font-size: var(--text-m); color: var(--schrift-leise); }

.u-uhr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--abstand-1) 0.9rem var(--abstand-1) 0.3rem;
  border-radius: 999px;
  background: var(--petrol-hell);
}
.u-uhr-ring { flex: none; transform: rotate(-90deg); }
.u-uhr-grund { fill: none; stroke: #fff; stroke-width: 5; }
.u-uhr-fortschritt {
  fill: none;
  stroke: var(--petrol);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.6s ease;
}
.u-uhr-text { display: flex; flex-direction: column; line-height: 1.15; }
.u-uhr-zeit {
  font-family: var(--schrift-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--petrol-dunkel);
}
.u-uhr-plan { font-size: var(--text-s); color: var(--schrift-leise); }
.u-uhr.ueberzogen { background: var(--koralle-hell); }
.u-uhr.ueberzogen .u-uhr-fortschritt { stroke: var(--koralle); }
.u-uhr.ueberzogen .u-uhr-zeit { color: var(--koralle-dunkel); }

/* Speicherstand: lokal / beim Server / Konflikt / Fehler - sichtbar getrennt. */
.u-speicherstand { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: var(--text-s); color: var(--schrift-leise); }
.u-speicherstand:empty { display: none; }
.u-speicherstand::before {
  content: "";
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--rand-stark);
}
.u-speicherstand.lokal::before { background: var(--sonne); }
.u-speicherstand.server::before { background: var(--mint); }
.u-speicherstand.laeuft::before { background: var(--himmel); animation: u-puls 1s ease-in-out infinite; }
.u-speicherstand.konflikt,
.u-speicherstand.misslungen { color: var(--fehler); font-weight: 700; }
.u-speicherstand.konflikt::before,
.u-speicherstand.misslungen::before { background: var(--fehler); }
@keyframes u-puls { 50% { opacity: 0.3; } }

.u-kopfaktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }

/* Drei Spalten: Akte | Jetzt | Hausaufgabe. */
.u-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "akte jetzt ha";
  align-items: start;
  gap: var(--abstand-4);
}
.u-akte { grid-area: akte; }
.u-jetzt { grid-area: jetzt; }
.u-ha { grid-area: ha; }
@media (max-width: 80rem) {
  .u-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas:
      "akte jetzt"
      "akte ha";
  }
}
@media (max-width: 52rem) {
  .u-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "jetzt" "ha" "akte"; }
  .u-kopf { position: static; }
}

.u-spalte {
  --farbe: var(--petrol);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
  min-width: 0;
  padding: var(--abstand-4) 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-top: 6px solid var(--farbe);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.u-akte { --farbe: var(--himmel); }
.u-ha { --farbe: var(--sonne); }
.u-spalte > h3 { margin: 0; color: var(--schrift); }
.u-block { display: flex; flex-direction: column; gap: var(--abstand-2); min-width: 0; }
.u-block h4 { margin: 0; font-family: var(--schrift-anzeige); font-size: var(--text-m); font-weight: 700; }
.u-form { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.u-spalte textarea,
.u-spalte select,
.u-spalte input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.u-spalte textarea { min-height: 4.5rem; line-height: 1.45; resize: vertical; }
.u-spalte label > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-2); }
.u-klein { margin: -0.45rem 0 0; font-size: var(--text-s); }
.u-leer { margin: 0; font-style: italic; color: var(--schrift-leise); }
.u-zeit-uebernehmen { align-self: flex-start; margin-top: -0.4rem; }

/* Status als grosse Schnellwahl. */
/* Ein Haekchen bleibt klein neben seinem Text - die allgemeine Handy-Regel
   in stil.css (`label, input, select { width: 100% }`) zoege es sonst breit. */
.u-spalte input[type="checkbox"] { flex: none; width: auto; }
/* Vier Knoepfe: nebeneinander, wenn Platz ist, sonst ruhig 2 x 2 statt 3 + 1. */
.u-statuswahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
@media (max-width: 110rem) { .u-statuswahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.u-statuswahl button {
  justify-content: center;
  min-height: 3rem;
  border: 2px solid var(--rand);
  border-radius: 12px;
  background: var(--flaeche-leise);
  text-align: center;
}
.u-statuswahl button[aria-checked="true"] { border-color: var(--petrol-dunkel); background: var(--petrol); color: #fff; }
.u-statuswahl button.nicht-erteilt[aria-checked="true"] {
  border-color: var(--koralle);
  background: var(--koralle-hell);
  color: var(--koralle-dunkel);
}

/* "Heute zuerst pruefen" und Bewertungskarten. */
.u-pruefen {
  padding: 0.8rem 0.9rem;
  border: 1px solid #f1dca6;
  border-radius: 12px;
  background: var(--sonne-hell);
}
.u-pruefen-liste { display: flex; flex-direction: column; gap: 0.55rem; }
.u-pruef-karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
}
.u-auftrag { font-weight: 700; overflow-wrap: anywhere; }
.u-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: var(--text-s); color: var(--schrift-leise); }
.u-frage {
  margin: 0;
  padding: var(--abstand-2) 0.7rem;
  border-left: 4px solid var(--himmel);
  border-radius: 8px;
  background: var(--himmel-hell);
  color: var(--himmel-dunkel);
  font-size: var(--text-m);
  overflow-wrap: anywhere;
}
.u-frage strong { color: var(--himmel-dunkel); }
.u-sterne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
.u-sterne button {
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 3.2rem;
  padding: var(--abstand-1) 0.15rem;
  border-radius: 10px;
  background: var(--flaeche-leise);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
.u-stufe-zahl { font-family: var(--schrift-mono); font-size: var(--text-l); font-weight: 800; }
.u-sterne button[aria-checked="true"] { border-color: var(--petrol-dunkel); background: var(--petrol); color: #fff; }
.u-sterne button.stufe-5[aria-checked="true"] { border-color: var(--sonne-dunkel); background: var(--sonne); color: var(--tinte); }
.u-bewertung-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem 0.6rem; }
.u-bewertung-zeile label { flex: 1 1 11rem; }
.u-bewertungsstand { font-size: var(--text-s); color: var(--schrift-leise); }
.u-bewertungsstand.offen { color: var(--sonne-dunkel); font-weight: 700; }
.u-bewertungsstand.gespeichert { color: var(--mint-dunkel); font-weight: 700; }
.u-bewertungsstand.misslungen { color: var(--fehler); font-weight: 700; }

/* Ueben: Zahlen, Tagesbalken, Tempoverlauf. */
.u-ueben-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-2); }
.u-zahl { padding: var(--abstand-2) 0.7rem; border-radius: 10px; background: var(--himmel-hell); }
.u-zahl strong {
  display: block;
  font-family: var(--schrift-mono);
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--himmel-dunkel);
}
.u-zahl span { font-size: var(--text-s); color: var(--schrift-leise); }
.u-balken { display: block; width: 100%; height: 3rem; margin-top: 0.3rem; }
.u-balken .leer { fill: var(--rand); }
.u-balken .geuebt { fill: var(--himmel); }
.u-balken-achse { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--schrift-leise); }
.u-tempo { display: grid; gap: 0.35rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.u-tempo li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem auto;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--text-s);
}
.u-tempo .u-uebung { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-tempo svg { width: 5.5rem; height: 1.6rem; overflow: visible; }
.u-tempo polyline {
  fill: none;
  stroke: var(--himmel-dunkel);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.u-tempo circle { fill: var(--koralle); }
.u-bpm { font-family: var(--schrift-mono); font-size: var(--text-s); white-space: nowrap; }

/* Verlauf der Stunden. */
.u-verlauf { display: flex; flex-direction: column; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.u-stunde {
  padding: 0.55rem 0.7rem 0.6rem 0.9rem;
  border-left: 4px solid var(--mint);
  border-radius: 10px;
  background: var(--flaeche-leise);
}
.u-stunde.nicht-erteilt { border-left-color: var(--rand-stark); }
.u-stunde.aktuell { box-shadow: inset 0 0 0 2px var(--petrol); }
.u-stunde-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem var(--abstand-2); }
.u-stunde-datum { font-weight: 700; }
.u-stunde-inhalt {
  display: -webkit-box;
  margin: 0.3rem 0 0;
  overflow: hidden;
  font-size: var(--text-m);
  white-space: pre-line;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.u-stunde.offen .u-stunde-inhalt { display: block; -webkit-line-clamp: unset; }
.u-stunde-zusatz { margin: var(--abstand-1) 0 0; font-size: var(--text-s); color: var(--schrift-leise); overflow-wrap: anywhere; }
.u-privat { color: var(--beere-dunkel); }
.u-stunde-knoepfe { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }

.u-liste { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.u-liste > li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: var(--flaeche-leise);
  font-size: var(--text-s);
  overflow-wrap: anywhere;
}

/* Notensuche. */
.u-treffer { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.u-treffer:empty { display: none; }
.u-werk-kopf {
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  border-color: var(--rand);
  background: var(--flaeche-leise);
  font-weight: 600;
  text-align: left;
}
.u-werk-kopf .neben { font-size: var(--text-s); font-weight: 500; color: var(--schrift-leise); }
.u-fassungen {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.3rem 0 0 0.6rem;
  padding: 0 0 0 0.6rem;
  border-left: 2px solid var(--petrol-hell);
  list-style: none;
}
.u-fassung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem var(--abstand-2); padding: 0.35rem 0; }
.u-fassung + .u-fassung { border-top: 1px dashed var(--rand); }
.u-fassung-text { display: flex; flex: 1 1 10rem; flex-direction: column; min-width: 0; font-size: var(--text-s); }
.u-fassung-text .neben { font-size: var(--text-s); color: var(--schrift-leise); }
.u-fassung.nicht-lieferbar .u-fassung-text { color: var(--schrift-leise); }
.u-fassung-knoepfe { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.u-abzeichen-zeile { display: inline-flex; flex-wrap: wrap; gap: var(--abstand-1); }
.u-abzeichen {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--beere-hell);
  color: var(--beere-dunkel);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

/* Hausaufgabe: verknuepfte Noten und Vorschlag. */
.u-ha-noten {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem var(--abstand-3);
  border: 1px dashed var(--sonne-dunkel);
  border-radius: 10px;
  background: var(--sonne-hell);
}
.u-ha-noten > strong {
  font-size: var(--text-s);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sonne-dunkel);
}
.u-notenwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.u-notenname { flex: 1 1 10rem; font-weight: 700; overflow-wrap: anywhere; }
button.u-vorschlag {
  justify-content: flex-start;
  border: 1px dashed var(--sonne-dunkel);
  background: var(--sonne-hell);
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
button.u-vorschlag:hover { background: #ffe9b3; }

/* Lesemodus (Archiv). */
.u-lesen { display: flex; flex-direction: column; gap: 0.7rem; }
.u-lesen dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem var(--abstand-4); margin: 0; }
.u-lesen dt { font-size: var(--text-s); font-weight: 700; color: var(--schrift-leise); }
.u-lesen dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .u-lesen dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .u-lesen dd { margin-bottom: 0.45rem; }
}

/* Abschlussleiste, klebt unten. */
.u-abschluss {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-top: 1rem;
  padding: 0.7rem var(--abstand-4);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 -6px 24px rgb(43 39 36 / 10%);
}
.u-abschluss .fehler { margin: 0 0 0.6rem; }
.u-abschluss-knoepfe { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--abstand-2) var(--abstand-4); }
.u-abschluss-hinweis { margin: 0 auto 0 0; font-size: var(--text-s); }
.u-taste { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.6rem; font-size: var(--text-xs); }
.u-taste kbd { border-color: rgb(255 255 255 / 55%); background: rgb(255 255 255 / 18%); color: #fff; }
button[aria-busy="true"] { cursor: progress; opacity: 0.85; }
@media (max-width: 40rem) {
  .u-taste,
  .u-abschluss-hinweis { display: none; }
  .u-abschluss-knoepfe button { flex: 1 1 auto; justify-content: center; }
}

/* Zusammenfassung nach dem Abschluss. */
.u-fertig {
  margin-bottom: 1rem;
  padding: 1.4rem var(--abstand-5);
  border: 1px solid #c5e5d2;
  border-radius: var(--rundung);
  background: linear-gradient(135deg, var(--mint-hell), #fff 55%, var(--sonne-hell));
  box-shadow: var(--schatten);
  animation: u-auftauchen 0.35s ease-out;
}
.u-fertig .augenbraue { margin: 0 0 0.2rem; color: var(--mint-dunkel); }
.u-fertig h3 {
  margin: 0 0 0.6rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--schrift);
}
.u-fertig h3:focus { outline: none; }
.u-fertig-liste { display: grid; gap: 0.3rem; margin: 0 0 var(--abstand-4); padding-left: 1.2rem; overflow-wrap: anywhere; }
.u-fertig-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
@keyframes u-auftauchen { from { opacity: 0; transform: translateY(8px); } }

/* Akte eines Schuelers: die Akte nimmt die ganze Breite. */
.unterrichtsansicht.ansicht-akte .u-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "akte"; }
.unterrichtsansicht.ansicht-akte .u-akte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: start;
  gap: var(--abstand-4) var(--abstand-5);
}
.unterrichtsansicht.ansicht-akte .u-akte > h3 { grid-column: 1 / -1; }

/* Kurze Rueckmeldung unten in der Mitte. */
.rueckmeldung {
  position: fixed;
  left: 50%;
  bottom: 6rem;
  z-index: 50;
  max-width: min(34rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.rueckmeldung-text {
  display: block;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: var(--tinte);
  color: #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
  font-weight: 600;
  animation: u-auftauchen 0.25s ease-out;
}
.rueckmeldung-text.art-gut { background: var(--mint-dunkel); }
.rueckmeldung-text.art-fehler { background: var(--fehler); }

/* Eingeklappte Seitenleiste auf schmalen Bildschirmen: nur der Umschalter. */
@media (max-width: 64rem) {
  .leiste-umschalten { width: auto; }
  .arbeitsflaeche.leiste-zu nav.seitenleiste { flex-basis: auto; padding: 0.35rem; }
  .arbeitsflaeche.leiste-zu .leiste-text { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .u-speicherstand.laeuft::before,
  .u-fertig,
  .rueckmeldung-text { animation: none; }
  .u-uhr-fortschritt { transition: none; }
}