/* ═══════════════════════════════════════════════════════════════════════════ teil-zi — Die schwebenden Punkte am Bühnenbild, und die 3D-Brille ─────────────────────────────────────────────────────────────────────────── Christopher, 04.10.2026 (Auftrag 1 in Company/Web/Designauftraege-2026-10-04.md): „Der Sehtest ohne Termin soll bitte nicht bei der Brille sitzen. Die Brille machst du etwas kleiner und noch etwas weiter links. Und dann möchte ich noch mehr von diesen schwebenden Punkten haben … Diese schwebenden Punkte sollen sich bitte nicht vor dem Gesicht der Frau befinden, aber irgendwo am Bildrand. Beachte das bei der Positionierung." ── Die freie Zone, gerechnet statt geschätzt ────────────────────────────── .buehne-bild ist am Anschlag 640 × 691 (aspect-ratio 1/1.08, max-width 640). .foto img: object-fit:cover, object-position:62% 32%, transform:scale(1.04), Quelle hero.webp 1536 × 1024. Deckung nach Höhe: 691/1024 = 0,6748 skalierte Breite: 1536 × 0,6748 = 1036 px Überhang: 1036 − 640 = 396 px Versatz bei 62 %: −0,62 × 396 = −245 px sichtbar also Quelle x 364 … 1312, mit dem 1,04-Zoom x 382 … 1294. ACHTUNG, die erste Rechnung hier war falsch: sie ging von 1536 × 1024 aus, weil das diese Maße behauptete. **hero.webp ist 1400 × 933** (mit PIL gemessen; die Maßangabe im Markup war falsch und ist korrigiert). Richtig gerechnet bei Bild 433 px (Fenster 1024 px): Deckung 468/933 = 0,5016 · skalierte Breite 702 px · Überhang 269 px · Versatz −167 px · sichtbar Quelle x 333…1196, mit dem 1,04-Zoom x 350…1179. Die Silhouette der Frau beginnt bei Quelle x = 702 (über die Kantenenergie je Spalte gemessen, nicht geschätzt) — das sind **42,5 %** der Rahmenbreite, die weichen äußeren Haarspitzen etwas davor. Darum endet hier keine Pille später als bei 34 %. FREI : x 0–36 % über die ganze Höhe (links unscharfer Hintergrund, unten ihre Kleidung — kein Gesicht) VERBOTEN: x ≥ 38 % oberhalb y 78 % (Haar und Gesicht) FREI : alles außerhalb des Rahmens (top/bottom negativ) ── Warum Container-Queries und nicht Fensterbreiten ────────────────────── Zuerst standen hier @media-Regeln auf die Fensterbreite. **Am laufenden Server gemessen (04.10.2026, 1024 px Fenster): das Bühnenbild ist dort nur 415 px breit**, die freie Zone also 149 px — jede lange Pille wurde mit Auslassungspunkten abgeschnitten („Handgefertigte Fassu…"). Die Fensterbreite sagt eben nichts über die Bildbreite: zwischen 940 und ~1400 px teilt das Bühnenraster die Breite auf zwei Spalten auf, darunter bekommt das Bild plötzlich wieder die volle Bahn. Deshalb fragt dieser Stil die **Breite des Bildes selbst** ab. Gemessene Eckwerte: 1850 px Fenster → Bild 640 px · 1024 px → 415 px · 375 px → 343 px. ── Die 3D-Brille ───────────────────────────────────────────────────────── Vorher left:−36 % / width:86 % / height:58 %; sie lag damit genau dort, wo „Sehtest ohne Termin" stand (left:16 %, bottom:−4 %). Das war die Kollision, die er meint. Jetzt kleiner und weiter links; die Pille ist weg von dort. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 3D-Brille: kleiner, weiter links ───────────────────────────────────── */ #brille3d{ left:-50%; bottom:-8%; width:64%; height:44% } @media (max-width:940px){ #brille3d{ left:-14%; width:52%; height:36% } } /* Das Bühnenbild wird zum Maßstab für seine eigenen Pillen. */ .buehne-bild{ container-type:inline-size; container-name:buehne } /* ── Grundgestalt der Punkte ────────────────────────────────────────────── */ .buehne-bild .notiz{ font-size:clamp(.64rem, .5rem + .34vw, .76rem); animation-duration:var(--schwebe-dauer, 5.4s); animation-delay:var(--schwebe-start, 0s); max-width:33%; /* Notbremse: keine Pille wächst ins Gesicht */ } /* Außerhalb des Rahmens darf eine Pille breiter sein — dort ist nichts zu verdecken. */ .buehne-bild .notiz.draussen{ max-width:60% } /* Linke Zone — x 1…36 %. Versetzt, damit es kein Listchen wird. */ .notiz.n1{ left: 1%; top: 5%; --schwebe-start:-.4s; --schwebe-dauer:5.4s } .notiz.n2{ left:11%; top:16%; --schwebe-start:-2.3s; --schwebe-dauer:6.1s } .notiz.n3{ left: 1%; top:27%; --schwebe-start:-4.1s; --schwebe-dauer:5.0s } .notiz.n4{ left: 3%; top:37%; --schwebe-start:-1.2s; --schwebe-dauer:6.6s } .notiz.n5{ left: 1%; top:47%; --schwebe-start:-3.3s; --schwebe-dauer:5.8s } .notiz.n6{ left: 6%; top:57%; --schwebe-start:-5.2s; --schwebe-dauer:6.3s } /* Außerhalb des Rahmens — über und unter dem Bild, über dem Seitengrund. */ .notiz.n7{ top:-4%; left: 1%; --schwebe-start:-2.8s; --schwebe-dauer:5.6s } .notiz.n8{ top:-4%; right:3%; --schwebe-start:-.9s; --schwebe-dauer:6.0s } .notiz.n9{ bottom:-5%; right:4%; --schwebe-start:-3.7s; --schwebe-dauer:5.2s } /* Die alten Plätze a/b/c sind damit erledigt; sie stehen nicht mehr im Markup. */ /* ═══ Schmaleres Bühnenbild ═════════════════════════════════════════════════ Ab hier passt ein langes Wort nicht mehr in eine Zeile. Statt es abzuschneiden, darf die Pille umbrechen und trennen — seine Wörter bleiben vollständig. `hyphens` braucht die Sprache; setzt sie. */ @container buehne (max-width: 600px){ .buehne-bild .notiz{ white-space:normal; -webkit-hyphens:auto; hyphens:auto; font-size:.72rem; line-height:1.25; text-align:left; padding:.46em .82em .46em .5em; } .buehne-bild .notiz .kugel{ width:19px; height:19px; font-size:.6rem } /* Fünf innen statt sechs: zwei Zeilen brauchen mehr Höhe. Zuerst geht, was er nicht selbst genannt hat. */ .notiz.n6{ display:none } .notiz.n1{ left:1%; top: 4% } .notiz.n2{ left:1%; top:17% } .notiz.n3{ left:1%; top:30% } .notiz.n4{ left:1%; top:43% } .notiz.n5{ left:1%; top:56% } } @container buehne (max-width: 460px){ /* Vier innen. Gemessen bei 1024 px Fenster: Bild 433 px, freie Zone 156 px. Alle vier stehen hier an der linken Kante — bei 12 % Einrückung reichte „Meisterbetrieb" gemessen bis 42 % und damit in ihr Haar. */ .notiz.n4{ display:none } .notiz.n1{ left:1%; top: 5% } .notiz.n2{ left:1%; top:21% } .notiz.n3{ left:1%; top:37% } .notiz.n5{ left:1%; top:53% } /* Die drei außerhalb brechen hier auf zwei Zeilen und werden dadurch höher. Gemessen ragten sie bei top:−4 % um 5,4 % in die obere Bildkante hinein; −10,5 % stellt sie vollständig vor den Rahmen. */ .buehne-bild .notiz.draussen{ white-space:normal; max-width:46% } .notiz.n7,.notiz.n8{ top:-10.5% } .notiz.n9{ bottom:-10.5% } } @container buehne (max-width: 400px){ /* Telefon. Innen ist kein Platz mehr, der nicht ihr Haar berührt — die vier kürzesten Punkte stellen sich an die vier Ecken, vollständig AUSSERHALB des Rahmens. Lieber vier, die sitzen, als neun im Gesicht. */ .notiz.n1,.notiz.n4,.notiz.n5,.notiz.n6,.notiz.n8{ display:none } .buehne-bild .notiz{ font-size:.68rem; max-width:48%; white-space:nowrap; hyphens:manual } /* −11,5 % statt −9,5 %: bei 375 px gemessen ragten die Pillen sonst noch 1,2 bis 3,2 % in die Bildkante (Polster macht sie höher als die Schrift). */ .notiz.n7{ top:-11.5%; left:0; right:auto } .notiz.n2{ top:-11.5%; right:0; left:auto } .notiz.n3{ bottom:-11.5%; left:0; top:auto } .notiz.n9{ bottom:-11.5%; right:0 } } /* Luft über und unter dem Bild, damit die vier Eckpunkte des Telefons wirklich außerhalb stehen können. Die Containerabfrage oben kann das nicht setzen — ein Container stylt seine Kinder, nie sich selbst. */ @media (max-width:620px){ .buehne-bild{ margin-block:2.6rem } } /* ── Netze ────────────────────────────────────────────────────────────────── teil-ze-schwung.css schaltet .notiz bei prefers-reduced-motion still; hier nur die Sicherheit, dass eine Pille ohne JavaScript nie unsichtbar bleibt — sie hängt an keiner Skriptklasse, aber der nächste Leser soll es wissen. */ @media (prefers-reduced-motion: reduce){ .buehne-bild .notiz{ animation:none } }