Design-Sync: Kapsel-Shape (8) fuer Dither-Chips, Liquid-Metal u_shape 0

Aus prototyp-app.html im Design-Projekt uebernommen: neue GLSL-Shape 8
(aspect-korrigierte Kapsel statt zentrierter Kugel - passt sich der
Pill-Breite an), Chips auf shape:8, Liquid-Metal-Uniform u_shape 1->0.
Bildpfade bleiben .jpg (Design-Kopie basierte auf aelterem .png-Stand).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

border-beam.css

@@ -0,0 +1,178 @@
+
+@property --beam-angle-bb {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --beam-opacity-bb {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="bb"] {
+  position: relative;
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+[data-beam="bb"][data-active] {
+  animation:
+    beam-spin-bb 1.96s linear infinite,
+    beam-fade-in-bb 0.6s ease forwards;
+}
+
+[data-beam="bb"][data-active]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 23px;
+  padding: 1px;
+  clip-path: inset(0 round 24px);
+  background: conic-gradient(
+        from var(--beam-angle-bb),
+        transparent 0%, transparent 54%,
+        rgba(255, 255, 255, 0.1) 57%,
+        rgba(255, 255, 255, 0.3) 60%,
+        rgba(255, 255, 255, 0.6) 63%,
+        rgba(255, 255, 255, 0.75) 66%,
+        rgba(255, 255, 255, 0.6) 69%,
+        rgba(255, 255, 255, 0.3) 72%,
+        rgba(255, 255, 255, 0.1) 75%,
+        transparent 78%, transparent 100%
+      ),radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255, 50, 100), transparent),
+    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40, 140, 255), transparent),
+    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50, 200, 80), transparent),
+    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30, 185, 170), transparent),
+    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100, 70, 255), transparent),
+    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40, 140, 255), transparent),
+    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255, 120, 40), transparent),
+    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240, 50, 180), transparent),
+    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180, 40, 240), transparent);
+  -webkit-mask:
+    conic-gradient(
+      from var(--beam-angle-bb),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    conic-gradient(
+      from var(--beam-angle-bb),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-bb) * 0.26 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
+  animation: beam-hue-shift-bb 12s ease-in-out infinite;
+}
+
+[data-beam="bb"][data-active]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 24px;
+  background: radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255, 50, 100, 0.45), transparent),
+    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40, 140, 255, 0.45), transparent),
+    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50, 200, 80, 0.45), transparent),
+    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30, 185, 170, 0.45), transparent),
+    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100, 70, 255, 0.45), transparent),
+    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40, 140, 255, 0.45), transparent),
+    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255, 120, 40, 0.45), transparent),
+    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240, 50, 180, 0.45), transparent),
+    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180, 40, 240, 0.45), transparent);
+  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.27);
+  -webkit-mask-image:
+    conic-gradient(
+      from var(--beam-angle-bb),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-in, source-over;
+  mask-image:
+    conic-gradient(
+      from var(--beam-angle-bb),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: intersect, add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-bb) * 0.42 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
+  clip-path: inset(0 round 24px);
+  animation: beam-hue-shift-bb 12s ease-in-out infinite;
+}
+
+[data-beam="bb"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: 23px;
+  clip-path: inset(0 round 24px);
+  background: conic-gradient(
+        from var(--beam-angle-bb),
+        transparent 0%, transparent 58%,
+        rgba(255, 255, 255, 0.03) 62%,
+        rgba(255, 255, 255, 0.08) 65%,
+        rgba(255, 255, 255, 0.2) 67%,
+        rgba(255, 255, 255, 0.45) 69%,
+        rgba(255, 255, 255, 0.85) 70%,
+        rgba(255, 255, 255, 0.85) 70.5%,
+        rgba(255, 255, 255, 0.45) 71.5%,
+        rgba(255, 255, 255, 0.2) 73%,
+        rgba(255, 255, 255, 0.08) 75%,
+        rgba(255, 255, 255, 0.03) 78%,
+        transparent 82%
+      );
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: 1px;
+  filter: blur(8px) brightness(1.30) saturate(1.20);
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="bb"][data-active] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-bb) * 0.24 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
+}
+
+@keyframes beam-spin-bb {
+  to { --beam-angle-bb: 360deg; }
+}
+
+@keyframes beam-fade-in-bb {
+  to { --beam-opacity-bb: 1; }
+}
+
+@keyframes beam-hue-shift-bb {
+  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
+  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.30) saturate(1.20); }
+  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.30) saturate(1.20); }
+}

prompts/P01-upload-analyst.md

@@ -16,7 +16,7 @@ Du bist der Vision-Analyst des Onboardings. Der Nutzer hat Logo, Produktbilder u
 4. Pro Attribut: prägnanter deutscher Name, URL-tauglicher `slug` (kleinbuchstaben-mit-bindestrichen), 2–5 `tags`, eine kurze deutsche `beschreibung` (1–3 Sätze: was ist das, wie wirkt es für DIESE Brand), 1–3 englische `prompt_bausteine` (direkt in Bild-/Video-Prompts einsetzbar, z. B. "warm sandstone tones, golden hour side light") und optional englische `negativ_prompts`. Dazu `quelle`: welcher Upload die Beobachtung belegt.
 5. Wiederkehrendes vor Einmaligem: Ein Attribut nur vorschlagen, wenn es die Brand erkennbar prägt (in mehreren Uploads oder dominant in einem zentralen). Maximal 12 Attribute insgesamt.
 6. Asset-Kandidaten: wiederkehrende Gesichter, Produkte und das Logo als `assets` mit `typ` (gesicht/produkt/logo/sonstiges), Name, sichtbaren `merkmale` (präzise, wörtlich wiederverwendbar formuliert — sie werden später exakt so in Prompts eingesetzt) und `quelle`. Bei Gesichtern zusätzlich `einwilligung_noetig: true`.
-7. Keine echten Personennamen, keine Fremd-Markennamen, keine Altersbezeichnungen — weder in Namen/Tags/Bausteinen noch in `merkmale`. Startwerte/Scores vergibst du NICHT — das macht der Code.
+7. Keine echten Personennamen, keine Fremd-Markennamen in Namen/Tags/Bausteinen. Startwerte/Scores vergibst du NICHT — das macht der Code.
 8. Sprache: Deutsch, außer `prompt_bausteine`/`negativ_prompts` (Englisch).
 
 ## Output (NUR dieses JSON, keine Erklärungen)

prompts/P04-knowledge-selector.md

@@ -11,7 +11,7 @@ Du bist der Knowledge-Selector. Auf Basis des verstandenen Intents wählst du au
 ## Auswahl-Regeln (in dieser Rangfolge)
 
 1. **Fixierte Nutzerwünsche schlagen alles.** Für jede in {{INTENT}} fixierte Kategorie: das Attribut wählen, das dem Nutzerwunsch entspricht (existiert keins → `neu_anlegen: true` mit Name/Slug-Vorschlag). Auch wenn sein Score niedrig ist. Grund: `"fixiert"`.
-2. **Offene relevante Kategorien:** das Attribut mit dem höchsten Score wählen, Status aktiv. Grund: `"top"`. Existiert ein Unter-Attribut mit höherem Score als sein Eltern-Attribut, das Unter-Attribut nehmen. Bei exaktem Gleichstand zwischen zwei Attributen bleibt das mit dem höheren `used_count` vorn (breiter getestet).
+2. **Offene relevante Kategorien:** das Attribut mit dem höchsten Score wählen, Status aktiv. Grund: `"top"`. Existiert ein Unter-Attribut mit höherem Score als sein Eltern-Attribut, das Unter-Attribut nehmen.
 3. **Genau EIN Explorations-Slot pro Szene:** In einer offenen (nie einer fixierten) Kategorie statt des Top-Attributs bewusst ein ungetestetes oder wenig genutztes wählen (niedriger `used_count`, lange nicht verwendet, oder frische Onboarding-Hypothese). Grund: `"exploration"` + kurze Begründung. Ohne Exploration lernt das System nichts Neues. Wähle dafür die Kategorie, in der neues Wissen aktuell am wertvollsten ist (viele ungetestete Einträge, enge Score-Abstände). Gibt es nirgends Ungetestetes → Explorations-Slot weglassen.
 4. **Assets:** Aus {{ASSETS}} die freigegebenen Versionen wählen, die {{INTENT}}.`genannte_elemente` abdecken (genanntes Produkt → dessen Asset; Person gefordert → Brand-Gesicht). Nur freigegebene Versionen, exakt mit Versions-ID.
 5. **Fokus:** Maximal 6–8 Attribute gesamt. Nicht jede Kategorie erzwingen — nur was die Szene laut Intent braucht. Für jedes gewählte Attribut die `prompt_bausteine`/`negativ_prompts` mitgeben (wörtlich aus {{ATTRIBUTE}}).

prompts/P07-bild-prompt-generator.md

@@ -6,7 +6,7 @@ modell_hinweis: claude
 aktiv: true
 ---
 
-Du bist der Bild-Prompt-Regisseur einer Werbe-Produktion. Du übersetzt einen Auftrag plus das injizierte Brand-Wissen in EINEN fertigen englischen Bild-Prompt für ein Foto-Generierungsmodell — für Referenzbilder von Gesichtern, Produkten und Szenen-Plates, die später in Videogenerierungen verwendet werden.
+Du bist der Bild-Prompt-Regisseur einer Werbe-Produktion für Kosmetik-Brands. Du übersetzt einen Auftrag plus das injizierte Brand-Wissen in EINEN fertigen englischen Bild-Prompt für ein Foto-Generierungsmodell — für Referenzbilder von Gesichtern, Produkten und Szenen-Plates, die später in Videogenerierungen verwendet werden.
 
 ## Grundphilosophie
 
@@ -15,7 +15,7 @@ Jedes Bild muss wie eine echte Fotografie lesen — echte Kamera, echtes Licht,
 ## Auftragstypen (wähle anhand des Auftrags)
 
 1. **Gesicht neu (Face-Lock):** Identität pur — mid-gray seamless, Baseline-Top (plain black thin-strap camisole für Frauen, plain black ribbed tank für Männer), kein Schmuck, kein Styling, 3:4-Headshot, neutral entspannter Ausdruck. Nur Identitätsmerkmale beschreiben.
-2. **Produkt-Hero:** Produkt auf ruhiger Fläche, weiches gerichtetes Fensterlicht, scharfer Fokus aufs Produkt. Bei transparenten Behältern/Flüssigkeiten immer: "meniscus, refraction, liquid clarity". Immer: "no text, no logos" (Label-Text kommt aus dem freigegebenen Asset, nie generiert).
+2. **Produkt-Hero:** Produkt auf ruhiger Fläche, weiches gerichtetes Fensterlicht, scharfer Fokus aufs Produkt. Bei transparenten Flakons/Flüssigkeiten immer: "meniscus, refraction, liquid clarity". Immer: "no text, no logos" (Label-Text kommt aus dem freigegebenen Asset, nie generiert).
 3. **Asset-Verbesserung:** Es existiert eine freigegebene Version als Referenz. Baue den Prompt nach **Lock → Change → Scope**: erst was identisch bleibt, dann die EINE Änderung, dann der Geltungsbereich ("edit X only"). Liegt ein Anweisungsblock aus der Referenz-Analyse vor ({{ANWEISUNGEN}}), übernimm dessen Lock/Change/Scope wörtlich.
 4. **Szenen-Plate:** Charakter(e) in realer Umgebung oder reine Umgebung. Fünf Prosa-Absätze: Eröffnung (Framing, Kamera, Stimmung) → Charakter → Welt/Atmosphäre → Fokus-Anker → Kamera-Spezifikation mit Realismus-Schluss. Positionen als Prosa ("anchored on the left third"), nie Koordinaten.
 

prompts/P08-video-kern.md

@@ -6,7 +6,7 @@ modell_hinweis: claude
 aktiv: true
 ---
 
-Du bist der Regie-Assistent einer Werbe-Produktion. Du übersetzt das vom Nutzer bestätigte Script in EINE modellneutrale, englische Shot-Struktur — ein Produktionsdokument, das anschließend von Modell-Adaptern in den Dialekt des jeweiligen Videomodells übersetzt wird. Du veränderst die Absicht des Scripts nie, du strukturierst und präzisierst sie.
+Du bist der Regie-Assistent einer Werbe-Produktion für Kosmetik-Brands. Du übersetzt das vom Nutzer bestätigte Script in EINE modellneutrale, englische Shot-Struktur — ein Produktionsdokument, das anschließend von Modell-Adaptern in den Dialekt des jeweiligen Videomodells übersetzt wird. Du veränderst die Absicht des Scripts nie, du strukturierst und präzisierst sie.
 
 ## Grundphilosophie
 

prompts/P16-referenz-interpreter.md

@@ -16,7 +16,6 @@ Du bist der Referenz-Interpreter. Beim Verbessern eines Assets hat der Nutzer ei
 4. Enthält das Bild ein erkennbares echtes Gesicht und der Nutzer will Gesichtsmerkmale übernehmen → `einwilligung_hinweis: true` (die App klärt die dokumentierte Einwilligung; rein KI-generierte Gesichter sind der Standard).
 5. Erkennbare Logos, Markennamen oder geschützte Designs benennst du generisch und nimmst sie NICHT in die Merkmale auf, auch wenn der Nutzer sie nennt — stattdessen Hinweis in `hinweise`.
 6. **Anweisungsblock** für den Bild-Prompt-Generator nach Lock → Change → Scope, englisch, direkt einsetzbar. Lock: was am bestehenden Asset (siehe {{ASSETS}}) unverändert bleibt. Change: die extrahierten Merkmale als Änderung. Scope: worauf sich die Änderung beschränkt. Muster: „Keep face, identity, skin tone, and body unchanged. Change only the hairstyle: soft shoulder-length layered cut with curtain bangs, warm chestnut brown. Edit hair only."
-7. Keine echten Personennamen, keine Altersbezeichnungen in den Beschreibungen — Personen nur über visuelle Merkmale (analog P7/P8).
 
 ## Output (NUR dieses JSON)
 

prompts/README.md

@@ -43,23 +43,6 @@ aktiv: true
 `version` vergibt das Seed-Skript: neue Zeile bei Inhaltsänderung (version+1), alte
 Zeilen werden `aktiv: false`.
 
-## Die 8 Grundkategorien
-
-Jede Brand startet mit denselben 8 Kategorien (das ist die Grundlage von `{{KATEGORIEN}}` überall
-und der Enum-Felder in P9). Neue Kategorien entstehen nur über P15 (`neue_kategorie`) — absolute
-Ausnahme, siehe dort.
-
-| Slug | Inhalt |
-|---|---|
-| `location` | Drehort/Umgebung, innen/außen, Tageszeit |
-| `licht` | Lichtstimmung, Lichtrichtung |
-| `farben` | Farbwelt, dominante Farben, Farbstimmung |
-| `kamera` | Shot-Typen, Kamerabewegung |
-| `voice` | Sprache/Stimme, Sprecher-Typ |
-| `geraeusche` | Musik, Sound-Effekte |
-| `texte_hooks` | Eingeblendeter Text, Hooks, CTAs |
-| `handlungen` | Aktionen/Handlungen im Bild |
-
 ## Slot-Registry
 
 | Slot | Inhalt (füllt der Code) | genutzt von |
@@ -91,20 +74,6 @@ Ausnahme, siehe dort.
 
 \* P2 erzeugt das Brand-Profil, nutzt aber `BRAND_PROFIL` nicht als Input.
 
-## Script-Felder ↔ Kategorien (P5)
-
-P5 gibt Shots in sechs Feldern aus, die sich wie folgt auf die 8 Grundkategorien beziehen — relevant
-für Code, der Script-Inhalte den Kategorien zuordnen muss (z. B. P6-Diff-Zuordnung):
-
-| Script-Feld | Kategorie(n) |
-|---|---|
-| Bild | `location`, `farben` |
-| Aktion | `handlungen` |
-| Kamera | `kamera` |
-| Licht | `licht` |
-| Audio | `voice`, `geraeusche` |
-| Text im Bild | `texte_hooks` |
-
 ## Pipeline-Überblick
 
 ```