Kampagnen-Kachel aus einem TikTok-Link -- Etappe 2 bis 4

Der Auftrag ist damit fertig: Im Agentur-Bereich gibt es ein Feld, in
das die ganze Einladungsnachricht eingefuegt wird -- und daraus
entsteht eine Agentur-Event-Kachel mit Titel, Zeitraum, Banner,
Aufgaben zum Abhaken, Regeln, Ligen und Preisen. Gemessen 38 ms vom
Einfuegen bis zur Kachel.

ETAPPE 2 -- DER WEG NACH DRAUSSEN (helfer-tiktok.mjs)
  linkAusText holt die Adresse aus dem Fliesstext, damit niemand sie
  heraussuchen muss. folgeUmleitung geht Sprung fuer Sprung
  (redirect "manual", hoechstens fuenf) und schickt JEDE
  Zwischenadresse durch istTikTok -- bisher folgte holeMitFrist den
  Umleitungen selbst, und istTikTok hatte nur die EINGABE gesehen.
  Das ist die einzige Stelle im Haus, an der unser Server eine
  fremdbestimmte Adresse abruft.

  holeSeite zieht die Grenze von 3 MB BEIM LESEN, nicht hinterher: Wer
  arrayBuffer() abwartet und dann die Laenge ansieht, hat die 50 MB
  schon im Speicher. Frist 12 s statt 8 -- gemessen 750 ms allein beim
  Ursprungsserver, dazu 1,1 MB Uebertragung.

  bildAdresseErlaubt kam beim Bauen dazu, nicht aus dem Bauplan: Die
  Banneradresse steht in der Seite, die TikTok ausliefert, ist also
  FREMDBESTIMMT. Ohne Schranke wuerde unser Server abrufen, was dort
  steht -- auch http://127.0.0.1:4100/ oder 169.254.169.254. Elf
  Faelle durchgemessen.

ETAPPE 3 -- DIE ROUTE (workspace-kampagne.js, 5 Spalten, 1 Index)
  Rechte aus istLeitung, nicht neu erfunden. Bremse 20 je Stunde, VOR
  dem ersten Abruf nach draussen -- eine Bremse hinter dem Abruf
  bremst den fremden Server nicht. Dublettenpruefung zweimal: im Code
  (faengt den Normalfall) und als eindeutiger Index (faengt den
  Wettlauf zweier gleichzeitiger Aufrufe).

  'kampagne_schon_da' zaehlt bei der Bremse MIT (gefunden von der
  Pruefung): Zuerst zaehlten nur Erfolg und Fehlschlag -- wer denselben
  Link wieder und wieder einfuegt, bekommt jedes Mal "schon da" und
  loeste jedes Mal einen Abruf aus, ohne gezaehlt zu werden. Gemessen:
  21 Versuche, 0 gebremst.

  Der Regeltext wird SICHTBAR gekuerzt, an einer Abschnittsgrenze.
  Gipfelstuermer ergibt 7474 Zeichen, das Feld fasst 6000 (TEXT_MAX),
  und die PUT-Route lehnt mehr ab: Ungekuerzt entstuende eine Kachel,
  die DogFather OEFFNEN, aber nicht SPEICHERN kann -- er aendert ein
  Wort und bekommt eine Fehlermeldung ueber etwas, das er nie getippt
  hat. Verloren geht nichts: kampagne_daten traegt das Gelesene
  gegliedert.

ETAPPE 4 -- DIE OBERFLAECHE
  Ein Textbereich (die Einladung ist mehrzeilig), der Knopf gibt sich
  nach 15 s von selbst frei, die Meldung steht neben dem Feld und
  nennt den Grund im Klartext. Ob jemand darf, sagt der Server ueber
  darf_kampagne_einlesen in /api/ich -- keine Rollenliste im Browser.

  Gemessen auf 412 und 1280 px (bild-kampagne.mjs, 20 Messungen):
  Knopf 44 px, Kontrast 7,68:1, nichts liegt auf dem Knopf, kein
  Ueberlauf, keine Bewegung bei prefers-reduced-motion. Die
  Antwortzeile steht auf .9rem statt der hausweiten .76rem -- dort
  erscheint, was der Server geantwortet hat, und eine Fehlermeldung in
  12 px liest niemand zweimal. Die hausweite Klasse bleibt unberuehrt.

VIERZEHN SABOTAGEN, VIERZEHN TREFFER
  Sieben an kampagne-lesen.mjs (Etappe 1) und sieben an Route und Weg:
  Umleitung ungeprueft folgen, Tag nach Serverzeit, Dublettenpruefung
  weglassen, dem fremden Server den Bildtyp glauben, Bremse
  abschalten, Bremse wieder blind fuer Dubletten, jeden einlesen
  lassen. Jede wurde bemerkt, jede im erwarteten Abschnitt.

  EINE BLIEB ZUERST BLIND, und das war lehrreich: Nimmt man die
  Dublettenpruefung aus dem Code, faengt der INDEX es auf -- die
  Antwort ist dieselbe, die Pruefung blieb gruen. Kein Schaden, aber
  ein blinder Fleck. Jetzt unterscheidet die Pruefung am
  Protokolltext, WELCHE der beiden Sicherungen gegriffen hat.

VIER VORBESTEHENDE BEFUNDE MIT ERLEDIGT
  willkommen.html hatte kein theme-color, kein Manifest, kein
  apple-touch-icon. Drei Zeilen sind billiger und haltbarer als eine
  Ausnahme in der Pruefung.

  workspace-anleitung.js bildete den Tag "ab wann geht mehr" aus UTC.
  Wer zwischen 00:00 und 02:00 beitritt, bekam einen Termin, der einen
  Tag zu frueh war. workspace.js hat dafuer jetzt tagLokalVon(zeitpunkt,
  versatz) -- und tagLokal ist nur noch ein Aufruf davon. Es gibt also
  WENIGER Rechenwege als vorher, nicht mehr.

  pruef-anleitung.mjs legte Testdaten auf den UTC-Tag und waere
  zwischen 00:00 und 02:00 rot gewesen, ohne dass etwas kaputt ist.

  mess-anleitung-crew.mjs rechnete seinen zweiten Port als PORT + 1.
  Das sieht aus wie eine Ableitung und ist keine: portNummer
  ueberspringt gesperrte Nummern, und dann gehoert PORT + 1 der
  naechsten DATEI.

  pruef-struktur ist damit zum ersten Mal vollstaendig gruen.

GEPRUEFT (alle gruen, keine Zahl gesunken)
  pruef-kampagne 96 (neu) · pruef-kampagne-lesen 108 · pruef-video 74 ·
  pruef-eventkarte 94 · pruef-agentur 62 · pruef-anleitung 196 ·
  pruef-portnummern 41 (war 40 mit einem Fehler) · pruef-struktur,
  pruef-zeichen 8, pruef-ports 10, pruef-buehnen-fest 13,
  pruef-css-klassen 39, pruef-haus-trennung 107, pruef-lesbarkeit,
  pruef-tippziele, pruef-deutsche-texte 12, pruef-formulare,
  pruef-fingermass 5, pruef-workspace-seiten, pruef-tempo-workspace

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

workspace/assets/css/bereich.css

@@ -3264,3 +3264,94 @@ body[data-ton] .kopf-zeile::before {
 @media (forced-colors: active) {
   .ev-zaehler { border: 1px solid CanvasText; }
 }
+
+/* =====================================================================
+   EINE KAMPAGNE AUS EINER EINLADUNG (07.10.2026) — Etappe 4
+
+   Gebaut auf `.videoholen` darueber: gleicher Rahmen, gleicher
+   Abstand, gleiche Flaeche. Ein zweiter Kastenstil fuer dieselbe Sache
+   waere zwei Fassungen, die auseinanderlaufen -- und der Unterschied
+   fiele nur dem auf, der beide Bereiche nacheinander ansieht.
+
+   WAS HIER ANDERS IST UND WARUM:
+
+   `textarea` statt `input`. Die Einladung ist mehrzeilig; wer sie in
+   ein Einzeilenfeld einfuegt, verliert die Umbrueche und sieht nur das
+   Ende. `resize: vertical` -- wer einen langen Text prueft, soll ihn
+   aufziehen koennen, aber nicht in die Breite (das zerreisst das
+   Raster).
+
+   `min-height: 44px` am Knopf. Das ist die Zahl aus
+   pruef-handy-teamdogi: Unter 44 Pixel trifft ein Daumen nicht
+   verlaesslich. Am 07.10.2026 lagen fuenf Flaechen in diesem Haus bei
+   40 und wurden genau deshalb auf 44 gezogen.
+   ===================================================================== */
+.kampagneholen {
+  margin: 0 0 20px; padding: 16px 18px;
+  border: 1px solid var(--rand);
+  border-radius: var(--radius);
+  background: var(--flaeche);
+}
+.kampagneholen__form { margin: 0; }
+.kampagneholen__titel {
+  margin: 0 0 10px;
+  font-size: 1rem; font-weight: 600;
+  letter-spacing: .01em;
+}
+.kampagneholen textarea {
+  display: block; width: 100%; box-sizing: border-box;
+  min-height: 72px; resize: vertical;
+  font: inherit; font-size: .9rem; line-height: 1.5;
+}
+
+/* DIE MELDUNG LINKS, DER KNOPF RECHTS -- und die Meldung darf wachsen.
+   `flex-wrap: wrap` statt einer festen Schwelle: Es bricht genau dann
+   um, wenn der Platz nicht reicht. Eine Zahl an dieser Stelle waere
+   eine Rechnung von gestern -- genau der Fehler, der am 06.09.2026 in
+   der Kopfleiste zweimal an einem Tag passiert ist. */
+.kampagneholen__zeile {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 10px; margin-top: 12px;
+}
+/* HIER STEHT KEIN HINWEIS, SONDERN DIE ANTWORT (07.10.2026).
+
+   Gemessen mit bild-kampagne: Die hausweite Klasse .feld-hinweis
+   steht auf .76rem = 12,16 px. Fuer einen Hinweis unter einem Feld
+   ist das richtig, und sie bleibt dort unangetastet -- sie gilt auf
+   fuenf Seiten, und eine Schriftgroesse hausweit zu aendern ist
+   keine Entscheidung, die in diese Kachel gehoert.
+
+   An DIESER Stelle ist es aber etwas anderes: Hier erscheint, was
+   der Server geantwortet hat -- "Dieser Link fuehrt zu beispiel.de,
+   nicht zu TikTok", "TikTok hat nicht geantwortet (12 s)". Das ist
+   die einzige Rueckmeldung, die der Mensch bekommt, und eine
+   Fehlermeldung in 12 px liest niemand zweimal. Deshalb .9rem
+   (14,4 px) -- nur hier, mit Begruendung.
+
+   Der Kontrast ist mit 7,68:1 ohnehin reichlich (gemessen); zu
+   klein war allein die Groesse. */
+.kampagneholen__zeile .feld-hinweis {
+  flex: 1 1 16rem; min-width: 0; margin: 0;
+  font-size: .9rem;
+  line-height: 1.5;
+}
+.kampagneholen__zeile .knopf {
+  flex: 0 0 auto;
+  min-height: 44px;
+}
+
+/* WAEHREND ES LAEUFT. Ein ruhiges Atmen, kein Blinken -- und bei
+   `prefers-reduced-motion` gar nichts. Augenschonend heisst hier
+   ausdruecklich: kein Flackern, kein greller Zustandston, nur ein
+   leicht gedaempfter Kasten, der sagt "ich arbeite noch". */
+.kampagneholen__form[data-laeuft="ja"] textarea { opacity: .6; }
+.kampagneholen__form[data-laeuft="ja"] .feld-hinweis {
+  animation: kampagne-atmen 2.4s ease-in-out infinite;
+}
+@keyframes kampagne-atmen {
+  0%, 100% { opacity: .65; }
+  50%      { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kampagneholen__form[data-laeuft="ja"] .feld-hinweis { animation: none; }
+}