"Dein Team": neuer Name, ein falsches Schild weniger und ein eigener Grund

Filipe, drei Bildschirmfotos: den Namen der Kachel aendern, "diese zwei
kacheln noch mehr perfektionieren", "veraender den hintergrund von
diesen kacheln komplett", "perfektionnier diese seite einfach komplett".

DER NAME, DRITTE FASSUNG. Zuerst "Team-Lage" -- das klang nach Bericht
UEBER Menschen. Dann "Eingang" -- das beschrieb nur die eine Haelfte
(was hereinkommt) und liess die groessere weg: wer da ist, wer heute
kann, wer was offen hat. "Dein Team" sagt beides und stellt niemanden
ueber jemanden.

DREI SACHEN WAREN NICHT GESCHMACK, SONDERN FEHLER -- und alle drei hat
erst das Nachmessen am fertigen Bildschirm gezeigt:

  UEBER SIEBEN TAGEN STAND "Kann heute". Im Singular, ueber einer
  ganzen Woche. Wer nur die Ueberschrift liest -- und das tut man bei
  einer Zeile in Versalien --, haelt den ganzen Streifen fuer den
  heutigen Tag und liest sechs Kaestchen falsch. Der Satz DARUNTER war
  immer richtig; zwei Aussagen ueber demselben Bild, und die
  auffaelligere war die falsche.

  DIE VIER ZAHLEN BRACHEN 3 + 1. Gemessen: Die Karte ist innen 536 px
  breit, die Regel verlangte je Spalte mindestens 130 px, vier Spalten
  braeuchten 544. Acht Pixel zu wenig. Die Lehre ist NICHT "130 auf 122
  senken" -- das waere dieselbe Rechnung mit einer anderen Zahl. Vier
  Dinge sehen nur in 1x4, 2x2 oder 4x1 richtig aus; 3+1 ist die eine
  Anordnung, die immer falsch wirkt, und eine `auto-fit`-Regel kann
  jederzeit dort landen. Zwei feste Spalten koennen es nicht.

  DER WEG IN DEN CHAT war ein unterstrichener Satz ueber die volle
  Kartenbreite -- er sah aus wie eine Ueberschrift, nicht wie ein Knopf.

DER GRUND DER KARTEN, und hier hat mich das erste Ergebnis widerlegt:
Der Schein aus der oberen Ecke nahm `var(--r)`, die Farbe der STUFE.
Das war logisch und unsichtbar -- bei "Probe" ist sie ein gedaempftes
Grau, und ein Grauschein auf fast Schwarz ist kein Schein. Nach der
Aenderung sah die Karte auf dem Bildschirmfoto genauso aus wie davor.
Jetzt tragen die beiden Ecken die Hausfarben (Lila oben links, Babyblau
unten rechts), dazu ein Lichtstreifen quer und ein Kantenlicht oben.
Die Stufe bleibt, wo sie hingehoert: im Kantenlicht und am Schild.

AUGENSCHONEND BLEIBT PFLICHT: Keine Lage geht ueber 26 %, der
Lichtstreifen liegt bei 3 %, und die hellsten Stellen sitzen in den
ECKEN -- nicht hinter dem Text. Ein Schein hinter einer Zahl macht sie
schwerer lesbar, egal wie schoen er ist.

Dazu: HEUTE ist im Wochenstreifen markiert (sieben gleich aussehende
Kaestchen zwingen sonst dazu, den Wochentag im Kopf auszurechnen), ein
freier Tag hat eine Andeutung statt gar nichts (sieben leere Rahmen
sahen aus wie "noch nicht geladen"), und der Erklaerkasten im Kopf darf
68 statt 44 Zeichen breit sein -- auf einem breiten Bildschirm stand er
als schmale Saeule mit sechs Zeilen zu je vier Woertern neben viel Bild.

WARUM DIE FALSCHE UEBERSCHRIFT UEBERLEBEN KONNTE: pruef-team-ampel
prueft seit dem ersten Tag, dass SIEBEN Tage kommen und der erste heute
ist. Was sie nie angesehen hat, ist der Text darueber -- die Zahl
stimmte ja. Sie prueft ihn ab jetzt, an derselben Stelle wie die Zahl,
damit beide zusammen gelesen werden. Mit Gegenprobe: Die Suche muss das
Wort "heute" auch finden koennen, sonst waere sie gruen, weil sie nie
etwas liest.

pruef-team-ampel 28 -> 32 · pruef-team-stufen 24 · pruef-css-klassen
gruen · pruef-start-ansicht 143 · pruef-rollen 278 · pruef-modi-wortleck 5.

OFFEN GEBLIEBEN und ihm gemeldet: Auf einem 1920er Bildschirm steht der
Inhalt in einer Saeule von rund 1150 px, links und rechts bleibt Bild.
Das ist die Breite ALLER zwanzig Seiten; sie hier allein zu aendern
hiesse, eine Seite anders zu bauen als die anderen neunzehn.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/team.css

@@ -635,3 +635,131 @@
 .tampel__satz {
   font-size: .76rem; color: var(--text-still); line-height: 1.5;
 }
+
+/* =====================================================================
+   „DEIN TEAM" — DIE KARTEN UND DIE SEITE (11.09.2026)
+
+   Filipe, mit drei Bildschirmfotos: die Kachel umbenennen, "diese zwei
+   kacheln noch mehr perfektionieren", "veränder den hintergrund von
+   diesen kacheln komplett", "perfektionnier diese seite einfach
+   komplett".
+
+   Was hier steht, ist NICHT nur Geschmack. Drei der Änderungen sind
+   Fehler, die erst das Nachmessen am fertigen Bildschirm gezeigt hat --
+   sie stehen bei ihrer Regel, jede mit ihrer Zahl.
+   ===================================================================== */
+
+/* ---- Die vier Zahlen: 2 × 2 statt 3 + 1 ------------------------------
+
+   GEMESSEN: Die Karte ist innen 536 px breit, die Regel verlangte je
+   Spalte mindestens 130 px. Vier Spalten bräuchten 4 × 130 + 3 × 8 =
+   544 px. Acht Pixel zu wenig -- also drei Spalten, und die vierte Zahl
+   rutschte allein in eine zweite Reihe. Genau so steht sie in Filipes
+   Bildschirmfoto.
+
+   DIE LEHRE IST NICHT „130 auf 122 senken". Das wäre dieselbe Rechnung
+   mit einer anderen Zahl, und beim nächsten Umbau stünde sie wieder
+   knapp daneben. Vier Dinge sehen nur in 1 × 4, 2 × 2 oder 4 × 1
+   richtig aus; 3 + 1 ist die eine Anordnung, die IMMER falsch wirkt --
+   und eine `auto-fit`-Regel kann jederzeit dort landen. Zwei Spalten
+   können es nicht. */
+.tperson__zahlen {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+/* ---- Der Grund der Karte --------------------------------------------
+
+   Vorher: ein flacher Verlauf mit einem Hauch Rollenfarbe oben links.
+   Auf der Team-Seite stehen zwei dieser Karten nebeneinander, jede
+   fast bildschirmhoch -- das ist die größte Fläche der Seite, und sie
+   war die ruhigste.
+
+   Jetzt vier Lagen, von unten nach oben gelesen:
+     1. die tiefe Grundfarbe (bleibt, sie trägt die Lesbarkeit),
+     2. ein Lichtschein aus der oberen linken Ecke im Ton der Person,
+     3. ein zweiter, kühler aus der unteren rechten -- die beiden
+        ergeben die Diagonale, die das ganze Haus führt,
+     4. das feine Raster darüber.
+
+   AUGENSCHONEND BLEIBT PFLICHT: Keine Lage geht über 14 % Deckkraft,
+   und die hellste Stelle liegt in einer ECKE, nicht hinter dem Text.
+   Ein Schein hinter einer Zahl macht sie schwerer lesbar, egal wie
+   schön er ist. */
+.tperson {
+  background:
+    /* 1. Kantenlicht an der Oberkante -- die Karte bekommt eine Kante,
+          die das Licht faengt, statt an einer Linie aufzuhoeren. */
+    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 11%),
+    /* 2. das feine Raster */
+    var(--raster),
+    /* 3. ein schmaler Lichtstreifen quer ueber die Karte -- er gibt der
+          Flaeche eine Richtung, ohne irgendwo hell genug zu werden, um
+          Text zu stoeren (3 %). */
+    linear-gradient(115deg, transparent 26%, rgba(255, 255, 255, .032) 45%, transparent 60%),
+    /* 4. der Schein aus der oberen linken Ecke.
+
+          HIER STAND ZUERST `var(--r)` -- die Farbe der STUFE. Das war
+          logisch und unsichtbar: Bei "Probe" ist sie ein gedaempftes
+          Grau, und ein Grauschein auf fast Schwarz ist kein Schein.
+          Gemessen am Bildschirmfoto sah die Karte nach der Aenderung
+          genauso aus wie davor. Jetzt tragen die beiden Ecken die
+          Hausfarben -- Lila oben links, Babyblau unten rechts --, und
+          die Stufe bleibt dort, wo sie hingehoert: im Kantenlicht und
+          am Namensschild. */
+    radial-gradient(135% 105% at 0% 0%,
+      color-mix(in srgb, var(--violett) 26%, transparent), transparent 58%),
+    /* 5. der Gegenschein unten rechts */
+    radial-gradient(125% 95% at 100% 100%,
+      color-mix(in srgb, var(--akzent) 18%, transparent), transparent 60%),
+    /* 6. die tiefe Grundfarbe, leicht schraeg statt senkrecht */
+    linear-gradient(160deg, rgba(14, 18, 30, .955), rgba(6, 9, 16, .985));
+  transition: box-shadow var(--tempo), transform var(--tempo);
+}
+/* Beim Überfahren hebt sie sich einen Hauch -- so viel, dass man merkt,
+   welche Karte man gerade liest, und so wenig, dass die Seite nicht
+   zappelt. Zwei Pixel, kein Schatten-Feuerwerk. */
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .tperson:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9);
+  }
+}
+
+/* ---- Die Woche ------------------------------------------------------- */
+/* HEUTE IST MARKIERT. Sieben gleich aussehende Kästchen zwingen dazu,
+   den Wochentag im Kopf auszurechnen, um zu wissen, wo man steht. */
+.tampel__tag[data-heute="ja"] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 55%, transparent);
+  font-weight: 800;
+}
+/* Ein freier Tag war GAR NICHT gefüllt -- sieben leere Rahmen sehen aus
+   wie „noch nicht geladen". Jetzt eine Andeutung: sichtbar als Fläche,
+   leise genug, dass belegte Tage weiterhin herausstechen. */
+.tampel__tag--frei {
+  background: rgba(255, 255, 255, .025);
+}
+
+/* ---- Der Weg in den Chat --------------------------------------------- */
+.tschreiben {
+  display: block; margin: 2px 0 14px;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
+  border-radius: var(--radius-klein);
+  background: color-mix(in srgb, var(--r) 9%, transparent);
+  color: var(--text); text-decoration: none; text-align: center;
+  font-size: .88rem; font-weight: 600;
+  transition: background var(--tempo), border-color var(--tempo);
+}
+.tschreiben:hover {
+  background: color-mix(in srgb, var(--r) 16%, transparent);
+  border-color: color-mix(in srgb, var(--r) 52%, transparent);
+}
+.tschreiben:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+/* ---- Der Kopf der Seite ---------------------------------------------
+   Der Erklärkasten war auf 44 Zeichen begrenzt und stand dadurch auf
+   einem breiten Bildschirm als schmale Säule neben viel Bild -- sechs
+   Zeilen mit je vier Wörtern. Lesbar ist er zwischen 45 und 75
+   Zeichen; die Grenze steht jetzt am oberen Ende dieses Bereichs und
+   nicht darunter. */
+.t-kopf__grenze { max-width: 68ch; }