diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css
index 80795880..56301f4f 100644
--- a/workspace/assets/css/module.css
+++ b/workspace/assets/css/module.css
@@ -109,7 +109,7 @@
}
/* MODULLISTE */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe) {
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
position: relative;
clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
border-radius: 0;
@@ -137,7 +137,7 @@
was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge
inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */
/* MODULLISTE */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe)::before {
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
@@ -160,7 +160,7 @@
/* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt
es nicht, und beides ist reine Optik ohne Klicks. */
/* MODULLISTE */
-:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe)::after {
+:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
@@ -244,7 +244,7 @@
/* Dieselbe Form, kleiner -- keine zweite Gestaltung. */
:root { --fase: 12px; }
/* MODULLISTE */
- :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe) {
+ :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
}
}
@@ -258,15 +258,15 @@
/* Im Kontrastmodus zählt die Kante, und die muss ein echter `border`
sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */
/* MODULLISTE */
- :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe) {
+ :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
filter: none; border: 1px solid CanvasText;
}
/* MODULLISTE */
- :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe)::after {
+ :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
display: none;
}
/* MODULLISTE */
- :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe)::before {
+ :is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::before {
display: none;
}
}
diff --git a/workspace/assets/css/team.css b/workspace/assets/css/team.css
index c1f6708a..141228d9 100644
--- a/workspace/assets/css/team.css
+++ b/workspace/assets/css/team.css
@@ -12,11 +12,40 @@
ruhig, damit die wenigen roten Stellen auch etwas heißen.
===================================================================== */
+/* =====================================================================
+ DER KOPF IST EINE KACHEL, IM TON DER KATEGORIE (09.09.2026)
+
+ Filipe: "perfektionnir das in einer kachel in der farbe von der
+ kategorie bitte."
+
+ `.t-kachel` steht in der Modulliste von module.css und bekommt damit
+ die Form des Hauses: gefraeste Fase, Kantenlicht, Eckwinkel, Raster.
+ Sie braucht hier nur noch zweierlei -- eine FLAECHE (die Modulliste
+ gibt nur die Fassung, den Grund bringt jedes Bauteil selbst mit) und
+ den TON.
+
+ DER TON IST NICHT ABGESCHRIEBEN. Die Kachel traegt `data-ton="22"`,
+ und die Regel dazu steht in start.css -- dieselbe, aus der die
+ Kachel auf der Startseite ihre Farbe zieht. Es gibt damit weiterhin
+ genau EINE Stelle, an der die Farbe dieser Kategorie steht; wer sie
+ dort aendert, aendert beides. Eine zweite Hexzahl hier waere die
+ naechste, die auseinanderlaeuft.
+ ===================================================================== */
+.t-kachel {
+ margin: 0 0 18px;
+ padding: 20px 22px;
+ background:
+ var(--raster),
+ linear-gradient(150deg,
+ color-mix(in srgb, var(--ton) 13%, transparent),
+ transparent 46%),
+ linear-gradient(178deg, rgba(9, 13, 20, .955), rgba(4, 7, 12, .985));
+}
+
/* ---------- Der Kopf --------------------------------------------------- */
.t-kopf {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
- margin: 0 0 18px;
}
.t-kopf__titel {
margin: 4px 0 6px;
@@ -32,9 +61,16 @@
.t-kopf__grenze {
flex: 1 1 300px; max-width: 44ch;
margin: 0; padding: 12px 15px;
- border-left: 3px solid color-mix(in srgb, var(--scout-haupt) 55%, transparent);
+ /* Im Ton der Kategorie und nicht mehr in Gruen: In einer Kachel, die
+ schon eine Farbe hat, ist eine zweite Farbe daneben eine zweite
+ Aussage -- und dieser Kasten sagt dasselbe wie die Kachel, nur
+ genauer. */
+ border-left: 3px solid color-mix(in srgb, var(--ton) 60%, transparent);
border-radius: 0 10px 10px 0;
- background: rgba(95, 201, 154, .07);
+ background:
+ linear-gradient(color-mix(in srgb, var(--ton) 9%, transparent),
+ color-mix(in srgb, var(--ton) 9%, transparent)),
+ rgba(7, 10, 17, .8);
font-size: .87rem; line-height: 1.55; color: var(--text-leise);
}
.t-kopf__grenze strong { color: var(--text); }
@@ -56,13 +92,16 @@
Deshalb hier von vornherein ein eigener, deckender Grund. Der rote
Ton liegt darauf, nicht darin. */
.tl {
- padding: 15px 17px;
- border: 1px solid color-mix(in srgb, var(--warn, #ff9aa2) 34%, transparent);
- border-radius: var(--radius-klein);
+ /* Auch eine Kachel -- mit dem Warnton als --ton, damit Kantenlicht
+ und Eckwinkel rot leuchten. Der Grund bleibt DECKEND: Die Lektion
+ vom Vorlagenbrett gilt weiter, eine Karte mit sieben Prozent Farbe
+ auf durchsichtigem Grund laesst das Buehnenfoto durch. */
+ --ton: #ff9aa2;
+ padding: 16px 18px;
background:
- linear-gradient(rgba(255, 154, 162, .07), rgba(255, 154, 162, .07)),
- rgba(7, 10, 17, .93);
- backdrop-filter: blur(8px);
+ var(--raster),
+ linear-gradient(150deg, rgba(255, 154, 162, .11), transparent 50%),
+ rgba(7, 10, 17, .95);
}
.tl__titel {
margin: 0 0 4px; font-size: .98rem; font-weight: 700;
@@ -75,10 +114,11 @@
}
/* Keine Lücke ist auch eine Auskunft -- und dann grün statt rot. */
.tl[data-gut="ja"] {
- border-color: color-mix(in srgb, var(--scout-haupt) 34%, transparent);
+ --ton: var(--scout-haupt);
background:
- linear-gradient(rgba(95, 201, 154, .07), rgba(95, 201, 154, .07)),
- rgba(7, 10, 17, .93);
+ var(--raster),
+ linear-gradient(150deg, rgba(95, 201, 154, .11), transparent 50%),
+ rgba(7, 10, 17, .95);
}
.tl[data-gut="ja"] .tl__titel { color: var(--scout-haupt); }
@@ -90,15 +130,26 @@
}
/* ---------- Eine Kennzahl ---------------------------------------------- */
+/* Die Kennzahlen bleiben SCHLICHT -- und das ist eine Entscheidung.
+ Sie stehen zu acht in einer Karte; jede davon mit Fase, Kantenlicht
+ und Eckwinkel waere ein Schaufenster voller Rahmen und keine
+ Auskunft mehr. Eine Kachel in der Kachel in der Kachel liest
+ niemand.
+
+ Was sie bekommen: eine abgeschnittene Ecke aus derselben Formel wie
+ die Kacheln (clip-path mit --fase), damit sie erkennbar zur selben
+ Familie gehoeren -- nur eben als Beschlagteil, nicht als Kachel. */
.tz {
display: grid; gap: 2px; align-content: start;
padding: 11px 13px;
- border: 1px solid var(--rand); border-radius: var(--radius-klein);
- /* Ebenfalls deckend -- eine Kennzahl auf einem Foto ist keine
- Kennzahl, sondern ein Ratespiel. */
+ border: 1px solid var(--rand);
+ border-radius: 0;
+ clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
+ /* Deckend -- eine Kennzahl auf einem Foto ist keine Kennzahl,
+ sondern ein Ratespiel. */
background:
- linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .028)),
- rgba(7, 10, 17, .9);
+ linear-gradient(rgba(255, 255, 255, .034), rgba(255, 255, 255, .034)),
+ rgba(9, 12, 19, .92);
}
.tz__wert {
font-size: 1.28rem; font-weight: 700; color: var(--text);
@@ -109,7 +160,7 @@
}
/* Rot NUR, wo etwas liegengeblieben ist. */
.tz[data-art="warn"] {
- border-color: color-mix(in srgb, var(--warn, #ff9aa2) 42%, transparent);
+ border-color: color-mix(in srgb, var(--warn, #ff9aa2) 45%, transparent);
/* Auch hier deckend. Diese Zeile stand zuerst mit einem einzelnen
rgba-Wert da und hat damit den undurchsichtigen Grund von oben
wieder aufgehoben -- ausgerechnet an den Karten, auf die es
@@ -133,28 +184,42 @@
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
+/* =====================================================================
+ DIE KARTEN UNTEN SIND JETZT AUCH KACHELN (09.09.2026)
+
+ Filipe: "und die kacheln unten in der seite auch perfektionnieren und
+ geil machen bitte."
+
+ Sie waren abgerundete Rechtecke mit einem Streifen links -- richtig,
+ aber eben nicht die Sprache dieses Hauses. `.tperson` und `.tl`
+ stehen jetzt in der Modulliste und bekommen damit Fase, Kantenlicht,
+ Eckwinkel und Raster wie jede andere Kachel.
+
+ DIE FARBE KOMMT AUS DER ROLLE, und zwar ueber `--ton`. Das ist die
+ Variable, aus der module.css das Kantenlicht und die Eckwinkel
+ zieht. Ein Manager-Kasten leuchtet damit lila, ein Scout-Kasten
+ gruen -- ohne dass hier eine einzige Farbe ausgeschrieben stehen
+ muss.
+
+ DER STREIFEN IST WEG, und das ist kein Verlust: module.css belegt
+ ::before und ::after selbst (Kantenlicht und Eckwinkel) und laedt
+ NACH dieser Datei -- ein eigenes ::after waere wirkungslos gewesen.
+ Das Kantenlicht traegt die Rollenfarbe jetzt ohnehin, und zwar rund
+ um die ganze Karte statt auf drei Pixeln links. */
.tperson {
--r: var(--text-still);
+ --ton: var(--r);
position: relative;
- padding: 16px 18px 18px;
- border: 1px solid var(--rand);
- border-radius: var(--radius-klein);
+ padding: 17px 19px 19px;
background:
- linear-gradient(180deg, color-mix(in srgb, var(--r) 6%, transparent), transparent 60%),
- var(--flaeche);
+ var(--raster),
+ linear-gradient(155deg,
+ color-mix(in srgb, var(--r) 11%, transparent),
+ transparent 52%),
+ linear-gradient(178deg, rgba(10, 14, 22, .95), rgba(5, 8, 14, .98));
}
.tperson[data-rolle="manager"] { --r: var(--manager-haupt); }
.tperson[data-rolle="scout"] { --r: var(--scout-haupt); }
-/* Der Streifen in der Rollenfarbe -- dieselbe Sprache wie in der
- Personenliste, damit man beide Seiten als ein Haus liest. */
-.tperson::after {
- content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
- width: 3px; border-radius: 999px;
- background: linear-gradient(180deg,
- color-mix(in srgb, var(--r) 80%, transparent),
- color-mix(in srgb, var(--r) 25%, transparent));
- pointer-events: none;
-}
.tperson[data-gesperrt="ja"] { opacity: .6; }
.tperson__kopf {
@@ -236,7 +301,15 @@
@media (max-width: 620px) {
.t-kopf { flex-direction: column; gap: 14px; }
- .t-kopf__grenze { max-width: none; }
+ /* `flex: 1 1 300px` ist am Rechner richtig -- dort ist die Hauptachse
+ WAAGERECHT und der Kasten teilt sich die Breite mit dem Titel.
+ In einer Spalte ist die Hauptachse aber SENKRECHT, und derselbe
+ Wert laesst ihn in die HOEHE wachsen: Auf dem Bildschirmfoto stand
+ danach die halbe Kachel leer.
+
+ Ein Flexwert gilt fuer eine Richtung, nicht fuer ein Element. Wer
+ die Richtung dreht, muss ihn mitdrehen. */
+ .t-kopf__grenze { flex: 0 0 auto; max-width: none; }
.tperson { padding: 14px 15px 16px; }
}
@media (forced-colors: active) {
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 740e5693..2b9dbded 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -231,10 +231,10 @@
-
-
-
-
-
+
+
+
+
+