/* RJ Design, „Daumenkino“. Filmwelt: feste Bühne (Canvas), Sticky-Szenen, Drehbuchtexte, Titelkarten, Vorspann. */

/* ---------- Die Bühne: ein festes Canvas, 100lvh hoch, damit die iOS-Adressleiste nichts verschiebt ---------- */
.buehne { position: fixed; top: 0; left: 0; width: 100vw; height: 100lvh; z-index: 0; background: var(--kino); }
.no-js .buehne { display: none; }

/* ---------- Szenen: Abschnitte geben die Scrollstrecke vor, die Textbühne liegt fest über dem Canvas.
   (Fest statt sticky: so schiebt sich an den Szenengrenzen nichts von unten herein, und jede Szene nutzt ihre ganze Strecke.) ---------- */
.szene { position: relative; z-index: 1; height: var(--hoehe, 400svh); }
/* Scrollstrecken je Szene (Brief 5; am 08.10.2026 morgens um 100 svh verlängert, Riccardo: mehr Raum und Zeit): Vorspann 260 svh
   (Standbild, Daumen, Blättern, Fahrt in die Seite; main.js setzt 180 svh, solange das Manifest keine Bildfolge hat), Salon 660, alle
   anderen Filmszenen 620, Gischt (Finale) 620 + 100 Auslauf in die Papierwelt (data-auslauf) */
#vorspann { --hoehe: 260svh; }
#salon { --hoehe: 660svh; }
#werkstatt, #tischlerei, #hochglanz, #cafe, #produkt { --hoehe: 620svh; }
#gischt { --hoehe: 820svh; }   /* +100 svh seit der Auflösung (Dose steigt aus dem Eis), damit der längere Film nicht schneller läuft */
/* Scrollstopp am Endbild (Riccardo, 08.10.2026): ein unsichtbarer Einrastpunkt bei p .83, wenn die Kamera im Detail steht und die
   Titelkarte da ist. Wer am Handy durchwischt, bleibt dort stehen (scroll-snap-stop), langsames Scrollen rastet nur in der Nähe ein
   (proximity). Beim Zurückspulen schaltet main.js das Einrasten ab (html.ohne-einrasten). */
html { scroll-snap-type: y proximity; }
html.ohne-einrasten { scroll-snap-type: none; }
/* Am Handy kein Einrasten (Riccardo 08.10. nachmittags: „das Scrollerlebnis fühlt sich komisch an“, der Schwung nach dem Loslassen soll
   bleiben): Einrastpunkte bremsen dort den Schwung und ziehen nach dem Loslassen zum nächsten Punkt. Das Endbild steht trotzdem eine Weile. */
@media (pointer: coarse) { html { scroll-snap-type: none; } }
.szene__halt { position: absolute; left: 0; top: calc(100% * .83); width: 1px; height: 1px; pointer-events: none;
  scroll-snap-align: start; scroll-snap-stop: always; }
#gischt .szene__halt { top: calc((100% - 100svh) * .83); }   /* Auslauf: p rechnet über Höhe minus Bühne */
.no-js .szene__halt { display: none; }
.szene__buehne { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.js .szene__buehne { position: fixed; top: 0; left: 0; width: 100%; height: 100svh; visibility: hidden; pointer-events: none; }
.js .szene.ist-aktiv .szene__buehne { visibility: visible; }
.standbild { display: none; }
#dein-film, #pause { scroll-margin-top: 0; }

/* Drehbuchtexte, die auf der Skizze stehen: Graphit auf Papier. Trifft das Licht sie, werden sie zu Projektorlicht. */
.szenenkopf, .randnotiz { position: absolute; left: var(--rand); margin: 0; color: var(--graphit); transition: color .5s var(--ease-film), text-shadow .5s var(--ease-film); }
.szenenkopf { top: calc(var(--kopf-hoehe) + 1.4rem); font: 700 var(--fs-kopf)/1.3 var(--courier); letter-spacing: .14em; text-transform: uppercase; }
.randnotiz { top: calc(var(--kopf-hoehe) + 1.4rem + 2.4em); font: italic 400 clamp(.95rem, .85rem + .4vw, 1.2rem)/1.4 var(--courier); }
.szenenkopf.im-licht, .randnotiz.im-licht { color: var(--licht); text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .45), 0 4px 22px rgba(0, 0, 0, .5); }
/* Weicher Schleier hinter Szenenkopf und Randnotiz, sobald sie im Licht stehen (helle Fenster in Tischlerei und Rösterei) */
.szenenkopf::before, .randnotiz::before { content: ""; position: absolute; z-index: -1; inset: -90% -14% -90% -10%; pointer-events: none;
  opacity: 0; transition: opacity .5s var(--ease-film);
  background: radial-gradient(ellipse at 42% 50%, rgba(7, 8, 7, .5) 0%, rgba(7, 8, 7, .26) 45%, rgba(7, 8, 7, 0) 72%); }
.szenenkopf.im-licht::before, .randnotiz.im-licht::before { opacity: 1; }

/* Aussagen: Projektorlicht über Film, weicher Verlauf dahinter statt Kasten */
.aussage { position: absolute; left: var(--rand); bottom: clamp(4.5rem, 17svh, 10rem); max-width: min(38rem, 100% - 2 * var(--rand)); margin: 0;
  font: 400 var(--fs-aussage)/1.28 var(--courier); color: var(--licht); text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 28px rgba(0, 0, 0, .55); }
.aussage::before { content: ""; position: absolute; z-index: -1; inset: -55% -45% -70% -60%; pointer-events: none;
  background: radial-gradient(ellipse at 45% 50%, rgba(7, 8, 7, .74) 0%, rgba(7, 8, 7, .4) 38%, rgba(7, 8, 7, 0) 72%); }
.aussage .zeile { display: block; }

/* Titelkarten: je Film eine eigene Schrift (Brief 3) */
/* Im unteren Drittel: das Detail, auf das die Kamera zufährt, bleibt in der Bildmitte frei (Regie-Durchsicht 08.10.2026) */
.titelkarte { position: absolute; inset: 0; display: grid; place-content: end center; text-align: center;
  padding: var(--kopf-hoehe) var(--rand) calc(clamp(3.2rem, 12svh, 7.5rem) + env(safe-area-inset-bottom, 0px));
  color: var(--licht); text-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 40px rgba(0, 0, 0, .55); pointer-events: none; }
.titelkarte::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 85% 48% at 50% 80%, rgba(7, 8, 7, .65) 0%, rgba(7, 8, 7, .26) 52%, rgba(7, 8, 7, 0) 100%); }
.titelkarte p { margin: 1.1em 0 0; font: 400 var(--fs-kopf)/1.4 var(--courier); letter-spacing: .14em; }
.titel { margin: 0; font-weight: 400; line-height: 1.02; letter-spacing: 0; text-wrap: balance; overflow-wrap: anywhere; }
.titel--salon { font-family: var(--bodoni); font-style: italic; font-optical-sizing: auto; font-size: clamp(2.3rem, .4rem + 9.2vw, 8.5rem); }
.titel--werkstatt { font-family: var(--shoulders); font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(2.6rem, .1rem + 15.5vw, 14rem); line-height: .92; }
.titel--tischlerei { font-family: var(--fraunces); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; font-weight: 400; font-size: clamp(2.6rem, .5rem + 9.6vw, 9rem); }
/* Szenen 4 bis 7 (Bau-Runde 5): Hochglanz in Unbounded 800 (ersetzt Gym KREIDE), Café Crema in Shrikhand, Produkt „Schicht für Schicht“ in Syne 800,
   Gischt (Finale, seit 08.10.2026 statt Sternwarte) in Michroma, gesperrt (padding-left gleicht den Nachlauf des letzten Buchstabens aus, damit die Zeile mittig steht) */
.titel--hochglanz { font-family: var(--unbounded); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.8rem, .2rem + 8.2vw, 8.4rem); line-height: 1; }   /* neun breite Versalien: am Handy kleiner als KREIDE, sonst bricht das Wort */
.titel--cafe { font-family: var(--shrikhand); font-weight: 400; font-size: clamp(2.9rem, .6rem + 11vw, 10.4rem); line-height: 1.04; }
.titel--produkt { font-family: var(--syne); font-weight: 800; letter-spacing: -.01em; font-size: clamp(2.1rem, .3rem + 7.4vw, 7rem); line-height: 1.02; }
.titel--gischt { font-family: var(--michroma); font-weight: 400; text-transform: uppercase; letter-spacing: .28em; padding-left: .28em; font-size: clamp(1.35rem, .2rem + 5.6vw, 5.4rem); line-height: 1.15; }
@media (max-width: 40rem) {
  .titel--salon { font-size: clamp(2.3rem, .4rem + 10.4vw, 8.5rem); }
  .titel--cafe { font-size: clamp(3.3rem, .6rem + 12.8vw, 10.4rem); }
}
.titel--anderes { font-family: var(--bodoni); font-style: normal; font-optical-sizing: auto; font-size: clamp(2.3rem, .4rem + 9.2vw, 8.5rem); }
/* Titelschriften werden erst angefordert, wenn die Szene näher kommt: bis dahin bleiben Titelkarten aus dem Layout */
.js .titelkarte:not(.schrift-bereit) { display: none; }

/* ---------- Blenden (Zeile für Zeile, keine Schiebebewegung) ---------- */
.blende { opacity: 0; transition: opacity var(--dur-zeile) var(--ease-film); }
.blende.ist-da { opacity: 1; }
.titelkarte.blende { transition-duration: 260ms; }
.titelkarte.blende.ist-da { transition-duration: var(--dur-blende); }
.aussage .zeile { opacity: 0; transition: opacity var(--dur-zeile) var(--ease-film); }
.aussage.ist-da .zeile { opacity: 1; transition-delay: calc(var(--i, 0) * 280ms); }

/* ---------- Schreibmaschine: Zeile wird in n Schritten freigelegt (clip-path), Courier ist dicktengleich,
   also ein Schritt = ein Zeichen. Die Schrittzahl setzt texte.js je Element. ---------- */
.js .tipp { display: block; width: max-content; max-width: 100%; white-space: pre; clip-path: inset(0 100% 0 0); }
.js .tipp.ist-da { animation: tippen var(--tipp-dauer, 800ms) steps(20, end) forwards; }
.js .tipp.ist-da.getippt { animation: none; clip-path: none; }
@keyframes tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Vorspann ---------- */
.vorspann__text { position: absolute; left: var(--rand); top: calc(var(--kopf-hoehe) + clamp(1.6rem, 8svh, 5rem)); max-width: calc(100% - 2 * var(--rand));
  color: var(--licht); text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 30px rgba(0, 0, 0, .55); }
/* „RJ Design zeigt“: das Logo (Marke) und dahinter „zeigt“ auf derselben Grundlinie wie „Design“; „zeigt“ halb so hoch wie die Marke */
.vorspann__zeigt { --logo-h: clamp(2.75rem, 1.6rem + 3.8vw, 5rem); display: flex; align-items: baseline; gap: .5em; margin: 0;
  font: 400 calc(var(--logo-h) * .5)/1 var(--courier); }
.logo--vorspann { flex: none; }
.vorspann__titel { display: block; margin: .3em 0 .25em -.06em; font: 700 clamp(2.1rem, .6rem + 6.4vw, 6.4rem)/1.05 var(--courier); letter-spacing: .16em; }
/* Weicher Schleier hinter dem Vorspanntext: links (quer) bzw. oben (hoch), ohne Kante */
.vorspann__schleier { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(7, 8, 7, .78) 0%, rgba(7, 8, 7, .5) 32%, rgba(7, 8, 7, .12) 56%, rgba(7, 8, 7, 0) 72%); }
@media (max-aspect-ratio: 1/1) { .vorspann__schleier { background: linear-gradient(180deg, rgba(7, 8, 7, .82) 0%, rgba(7, 8, 7, .55) 30%, rgba(7, 8, 7, .1) 52%, rgba(7, 8, 7, 0) 64%); } }
.js .szene__buehne .vorspann__text, .js .szene__buehne .markenzeile, .js .szene__buehne .vorspann__schleier { transition: opacity .5s var(--ease-film); }
.js .szene__buehne.weg .vorspann__text, .js .szene__buehne.weg .markenzeile, .js .szene__buehne.weg .vorspann__schleier { opacity: 0; }
.no-js .vorspann__schleier { display: none; }
.vorspann__zeile { margin: 0; font: 400 clamp(1.05rem, .9rem + .7vw, 1.6rem)/1.35 var(--courier); max-width: 26em; }
.vorspann__einsatz { display: flex; align-items: center; gap: .9em; margin-top: clamp(1.4rem, 4svh, 2.6rem); font: 700 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1 var(--courier); }
.pfeil { width: 1.6em; height: 2.6em; overflow: visible; }
/* „Oder ich blättere für dich“: leise zweite Wahl unter „Jetzt du.“, startet die Vorführung (main.js) */
.vorspann__selbst { margin: clamp(.6rem, 1.6svh, 1rem) 0 0; }
.abspielen { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: 400 clamp(.92rem, .86rem + .3vw, 1.1rem)/1.2 var(--courier); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  opacity: .82; transition: opacity var(--dur-schnitt) linear; }
.abspielen__zeichen { font-size: .78em; text-decoration: none; }
@media (hover: hover) { .abspielen:hover { opacity: 1; } }
.abspielen:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; opacity: 1; }
.no-js .vorspann__selbst { display: none; }
.js .szene__buehne .abspielen { pointer-events: auto; }            /* die Bühne selbst lässt Klicks durch (pointer-events: none) */
.js .szene__buehne.weg .abspielen { pointer-events: none; }        /* ausgeblendet nicht mehr anklickbar */
.pfeil path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.pfeil path:nth-child(1) { animation: kochen-a 375ms steps(1, end) infinite; }
.pfeil path:nth-child(2) { animation: kochen-b 375ms steps(1, end) infinite; }
.pfeil path:nth-child(3) { animation: kochen-c 375ms steps(1, end) infinite; }
@keyframes kochen-a { 0%, 33.2% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes kochen-b { 0%, 33.2% { opacity: 0; } 33.3%, 66.5% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes kochen-c { 0%, 66.5% { opacity: 0; } 66.6%, 100% { opacity: 1; } }
.markenzeile { position: absolute; right: var(--rand); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); margin: 0; max-width: calc(100% - 2 * var(--rand) - 12rem);
  font: 400 var(--fs-klein)/1.4 var(--courier); letter-spacing: .12em; text-transform: uppercase; color: var(--licht); text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 14px rgba(0, 0, 0, .5); }
@media (max-width: 40em) { .markenzeile { right: auto; left: var(--rand); bottom: calc(2.6rem + env(safe-area-inset-bottom, 0px)); text-align: left; max-width: calc(100% - 2 * var(--rand)); } }

@media (prefers-reduced-motion: reduce) {
  .pfeil path { animation: none !important; }
  .pfeil path:nth-child(1) { opacity: 1; }
  .aussage.ist-da .zeile { transition-delay: 0s; }
}

/* ---------- Vorfilm (Brief 0a): Plakat mit drei Knöpfen, dann der Film mit Untertiteln, am Ende Übergang in den Vorspann.
   Kino-Schwarz, Projektorlicht, Courier Prime; keine neue Gestaltungssprache. Liegt über allem, solange er offen ist. ---------- */
.vorfilm { position: fixed; inset: 0; z-index: 70; background: var(--kino); color: var(--licht); overflow: hidden;
  touch-action: none; overscroll-behavior: contain; }
.vorfilm[hidden], .no-js .vorfilm { display: none; }
html.vorfilm-offen, html.vorfilm-offen body { overflow: hidden; }
.vorfilm__plakat, .vorfilm__plakat img, .vorfilm__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vorfilm__video { background: var(--kino); opacity: 0; transition: opacity var(--dur-blende) var(--ease-film); }
/* Hochformat (9:16-Film auf 9:19,5-Bildschirm): Ausschnitt etwas nach links, damit der Textrand der Seiten-Attrappe im letzten Bild sichtbar bleibt */
@media (orientation: portrait) { .vorfilm__video { object-position: 30% 50%; } }
.vorfilm.laeuft .vorfilm__video { opacity: 1; }
/* Weicher Schleier unten, damit Knöpfe und Untertitel auf dem Bild lesbar bleiben (ohne Kante) */
.vorfilm__schleier { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 8, 7, .82) 0%, rgba(7, 8, 7, .45) 26%, rgba(7, 8, 7, 0) 52%); transition: opacity var(--dur-blende) var(--ease-film); }
.vorfilm.laeuft .vorfilm__schleier { opacity: .55; }
/* Startbild: drei Knöpfe unten links, am Handy untereinander */
.vorfilm__wahl { position: absolute; left: var(--rand); right: var(--rand); bottom: calc(clamp(1.6rem, 6svh, 4rem) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.vorfilm.laeuft .vorfilm__wahl { display: none; }
.vorfilm__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75em 1.6em; border: 1px solid var(--licht); color: var(--licht);
  font: 700 var(--fs-text)/1 var(--courier); letter-spacing: .04em; white-space: nowrap; text-shadow: none;
  transition: background-color var(--dur-schnitt) linear, color var(--dur-schnitt) linear; }
.vorfilm__knopf--haupt { background: var(--licht); color: var(--kino); }
.vorfilm__knopf--leise { border-color: transparent; font-weight: 400; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; padding-inline: .6em; }
.vorfilm__knopf:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; }
@media (hover: hover) {
  .vorfilm__knopf:hover { background: var(--licht); color: var(--kino); }
  .vorfilm__knopf--haupt:hover { background: var(--papier); }
  .vorfilm__knopf--leise:hover { background: transparent; color: var(--licht); text-decoration-thickness: 2px; }
}
@media (max-width: 40em) {
  .vorfilm__wahl { flex-direction: column; align-items: stretch; gap: .7rem; }
  .vorfilm__knopf { width: 100%; }
}
/* Während des Films: Ton an/aus und Überspringen oben rechts, immer sichtbar */
.vorfilm__steuer { position: absolute; top: calc(.5rem + env(safe-area-inset-top, 0px)); right: var(--rand); display: none; gap: .4rem; }
.vorfilm.laeuft .vorfilm__steuer { display: flex; }
.vorfilm__steuer button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7em; font: 700 1rem/1 var(--courier); letter-spacing: .02em; color: var(--licht);
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 18px rgba(0, 0, 0, .6); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.vorfilm__steuer button:focus-visible { outline: 2px solid var(--licht); outline-offset: 2px; }
@media (hover: hover) { .vorfilm__steuer button:hover { text-decoration-thickness: 2px; } }
/* Untertitel unten mittig: Sprecher in Versalien, darunter die Zeile */
.vorfilm__ut { position: absolute; left: var(--rand); right: var(--rand); bottom: calc(clamp(1.8rem, 8svh, 5rem) + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center;
  opacity: 0; transition: opacity 160ms linear; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 4px 24px rgba(0, 0, 0, .6); pointer-events: none; }
.vorfilm__ut.ist-da { opacity: 1; }
.vorfilm__ut-wer { display: block; font: 700 var(--fs-kopf)/1.5 var(--courier); letter-spacing: .16em; text-transform: uppercase; }
.vorfilm__ut-text { display: block; margin-top: .15em; font: 400 clamp(1.1rem, .95rem + .8vw, 1.75rem)/1.35 var(--courier); text-wrap: balance; }
/* Übergang in den Vorspann: der Vorfilm blendet aus dem letzten Bild aus, dahinter geht das Licht an */
.vorfilm.geht { opacity: 0; transition: opacity 1200ms var(--ease-film); }
.vorfilm.geht .vorfilm__wahl, .vorfilm.geht .vorfilm__steuer, .vorfilm.geht .vorfilm__ut { visibility: hidden; }
.vorfilm.geht--schnell { transition-duration: var(--dur-blende); }

/* ---------- Ohne JavaScript: Standbilder und alle Texte lesbar, Papierwelt ---------- */
.no-js .szene { height: auto; background: var(--papier); color: var(--graphit); }
.no-js .szene__buehne { position: static; height: auto; overflow: visible; padding: 1.5rem var(--rand) 3rem; }
.no-js .standbild { display: block; margin: 0 0 1.5rem; }
.no-js .standbild img { width: 100%; height: auto; }
.no-js .szenenkopf, .no-js .randnotiz, .no-js .aussage, .no-js .titelkarte, .no-js .vorspann__text, .no-js .markenzeile { position: static; max-width: 40rem; color: var(--graphit); text-shadow: none; opacity: 1; }
.no-js .blende { opacity: 1; }
.no-js .aussage::before, .no-js .titelkarte::before { display: none; }
.no-js .aussage { margin: 1rem 0; }
.no-js .aussage .zeile { opacity: 1; }
.no-js .titelkarte { display: block; text-align: left; padding: 1.5rem 0 0; }
.no-js .vorspann__text { margin-top: 1rem; }
.no-js .markenzeile { margin-top: 1rem; text-align: left; }
.no-js #vorspann { padding-top: var(--kopf-hoehe); }