Verfuegbarkeits-Ampel im Eingang -- und eine eigene Gruppe fuer Team Dogi

Filipe: "ich will dass die kacheln von den modis bei der rolle dogfather
eine eigene kategorie haben. damit ich nicht zwischen den kacheln
suchen muss."

DIE AMPEL (Blueprint 7.1). Der Eingang zeigt je Person sieben Tage:
gruen frei, gelb belegt, rot voll ab 180 Minuten. Die Abfrage sammelt
Termine ueber VIER Wege (creator_id, teilnehmer_id, erstellt_von und
die Tabelle termin_teilnehmer) -- ueber nur einen davon waeren die
meisten Termine unsichtbar geblieben und die Ampel dauerhaft gruen.
Sie waehlt NIE titel, beschreibung oder ort: Filipe soll sehen, WANN
jemand kann, nicht WAS die Person vorhat. Belegung ist Arbeitslage,
Inhalt ist privat.

DIE GRUPPE. Die zwei Team-Kacheln standen zwischen einundzwanzig
anderen. Jetzt tragen sie `gruppe: "Team Dogi"` und `gruppeNach:
"Täglich"`; start.js setzt eine so markierte Gruppe direkt HINTER die
genannte statt ans Ende. Ohne das waere sie unten gelandet -- richtig
gruppiert und trotzdem zum Suchen.

Das Ideen-Board ist dabei aus workspace/assets/js/bereiche.js
ausgezogen. Es stand dort mit `rollen: ['admin']` in einer Datei, die
jeder Modi herunterlaedt: die Kachel war unsichtbar, ihr Name nicht.
Jetzt liefert der Server sie, wie den Eingang auch.

DREI FEHLER, DIE DER BILDSCHIRM GEZEIGT HAT, NICHT DER CODE:

  Das Profilbild sprengte die Karte. teamlage.js baute ein blankes
  <img> in `.tperson__zeichen` -- ohne die Klasse `tperson__bild`, die
  es auf 44 px begrenzt. Gemeldet hat es Filipe mit einem Bildschirm-
  foto, nicht eine Pruefung.

  Der Eingang hatte ueberhaupt keine Buehne. `zuSeite()` sucht nur in
  bereiche.js, und die Eingangs-Kachel kommt vom Server -- der Rueck-
  fall war ausgerechnet der Spicy-Wasserfall. Jetzt haengt das Bild an
  `data-buehne="eingang"` im CSS, wo kein Skript daran vorbeikommt.

  Pausierte Mitglieder verschwanden. `WHERE aktiv = 1` versteckte sie
  samt ihrer offenen Meldungen. Jetzt stehen sie hinten, sichtbar
  gekennzeichnet.

DIE ERWARTUNG IN pruef-start-ansicht steht auf FUENF Gruppen, in
ihrer Reihenfolge -- die Position ist hier die eigentliche Aussage.
Eine Gruppe, die ans Ende rutscht, faellt auf dem Bildschirm kaum auf.
Die Kachelzahl blieb bei 24: umgezogen, nichts hinzugefuegt.

pruef-team-ampel 28, pruef-team-stufen 24, pruef-rollen 274,
pruef-crew-adresse 123, pruef-modi-ideen 30, pruef-modi-wortleck 5,
pruef-zwischenspeicher 21, pruef-start-ansicht gruen.

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

workspace/assets/js/teamlage.js

@@ -83,12 +83,27 @@
     if (!m.aktiv) k.dataset.pause = 'ja';
 
     const kopf = el('div', 'tperson__kopf');
-    const zeichen = el('span', 'tperson__zeichen');
+    /* DAS BILD BEKOMMT SEINE KLASSE -- UND DAS WAR EIN ECHTER FEHLER.
+
+       Hier stand ein blankes <img> IN der Buchstaben-Blase. Ein Bild
+       ohne Groessenangabe nimmt seine natuerliche -- und die Blase hat
+       kein `overflow: hidden`. Ergebnis: Das Profilfoto lief ueber die
+       ganze Kachel, quer ueber Zahlen und Balken. Filipe hat es im
+       Bildschirmfoto gesehen, bevor ich es gemessen hatte.
+
+       `tperson__bild` gibt es laengst und traegt alles Noetige: 44 px,
+       rund, `object-fit: cover`, Rand in der Rollenfarbe. Sie steht
+       neben der Blase, nicht darin -- entweder ein Bild ODER ein
+       Buchstabe, nie beides ineinander. */
+    let zeichen;
     if (m.bild) {
-      const b = document.createElement('img');
-      b.src = m.bild; b.alt = ''; b.loading = 'lazy';
-      zeichen.append(b);
+      zeichen = document.createElement('img');
+      zeichen.className = 'tperson__bild';
+      zeichen.src = m.bild;
+      zeichen.alt = '';
+      zeichen.loading = 'lazy';
     } else {
+      zeichen = el('span', 'tperson__zeichen');
       zeichen.textContent = (m.name || '?').trim().charAt(0).toUpperCase();
     }
     kopf.append(zeichen);
@@ -134,6 +149,49 @@
     }
     k.append(merkmale);
 
+    /* ===================================================================
+       DIE VERFUEGBARKEITS-AMPEL (Blueprint 7.1)
+
+       "Owner/rechte Hand sehen nur die Verfuegbarkeits-Ampel, nicht den
+       Klartext." Sieben Tage, drei Farben, kein Wort darueber, was
+       jemand vorhat -- der Server schickt auch gar nichts anderes.
+
+       WOCHENTAGSBUCHSTABE STATT DATUM: Sieben Datumsangaben
+       nebeneinander liest niemand. Der Buchstabe reicht, um "Donnerstag
+       ist dicht" zu erkennen; das genaue Datum steht im Titel, den man
+       beim Draufzeigen bekommt.
+
+       DER TITEL SAGT NICHT, WAS ANLIEGT, sondern nur wie viel: "3
+       Termine, 2 Std 30". Das ist die Grenze aus dem Blueprint, und sie
+       laeuft hier mitten durch einen Satz -- deshalb steht sie hier
+       noch einmal. */
+    if (Array.isArray(m.verfuegbar) && m.verfuegbar.length) {
+      const woche = el('div', 'tampel');
+      woche.append(el('span', 'tampel__schild', 'Kann heute'));
+      const streifen = el('div', 'tampel__woche');
+      for (const t of m.verfuegbar) {
+        const d = new Date(`${t.tag}T12:00:00Z`);
+        const tag = el('span', `tampel__tag tampel__tag--${t.ampel}`,
+          ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'][d.getUTCDay()]);
+        const dauer = t.minuten
+          ? `${Math.floor(t.minuten / 60)} Std ${String(t.minuten % 60).padStart(2, '0')}`
+          : null;
+        tag.title = `${d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })}`
+          + (t.termine ? ` · ${t.termine} ${t.termine === 1 ? 'Termin' : 'Termine'}, ${dauer}` : ' · nichts eingetragen');
+        streifen.append(tag);
+      }
+      woche.append(streifen);
+      /* Der Satz sagt, was die Farben bedeuten -- einmal je Karte, nicht
+         als Legende irgendwo. Wer die Seite zum ersten Mal sieht, soll
+         nicht raten. */
+      const heuteWert = m.verfuegbar[0];
+      woche.append(el('span', 'tampel__satz',
+        heuteWert.ampel === 'frei' ? 'Heute nichts eingetragen – ansprechbar.'
+          : heuteWert.ampel === 'teils' ? 'Heute teilweise verplant.'
+            : 'Heute weitgehend verplant.'));
+      k.append(woche);
+    }
+
     /* DIE STUFE SETZEN -- nur DogFather. Die rechte Hand sieht sie,
        aendert sie aber nicht: Wer im Team auf welcher Stufe steht, ist
        eine Personalentscheidung (Blueprint 4.1, "Rechte anpassen"