diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css
index 7695af5b..61c0d0d3 100644
--- a/workspace/assets/css/gate.css
+++ b/workspace/assets/css/gate.css
@@ -297,24 +297,133 @@ body.gate {
color: var(--text-still);
}
-.rollen { margin-bottom: 22px; }
+/* =====================================================================
+ DIE FUENF ROLLEN IN EINER KACHEL (screen20, 08.09.2026)
+
+ Filipe: "ich will dass die rollen auch alle in einer grossen kacheln
+ sind, die soll richtig krass sein, richtig speziell."
+
+ VORHER WAREN ES FUENF EINZELNE KAESTEN mit je eigenem Rand und
+ 8 px Luft dazwischen -- und der Hintergrund des Motivs schien
+ ueberall durch. Das las sich als fuenf Dinge, die zufaellig
+ untereinander stehen. Es ist aber EINE Frage mit fuenf Antworten,
+ und genau so sieht es jetzt aus: ein Koerper, in den fuenf Felder
+ eingelassen sind.
+
+ DIE FUGE MACHT DIE KACHEL. Nicht der Rand aussen -- der ist Fassung
+ --, sondern die dunkle Linie ZWISCHEN den Feldern. Ein Spalt, durch
+ den der Untergrund scheint, trennt; eine dunkle Fuge verbindet, weil
+ sie zum selben Koerper gehoert. Deshalb `#05070c` und nicht
+ `transparent`. Dieselbe Entscheidung wie beim Kalender.
+
+ ABGESCHRAEGTE ECKEN wie ueberall im Haus. Auf dieser Seite gibt es
+ die Modulliste aus module.css nicht (die Anmeldeseite laedt
+ absichtlich nur gate.css -- sie ist die erste Seite, die jemand
+ sieht, und soll schnell da sein). Das Polygon steht deshalb hier,
+ einmal, in einer Variablen.
+ ================================================================== */
+.rollen {
+ --r-fase: 16px;
+ --r-rand: 2px;
+ --r-form: polygon(
+ var(--r-fase) 0, calc(100% - var(--r-fase)) 0,
+ 100% var(--r-fase), 100% calc(100% - var(--r-fase)),
+ calc(100% - var(--r-fase)) 100%, var(--r-fase) 100%,
+ 0 calc(100% - var(--r-fase)), 0 var(--r-fase));
+
+ position: relative;
+ margin-bottom: 22px;
+ padding: var(--r-rand);
+ clip-path: var(--r-form);
+
+ /* DIE FASSUNG: dieselben vier Farben wie am Rand der Zentrale --
+ links Rot, rechts Babyblau, Silber als Treffpunkt, Schwarz als
+ Fuge. Wer sich anmeldet, sieht damit schon hier die Handschrift
+ der Seite, die dahinter liegt. */
+ background: linear-gradient(96deg,
+ #20060b 0%, #c8323f 6%, #ff5f6d 14%, #ffd9dd 20%,
+ #b3242f 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%,
+ #4f95bd 70%, #8fd8ff 78%, #dff2ff 84%, #3f7fa3 92%, #06080f 100%);
+ box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
+}
+
+/* Das Innenglas. Eigene Ebene, damit die Fassung ringsum stehen
+ bleibt, mit dem feinen Messraster des Hauses darauf. */
+.rollen::before {
+ content: ""; position: absolute; inset: var(--r-rand);
+ z-index: 0; pointer-events: none;
+ clip-path: var(--r-form);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
+ repeating-linear-gradient(0deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
+ repeating-linear-gradient(90deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
+ radial-gradient(120% 80% at 12% 100%, rgba(255, 74, 92, .10), transparent 62%),
+ radial-gradient(110% 75% at 88% 0%, rgba(126, 200, 242, .09), transparent 60%),
+ linear-gradient(180deg, #0b111c, #070b13);
+}
+.rollen > * { position: relative; z-index: 1; }
+
+/* Die Frage sitzt als Kopfzeile IN der Kachel, nicht darueber --
+ sonst waere die Kachel eine Liste ohne Titel und der Titel ein
+ Satz ohne Bezug. */
+.rollen .feldschild {
+ margin: 0;
+ padding: 12px 16px 10px;
+ border-bottom: 1px solid #05070c;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, .045);
+}
.rolle {
display: flex; align-items: center; gap: 13px;
- width: 100%; margin-bottom: 8px; padding: 11px 14px;
- background: rgba(255, 255, 255, .035);
- border: 1px solid var(--rand);
- border-radius: var(--radius-klein);
+ width: 100%; margin: 0; padding: 12px 16px;
+ background: transparent;
+ border: 0;
+ /* Die Fuge nach unten, ausser beim letzten -- sonst laege eine
+ Linie auf der Fassung. */
+ border-bottom: 1px solid #05070c;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, .035);
color: var(--text);
font: inherit; text-align: left; cursor: pointer;
- transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
+ transition: background var(--tempo), box-shadow var(--tempo), padding-left var(--tempo);
}
-.rolle:hover { background: rgba(255, 255, 255, .06); border-color: var(--rand-hell); }
-.rolle:active { transform: scale(.995); }
+.rolle:last-child { border-bottom: 0; box-shadow: none; }
+/* BEIM ZEIGEN RUECKT DAS FELD AUF, statt aufzuleuchten -- dieselbe
+ Sprache wie ueberall ("naeherkommen statt aufleuchten"). Der schmale
+ Streifen links traegt die Farbe DIESER Rolle. */
+.rolle:hover {
+ background: linear-gradient(90deg,
+ color-mix(in srgb, var(--rf) 14%, transparent), transparent 46%);
+ padding-left: 20px;
+}
+.rolle:active { padding-left: 18px; }
+
+/* AUSGEWAEHLT LEUCHTET IN DER FARBE DER ROLLE, nicht in Blau.
+
+ Hier stand fuer alle fuenf derselbe blau-violette Verlauf -- wer
+ "Scout" waehlte, bekam Blau, obwohl Scout gruen ist, und die
+ Rollenfarbe `--rf` direkt darueber wurde ignoriert. Die Farben sind
+ seit dem 08.09. zentral gesetzt und ueberall im Haus gueltig; genau
+ hier, bei der Wahl der Rolle, wurden sie nicht benutzt.
+
+ `color-mix` statt fuenf ausgeschriebener Verlaeufe: Die Farbe kommt
+ aus `--rf`, und `--rf` kommt aus den Hausfarben. Eine Aenderung
+ dort wirkt bis hierher. */
.rolle[aria-checked="true"] {
- background: linear-gradient(100deg, rgba(63, 189, 245, .14), rgba(138, 118, 255, .10));
- border-color: rgba(63, 189, 245, .55);
+ background: linear-gradient(96deg,
+ color-mix(in srgb, var(--rf) 26%, transparent),
+ color-mix(in srgb, var(--rf) 9%, transparent) 62%,
+ transparent);
+ padding-left: 20px;
+ box-shadow:
+ inset 3px 0 0 var(--rf),
+ 0 1px 0 rgba(255, 255, 255, .035);
+}
+.rolle[aria-checked="true"]:last-child { box-shadow: inset 3px 0 0 var(--rf); }
+
+@media (prefers-reduced-motion: reduce) {
+ .rolle, .rolle:hover, .rolle:active { transition: none; padding-left: 16px; }
+ .rolle[aria-checked="true"] { padding-left: 16px; }
}
.rolle__zeichen {
@@ -1722,30 +1831,45 @@ body.gate {
.tafel .rolle[data-rolle="scout"] { --rton: var(--scout-haupt); }
.tafel .rolle[data-rolle="creator"] { --rton: var(--creator-haupt); }
+ /* SEIT screen20 SIND ES FELDER IN EINEM KOERPER, KEINE FUENF KARTEN.
+
+ Filipe: "ich will dass die rollen auch alle in einer grossen
+ kacheln sind." Vorher hatte jede Rolle einen eigenen Rand, eigene
+ runde Ecken und 8 px Luft zur naechsten -- das las sich als fuenf
+ Dinge, die zufaellig untereinander stehen. Es ist aber EINE Frage
+ mit fuenf Antworten.
+
+ WAS BLEIBT, IST DIE SCHIENE. Sie war und ist das Beste an diesem
+ Entwurf: Wer sich als Manager anmeldet, sieht schon hier das Lila,
+ in dem ihm gleich seine Kacheln begegnen. Sie sitzt jetzt buendig
+ an der Innenkante der Kachel statt am Rand einer eigenen Karte --
+ dieselbe Wirkung, ein Koerper weniger.
+
+ WAS GEHT, SIND RAND UND RUNDUNG. An ihre Stelle tritt die dunkle
+ Fuge nach unten. Ein Spalt, durch den der Untergrund scheint,
+ trennt; eine dunkle Fuge verbindet, weil sie zum selben Koerper
+ gehoert. */
.tafel .rolle {
position: relative;
overflow: hidden;
- /* Links scharf (dort sitzt die Schiene), rechts rund -- genau die
- Silhouette der Kacheln. */
- border-radius: 3px 13px 13px 3px;
+ border-radius: 0;
background:
linear-gradient(90deg,
color-mix(in srgb, var(--rton, var(--akzent)) 20%, transparent) 0%,
color-mix(in srgb, var(--rton, var(--akzent)) 6%, transparent) 22%,
transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
- border: 1px solid rgba(150, 186, 220, .13);
+ border: 0;
+ border-bottom: 1px solid #05070c;
box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, .09),
- inset 0 -1px 0 rgba(0, 0, 0, .38),
- 0 1px 2px rgba(0, 0, 0, .35);
- transition: border-color var(--tempo), background var(--tempo),
- box-shadow var(--tempo), transform .09s ease;
+ inset 0 1px 0 rgba(255, 255, 255, .07),
+ 0 1px 0 rgba(255, 255, 255, .035);
+ transition: background var(--tempo), box-shadow var(--tempo);
}
+ .tafel .rolle:last-child { border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
/* Die Schiene selbst. */
.tafel .rolle::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
- border-radius: 3px 0 0 3px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--rton, var(--akzent)) 55%, #fff) 0%,
var(--rton, var(--akzent)) 34%,
@@ -1761,15 +1885,20 @@ body.gate {
color-mix(in srgb, var(--rton, var(--akzent)) 8%, transparent) 24%,
transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
- border-color: rgba(150, 186, 220, .24);
}
.tafel .rolle:hover::before { opacity: 1; }
/* Beim Drücken sinkt die Taste ein: Der Schatten unter ihr
verschwindet, der innere kommt von oben. Genau das macht ein
echter Knopf. */
+ /* GEDRUECKT SINKT DAS FELD EIN -- ohne sich zu VERSCHIEBEN.
+
+ Hier stand `transform: translateY(1px)`. Bei fuenf einzelnen Karten
+ war das richtig: eine Taste, die nachgibt. In einem geschlossenen
+ Koerper ist es falsch -- ein Feld, das sich um einen Pixel aus der
+ Kachel herausschiebt, reisst die Fuge auf und sieht nach einem
+ Fehler aus. Der eingelassene Schatten allein sagt dasselbe. */
.tafel .rolle:active {
- transform: translateY(1px);
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
+ box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
}
/* DIE GEWÄHLTE TASTE IST BELEUCHTET, nicht nur eingefärbt. Der
Lichtrand nach innen liest sich wie eine Diode darunter -- und er
@@ -1781,7 +1910,6 @@ body.gate {
color-mix(in srgb, var(--rton, var(--akzent)) 16%, transparent) 34%,
color-mix(in srgb, var(--rton, var(--akzent)) 5%, transparent) 72%),
linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
- border-color: color-mix(in srgb, var(--rton, var(--akzent)) 58%, transparent);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .18),
inset 0 0 24px -9px color-mix(in srgb, var(--rton, var(--akzent)) 92%, transparent),
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 02dfb29b..73610f10 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+