Notizzettel, keine Schatten, Szenen-Mockup

Drei Aenderungen am Generator, im selben Bereich der Datei verzahnt.

Notizzettel: die StickyNote aus dem Pitch-Projekt als HTML nachgebaut,
Variante purple, Farbwerte uebernommen und die Masse auf das 1080er Blatt
hochskaliert. Liegt auf der Workflow-Slide und ist wie jedes andere Element
verschiebbar.

Schatten: raus, ueberall. Kein box-shadow, kein drop-shadow. Tiefe entsteht
ueber Ueberlappung, Rahmenfarbe und Versatz. Der Umschalter faellt mit weg,
er haette nichts mehr zu schalten gehabt. Die Blaetter im Stapel-Rahmen
bekommen eine Haarlinie, sonst laege auf der hellen Variante Weiss auf Weiss.

Szenen-Mockup: Macbook Air und iPad Pro in Perspektive, aus einem Pixeden-PSD
freigestellt. Beide Displays sind ausgeknockt, die Screenshots liegen dahinter
und werden per matrix3d in die Flaechen projiziert. Die Eckpunkte sind
gemessen, nicht geschaetzt: beim Macbook aus dem transform_box des
Smart-Objekts, beim iPad ueber Ausgleichsgeraden auf den vier Glaskanten, weil
das Smart-Object dort zu hoch sitzt. Der Spalt zur weggefallenen Glasplatte
wird spaltenweise aus den Nachbarfarben interpoliert, damit am Displayrand
Schwarz und am Gehaeuse Metallic steht.

Das PSD selbst bleibt draussen: Pixeden erlaubt die Nutzung, nicht die
Weitergabe.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

rules.md

@@ -104,7 +104,7 @@ clip-path: polygon(
 
 **Drei Fallstricke** (stehen auch in `chamfer.ts`):
 
-- `clip-path` beschneidet **auch den Schatten** → Tiefe über `filter: drop-shadow()`, nie `box-shadow`
+- `clip-path` beschneidet **auch den Schatten** → wäre über `filter: drop-shadow()` zu lösen, nie über `box-shadow`. Praktisch irrelevant, seit die Posts schattenfrei sind (siehe §5)
 - `clip-path` beschneidet **auch den Rahmen** → Rand über eine Hintergrundfläche lösen, nicht über `border`
 - Kinder, die aus der Box ragen (Popups, Tooltips), werden abgeschnitten → solche Elemente nicht chamfern
 
@@ -287,6 +287,27 @@ x 72 — immer noch weit innerhalb der Safe Zone.
 | 2 | Inhalt: Badge, Headline, Fließtext |
 | 3 | Swipe-Hinweis |
 
+### Keine Schatten
+
+**Nichts wirft einen Schatten** — weder Bilder noch Mockups, Logos, Zettel oder
+Text. Kein `box-shadow`, kein `filter: drop-shadow()`, kein `text-shadow`.
+
+Tiefe entsteht stattdessen über:
+
+- **Überlappung** — ein zweites Bild vor dem ersten liest sich auch ohne Schlagschatten als davor
+- **Rahmenfarbe** — der chamferte Rahmen (`--frame-bg`) setzt das Bild von der Fläche ab
+- **Versatz und Drehung** — beim Stapel und beim Notizzettel
+
+**Ausnahme, und nur diese:** Die Blätter im Stapel-Rahmen bekommen eine
+Haarlinie (`1px rgba(48,49,61,.18)`). Ohne sie läge auf der hellen Variante
+Weiß auf Weiß und der Stapel wäre nicht mehr zu erkennen. Eine Linie ist kein
+Schatten.
+
+Warum: Weichgezeichnete Schatten sind das erste, was einen Post nach Vorlage
+aussehen lässt. Flächig gesetzt wirkt es ruhiger und passt zur Website, die
+denselben Weg geht. Nebenbei ist es beim Export billiger — jeder unscharfe
+Filter muss beim 3-fachen Rendern dreifach berechnet werden.
+
 ### Was global gilt und was pro Slide
 
 | Einstellung | Geltung | Warum |
@@ -403,7 +424,122 @@ soll ein Bildschirm zeigen, was ein Bildschirm zeigt. Die Displayfläche misst
    Screenshot dahinter liegen kann. Nur so bleiben Notch und Rundungen oben
 3. Displayfläche ausmessen und als Prozentwerte eintragen — sie hängt am
    konkreten Bild
-4. Schatten über `filter: drop-shadow()` auf dem Container, nicht im PNG
+4. **Kein Schatten im PNG** — die Posts sind schattenfrei (§5), ein eingebrannter
+   Schlagschatten im Mockup-Bild lässt sich nicht mehr abschalten
+
+### Szenen-Mockup (Perspektive)
+
+`assets/mockups/macbook-szene.png` — Macbook Air + iPad Pro, freigestellt aus
+einem Pixeden-PSD. Anders als `laptop.png` steht die Szene schräg, die
+Displayflächen sind also **Vierecke, keine Rechtecke**.
+
+Damit reicht die übliche Prozent-Box nicht. Der Screenshot wird per
+`matrix3d` in die Fläche projiziert:
+
+| | Macbook | iPad |
+|---|---|---|
+| Design-Größe | 3456 × 2234 | 1438 × 2164 |
+| Format | 1,547 | **0,6645** |
+| Eckradius | 0 | 57 px |
+| Viereck aus | Smart-Object | vermessene Glasfläche |
+
+**Zulieferung: ein iPad-Screenshot muss 0,6645 haben** (1 : 1,505), also z. B.
+1440 × 2167. Beim Macbook 1,547, dort verschwinden die unteren 15 % hinter der
+Tastaturschale.
+
+Die Matrizen bilden **Design-Pixel auf Bildpixel des 5742 px breiten
+Originals** ab; `--sk` skaliert von dort auf die Breite in der Slide und wird
+in `applyEdits()` gesetzt, damit eine Größenänderung mitläuft. Die Eckpunkte
+stammen aus dem `transform_box` der Smart-Objekte im PSD, sind also gemessen
+und nicht angepasst.
+
+**Beide Displays sind ausgeknockt**, der Ausschnitt am Macbook endet dort, wo
+das iPad davor liegt. Sonst läge der Screenshot vor dem Tablet. Der Ausschnitt
+kommt aus der Deckung der Screen-Ebene, **nicht** aus dem Design-Rechteck: das
+reicht hinter das Gehäuse und würde die Tastaturschale anschneiden.
+
+**Die Geräte standen auf einer Glasplatte.** Mit dem Hintergrund fällt die
+Platte weg, ihre Spiegelung bleibt aber als zweiter Körper stehen, und der
+Spalt dazwischen wird auf hellem Grund zur weißen Linie.
+
+**Der Spalt bekommt keinen festen Farbwert, sondern wird spaltenweise
+interpoliert.** Für jede Bildspalte: Medianfarbe der fünf Pixel über dem
+Spalt, Medianfarbe der fünf darunter, linear dazwischen. Am Display bleibt so
+Schwarz, am Gehäuse das Metallic, an der Kante der Verlauf. Es gibt keinen
+Farbsprung mehr und damit auch keinen Streifen.
+
+> Ein einheitlicher Ton reicht nicht. Der Spalt läuft quer über Displayrand
+> **und** Aluminium, also über zwei völlig verschiedene Töne. Jeder feste Wert
+> passt an einer Stelle und sitzt an der anderen als Fremdkörper.
+
+> Nicht wegschneiden: die Spiegelung hängt am Fuß des iPads, ein Schnitt nach
+> Zusammenhangskomponenten trennt den mit ab. Das war der erste Versuch.
+
+Die Füllung läuft über die **volle Breite**, auch unter dem iPad: dessen
+eigener Spalt ist sonst als weiße Linie unter dem Rahmen zu sehen. Mit einem
+festen Ton ging das nicht, da saß dort ein harter dunkler Block auf dem
+Aluminium; mit der Interpolation passt es.
+
+**Das iPad-Viereck kommt nicht aus dem Smart-Object.** Das sitzt im PSD zu
+hoch und lässt unten einen dreimal so breiten schwarzen Streifen stehen wie
+oben. Statt dessen wird die schwarze Glasfläche vermessen:
+
+1. Randpunkte der vier Kanten sammeln, **nur im mittleren Drittel** — an den
+   Ecken liegen sie auf den Rundungen
+2. Ausgleichsgerade je Kante, benachbarte schneiden → die **echten** Ecken.
+   Über Extrempunkte kommt ein zu kleines, verdrehtes Viereck heraus, weil
+   die Extrema auf den Rundungen sitzen
+3. Eckradius aus dem Abstand Ecke zu Glas: bei einem rechten Winkel liegt der
+   Scheitel der Rundung bei `r · (√2 − 1)` → **Glas 1514 × 2240, r = 95**
+4. **38 px** Rand nach innen (2,5 % der Breite) → Display 1438 × 2164
+5. Innenradius **konzentrisch**: `95 − 38 = 57`. Nur so bleibt der schwarze
+   Rand auch in den Ecken gleich breit
+
+Der Ausschnitt wird als gerundetes Rechteck im Design-Raum gezeichnet und dann
+durch die Homographie geschoben, im CSS macht `border-radius: 57px` mit
+`overflow: hidden` dasselbe. Ohne das stößt eine scharfe Bildecke in die runde
+Glasecke, und genau das sieht man sofort.
+
+Beim Macbook stimmt das Smart-Object, dort bleibt es dabei.
+
+Belegung: Kanban-Board auf dem Macbook, Projekt-Chat hochkant auf dem iPad.
+**Beide liegen originalgetreu auf ihrem Display, ohne Zoom.** Sie sind flacher
+als der Bildschirm, es bleibt also Fläche frei; die trägt mit `#FAFAFA` den
+Hintergrundton der Anwendung und ist deshalb nicht als Rand zu erkennen.
+
+> **Das Board rückt 5,15 % nach unten.** Das Smart-Object des PSD ragt oben
+> hinter die Blende des Deckels. Ohne Versatz verschwindet genau die Kopfzeile
+> der Anwendung, und der Screen sieht angeschnitten aus, obwohl gar nicht
+> gezoomt wurde. Unten wird der Screen von der Tastaturschale beschnitten —
+> das ist so gewollt und im Pixeden-Original genauso.
+
+> **Lizenz beachten.** Pixeden-Ressourcen sind für kommerzielle Projekte frei
+> und ohne Namensnennung nutzbar, dürfen aber **nicht weitergegeben** werden.
+> Das PSD gehört deshalb nicht ins Repo, nur das für uns abgeleitete PNG.
+
+### Nachgebaute UI-Bausteine
+
+Manche Produkt-Elemente liegen **nicht** als Screenshot, sondern als HTML im
+Generator. Bisher: der **Notizzettel** auf der Workflow-Slide.
+
+Nachbau aus `hivegrid-pitch/ui/components/StickyNote/StickyNote.tsx`,
+Variante `purple`:
+
+| Teil | Wert |
+|---|---|
+| Kopfleiste | `#ce93d8` |
+| Fläche | `#f3e5f5` |
+| Text | `#424242`, Gewicht 400, Zeilenhöhe 1,5 |
+| Menü | drei Punkte (FeatherMoreVertical), kein Balken |
+| Anfasser | zwei Ecken unten rechts, 45 % und 65 % Deckkraft |
+
+Die Vorlage ist 200 px breit bei 14 px Text; auf dem 1080er Blatt sind alle
+Maße rund 1,6× hochskaliert. **Farbwerte nicht neu erfinden** — sie stammen aus
+der Software und müssen wiedererkennbar bleiben.
+
+Warum HTML und nicht Screenshot: Kanten und Schrift bleiben beim 3×-Export
+genauso scharf wie der Rest der Slide, der Text ist austauschbar, und es gibt
+keine Scrollbalken oder Cursor-Reste im Bild.
 
 ---