/* ============================================================================ * tc-resonanz — Die Antwort auf ein Werk (01.09.2026) * ---------------------------------------------------------------------------- * Konzept: readmes/WERKSTATT-KONZEPT.md §5/Baustein B · Taskwerk #503 * Renderer: js/ui/resonanz.js (TC.Resonanz.html) * Demonstriert in: library-community.html * * Drei feste Gesten plus die Sprechblase, in einer Zeile, tippbar — an * jedem Ort, an dem ein Foto gezeigt wird. Setzt tc-like-button NICHT * zusammen, sondern loest es an diesen Stellen ab: Ein Like-Button ist * EIN Zustand, hier stehen drei nebeneinander, von denen hoechstens einer * aktiv sein kann. Das ist naeher an einer Radiogruppe als an einem * Toggle, und die Abstaende sind das Eigentliche daran. * * Struktur: *
* … * *
* * ⚠️ KEINE DATENFARBEN (CLAUDE.md §9). Die drei Gesten unterscheiden sich * durch ihr Zeichen, nicht durch ihre Farbe — sie bedeuten nichts ueber * die Daten, sie sind drei Arten, dasselbe zu sagen. Drei eigene Farben * waeren Stimmung, die sich als Bedeutung ausgibt. * ========================================================================== */ .tc-resonanz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-1); } .tc-resonanz__geste { display: inline-flex; align-items: center; gap: var(--tc-space-1); /* ⚠️ MIN-HEIGHT 36px, NICHT PADDING ALLEIN (Heuristik 5). Der Knopf ist mit einem einstelligen Zaehler sonst 28px hoch — und genau so sind im Projekt 58 quadratische Knopf-Regeln entstanden, von denen ueber die Haelfte unter dem Touch-Target lag. */ min-height: 36px; padding: var(--tc-space-1) var(--tc-space-2); background: transparent; border: 1px solid transparent; border-radius: var(--tc-radius-full); color: var(--tc-text-muted); font-size: var(--tc-text-sm); font-weight: var(--tc-weight-semibold); font-family: inherit; line-height: 1; cursor: pointer; transition: background var(--tc-motion-fast), border-color var(--tc-motion-fast), color var(--tc-motion-fast), transform var(--tc-motion-fast); } /* Eine Geste, die noch niemand benutzt hat, bleibt blass — aber sichtbar. Wer nicht sieht, dass es sie gibt, benutzt sie nie. */ .tc-resonanz__geste.ist-leer { opacity: 0.55; } .tc-resonanz__geste:hover, .tc-resonanz__geste:focus-visible { background: var(--tc-bg-surface-1); border-color: var(--tc-border-default); color: var(--tc-text-default); opacity: 1; } /* ⚠️ NUR AM KNOPF. Ohne `button` traf das Einknicken auch ein gesperrtes — die Geste am eigenen Werk gab also eine Druckrueckmeldung und tat nichts. Das ist Tims Frage woertlich („oder es passiert nichts, wenn ich es tue?"): Sie ANTWORTET auf den Druck, deshalb haelt man sie fuer einen Knopf, der klemmt, statt fuer eine Anzeige. */ button.tc-resonanz__geste:active { transform: scale(0.94); } /* ⚠️ DER AKTIVE ZUSTAND TRAEGT `--tc-highlight`, NICHT `--tc-secondary-light`. Im Browser gemessen (01.09.2026): Mit `secondary-light` liegt der Kontrast auf der eigenen getoenten Flaeche bei 1,89–2,75 — WCAG AA verlangt 4,5. Ausgerechnet der AKTIVE Zustand waere damit schlechter lesbar gewesen als der inaktive (6,5), und er ist der wichtigere: Er sagt „du hast reagiert". Mit `--tc-highlight`: 6,4–9,33 auf allen vier Flaechen. Die Zugehoerigkeit zeigen Rand und Flaeche — dieselbe Linie wie bei der Accent-Regel in §9 („Zugehoerigkeit zeigen Rand, Flaeche und Schein"). ⚠️ `tc-like-button` HAT DENSELBEN FEHLER (is-liked → secondary-light) und traegt ihn seit dem 03.07.2026. Er wird hier nicht nebenbei mitgeaendert: Der Knopf steht noch an anderen Stellen, und ein Farbwechsel dort gehoert hinter eine Abnahme. Vermerkt als eigener Befund. */ .tc-resonanz__geste.is-aktiv { background: rgba(var(--tc-secondary-rgb), 0.16); border-color: var(--tc-secondary); color: var(--tc-highlight); opacity: 1; } .tc-resonanz__icon { font-size: 1rem; line-height: 1; /* Das Zeichen traegt die Bedeutung — es bekommt beim Setzen den Impuls, nicht der ganze Knopf. */ display: inline-block; } .tc-resonanz__zahl { font-variant-numeric: tabular-nums; color: var(--tc-text-default); } .tc-resonanz__geste.is-aktiv .tc-resonanz__zahl { color: var(--tc-highlight); } .tc-resonanz__wort { white-space: nowrap; } /* Kompakt: auf Kacheln zaehlt jeder Millimeter, und der Zusammenhang („was ist das hier?") steht ohnehin daneben. */ .tc-resonanz--kompakt { gap: 0; } .tc-resonanz--kompakt .tc-resonanz__geste { padding: var(--tc-space-1); } /* Die Sprechblase steht etwas ab: Sie ist keine vierte Geste, sondern der Weg ins Gespraech. */ .tc-resonanz__geste--reden { margin-left: auto; } .tc-resonanz--kompakt .tc-resonanz__geste--reden { margin-left: var(--tc-space-1); } /* ---------------------------------------------------------------------------- * DIE ZUSAMMENFASSUNG — ein Stapel zeigt, was da ist, ohne Bedienung * ---------------------------------------------------------------------------- * Auf der Kachel eines Batch-Uploads (Foto 1 von N) waeren vier Knoepfe zwei * Fehler auf einmal: Sie traefen nur das erste Bild, und sie brechen bei * 375 px in einem dreispaltigen Raster um. Die Summe ist eine Auskunft, kein * Bedienelement — gereagiert wird im Betrachter. * -------------------------------------------------------------------------- */ .tc-resonanz--summe { padding: var(--tc-space-1) var(--tc-space-3); /* ⚠️ Nicht die 36/44px der Gesten: Hier steht kein Ziel, das getroffen werden muss. Die Zeile soll so wenig Platz nehmen wie moeglich — auf einer 115px-Kachel ist jeder Millimeter der Notiz mehr wert. */ min-height: 0; color: var(--tc-text-muted); font-size: var(--tc-text-xs); font-weight: var(--tc-weight-semibold); cursor: inherit; } .tc-resonanz--summe .tc-resonanz__icon { font-size: 0.9rem; } .tc-resonanz--summe .tc-resonanz__zahl { margin-left: 3px; } .tc-resonanz__trenner { opacity: 0.45; margin: 0 var(--tc-space-1); } /* Ein Span statt eines Buttons (nurLesen) ist kein Bedienelement. */ span.tc-resonanz__geste { cursor: default; } /* ⚠️ UND KEIN HOVER-ECHO (02.09.2026). Die Regel oben setzt nur den Cursor — der Hover-Hintergrund von `.tc-resonanz__geste:hover` traf auch ein und liess es weiter wie einen Knopf aussehen. Wer darauf zeigt, bekommt sonst eine Rueckmeldung fuer etwas, das nicht passiert. */ span.tc-resonanz__geste:hover, span.tc-resonanz__geste:focus-visible { /* ⚠️ ALLE VIER ZURUECKNEHMEN. Der Hover-Zustand setzt background, border-color, color UND opacity; hier standen nur die ersten zwei. Die Geste wurde beim Zeigen also weiterhin heller und farbiger — also genau das, was ein Knopf tut. Zwei von vier zurueckzunehmen sieht im Quelltext nach Vollstaendigkeit aus und ist keine. */ background: none; border-color: transparent; color: inherit; opacity: inherit; } /* Das eigene Werk: sichtbar, aber ausdruecklich nicht zum Antippen (#540 — „wieso kann ich auf meine eigenen Bilder reacten?"). Die Zahlen bleiben voll lesbar, nur die Einladung faellt weg. */ /* ⚠️ AM EIGENEN WERK IST DIE GESTE KEIN KNOPF — und das muss man SEHEN (02.09.2026). `opacity: 0.7` war der einzige Unterschied, dazu ein `title`, den es auf dem Telefon nicht gibt. Vier Symbole mit Wort und Zahl lesen sich als vier Knoepfe; wer sie drueckt und nichts erlebt, haelt die Seite fuer kaputt. Jetzt: deutlich zurueckgenommen, ohne Zeigefinger-Cursor, und mit einem Satz daneben (tc-resonanz__eigen). */ .tc-resonanz__geste.ist-eigen { opacity: 0.55; cursor: default; } /* Der Satz, der die Frage beantwortet. Er steht am Ende der Zeile und bricht bei Bedarf um — er ist die Erklaerung, nicht die Hauptsache. */ .tc-resonanz__eigen { font-size: var(--tc-text-xs); color: var(--tc-text-muted); font-style: italic; align-self: center; } /* ---------------------------------------------------------------------------- * DER POKAL — die einzige Geste, die etwas kostet (01.09.2026) * * ⚠️ HIER IST DIE FARBE AUSNAHMSWEISE EINE AUSSAGE UEBER DIE DATEN und * damit nach CLAUDE.md §9 hart erlaubt: Gold heisst „das hat jemand 100 * Schattengold gekostet". Die vier Gesten unterscheiden sich bewusst NICHT * durch Farbe — sie sind vier Arten, dasselbe zu sagen. Der Pokal ist eine * andere Kategorie, und das muss man sehen, ohne den Text zu lesen. * Der Farbwert ist deshalb nicht `--tc-highlight` (das waere Theme-Stimmung), * sondern echtes Medaillengold — dieselbe Sorte Datenfarbe wie die * Rangabzeichen in der Rangliste. * -------------------------------------------------------------------------- */ .tc-resonanz__geste--pokal { color: #d4af37; } button.tc-resonanz__geste--pokal:hover, button.tc-resonanz__geste--pokal:focus-visible { background: rgba(212, 175, 55, 0.14); border-color: #d4af37; color: #e8c766; } .tc-resonanz__geste--pokal .tc-resonanz__zahl { color: #d4af37; } .tc-resonanz__geste--pokal.is-aktiv, .tc-resonanz__geste--pokal.is-aktiv .tc-resonanz__zahl { color: #e8c766; } .tc-resonanz__geste--pokal.is-aktiv { background: rgba(212, 175, 55, 0.16); border-color: #d4af37; } /* Ein Pokal, den es gibt, ist nie blass — er hat jemanden etwas gekostet. */ .tc-resonanz__geste--pokal { opacity: 1; } /* ---------------------------------------------------------------------------- * DER IMPULS BEIM SETZEN * ⚠️ `like-button.css` hatte 38 Zeilen und NULL Keyframes — und ein Like ist * die einzige Rueckmeldung, die ein Maler fuer seine Arbeit bekommt * (Taskwerk #418). Der Impuls ist kurz und laeuft genau einmal: Er * bestaetigt eine Handlung, er zieht keine Aufmerksamkeit auf sich. * -------------------------------------------------------------------------- */ @keyframes tc-resonanz-puls { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(0.94); } 100% { transform: scale(1); } } .tc-resonanz__geste.is-aktiv .tc-resonanz__icon { animation: tc-resonanz-puls 380ms cubic-bezier(0.34, 1.56, 0.64, 1) 1; } /* ⚠️ NICHT `animation: none` (CLAUDE.md §9): Dabei faellt auch der Endzustand weg. Hier waere das folgenlos (der Endzustand ist scale(1)), aber die Vorlage gilt einheitlich — und `iteration-count: 1` verhindert, dass eine spaeter ergaenzte Endlosanimation nur schneller weiterlaeuft. */ @media (prefers-reduced-motion: reduce) { .tc-resonanz__geste { transition: none; } .tc-resonanz__geste:active { transform: none; } .tc-resonanz__geste.is-aktiv .tc-resonanz__icon { animation-duration: 0.01ms; animation-iteration-count: 1; animation-delay: -1ms; } } /* Am Tablet werden die Trefferflaechen groesser — in BEIDE Richtungen. Nur die Hoehe zu ziehen macht aus dem Quadrat ein Rechteck, genau dort, wo man es am wenigsten sieht. */ @media (pointer: coarse) { .tc-resonanz__geste { min-height: 44px; padding: var(--tc-space-2) var(--tc-space-3); } /* ⚠️ AUF DER KACHEL WAECHST NUR DIE HOEHE, NICHT DIE BREITE (01.09.2026, bei 375 px gemessen). Vier Knoepfe mit je 44 px Breite brauchen 176 px — eine Galeriekachel ist auf dem Handy aber nur 171 px breit, und die Zeile brach in zwei um: 88 px Resonanz unter einem 171-px-Bild. Das Touch-Target haengt hier an der HOEHE: Ein Pill mit Icon und Zahl ist ohnehin mindestens 32 px breit, und ein 32x44-Ziel trifft man mit dem Daumen sicher. Der Merksatz aus §7k („die Breite muss mit") gilt fuer QUADRATISCHE Icon-Knoepfe, die sonst zu Rechtecken werden — dieser ist von Haus aus ein Rechteck. Gemessen nach der Aenderung: eine Zeile, 44 px, kein Ueberlauf. */ /* ⚠️ SEIT DER VIERTEN GESTE (01.09.2026, Tims „Erstaunen") IST DIE RECHNUNG KNAPPER. Bei 375 px bietet die Zeile auf einer Galeriekachel 169 px. Gemessen: leere Kachel, 4 Gesten ohne Zahlen ......... 120 px einzeilig zwei Gesten belegt, keine Kommentare ....... 139 px einzeilig alle vier belegt + Kommentare .............. 198 px ZWEI Zeilen Der letzte Fall bricht um, und das ist die richtige Antwort: Um ihn einzeilig zu halten, müssten die Knöpfe auf gut 30 px Breite — bei fünf nebeneinander liegenden Zielen ist das nicht mehr sicher zu treffen. Zwei Reihen à 44 px sind bedienbar, ein 30-px-Ziel ist es nicht. Er tritt ohnehin nur bei Fotos auf, die viel Beachtung finden — also bei Erfolg. Live gemessen am 01.09.2026: kein einziges Foto hat mehr als EINE Geste belegt (alle 24 sind migrierte Likes). Weder Überlauf noch horizontales Scrollen entstehen dabei. */ .tc-resonanz--kompakt .tc-resonanz__geste { padding: var(--tc-space-2) 4px; gap: 2px; } /* ⚠️ UND DER ABSTAND VOR DER SPRECHBLASE FAELLT WEG. Nachgemessen bei 375 px: Die vier Knoepfe brauchten 166,5 px, die Zeile bot 169 — mit den 4 px Abstand waren es 170,5, und an genau ANDERTHALB PIXELN brach die Zeile um. Auf einer 171-px-Kachel ist die Trennung „Gesten hier, Gespraech dort" ein Luxus, den der Platz nicht hergibt; im vollen Layout bleibt sie. */ .tc-resonanz--kompakt .tc-resonanz__geste--reden { margin-left: 0; } }