Fertige Vorlagen zum Uebernehmen - Content-Ideen und LIVE-Punkte

Der Wunsch stand an fuenf Stellen gleichlautend: "ich will dass da schon
fertige Sachen stehen". Eine leere Seite mit einem Knopf "Neuer Eintrag"
verlangt vom Creator genau das, was er noch nicht kann -- zu wissen, was
ueberhaupt hineingehoert.

WARUM VORLAGEN UND KEINE VORAUSGEFUELLTEN DATEN. Man koennte beim
Anlegen eines Creators dreissig Eintraege in seine Datenbank schreiben.
Das waere falsch: Sie waeren ab dem ersten Tag "seine" Eintraege und
damit Altlast; aendert Filipe spaeter eine Formulierung, gilt sie nur
fuer neue Creator; und die Liste saehe voll aus, obwohl noch nichts
geschehen ist -- das Gegenteil einer ehrlichen Uebersicht.

Vorlagen bleiben deshalb VORSCHLAEGE, bis jemand sie uebernimmt. Sie
stehen im Code, gelten fuer alle sofort, und werden erst dann zu Daten,
wenn sie gebraucht werden. Was uebernommen ist, ist ein ganz normaler
Eintrag -- aenderbar, loeschbar, und von spaeteren Aenderungen an der
Vorlage unberuehrt.

INHALTE, fachlich begruendet:
  13 Content-Ideen, jede mit AUSFORMULIERTEM Aufhaenger und Format. Die
  ersten ein bis drei Sekunden entscheiden ueber die Verbreitung --
  "mach was Persoenliches" hilft niemandem, "Das haette ich am Anfang
  gern gewusst" kann man sagen. Verteilt nach 70/20/10 (Wert, Community,
  Eigenwerbung).

  21 LIVE-Punkte in drei Abschnitten. Der mittlere ist der wichtigste
  und gibt es sonst nirgends: Was WAEHREND der Sendung auffaellt, ist am
  naechsten Tag weg. Diese Punkte sind so formuliert, dass man sie in
  einem Moment anklicken kann, in dem man eigentlich keine Zeit hat.

  Die Vorbereitung ist die laengste Liste, weil ein LIVE dort steht und
  faellt. Ton zuerst -- der Grund Nummer eins, warum Leute wieder gehen.

"ICH BRAUCHE HILFE" wird eine AUFGABE, keine Nachricht. Eine Nachricht
ist gelesen und dann weg; eine Aufgabe bleibt stehen, bis sie jemand
erledigt, geht an den zustaendigen Betreuer (ohne Betreuer an die
Leitung -- eine Bitte um Hilfe darf nicht ins Leere laufen), traegt hohe
Prioritaet und eine Frist von drei Tagen. Ohne Frist bleibt sie liegen;
das ist der Unterschied zwischen einer Aufgabe und einem Zettel.

"CONTENT-PLANUNG" HEISST JETZT "CONTENT-IDEEN". "Planung" klang nach
Terminen und Tabellen; was dort wirklich passiert, ist das Sammeln und
Weiterentwickeln von Ideen. Der Kalender daneben plant.

EIN CREATOR DARF SEINE EIGENEN EINTRAEGE AENDERN -- aber nur im Bereich
Content. Wenn er sich eine Idee uebernimmt, ist das SEINE Idee; sie
danach nicht umbenennen zu duerfen waere absurd. LIVE, Technik,
Community und Schutz bleiben die Betreuungsakte, dort aendert er nichts.
Ein erster Anlauf hatte die Ausnahme fuer alle Bereiche erlaubt -- die
Pruefung pruef-bereiche-lesend hat das sofort gemeldet.

DREI EIGENE FEHLER, VON DEN PRUEFUNGEN GEFUNDEN:
- Der Vorlagenblock vergass nach dem Uebernehmen, was schon geholt war:
  Die Liste wird neu geladen, der Block neu gebaut, und die Markierung
  am Element war jedes Mal weg. Jetzt merkt sich das Modul die Auswahl.
- Die Regel fuer eigene Eintraege war zu breit (siehe oben).
- Die Marken im Vorlagenblock waren auf dem Handy 10,2 px klein.

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

workspace/assets/css/content.css

@@ -313,3 +313,119 @@ body.start {
 .spalte__mehr:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
 .spalte__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
 @media (prefers-reduced-motion: reduce) { .spalte__mehr { transition: none; } }
+
+/* =====================================================================
+   VORLAGEN — fertige Vorschlaege zum Uebernehmen
+
+   Sie sehen bewusst ANDERS aus als eigene Eintraege: heller Rand,
+   gestrichelte Kante, keine Statusfarbe. Man soll auf den ersten Blick
+   sehen, dass hier noch nichts "gehoert" -- es sind Angebote, keine
+   Arbeit. Sobald einer uebernommen ist, wird die Karte ruhig und traegt
+   einen Haken.
+   ===================================================================== */
+
+.vorlagen { margin: 22px 0 28px; }
+.vorlagen__kopf {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+.vorlagen__unter {
+  margin: 4px 0 0;
+  font-size: .86rem; color: var(--text-leise);
+}
+.vorlagen__raster {
+  display: grid; gap: 11px;
+  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
+}
+.vorlagen__raster[hidden] { display: none; }
+
+.vorlage {
+  position: relative;
+  padding: 15px 16px 13px;
+  border: 1px dashed color-mix(in srgb, var(--ton, var(--akzent)) 30%, var(--rand));
+  border-radius: var(--radius-klein);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--ton, var(--akzent)) 6%, transparent), transparent 55%),
+    var(--flaeche);
+  transition: border-color .18s ease;
+}
+.vorlage:hover { border-color: color-mix(in srgb, var(--ton, var(--akzent)) 50%, var(--rand)); }
+/* Uebernommen: durchgezogene Kante statt gestrichelter -- aus einem
+   Angebot ist etwas Wirkliches geworden. */
+.vorlage[data-genommen="ja"] {
+  border-style: solid;
+  border-color: rgba(80, 167, 130, .4);
+  opacity: .72;
+}
+.vorlage[data-genommen="ja"]::after {
+  content: "✓";
+  position: absolute; top: 12px; right: 14px;
+  color: #6fbd95; font-weight: 700;
+}
+.vorlage__titel {
+  margin: 0 0 8px;
+  font-size: .96rem; font-weight: 650; line-height: 1.3; color: var(--text);
+}
+/* Der Aufhaenger ist der wichtigste Teil einer Content-Idee -- die
+   ersten ein bis drei Sekunden entscheiden ueber die Verbreitung.
+   Deshalb steht er hervorgehoben und nicht im Fliesstext. */
+.vorlage__hook {
+  margin: 0 0 9px; padding: 9px 11px;
+  border-left: 2px solid var(--ton, var(--akzent));
+  border-radius: 0 6px 6px 0;
+  background: color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent);
+  font-size: .88rem; line-height: 1.5; color: var(--text);
+}
+.vorlage__hookschild {
+  display: block; margin-bottom: 3px;
+  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
+  color: var(--ton, var(--akzent));
+}
+.vorlage__text {
+  margin: 0 0 12px;
+  font-size: .85rem; line-height: 1.55; color: var(--text-leise);
+}
+.vorlage__fuss { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
+.vorlage__marke {
+  padding: 2px 9px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  font-size: .7rem; color: var(--text-still);
+}
+.vorlage__marke--saeule {
+  border-color: color-mix(in srgb, var(--ton, var(--akzent)) 32%, transparent);
+  color: var(--ton, var(--akzent));
+}
+.vorlage__marke--hilfe { border-color: rgba(216, 161, 58, .34); color: #d8a13a; }
+.vorlage__fuss .schritt { margin-left: auto; }
+
+.vorlagen__alle {
+  grid-column: 1 / -1;
+  display: flex; justify-content: center;
+  padding-top: 4px;
+}
+
+/* Der Hilfe-Knopf ist bewusst auffaelliger als die uebrigen: Wer ihn
+   braucht, soll ihn finden, ohne zu suchen. */
+.schritt--hilfe {
+  border-color: rgba(216, 161, 58, .4);
+  color: #e0b45c;
+}
+.schritt--hilfe[data-fertig="ja"] {
+  border-color: rgba(80, 167, 130, .45);
+  color: #6fbd95;
+}
+
+@media (max-width: 560px) {
+  .vorlagen__kopf { flex-direction: column; align-items: stretch; }
+  .vorlagen__kopf .knopf { width: 100%; }
+}
+
+/* Auf dem Handy sind die kleinen Marken im Vorlagenblock zu klein --
+   gemeldet von der Geraetepruefung (10,24 px beim Aufhaenger-Schild,
+   11,2 px bei Format und Saeule). body.start davor, weil content.css
+   NACH start.css geladen wird und dort dieselbe Regel steht. */
+@media (max-width: 760px) {
+  body.start .vorlage__hookschild { font-size: .72rem; }
+  body.start .vorlage__marke { font-size: .75rem; }
+}