Baustein 5: Praxisaufgaben mit Anhaengen und Abnahme

- Status offen / in Arbeit / zur Abnahme / abgenommen, mit Zeitstempeln
- Notizfeld fuer den Azubi, Dateianhaenge bis 25 MB
- Speicherpfad nur aus selbst erzeugter UUID, nie aus dem Dateinamen
- Auslieferung ueber /anhaenge/<kennung> mit Rechtepruefung bei jedem Abruf,
  CSP sandbox und nosniff; SVG ausdruecklich nicht erlaubt
- Anhaenge haengen an Aufgabe UND Azubi
- Ausbilder hakt Kriterien einzeln ab, Note und Rueckmeldung, Abnahme sperrt
- Zurueckgeben zur Nacharbeit
- "Was auf dich wartet" zeigt offene Abnahmen
- Abgenommene Aufgaben zaehlen im Wochenfortschritt mit

Behoben: Next.js deckelt Serveraktionen ab Werk bei 1 MB - damit waere kein
Handyfoto durchgekommen. bodySizeLimit jetzt 30 MB, Vorabpruefung im Browser,
client_max_body_size im Proxy-Beispiel auf 30m.

Geaendert: Seiten verweigern fremde Daten mit 404 statt mit einem Fehler.
Eigene Seiten fuer "Nicht gefunden" und Stoerfaelle.

24 neue Tests, insgesamt 157.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app/globals.css

@@ -1100,3 +1100,127 @@ a.glossarbegriff:hover {
   .bewerten { gap: 0.4rem; }
   .bewerten-knopf { min-height: 84px; }
 }
+
+/* --- Praxisaufgaben --- */
+
+.aufgaben-nummer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.8rem;
+  padding: 0.15rem 0.55rem;
+  border-radius: var(--radius-klein);
+  background: var(--bernstein);
+  color: #26170a;
+  font-weight: 700;
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+.aufgaben-nummer-gross { font-size: 1rem; padding: 0.25rem 0.75rem; }
+
+.aufgabenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
+
+.aufgabenzeile {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: var(--flaeche);
+  border: 1px solid var(--rand-zart);
+  border-radius: var(--radius);
+  padding: 0.75rem 0.9rem;
+  text-decoration: none;
+  color: var(--text);
+}
+.aufgabenzeile:hover { background: var(--flaeche-kraeftig); color: var(--text); }
+.aufgaben-titel { flex: 1; font-weight: 650; }
+
+.statuswahl { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+
+.kriterienliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
+.kriterienliste li {
+  display: grid;
+  grid-template-columns: 1.2rem 1fr;
+  gap: 0.5rem;
+  align-items: start;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--rand-zart);
+}
+.kriterienliste li[data-erfuellt="ja"] { color: var(--gut); }
+.kriterienliste li[data-erfuellt="ja"] > span:first-child { font-weight: 700; }
+
+.kriterien {
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+  padding: 0.75rem 0.9rem;
+  margin: 0;
+}
+.kriterien legend { font-weight: 650; padding: 0 0.35rem; font-size: 0.95rem; }
+.kriterium { padding: 0.3rem 0; }
+.kriterium + .kriterium { border-top: 1px solid var(--rand-zart); }
+
+.notiz-anzeige {
+  white-space: pre-wrap;
+  background: var(--grund);
+  border: 1px solid var(--rand-zart);
+  border-radius: var(--radius-klein);
+  padding: 0.6rem 0.8rem;
+  margin: 0;
+  line-height: 1.55;
+}
+
+/* --- Anhänge --- */
+
+.anhangliste {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 0.75rem;
+}
+.anhangliste li { display: grid; gap: 0.3rem; }
+
+.anhang-kachel {
+  display: grid;
+  gap: 0.3rem;
+  text-decoration: none;
+  color: var(--text);
+  background: var(--grund);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+}
+.anhang-kachel:hover { border-color: var(--petrol); color: var(--text); }
+.anhang-kachel img {
+  width: 100%;
+  height: 110px;
+  object-fit: cover;
+  border-radius: var(--radius-klein);
+  background: var(--flaeche);
+}
+.anhang-symbol {
+  display: grid;
+  place-items: center;
+  height: 110px;
+  border-radius: var(--radius-klein);
+  background: var(--flaeche-kraeftig);
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: var(--text-leise);
+}
+.anhang-name {
+  font-size: 0.88rem;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+input[type="file"] {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px dashed var(--rand);
+  border-radius: var(--radius-klein);
+  background: var(--grund);
+  color: var(--text);
+  font: inherit;
+  min-height: 44px;
+}