Scouting: links die normalen Creator, rechts die Premium

Filipe: "ich will dass es da in der mitte eine trennung gibt. links
sollen normale creator sein und rechts premium creator. es gibt bei
tiktok naemlich diese zwei optionen von streamer ... auch dass wenn man
die eintraegt soll man aussuchen koennen."

Jede Stufe der Pipeline hat jetzt zwei Spalten mit einer Trennlinie
dazwischen. Die Trennung sitzt IN der Stufe, nicht einmal ueber der
ganzen Seite: Zwei komplette Pipelines nebeneinander haetten jede
Stufenueberschrift verdoppelt und die beiden Seiten waeren nie auf
gleicher Hoehe gewesen.

GENAU ZWEI WERTE, kein "weiss nicht". Anders als bei `netzwerk`, wo
"noch nicht gefragt" eine eigene gueltige Antwort ist: Dort wird eine
fremde Tatsache festgehalten, hier eine eigene Absicht -- und deren
Normalfall ist "normal". NULL wird als "normal" gelesen, der eine
vorhandene Lead steht damit links, ohne dass ihm etwas unterstellt wird.

DIE ART UEBERLEBT DIE UEBERGABE. Beim Creator-Onboarding wandert sie auf
die Person und ist in der Personenverwaltung aenderbar. Ohne das endet
die Angabe genau dort, wo sie zum ersten Mal vertraglich zaehlt.

Die Schwelle misst den STUFENKASTEN (@container), nicht das Fenster --
der Fehler vom 06.09.2026 im selben Haus. Auf dem Handy liegen die
Spalten untereinander, die senkrechte Linie faellt weg.

ZWEI FUNDE BEIM BAUEN, beide von Hauswachen:
 * `pruef-fingermass` fand, dass meine neue Handy-Messung mit
   `setViewportSize` statt eigenem Kontext lief -- ohne `hasTouch`
   greift keine einzige Regel aus `@media (pointer: coarse)`.
 * Die Klassen hiessen zuerst `.spalte__*` -- die gehoeren `aufgaben.css`,
   und scouting.html laedt die VOR scouting.css. `margin-left: auto` aus
   dem Aufgabenbrett zog die Zahl 560 px von ihrem Wort weg, ohne dass
   eine Pruefung rot wurde. Jetzt `.art-spalte__*`, und der Abstand wird
   gemessen.

pruef-scouting-felder: 28 -> 64 Pruefungen, gruen. Zwei Gegenproben
gefahren (Trennung deaktiviert, Spaltenreihenfolge gedreht) -- beide
schlugen an. Dazu gruen: haus-trennung, css-klassen, personen-liste,
personen-kachel, hand-personen, schranke, formulare, lesbarkeit,
agentur, deutsche-texte, tippziele, leerzustand, fingermass.

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

workspace/assets/css/personen.css

@@ -142,6 +142,19 @@
   justify-content: flex-start; margin-top: auto;
 }
 
+/* NORMAL ODER PREMIUM (06.10.2026).
+
+   Dasselbe Gold wie in der Scout-Pipeline (--k-gold) -- die Marke heisst
+   dort und hier dasselbe und soll deshalb auch gleich aussehen. Zwei
+   Toene fuer eine Aussage waeren zwei Aussagen.
+
+   Nur Premium bekommt eine Marke. "Normal" auf jeder zweiten Kachel
+   waere ein Wort, das nie etwas Neues sagt. */
+.marke-rolle[data-art="premium"] {
+  background: color-mix(in srgb, var(--k-gold) 16%, transparent);
+  color: var(--k-gold);
+}
+
 /* Gesperrt ist jetzt eine Marke in der Warnfarbe, kein graues Wort in
    einer Reihe grauer Woerter. */
 .marke-rolle[data-rolle="gesperrt"] {

workspace/assets/css/scouting.css

@@ -322,3 +322,112 @@
   .kk__fakt, .knopf-still--bearbeiten { border: 1px solid CanvasText; }
   .marke-punkt[data-warn="ja"] { border: 2px solid CanvasText; }
 }
+
+/* =====================================================================
+   LINKS NORMAL, RECHTS PREMIUM (06.10.2026)
+
+   Filipe: "ich will dass es da in der mitte eine trennung gibt. links
+   sollen normale creator sein und rechts premium creator. es gibt bei
+   tiktok nämlich diese zwei optionen von streamer."
+
+   DIE SCHWELLE WIRD AM STUFENKASTEN GEMESSEN, NICHT AM FENSTER
+   (@container statt @media). Das ist der Unterschied, der am 06.09.2026
+   im Creator Workspace zwei Fehler gekostet hat: Eine Zahl, die das
+   FENSTER misst, weiß nichts von Rändern, Seitenleisten oder davon,
+   dass der Inhalt bei 1240px aufhört. Der Kasten misst sich selbst --
+   er bricht genau dann um, wenn ER zu schmal wird, und bleibt richtig,
+   auch wenn sich an der Seite drumherum etwas ändert.
+
+   DIE 680 STEHT GENAU EINMAL und sie zählt etwas Bestimmtes:
+   zwei Kartenspalten von je 320px (schmaler wird eine Karte mit ihren
+   zwei Knöpfen unbedienbar) plus 40px Trennabstand. Wer die Karte
+   breiter macht, ändert sie hier -- und nirgendwo sonst.
+
+   WARUM DIE KLASSEN „art-spalte" HEISSEN UND NICHT „spalte":
+   `aufgaben.css` besitzt `.spalte`, `.spalte__kopf`, `.spalte__zahl` und
+   `.spalte__leer` -- das Aufgabenbrett. Und `scouting.html` lädt
+   `aufgaben.css` VOR dieser Datei. Der erste Entwurf hieß hier
+   `.spalte__zahl`, und prompt zog `margin-left: auto` aus dem
+   Aufgabenbrett die Zahl ans rechte Ende der Spalte, 560 px von ihrem
+   Wort entfernt. Keine Prüfung wurde dabei rot: Die Klasse war ja da,
+   sie gehörte nur jemand anderem. Gesehen habe ich es erst im
+   Bildschirmfoto -- deshalb misst `pruef-scouting-felder` jetzt den
+   Abstand zwischen Wort und Zahl.
+   ===================================================================== */
+
+.stufe { container-type: inline-size; }
+
+/* Untereinander ist der Grundzustand, nicht der Notfall: So sieht es
+   auf dem Handy aus, und dort wird diese Seite am häufigsten benutzt. */
+.stufe__arten { display: grid; gap: 22px; }
+
+.art-spalte__kopf {
+  display: flex; align-items: center; gap: 8px;
+  margin-bottom: 9px;
+}
+.art-spalte__titel {
+  margin: 0;
+  /* .76rem = 12,2px. Unter 11,5px gilt Text im Großcheck als zu klein
+     zum Lesen -- und das ist er auch. */
+  font-size: .76rem; font-weight: 700;
+  letter-spacing: .09em; text-transform: uppercase;
+  color: var(--text-still);
+}
+.art-spalte__zahl {
+  min-width: 20px; padding: 1px 7px; text-align: center;
+  font-size: .72rem; font-weight: 700; color: var(--text-still);
+  background: rgba(255, 255, 255, .06);
+  border-radius: 999px;
+}
+/* Premium trägt das Gold des Hauses (--k-gold). Kein neuer Farbwert:
+   Das Haus hat einen Ton für "das hier ist etwas Besonderes", und zwei
+   verschiedene Goldtöne nebeneinander wären nur zwei. */
+.art-spalte[data-art="premium"] .art-spalte__titel { color: var(--k-gold); }
+.art-spalte[data-art="premium"] .art-spalte__zahl {
+  color: var(--k-gold);
+  background: color-mix(in srgb, var(--k-gold) 13%, transparent);
+}
+
+/* Eine leere Spalte verschwindet NICHT. Sonst hätte eine Stufe mal eine
+   und mal zwei Spalten, und man wüsste nicht, ob dort niemand steht
+   oder ob die Trennung an dieser Stelle nicht gilt. */
+.art-spalte__leer {
+  margin: 0; padding: 12px 2px;
+  font-size: .82rem; color: var(--text-still);
+}
+
+@container (min-width: 680px) {
+  .stufe__arten {
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+  }
+  /* DIE TRENNUNG IN DER MITTE. Eine Linie am linken Rand der rechten
+     Spalte -- sie läuft dadurch genau so weit, wie die längere der
+     beiden Spalten reicht, und hört von selbst auf. Ein eigenes Element
+     dafür müsste in der Höhe nachgeführt werden und wäre bei jeder
+     aufgeklappten Karte zu kurz. */
+  .art-spalte[data-art="normal"] { padding-right: 20px; }
+  .art-spalte[data-art="premium"] {
+    padding-left: 20px;
+    /* --rand-hell (0,30) statt --rand (0,16). Im Bildschirmfoto vom
+       06.10.2026 verschwand die dünnere Linie über dem Hintergrundbild
+       fast ganz -- und genau sie war das Gewünschte. 0,30 bleibt eine
+       ruhige Linie und kein Strich. */
+    border-left: 1px solid var(--rand-hell);
+  }
+}
+
+/* ---- Die Marke auf der Karte ---------------------------------------
+   Nur Premium bekommt eine. "Normal" auf jeder zweiten Karte wäre ein
+   Wort, das nie etwas Neues sagt -- dieselbe Regel wie bei "Schon im
+   Netzwerk", wo "frei" ebenfalls stumm bleibt. */
+.marke-punkt[data-art="premium"] {
+  color: var(--k-gold);
+  border-color: color-mix(in srgb, var(--k-gold) 42%, transparent);
+  background: color-mix(in srgb, var(--k-gold) 12%, transparent);
+}
+
+@media (forced-colors: active) {
+  .art-spalte[data-art="premium"] { border-left: 1px solid CanvasText; }
+  .marke-punkt[data-art="premium"] { border: 2px solid CanvasText; }
+}