Screens der Szene vollstaendig sichtbar einpassen

Die Aufnahmen lagen auf dem Design-Rechteck des Smart-Objekts. Davon ist aber
nicht alles zu sehen: oben verdeckt die Blende des Deckels samt
Kameraaussparung, unten die Tastaturschale, rechts das davorstehende iPad.
Aus den Ecken geschaetzt kam oben 3,8 % heraus, tatsaechlich sind es 6,9 %,
und die Kopfzeile der Anwendung verschwand.

Jetzt wird gemessen: die Deckung der Screen-Ebene per Umkehr-Homographie in
den Design-Raum zurueckgerechnet, darin das groesste achsenparallele Rechteck
gesucht. Es misst 2726 x 1682 bei (74, 154), also 78,9 Prozent der Breite. Die
Aufnahme liegt darin zentriert eingepasst, nicht formatfuellend: nichts wird
abgeschnitten und nichts gezoomt.

Die freie Flaeche traegt den aus den Bildecken gemessenen Hintergrundton der
jeweiligen Aufnahme. Fuenf Stufen Unterschied reichen, damit sie sich als Rand
abzeichnet.

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

post1.html

@@ -636,15 +636,21 @@
     position: absolute; top: 0; left: 0; width: 100%;
     transform-origin: top left;
   }
-  /* Beide Aufnahmen liegen originalgetreu auf ihrem Display, ohne Zoom.
-     Sie sind flacher als der Bildschirm, es bleibt also Flaeche frei; die
-     traegt mit #FAFAFA den Hintergrundton der Anwendung und ist deshalb nicht
-     als Rand zu erkennen.
-     Das Board rueckt 5,15 % nach unten: das Smart-Object des PSD ragt oben
-     hinter die Blende des Deckels, ohne Versatz verschwindet die Kopfzeile.
-     Der Chat steht mittig, sein Display verdeckt nichts. */
-  .szene-mb, .szene-ip { background: #FAFAFA; }
-  .szene-mb > img { transform: translate(0, 5.15%); }
+  /* Beide Aufnahmen liegen originalgetreu auf ihrem Display: nichts gezoomt,
+     nichts abgeschnitten. Was frei bleibt, traegt den Hintergrundton der
+     Aufnahme und ist deshalb nicht als Rand zu erkennen.
+     Vom Macbook-Display ist nicht alles zu sehen: oben die Blende des
+     Deckels samt Kameraaussparung, unten die Tastaturschale, rechts das
+     davorstehende iPad. Das groesste vollstaendig sichtbare Rechteck im
+     Design-Raum ist 2726 x 1682 bei (74, 154) - gemessen, nicht geschaetzt.
+     Das Board liegt darin zentriert, deshalb Breite 78,877 % und der
+     Versatz unten. Der Chat steht mittig, sein Display verdeckt nichts. */
+  /* Exakt der Hintergrundton der jeweiligen Aufnahme, aus deren Ecken
+     gemessen. Schon fuenf Stufen Unterschied zeichnen die freie Flaeche
+     als Rand nach. */
+  .szene-mb { background: #F5F4F4; }
+  .szene-ip { background: #FAFAFA; }
+  .szene-mb > img { width: 78.877%; transform: translate(2.715%, 14.645%); }
   .szene-ip > img { transform: translate(0, 16.49%); }
 
   .laptop-missing {

rules.md

@@ -503,6 +503,31 @@ 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.
+
+### Vom Macbook-Display ist nicht alles zu sehen
+
+Oben verdeckt die Blende des Deckels samt Kameraaussparung, unten die
+Tastaturschale, rechts das davorstehende iPad. Die Ecken des Smart-Objekts
+sagen darüber nichts: daraus geschätzt kommt oben 3,8 % heraus, tatsächlich
+sind es **6,9 %**.
+
+Deshalb wird gemessen statt geschätzt:
+
+1. Deckung der Screen-Ebene per **Umkehr-Homographie in den Design-Raum**
+   zurückrechnen — dort ist die Verdeckung eine Maske, kein Rätsel
+2. Darin das **größte achsenparallele Rechteck** suchen (Histogramm-Verfahren
+   je Zeile) → **2726 × 1682 bei (74, 154)**, also 78,9 % der Breite und
+   75,3 % der Höhe
+3. Aufnahme darin zentriert einpassen, `contain`, **nie** `cover`
+
+Daher `width: 78.877%` und der Versatz. **Nichts wird abgeschnitten und nichts
+gezoomt** — was frei bleibt, trägt den aus den Bildecken gemessenen
+Hintergrundton der Aufnahme (`#F5F4F4` Board, `#FAFAFA` Chat). Schon fünf
+Stufen Unterschied zeichnen die freie Fläche als Rand nach.
+
+Das Zielformat für eine Macbook-Aufnahme ist damit **1,62** statt 1,547; wer
+näher dran liegt, füllt mehr Fläche. Passen muss es nicht, es wird ohnehin
+eingepasst.
 **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.