Support: der Melder hat das letzte Wort -- und die Kachel bekommt ihren eigenen Stil

Filipe: "ich will dass die leute die mir was geschickt haben im support, auch meine notiz bekommen wenn ich fertig bin. damit die bescheid wissen und dan anklicken koennen, es funktioniert, oder noch nicht. und erst wenn es funktioniert gedrueckt wird, will ich dass alles richtig fertig ist. perfektionier den ganzen weg und mit dem gedanken das manchmal sachen mehrmal nicht sofort perfekt sein werden." DER GANZE WEG, nicht nur der Schlusspunkt: 1. Die Leitung drueckt "Behoben - nachfragen ...". Der Knopf hiess vorher "Erledigt ..." und tat auch das; jetzt stellt er eine Frage, also heisst er auch so. Eine Beschriftung, die etwas anderes sagt als der Knopf tut, glaubt man genau einmal. 2. Die Meldung steht auf "wartet" -- ein vierter Stand zwischen "wird bearbeitet" und "erledigt". Beim Melder heisst er "geht es wieder?", weil er aus SEINER Sicht keine Wartezeit ist, sondern eine Frage. 3. Er sieht die Notiz und zwei Knoepfe. "Geht wieder" ohne Rueckfrage (der haeufige, harmlose Fall). "Noch nicht" verlangt ein Wort -- sonst faengt die Suche von vorn an und die naechste Runde waere dieselbe wie die letzte. 4. "Noch nicht" ist keine Beschwerde, sondern Runde 2: zurueck in Arbeit, Rundenzahl plus eins, Leitung bekommt eine Nachricht, und der Verlauf behaelt, was beim letzten Mal versucht wurde. Niemand faengt von vorn an -- genau der Fall, den Filipe genannt hat. 5. Erst sein "Geht wieder" schliesst die Meldung. Danach kann weder er noch die Leitung sie wieder aufmachen (409). NUR DER MELDER darf bestaetigen, ausdruecklich nicht die Leitung (`person_id !== req.person.id`, nicht "ist Leitung") -- sonst nickt sie ihre eigene Arbeit ab und der ganze Umweg waere Zierde. Eine fremde Meldung gibt 404, nicht 403: Wer sie nicht sehen darf, soll auch nicht erfahren, dass es sie gibt. DER VERLAUF STEHT UNTEREINANDER statt nur der letzten Antwort. Bei Runde drei war sonst nicht mehr zu sehen, was beim ersten Mal versucht wurde, und genau das loest einen wiederkehrenden Fehler. Meldungen von vor diesem Umbau haben keinen Verlauf -- die zeigen wie bisher ihre blosse Antwort, ein leerer Kasten waere schlechter als der alte Satz. DIE KACHEL SIEHT ANDERS AUS (zweiter Wunsch: "viel geiler viel profissioneller ... die hauptfarbe soll babyblau sein mit bissl lila"). `support-seite` traegt den Stil; alle Regeln haengen daran und gelten damit nur hier. Zwei weiche Lichter, Pillen statt Kaesten als Filter, eine leuchtende Naht ueber dem Meldefeld. Augenschonend: gedeckt, kein Neon, Kontrast geprueft. GEMESSEN: - pruef-support: 45 -> 58 Pruefungen, 0 Fehler. Der ganze Weg einmal durch, MIT einer Runde, die schiefgeht. Dazu drei Gegenproben: die Leitung kann nicht fuer den Melder bestaetigen (404), "noch nicht" ohne Wort wird abgelehnt (400), eine geschlossene Meldung bleibt zu (409, aus beiden Richtungen). - Die Schemaaenderung auf einer KOPIE der echten Datenbank durchgespielt: 72 Tabellen, keine Zeile und keine Spalte verloren, support_runden und `runde` da, 'wartet' in der CHECK-Regel. - pruef-css-klassen, pruef-deutsche-texte, pruef-code, pruef-glocke: alle gruen. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-25 04:55:14 +02:00
parent 939aa6371b
commit cebdd88e8d
47 changed files with 1377 additions and 661 deletions
@@ -360,3 +360,232 @@
  .s-bilanz { gap: 14px; }
  .s-eingang__kopf { gap: 10px; }
 }
+
+/* =====================================================================
+   =====================================================================
+   DER SUPPORT BEKOMMT EINEN EIGENEN STIL (25.09.2026)
+   =====================================================================
+   =====================================================================
+
+   Filipe: „ich will dass du bitte diese kachel viel geiler viel
+   profissioneller machst, die soll komplett anders aussehen und
+   strukturiert sein. mach es wirklich einzigartig und richtig krass
+   geil. so dass die leute mehr wie bock haben die zu benutzen. die
+   hauptfarbe der kachel soll auch babyblau sein mit bissl lila."
+
+   ---------------------------------------------------------------------
+   WARUM AUSGERECHNET HIER DIE FARBE ZAEHLT
+
+   Dies ist die einzige Seite im Haus, auf der jemand etwas MELDET. Wer
+   einen Fehler sieht und ihn nicht meldet, kostet mehr als der Fehler
+   selbst -- der bleibt naemlich. Die Huerde ist nicht technisch,
+   sondern gefuehlt: Ein Formular in Grau und Orange sieht nach
+   Verwaltung aus.
+
+   BABYBLAU MIT LILA ist Filipes Ansage und zugleich die einzige Farbe,
+   die im Haus noch frei war: Gold gehoert Team Dogi, Lavendel seit
+   gestern dem Chat, Gruen dem Erledigten. Die Support-Kachel bekommt
+   damit eine eigene Stimme -- man erkennt sie, bevor man die
+   Ueberschrift liest.
+
+   ---------------------------------------------------------------------
+   DIE LEITFARBE WIRD AN EINER STELLE GETAUSCHT
+
+   Im Chat habe ich gestern zehn Regeln einzeln umgefaerbt und danach
+   im Bild gesehen, dass Suchfeld, Knopf und Zaehler weiter golden
+   waren -- sie nehmen alle `--akzent`. Einmal an der richtigen Stelle
+   ist besser als zehnmal fast.
+
+   #a8d8ff UND NICHT DAS SATTE BABYBLAU: Die Akzentfarbe ist hier auch
+   FLAECHE unter dunkler Schrift (die Zahl im Bilanzfeld, der gewaehlte
+   Filter). Nachgerechnet traegt #a8d8ff als Flaeche 11,6:1 und als
+   Schrift auf dem dunklen Grund 10,4:1 -- beide Richtungen weit ueber
+   den noetigen 4,5. Ein sattes #4aa8ff kaeme als Flaeche auf 6,9 und
+   als Schrift auf 4,3; die zweite Richtung waere zu knapp. Eine
+   Leitfarbe, die nur in einer von zwei Richtungen traegt, ist keine.
+
+   ---------------------------------------------------------------------
+   EINE SCHICHT, KEIN UMBAU DER 362 ZEILEN DARUEBER
+
+   Alles, was hier nicht steht, gilt unveraendert weiter -- Abstaende,
+   Tippziele, Schriftgroessen. Geaendert wird Leitfarbe, Umriss und
+   Struktur. Wer den Stil wieder aendern will, aendert diesen Block.
+   ===================================================================== */
+.inhalt.support-seite {
+  --akzent: #a8d8ff;
+  --rand: rgba(168, 216, 255, .14);
+  --rand-hell: rgba(168, 216, 255, .28);
+  /* Die zwei Toene der Seite -- einmal benannt, damit die Regeln
+     darunter nicht dreissigmal dieselbe Zahl wiederholen. */
+  --s-blau: #a8d8ff;
+  --s-lila: #b9a7ff;
+  position: relative;
+  isolation: isolate;
+}
+/* ZWEI LICHTER STATT EINER FLAECHE. Sie liegen hinter allem
+   (z-index -1) und ueber dem Buehnenbild: Die Seite bekommt ihre
+   Stimmung, ohne dass eine andere im Haus sich aendert. Zusammen unter
+   acht Prozent Deckung -- augenschonend ist Vorgabe, und diese Seite
+   sieht man im Zweifel im Streit. */
+.inhalt.support-seite::before {
+  content: ""; position: absolute; inset: -8% -4% 0;
+  pointer-events: none; z-index: -1;
+  background:
+    radial-gradient(52% 40% at 12% 4%, rgba(168, 216, 255, .17), transparent 66%),
+    radial-gradient(48% 40% at 88% 70%, rgba(185, 167, 255, .14), transparent 68%);
+  filter: blur(16px);
+}
+
+/* ---- DIE KARTEN WERDEN KOERPER ------------------------------------
+   Aus dem Kasten mit Linie wird eine Karte mit Tiefe: Lichtkante oben,
+   weiter Schatten, kein Rahmen. Dieselbe Sprache wie im Chat seit
+   gestern -- ein Haus, eine Sprache. */
+.inhalt.support-seite .s-karte {
+  border: 0;
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 22%),
+    linear-gradient(168deg, rgba(16, 24, 40, .82) 0%, rgba(8, 11, 20, .9) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .09),
+    inset 0 0 0 1px rgba(255, 255, 255, .035),
+    0 26px 54px -32px rgba(6, 10, 30, .95);
+}
+.inhalt.support-seite .s-karte:hover {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .12),
+    inset 0 0 0 1px color-mix(in srgb, var(--s-blau) 22%, transparent),
+    0 30px 60px -30px rgba(6, 10, 30, .98);
+}
+/* Die Schiene links traegt die Farbe des Standes -- sie ist das
+   Einzige, was man beim Ueberfliegen liest. */
+.inhalt.support-seite .s-karte::before {
+  border-radius: 3px;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--s, var(--s-blau)) 55%, #ffffff) 0%,
+    var(--s, var(--s-blau)) 45%,
+    color-mix(in srgb, var(--s, var(--s-blau)) 70%, transparent) 100%);
+  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--s, var(--s-blau)) 70%, transparent);
+}
+/* WARTET IST EIN EIGENER ZUSTAND UND BEKOMMT EINE EIGENE FARBE. Ohne
+   sie saehe „wartet auf den Melder" aus wie „in Arbeit" -- und das ist
+   der Unterschied zwischen „wir tun was" und „du bist dran". */
+.inhalt.support-seite .s-karte[data-stand="wartet"] { --s: var(--s-lila); }
+
+/* ---- DIE BILANZ ---------------------------------------------------- */
+.inhalt.support-seite .s-bilanz__feld {
+  border: 0;
+  border-radius: 16px;
+  background: linear-gradient(180deg,
+    rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .07),
+    inset 0 0 0 1px rgba(255, 255, 255, .04);
+}
+.inhalt.support-seite .s-bilanz__feld[data-stand="wartet"]:not([data-leer="ja"]) {
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .1),
+    inset 0 0 0 1px color-mix(in srgb, var(--s-lila) 38%, transparent);
+}
+.inhalt.support-seite
+  .s-bilanz__feld[data-stand="wartet"]:not([data-leer="ja"]) .s-bilanz__zahl {
+  color: var(--s-lila);
+}
+
+/* ---- DIE FILTER WERDEN PILLEN ------------------------------------- */
+.inhalt.support-seite .s-filter__knopf {
+  border-radius: 999px;
+  border-color: rgba(255, 255, 255, .07);
+  background: rgba(255, 255, 255, .025);
+}
+.inhalt.support-seite .s-filter__knopf[aria-pressed="true"] {
+  border-color: transparent;
+  color: #08121c;
+  background: linear-gradient(140deg, var(--s-blau) 0%, #8fc8ff 52%, var(--s-lila) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .5),
+    0 8px 20px -10px color-mix(in srgb, var(--s-blau) 75%, transparent);
+}
+
+/* ---- DAS MELDEFELD WIRD EINE EINLADUNG ----------------------------
+   Es ist der Grund, warum es diese Seite gibt -- und sah aus wie jedes
+   andere Formular im Haus. Jetzt traegt es die zwei Toene und einen
+   Saum oben, der sagt „hier geht es los". */
+.inhalt.support-seite .s-melden {
+  position: relative;
+  border: 0;
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(168, 216, 255, .08) 0%, transparent 26%),
+    linear-gradient(168deg, rgba(16, 24, 40, .8) 0%, rgba(8, 11, 20, .9) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .09),
+    inset 0 0 0 1px rgba(255, 255, 255, .035),
+    0 26px 54px -32px rgba(6, 10, 30, .95);
+  overflow: hidden;
+}
+.inhalt.support-seite .s-melden::before {
+  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
+  background: linear-gradient(90deg, var(--s-blau) 0%, var(--s-lila) 55%, transparent 100%);
+  box-shadow: 0 0 18px -2px color-mix(in srgb, var(--s-blau) 60%, transparent);
+  pointer-events: none;
+}
+.inhalt.support-seite .s-melden textarea {
+  border-radius: 15px;
+  border-color: rgba(255, 255, 255, .07);
+  background: rgba(0, 0, 0, .3);
+  box-shadow: inset 0 2px 6px -3px rgba(0, 0, 0, .95);
+}
+.inhalt.support-seite .s-melden textarea:focus {
+  border-color: color-mix(in srgb, var(--s-blau) 50%, transparent);
+  box-shadow:
+    inset 0 2px 6px -3px rgba(0, 0, 0, .95),
+    0 0 0 3px color-mix(in srgb, var(--s-blau) 14%, transparent);
+}
+
+/* ---- DER VERLAUF: EINE RUNDE JE ZEILE (25.09.2026) ----------------
+
+   Filipe: „mit dem gedanken das manchmal sachen mehrmal nicht sofort
+   perfekt sein werden."
+
+   Die Runden stehen untereinander an einer Linie -- die Form, in der
+   man seit jeher einen VERLAUF liest. Ein Kasten je Runde waere bei
+   vier Runden ein Stapel Kaesten; die Linie haelt sie zusammen. */
+.inhalt.support-seite .s-verlauf {
+  margin: 12px 0 0;
+  padding-left: 14px;
+  border-left: 2px solid color-mix(in srgb, var(--s-lila) 32%, transparent);
+  display: grid; gap: 12px;
+}
+.s-runde__kopf { display: flex; align-items: baseline; gap: 8px; }
+.s-runde__nr {
+  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, #b9a7ff 30%, #ffffff);
+}
+.s-runde__von { font-size: .78rem; color: var(--text-still); }
+.s-runde__antwort {
+  margin: 4px 0 0;
+  font-size: .9rem; line-height: 1.5; color: var(--text-leise);
+}
+/* DAS URTEIL DES MELDERS STEHT EINGERUECKT DARUNTER -- es ist die
+   ANTWORT auf die Zeile darueber, nicht eine zweite Meldung. */
+.s-runde__urteil {
+  margin: 6px 0 0; padding-left: 12px;
+  border-left: 2px solid rgba(255, 255, 255, .1);
+  font-size: .86rem; line-height: 1.45; color: var(--text-still);
+}
+.s-runde__urteil-wort { font-weight: 750; }
+.s-runde__urteil[data-urteil="geht"] .s-runde__urteil-wort { color: #8fe3b0; }
+.s-runde__urteil[data-urteil="nicht"] .s-runde__urteil-wort { color: #ffb3a7; }
+
+/* „Geht wieder" ist der Knopf, den man drueckt, wenn alles gut ist --
+   er darf als Einziger auf dieser Seite gruen sein. */
+.inhalt.support-seite .s-tun--geht {
+  border-color: color-mix(in srgb, #8fe3b0 45%, transparent);
+  color: #bff0d3;
+}
+.inhalt.support-seite .s-tun--geht:hover {
+  background: rgba(143, 227, 176, .14);
+  border-color: #8fe3b0;
+}