/* ============================================================ Thalassa — Bildstrecken und Hero-Loop der Website (M2, 11.09.2026) Gehört zu js/szene.js; das Markup steht dort im Kopf. Farben kommen aus den Tokens — OHNE Farbrückfall: `var(--x, #hex)` sieht nach Token aus, griff aber schon einmal immer den Rückfall (tests/test_website_design.py, „Farbe hinter totem Token"). `--accent` steht in styles.css und in der Palette 2026-09, `--surface-inverse` nur in der Palette (die Startseite ab W3 lädt sie). Die Unterschrift erbt ihre Farbe vom Abschnitt: Auf --surface-inverse ist sie hell, auf Sand dunkel, ohne eigene Regel. Die Bilder sind 16:10 mit durchsichtigem Grund (der Schatten liegt im Alphakanal). Die Bühne reserviert das Maß, damit beim Laden nichts springt; das erste Bild steht ohne JavaScript, die Punkte baut JS. ============================================================ */ .szene { margin: 0; color: inherit; } .szene__buehne { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .szene__bild { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .7s ease; } .szene__bild.is-aktiv { opacity: 1; } .szene__bild img { display: block; width: 100%; height: 100%; object-fit: contain; } .szene__text { padding: 14px 4px 0; font-size: var(--fs-body, 1rem); line-height: var(--lh-body, 1.5); min-height: calc(2 * var(--lh-body, 1.5) * 1em + 14px); } .szene__texte { list-style: none; margin: 0; padding: 0; } /* Nur die aktive Unterschrift ist zu sehen; die übrigen bleiben für Vorleser im Baum — eine Bildstrecke ist eine Liste von Sätzen, keine Folge von Live-Meldungen. */ .szene__texte > li:not(.is-aktiv) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .szene__punkte { display: flex; gap: 10px; padding: 12px 4px 0; } .szene__punkt { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: currentColor; opacity: .32; cursor: pointer; transition: opacity .25s ease, transform .25s ease; } .szene__punkt[aria-selected="true"] { opacity: 1; background: var(--accent); transform: scale(1.25); } .szene__punkt:focus-visible { outline: 2px solid var(--focus-ring, currentColor); outline-offset: 3px; } /* Hero-Loop: das Video füllt seinen Rahmen, das Standbild ebenso. */ .szene-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--surface-inverse); } @media (prefers-reduced-motion: reduce) { .szene__bild, .szene__punkt { transition: none; } } /* Bestandsseiten bis W6–W8: Die Bühne der Anwendungsfall-Seiten (`.fall-film`, site.css) war für ein hochkantes Video gebaut — dunkle Karte, `line-height: 0`. Mit der Bildstrecke darin braucht sie Zeilenhöhe, Innenabstand und helle Schrift; die durchsichtigen Bilder liegen auf der dunklen Karte richtig. Fällt mit dem Neubau der Seiten weg, nicht vorher. */ .fall-film--szene { line-height: 1.5; padding: 10px 10px 14px; color: rgba(255, 255, 255, .82); } /* Punkt 1 (Arpad, 15.09.2026): „Alle App-Animationen sehen abgeschnitten aus." Das stimmt und ist so gebaut: `tools/szenen_render.py` setzt das Overlay-Fenster oben auf die Leinwand und schneidet es unten ab — die Knopfreihen darunter tragen die Geschichte nicht (Dateikopf dort). Nachgemessen am 15.09. im Alphakanal: In acht der neun Strecken reicht das Fenster bis in die LETZTE Bildzeile (l1 1074 belegte Punkte, l2/p1/p3 1447, l3/l6/p2 1057, l4 914); nur l5 endet frei bei y=730. Die Kante bleibt — nachrendern hiesse alle 148 Bilder neu aufnehmen, und das Fenster waere danach so klein, dass die Schrift in der Strecke nicht mehr zu lesen ist (genau der Befund, der M1 zu M2 gefuehrt hat). Was bleibt, ist die HARTE Kante, und die liest sich als Fehler. Acht Prozent Verlauf machen daraus „geht weiter": Bei l5 liegt dieser Streifen (y 920..1000) vollstaendig im durchsichtigen Teil und aendert dort nichts. */ .szene__bild img { -webkit-mask-image: linear-gradient(#000 92%, transparent 100%); mask-image: linear-gradient(#000 92%, transparent 100%); } /* ==================================================================== DER SCHNELLSTART-FILM (20.09.2026) ==================================================================== Er steht dort, wo bis heute eine Bildstrecke stand: auf der Startseite im Abschnitt „Product in action", auf den fünf englischen Landingpages unter „How it works". Zehn Kapitel, 2:11 Minuten, mit Ton. `aspect-ratio` HÄLT DEN PLATZ, bevor der Film da ist. Ohne sie wäre der Kasten null hoch, bis das Standbild geladen ist, und alles darunter spränge beim Laden nach unten — dieselbe Regel wie bei den Zickzack-Kacheln der Startseite. Der Film selbst wird erst auf Knopfdruck geholt (`preload="none"`); zu sehen ist bis dahin das Standbild. Der dunkle Grund ist der, den der Film mitbringt, damit in der Lücke zwischen Standbild und erstem Einzelbild nichts aufblitzt. */ /* 48 PX ZUM TEXT DARUEBER (23.09.2026, Designer: "Product in action: vertical spacing per the spacing system between description and screenshot/video"). Bis dahin stand der Film mit den 16 px der Einleitung darunter an ihr -- enger als jeder Abstand zwischen zwei Absaetzen derselben Seite. --space-12 ist die Stufe des Abstandssystems fuer "neuer Block im selben Abschnitt". */ .schnellstart { margin: var(--space-12, 48px) 0 0; } /* DIE BREITE, UND WARUM SIE ZWEIMAL DASTEHT (Arpad am 20.09.: "es ist sehr gross, mach es kleiner, es soll nicht breiter sein als die Seite und viel kleiner auch in der Hoehe"). Er sah den Film 1920 px breit, breiter als das Fenster, mit einem waagerechten Rollbalken darunter. Das