diff --git a/workspace/assets/css/bereich.css b/workspace/assets/css/bereich.css
index e1ca6f61..8678f60c 100644
--- a/workspace/assets/css/bereich.css
+++ b/workspace/assets/css/bereich.css
@@ -132,16 +132,75 @@
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
margin-bottom: 12px;
}
+/* =====================================================================
+ SIE SIND UNTERSCHRIFTEN -- ALSO SEHEN SIE JETZT AUCH SO AUS
+ (screen6, 09.09.2026)
+
+ Filipe, mit Bildschirmfoto der beiden Felder: "die sollen geiler
+ sein."
+
+ WAS SIE WIRKLICH SIND, stand nur im Klassennamen: Auf einer
+ Unterweisung bestaetigen ZWEI Personen, dass sie sie gelesen haben
+ -- der Creator und seine Betreuung. Das ist kein Statusfeld, das ist
+ eine Gegenzeichnung. Gezeichnet waren sie aber als zwei graue
+ Kaesten mit abgerundeten Ecken, die man auf dem dunklen Grund kaum
+ sah. Zwei Rechtecke sagen "hier steht etwas". Eine Unterschriftszeile
+ sagt "hier fehlt jemand".
+
+ ZWEI ZUSTAENDE, ZWEI BILDER -- und beide gab es im Code schon als
+ `data-da="ja"/"nein"`, nur unterschieden sie sich um einen Hauch
+ Gruen:
+
+ OFFEN eine gestrichelte Linie mit einem leeren Platz darauf.
+ Sie WARTET sichtbar. Der Federstrich links davor deutet
+ an, wo man ansetzt.
+ DA eine durchgezogene gruene Linie, der Name darueber, und
+ rechts oben ein gepraegtes Siegel mit Haken -- wie ein
+ abgestempeltes Formular.
+
+ GLEICHE HOEHE IN BEIDEN ZUSTAENDEN, und das ist keine Kosmetik: Die
+ beiden Felder stehen nebeneinander in einem Raster. Waere das
+ unterschriebene hoeher, spraenge die Karte in dem Moment, in dem
+ jemand unterschreibt -- und zwar unter dem Finger dessen, der gerade
+ auf den Knopf gedrueckt hat.
+
+ KEINE ZWEITE FASE. Die Karte drumherum (`.unterweisung`) hat schon
+ eine aus der Modulliste. Eine abgeschraegte Ecke IN einer
+ abgeschraegten Ecke liest sich als Fehler, nicht als Absicht. Das
+ Feld traegt deshalb die andere Formensprache des Hauses: die Linie.
+ ================================================================== */
.unterschrift {
- display: grid; gap: 2px;
- padding: 9px 12px;
- border: 1px solid var(--rand); border-radius: 8px;
- background: rgba(0, 0, 0, .18);
+ position: relative;
+ display: grid; gap: 3px;
+ padding: 9px 12px 11px 15px;
+ border: 0;
+ border-radius: 0;
+ background: linear-gradient(100deg, rgba(255, 255, 255, .035), transparent 60%);
}
+/* Der Federstrich links: ein kurzer senkrechter Anstrich, der zeigt,
+ wo eine Unterschrift beginnt. Offen ist er blass, gesetzt traegt er
+ das Gruen der Bestaetigung. */
+.unterschrift::before {
+ content: "";
+ position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
+ background: rgba(150, 186, 220, .22);
+ transition: background .18s ease;
+}
+/* Die Zeile selbst -- unter der Angabe, nicht um sie herum. */
+.unterschrift::after {
+ content: "";
+ position: absolute; left: 15px; right: 12px; bottom: 6px; height: 0;
+ border-bottom: 1px dashed rgba(150, 186, 220, .30);
+}
+
.unterschrift[data-da="ja"] {
- border-color: rgba(80, 167, 130, .32);
- background: rgba(80, 167, 130, .07);
+ background: linear-gradient(100deg, rgba(95, 201, 154, .11), transparent 62%);
}
+.unterschrift[data-da="ja"]::before { background: rgba(95, 201, 154, .8); }
+.unterschrift[data-da="ja"]::after {
+ border-bottom: 1px solid rgba(95, 201, 154, .55);
+}
+
.unterschrift__wer {
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-still);
@@ -149,6 +208,59 @@
.unterschrift__wann { font-size: .84rem; color: var(--text); }
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }
+/* DAS SIEGEL. Es sitzt in der oberen rechten Ecke des Feldes und ist
+ nur da, wenn wirklich unterschrieben wurde.
+
+ Gebaut aus zwei Radialverlaeufen und einem Haken als Maske -- kein
+ Element, kein Bild, kein Zeichensatz. Ein Zeichensatz-Haken (✓) sieht
+ in jeder Schrift anders aus und faellt weg, wenn eine fehlt; ein
+ `mask-image` mit einem SVG-Pfad sieht ueberall gleich aus.
+
+ `content: ""` auf einem dritten Pseudoelement geht nicht -- es gibt
+ nur zwei. Deshalb haengt es am Wer-Text, der ohnehin oben steht. */
+.unterschrift[data-da="ja"] .unterschrift__wer { position: relative; }
+.unterschrift[data-da="ja"] .unterschrift__wer::after {
+ content: "";
+ /* INNERHALB des Feldes, nicht daneben. Der erste Anlauf schob es mit
+ `translate(100%)` ueber die rechte Kante hinaus -- bei der breiten
+ Ansicht sah das gut aus, auf einem schmalen Feld waere es aus der
+ Karte gelaufen. Ein Siegel gehoert auf das Blatt, nicht daneben. */
+ position: absolute; right: 0; top: 50%;
+ transform: translateY(-50%);
+ width: 15px; height: 15px; border-radius: 50%;
+ background:
+ radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .2), transparent 60%),
+ radial-gradient(circle at 50% 50%, rgba(95, 201, 154, .3) 55%, rgba(10, 24, 19, .95) 100%);
+ box-shadow:
+ inset 0 0 0 1px rgba(95, 201, 154, .6),
+ inset 0 1px 2px -1px rgba(255, 255, 255, .25);
+}
+/* DER HAKEN IM SIEGEL. Als Maske ueber einer hellgruenen Flaeche --
+ kein Zeichensatz-Haken (der sieht in jeder Schrift anders aus und
+ faellt weg, wenn eine fehlt) und kein Bild (eine Datei mehr fuer
+ fuenfzehn Pixel).
+
+ Er liegt auf `::before` desselben Elements, weil es nur zwei
+ Pseudoelemente je Element gibt und `::after` schon die Muenze
+ traegt. Beide sind absolut gesetzt und liegen deshalb genau
+ uebereinander. */
+.unterschrift[data-da="ja"] .unterschrift__wer::before {
+ content: "";
+ position: absolute; right: 0; top: 50%;
+ transform: translateY(-50%);
+ width: 15px; height: 15px;
+ z-index: 1;
+ background: #a8ecc8;
+ -webkit-mask: center / 9px 9px no-repeat
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ mask: center / 9px 9px no-repeat
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .unterschrift::before { transition: none; }
+}
+
.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 8828f905..18d8b482 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+