Community: Starthilfe beim Schreiben -- und vier Funde aus den Bildern

Filipe: "perfektioniere jede einzelne kategorie der community ... ich
will auch dass du fertige und beispiele machst fuer die community
damit die auch start hilfe haben ueberall."

STARTHILFE: Wer zum ersten Mal schreibt, steht vor einem leeren Feld
-- der haeufigste Grund, warum ein Brett still bleibt, obwohl viele
mitlesen. Im Formular stehen jetzt Beispiele: ein Klick fuellt Art,
Ueberschrift und Text. Auf treff, wunsch, highlight und mitmachen --
nicht auf anschlag, ansteht, regeln, denn dort schreibt die Community
nicht, und ein Angebot fuer eine verschlossene Tuer ist keins.

JEDE VORLAGE HAT LUECKEN. Eine, die man absenden KANN, wird
abgesendet; dann steht dort zehnmal derselbe Satz, und der elfte
Mensch merkt, dass hier niemand wirklich schreibt. Die Pruefung misst
das: keine Vorlage ohne "…".

NICHT ZU VERWECHSELN MIT DEM STARTKATALOG. Der ist fuers Team (fertige
Beitraege zum Uebernehmen), das hier fuer die Mitglieder.

--- Vier Funde, drei davon nur aus dem Bild -------------------------

1. ZWEI KNOPFREIHEN MIT DENSELBEN WOERTERN. Auf "Regeln & Hilfe"
   standen "Regel · Haeufige Frage · Hilfe · Was passiert, wenn"
   zweimal untereinander -- die eine filterte, die andere sprang zur
   Ueberschrift, und beide sahen gleich aus. Wo nach Art gegliedert
   wird, entfaellt jetzt der Filter; die Sprungmarken sind Links
   geworden, mit "Springe zu" davor und der Anzahl dahinter.

2. "MELDEN" UNTER JEDER REGEL. Siebzehn Melden-Knoepfe unter Texten
   des Teams -- man meldet keine Regel. Steht jetzt nur noch an
   Beitraegen von Mitgliedern. Die Gegenprobe im Messwerkzeug legt
   dafuer eigens einen Beitrag eines zweiten Mitglieds an: Ohne ihn
   saehe ein abgeschaffter Meldeweg genauso aus wie ein
   funktionierender.

3. DER HINWEIS LAG AUF DER NAECHSTEN BESCHRIFTUNG. Auf 412 px stand
   "Gehoert allen hier - wer Der Treff sieht ..." quer ueber
   "UEBERSCHRIFT". Der Hinweis haengt absolut unter dem Feld, und
   darunter sind 30 px Luft -- genug fuer EINE Zeile. Unter 560 px
   steht ohnehin nur ein Feld je Zeile; dort gibt es nichts
   auszurichten, und er darf einfach im Fluss stehen.

4. UND MEIN EIGENER FEHLER, der alles unsichtbar machte: `vorlagen`
   gab es hier schon -- als Checkliste fuer Creator, mit demselben
   Behaelter `#vorlagen`. Die spaetere Funktionsdeklaration gewinnt,
   zwei Elemente trugen dieselbe Kennung, und die Starthilfe erschien
   NIE. Keine Fehlermeldung, keine rote Pruefung, nichts in der
   Konsole. Gefunden nur durch einen Blick auf das Bild.
   Deshalb prueft pruef-vorlagen jetzt im Browser mit, dass keine
   Kennung doppelt vorkommt -- derselbe Fehler wie am 17.09. mit
   `.teilen`, und beim naechsten Mal soll ihn nicht der Zufall finden.

Nebenbei messbar: "Regeln & Hilfe" ist von 4569 auf 3623 px
geschrumpft, die Karten sind 54 px niedriger.

Geprueft: pruef-vorlagen (neu, 24), pruef-video unveraendert 67.
Gegenproben: unbekannte Art -> rot; Vorlage ohne Luecke -> rot.

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

workspace/assets/css/bereich.css

@@ -1065,20 +1065,51 @@
 
 /* Die Sprungmarken — der Unterschied zwischen einem Dokument und einer
    langen Seite. */
+/* WARUM DAS HIER KEINE PILLEN MEHR SIND (18.09.2026).
+
+   Sie sahen aus wie die Filterknöpfe darüber: gleiche Form, gleiche
+   Größe, gleiche Wörter. Auf „Regeln & Hilfe" standen damit zwei
+   identisch wirkende Reihen untereinander, von denen die eine filterte
+   und die andere sprang. Niemand kann das erraten.
+
+   Jetzt sind es Links, und sie sehen aus wie Links: unterstrichen,
+   ohne Rahmen, mit „Springe zu" davor und der Anzahl dahinter. Die
+   Filterreihe entfällt auf diesen Brettern ganz. */
 .brettmarken {
-  display: flex; flex-wrap: wrap; gap: 6px;
+  display: flex; flex-wrap: wrap; gap: 4px 14px;
+  align-items: baseline;
   margin: 0 0 18px; padding-bottom: 14px;
   border-bottom: 1px solid var(--rand);
 }
-.brettmarken__weg {
-  padding: 5px 12px; border-radius: 999px;
-  font-size: .8rem; font-weight: 600; text-decoration: none;
-  color: var(--text-leise);
-  border: 1px solid var(--rand-hell);
-  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
+.brettmarken__wort {
+  font-size: .78rem;
+  color: var(--text-still);
+  margin-inline-end: 2px;
 }
-.brettmarken__weg:hover {
-  color: var(--text); background: rgba(255, 255, 255, .04);
+.brettmarken__weg {
+  display: inline-flex; align-items: baseline; gap: 5px;
+  font-size: .84rem; font-weight: 600;
+  color: var(--text-leise);
+  text-decoration: underline;
+  text-decoration-color: var(--rand-hell);
+  text-underline-offset: 3px;
+  /* Die Fläche zum Tippen bleibt groß genug, obwohl nichts umrandet
+     ist -- sonst trifft man auf dem Handy den Nachbarn. */
+  padding: 6px 2px;
+  transition: color var(--tempo), text-decoration-color var(--tempo);
+}
+.brettmarken__weg:hover,
+.brettmarken__weg:focus-visible {
+  color: var(--text);
+  text-decoration-color: currentColor;
+}
+/* Die Anzahl sagt, ob sich der Sprung lohnt -- und dass hier nicht
+   gefiltert wird. */
+.brettmarken__zahl {
+  font-size: .72rem; font-weight: 700;
+  color: var(--text-still);
+  padding: 1px 6px; border-radius: 999px;
+  background: rgba(255, 255, 255, .06);
 }
 
 /* Die Abschnittsüberschrift. scroll-margin, damit die Überschrift beim
@@ -1433,3 +1464,43 @@
   color: #9fb3c9;
   font-size: .84rem;
 }
+
+/* ---- STARTHILFE BEIM SCHREIBEN (18.09.2026) -----------------------
+   Ein leeres Feld ist der häufigste Grund, warum ein Brett still
+   bleibt, obwohl viele mitlesen. Die Zeile steht ganz oben im
+   Formular — vor Art und Datum, weil sie beides mit ausfüllt.
+
+   Gedämpft gehalten: Es ist ein Angebot, keine Aufforderung. Wer weiß,
+   was er schreiben will, soll daran vorbeilesen können. */
+.starthilfe {
+  margin: 0 0 16px;
+  padding: 12px 14px;
+  border: 1px dashed var(--rand-hell);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, .02);
+}
+.starthilfe__wort {
+  margin: 0 0 9px;
+  font-size: .84rem;
+  color: var(--text-leise);
+}
+.starthilfe__reihe {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.starthilfe__beispiel {
+  min-height: 38px;
+  padding: 7px 13px;
+  border: 1px solid var(--rand-hell);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--tinte) 86%, #ffffff 14%);
+  color: var(--text);
+  font: inherit;
+  font-size: .82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color var(--tempo), background var(--tempo);
+}
+.starthilfe__beispiel:hover { border-color: var(--akzent); }
+.starthilfe__beispiel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }