Checklisten-Gruppen klappen zu, Markierungen tragen ein Zeichen

Zwei Wuensche vom 01.09.2026:
  "neben den Titel soll immer ein Knopf sein, wo man die Liste aufmacht
   oder wieder zumacht -- die sollen auch zu, damit die Seiten nicht so
   lang sind."
  "und wenn die Ansprechpartner was markieren, sollen die da so ein
   Zeichen haben, so dass die sehen, da ist was -- und es soll auch oben
   in der Kachel angezeigt werden."

ZUKLAPPEN. Der Gruppenkopf ist jetzt ein Knopf ueber die volle Breite
(49 px hoch, mit dem Daumen treffbar), nicht ein Pfeilchen daneben. Zu
ist der Standard. Gemessen: Die LIVE-Analyse ist damit 1100 statt 2081
Pixel lang -- 47 Prozent gespart. Welche Gruppen offen waren, merkt sich
der Browser; sonst waere jede Bewertung ein Ruecksprung an den Anfang.

DAS ZEICHEN. Eine Raute mit Ausrufestrich, in Bernstein. Drei
Entscheidungen, keine davon Geschmack:
  * FORM -- alles andere auf dem Bildschirm ist rund oder eckig. Eine
    Spitze nach oben gibt es sonst nirgends, und deshalb findet das Auge
    sie zwischen zwanzig Kacheln ohne Suchen.
  * FARBE -- immer dieselbe, nie die der Kachel. Ein Zeichen, das die
    Farbe wechselt, muss gelesen werden; eines, das immer gleich
    aussieht, wird erkannt. Rot waere falsch: "verbessern" ist ein
    Auftrag, kein Fehler.
  * BEWEGUNG -- ein Atmen ueber 3,2 s, kein Blinken; bei "weniger
    Bewegung" bleibt der Schein stehen statt zu verschwinden.

Es steht an drei Stellen, immer aus derselben Quelle (bereiche.js): am
Gruppenkopf, am Punkt selbst und oben auf der Kachel der Startseite.

WARUM DAS ZEICHEN AM GRUPPENKOPF PFLICHT IST. Ohne es waere Zuklappen
ein Rueckschritt gewesen: Der Betreuer markiert etwas, die Gruppe ist zu,
und der Creator erfaehrt es nie. Die Zahl "zu verbessern" in der Bilanz
klappt die betroffenen Gruppen jetzt auf und springt hin.

Auf der Kachel nur fuer Creator. Fuer einen Betreuer waere es die Liste
dessen, was er selbst angehakt hat -- sie waechst mit seiner Arbeit, und
nur der Creator kann sie abbauen. Ein Zaehler, den man nicht auf null
bringen kann, wird ignoriert, und dann sind auch die daneben nichts wert.

ZWEI FEHLER, DIE DIE PRUEFUNG GEFUNDEN HAT:
  1. Das Zeichen stiess auf der Kachel mit der Zahl zusammen (zwei
     Pixel). Behoben an der Ursache: Besteht die Zahl NUR aus
     Markierungen, ist sie dieselbe Auskunft ein zweites Mal und
     entfaellt; sonst ruecken Zahl und Pfeil nach unten.
  2. Danach war die Pruefung wertlos -- sie verglich mit einem Element,
     das es nun nicht mehr gab, und war ohne einen einzigen Vergleich
     gruen. Sie zaehlt jetzt die geprueften Nachbarn mit; null Nachbarn
     ist ein Fehler, kein Erfolg.

Geprueft wird SICHTBARKEIT, nicht Vorhandensein: Ein zugeklappter Punkt
steht weiterhin im Dokument, alle bisherigen Pruefungen waeren gruen
geblieben, auch wenn der Creator seine Markierung nie zu Gesicht
bekaeme. Dazu Gegenproben: keine Markierung ohne Grund, und wer nichts
markiert bekommen hat, sieht auch kein Zeichen.

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

workspace/assets/css/start.css

@@ -1880,9 +1880,83 @@ body.start #protokoll {
 }
 .bilanz-zahl__text { font-size: .82rem; color: var(--text-leise); }
 
-/* ---------- Die Gruppen -------------------------------------------------- */
-.fest-gruppe { margin-bottom: 24px; }
-.fest-gruppe__kopf { display: flex; align-items: baseline; gap: 10px; }
+/* Die Zahl "zu verbessern" führt zu den markierten Gruppen. Sie sieht
+   deshalb anfassbar aus -- ein Klickziel, das aussieht wie Text, findet
+   niemand. */
+.bilanz-zahl[data-klickbar="ja"] {
+  cursor: pointer;
+  transition: border-color var(--tempo), background var(--tempo),
+              transform var(--tempo);
+}
+.bilanz-zahl[data-klickbar="ja"]:hover,
+.bilanz-zahl[data-klickbar="ja"]:focus-visible {
+  border-color: color-mix(in srgb, var(--b-ton) 55%, var(--rand));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--b-ton) 16%, transparent), transparent 60%),
+    var(--flaeche);
+}
+.bilanz-zahl[data-klickbar="ja"]:focus-visible {
+  outline: 2px solid var(--b-ton); outline-offset: 2px;
+}
+.bilanz-zahl[data-klickbar="ja"]::after {
+  content: '→'; margin-left: auto;
+  color: var(--b-ton); font-size: .9rem;
+  transition: transform var(--tempo);
+}
+.bilanz-zahl[data-klickbar="ja"]:hover::after { transform: translateX(3px); }
+
+/* ---------- Die Gruppen --------------------------------------------------
+
+   Zugeklappt als Standard (Wunsch 01.09.2026: "die sollen auch zu machen,
+   damit die Seiten nicht so lang sind"). Vier Bereiche mit je rund
+   zwanzig Punkten sind aufgeklappt eine Seite, die niemand zu Ende
+   scrollt -- und was niemand zu Ende scrollt, wird auch nicht gelesen.
+
+   Der Kopf ist ein Knopf über die ganze Breite, kein Pfeilchen daneben:
+   ein Ziel von 46 Pixeln Höhe trifft man auch mit dem Daumen. */
+.fest-gruppe { margin-bottom: 14px; }
+.fest-gruppe__kopf {
+  display: flex; align-items: center; gap: 10px;
+  width: 100%; margin: 0; padding: 11px 14px;
+  text-align: left; font: inherit; cursor: pointer;
+  color: var(--text);
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--ton, var(--akzent)) 7%, transparent), transparent 70%),
+    var(--flaeche);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+  transition: border-color var(--tempo), background var(--tempo);
+}
+.fest-gruppe__kopf:hover {
+  border-color: color-mix(in srgb, var(--ton, var(--akzent)) 40%, var(--rand));
+}
+.fest-gruppe__kopf:focus-visible {
+  outline: 2px solid var(--ton, var(--akzent)); outline-offset: 2px;
+}
+/* Offen: der Kopf wächst optisch mit dem Körper zusammen, sonst sähen es
+   aus wie zwei Kästen ohne Zusammenhang. */
+.fest-gruppe[data-auf="ja"] .fest-gruppe__kopf {
+  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
+  border-bottom-color: transparent;
+}
+
+/* Der Pfeil ist aus Rändern gebaut statt ein Zeichen -- ein ">" wird von
+   Vorleseprogrammen mitgelesen und richtet sich nach der Schriftart. */
+.fest-gruppe__pfeil {
+  flex: none; width: 8px; height: 8px;
+  border-right: 2px solid var(--text-still);
+  border-bottom: 2px solid var(--text-still);
+  transform: rotate(-45deg); margin-left: 2px;
+  transition: transform var(--tempo), border-color var(--tempo);
+}
+.fest-gruppe[data-auf="ja"] .fest-gruppe__pfeil { transform: rotate(45deg); }
+.fest-gruppe__kopf:hover .fest-gruppe__pfeil {
+  border-color: var(--ton, var(--akzent));
+}
+@media (prefers-reduced-motion: reduce) {
+  .fest-gruppe__pfeil { transition: none; }
+}
+
 .fest-gruppe__name {
   margin: 0; font-size: .96rem; font-weight: 650; color: var(--text);
 }
@@ -1892,12 +1966,101 @@ body.start #protokoll {
   font-size: .72rem; color: var(--text-still);
   font-variant-numeric: tabular-nums;
 }
+/* Das Merkzeichen steht ganz rechts -- der Platz, an dem das Auge beim
+   Überfliegen einer Liste von Köpfen zuletzt hängenbleibt. */
+.fest-gruppe__kopf .merk { margin-left: auto; }
+
+.fest-gruppe__koerper {
+  padding: 14px;
+  border: 1px solid var(--rand); border-top: 0;
+  border-bottom-left-radius: var(--radius-klein);
+  border-bottom-right-radius: var(--radius-klein);
+  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
+}
+.fest-gruppe__koerper[hidden] { display: none; }
 .fest-gruppe__text {
-  margin: 4px 0 12px; max-width: 68ch;
+  margin: 0 0 12px; max-width: 68ch;
   font-size: .84rem; line-height: 1.5; color: var(--text-still);
 }
 .fest-punkte { display: grid; gap: 9px; }
 
+/* ---------- Das Merkzeichen ----------------------------------------------
+
+   Der Wunsch war ein Zeichen, "so dass die sehen, da ist was". Drei
+   Entscheidungen stecken darin, und keine ist Geschmack:
+
+   FORM. Eine Raute. Alles andere auf dem Bildschirm ist rund oder eckig;
+   eine Spitze nach oben gibt es sonst nirgends. Das Auge findet sie
+   zwischen zwanzig Kacheln, ohne dass jemand hinsehen muss.
+
+   FARBE. Immer Bernstein, nie die Farbe der Kachel darunter. Ein Zeichen,
+   das die Farbe wechselt, muss gelesen werden; eines, das immer gleich
+   aussieht, wird erkannt. Rot wäre falsch: "verbessern" ist ein Auftrag,
+   kein Fehler -- und eine Seite voller roter Zeichen liest niemand mehr.
+
+   BEWEGUNG. Ein sehr langsames Atmen des Scheins (3,2 s), kein Blinken.
+   Bei "weniger Bewegung" bleibt der Schein stehen statt zu verschwinden --
+   sonst wäre das Zeichen genau für die Leute schwächer, die
+   Aufmerksamkeitsreize ohnehin schlechter verarbeiten. */
+.merk {
+  --merk-ton: #e8b45a;
+  position: relative;
+  /* Erzeugt einen eigenen Stapelraum. Nur dadurch landet der Schein
+     (::before, z-index -1) ÜBER dem eigenen Hintergrund und UNTER dem
+     Zeichen. Ohne das rutscht er hinter den Hintergrund der Gruppenzeile
+     und ist schlicht weg -- ein Fehler, den man nicht sieht, weil das
+     Zeichen ja trotzdem da ist. */
+  isolation: isolate;
+  display: inline-flex; align-items: center; gap: 5px;
+  flex: none;
+  padding: 3px 7px 3px 4px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--merk-ton) 42%, transparent);
+  background: color-mix(in srgb, var(--merk-ton) 13%, transparent);
+  color: var(--merk-ton);
+  line-height: 1;
+}
+.merk__svg { width: 17px; height: 17px; flex: none; }
+.merk__flaeche {
+  fill: color-mix(in srgb, var(--merk-ton) 22%, transparent);
+  stroke: var(--merk-ton); stroke-width: 1.5; stroke-linejoin: round;
+}
+.merk__strich, .merk__punkt {
+  fill: none; stroke: var(--merk-ton);
+  stroke-width: 2.1; stroke-linecap: round;
+}
+.merk__n {
+  font-size: .76rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+/* Der Schein liegt HINTER dem Zeichen und ist unscharf -- er macht die
+   Stelle heller, ohne selbst als Form sichtbar zu werden. */
+.merk::before {
+  content: ''; position: absolute; inset: -5px;
+  border-radius: inherit;
+  background: radial-gradient(circle at 22% 50%,
+    color-mix(in srgb, var(--merk-ton) 40%, transparent), transparent 70%);
+  filter: blur(6px);
+  opacity: .5;
+  pointer-events: none;
+  z-index: -1;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .merk::before { animation: merk-atmen 3.2s ease-in-out infinite; }
+  @keyframes merk-atmen {
+    0%, 100% { opacity: .34; transform: scale(.94); }
+    50%      { opacity: .72; transform: scale(1.06); }
+  }
+}
+/* Im Kontrastmodus von Windows werden Farben ersetzt -- dann trägt das
+   Zeichen die Bedeutung allein über seine Form, und der Schein stört. */
+@media (forced-colors: active) {
+  .merk { border-color: CanvasText; color: CanvasText; }
+  .merk::before { display: none; }
+  .merk__flaeche, .merk__strich, .merk__punkt { stroke: CanvasText; }
+  .merk__flaeche { fill: none; }
+}
+
 /* ---------- Ein Punkt ---------------------------------------------------- */
 .fest-punkt {
   --p-ton: #6f89a8;
@@ -1924,6 +2087,12 @@ body.start #protokoll {
   display: flex; align-items: flex-start; justify-content: space-between;
   gap: 13px;
 }
+/* Zeichen und Wort stehen zusammen, nicht übereinander -- sonst wandert
+   die Marke bei markierten Punkten nach unten und die Liste wirkt, als
+   wären die Zeilen unterschiedlich hoch. */
+.fest-punkt__stufe {
+  display: flex; align-items: center; gap: 7px; flex: none;
+}
 .fest-punkt__text { min-width: 0; }
 .fest-punkt__titel {
   margin: 0 0 5px; font-size: .93rem; font-weight: 650; color: var(--text);
@@ -2006,9 +2175,14 @@ body.start #protokoll {
 @media (max-width: 560px) {
   .liste-fest__kopf { flex-direction: column; align-items: stretch; }
   .fest-punkt__kopf { flex-direction: column; }
-  .fest-punkt__marke-stufe { align-self: flex-start; }
+  .fest-punkt__stufe { align-self: flex-start; }
   .fest-punkt__fuss .schritt { margin-left: 0; }
   .stufe-knopf { flex: 1 1 auto; text-align: center; }
+  /* Auf einem schmalen Bildschirm bleibt vom Gruppenkopf nur wenig
+     Breite. Die reine Anzahl der Punkte ist dort das Erste, was gehen
+     darf -- das Merkzeichen ist das Letzte. */
+  .fest-gruppe__zahl { display: none; }
+  .fest-gruppe__name { min-width: 0; overflow-wrap: anywhere; }
 }
 
 /* Die neuen Klassen der festen Checkliste in der Mindestgroesse fuer
@@ -2019,5 +2193,35 @@ body.start #protokoll {
   body.start .fest-punkt__hookschild,
   body.start .fest-punkt__marke,
   body.start .fest-punkt__von,
+  body.start .merk__n,
   body.start .fest-gruppe__zahl { font-size: .75rem; }
 }
+
+/* ---------- Das Merkzeichen auf der Kachel -------------------------------
+
+   "und es soll auch oben in der Kachel angezeigt werden."
+
+   Oben rechts, INNERHALB der Kachel. Ein überhängendes Zeichen sähe
+   besser aus, wäre hier aber unsichtbar: `.kachel` trägt `overflow:
+   hidden` (für das angeschnittene Wasserzeichen), und alles, was über
+   den Rand ragt, wird abgeschnitten. Genau so eine Änderung sieht im
+   Quelltext richtig aus und ist auf dem Bildschirm weg.
+
+   Die Zahl der Kachel sitzt senkrecht mittig, das Merkzeichen oben --
+   sie kommen sich deshalb nicht ins Gehege. */
+.kachel__merk {
+  position: absolute; top: 9px; right: 11px;
+  z-index: 3;
+  padding: 2px 6px 2px 3px;
+  background: color-mix(in srgb, var(--merk-ton) 15%, var(--flaeche));
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
+}
+.kachel__merk .merk__svg { width: 16px; height: 16px; }
+/* Zahl und Pfeil sitzen sonst senkrecht mittig -- auf einer 78 Pixel
+   hohen Kachel stossen sie damit oben an das Merkzeichen. Sie ruecken
+   deshalb nach unten, sobald eines da ist. */
+.kachel[data-merk="ja"] .kachel__zahl,
+.kachel[data-merk="ja"] .kachel__pfeil { align-self: flex-end; }
+@media (max-width: 560px) {
+  .kachel__merk { right: 10px; }
+}