/* RJ Design, „Daumenkino“. Grundlagen: Schriften, Tokens, Reset, Kopf, Timecode, Sprunglinks.
   Quelle aller Werte: DESIGN-BRIEF.md (Abschnitte 2 bis 4). */

/* ---------- Schriften (lokal, OFL, siehe fonts/LIZENZEN) ---------- */
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/courier-prime-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/courier-prime-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/courier-prime-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/courier-prime-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/courier-prime-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/courier-prime-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Titelschriften: variabel, werden erst gebraucht, wenn ihre Szene näher kommt (Titelkarten sind bis dahin display:none). */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/bodoni-moda-latin-opsz-normal.woff2') format('woff2-variations'), url('../fonts/bodoni-moda-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/bodoni-moda-latin-ext-opsz-normal.woff2') format('woff2-variations'), url('../fonts/bodoni-moda-latin-ext-opsz-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('../fonts/bodoni-moda-latin-opsz-italic.woff2') format('woff2-variations'), url('../fonts/bodoni-moda-latin-opsz-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('../fonts/bodoni-moda-latin-ext-opsz-italic.woff2') format('woff2-variations'), url('../fonts/bodoni-moda-latin-ext-opsz-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/big-shoulders-display-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/big-shoulders-display-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-full-normal.woff2') format('woff2-variations'), url('../fonts/fraunces-latin-full-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-ext-full-normal.woff2') format('woff2-variations'), url('../fonts/fraunces-latin-ext-full-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Titelschriften der Szenen 4 bis 7 (Bau-Runde 5, Fontsource-Dateien, OFL): Hochglanz Unbounded 800, Café Shrikhand, Produkt Syne 800, Gischt Michroma */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/unbounded-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/unbounded-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Shrikhand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/shrikhand-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Shrikhand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/shrikhand-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/syne-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/syne-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/michroma-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/michroma-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Outfit (variabel 100 bis 900, OFL, Fontsource 5.3.0): die Schrift des Wortes „Design“ im Logo; ab den Referenzen die Schrift des
   modernen Teils (Bau-Runde 6). Überschriften 300, Fließtext 400, kleine Labels 600 mit leichter Sperrung. */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/outfit-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/outfit-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --papier: #ECE3D2;
  --papier-schatten: #C2B299;
  --graphit: #2F2C28;
  --kino: #070807;
  --licht: #F4EDE1;
  --papier-hell: #F5F1EA;               /* heller, klarer Grund von Kontakt und Fußzeile (Bau-Runde 6, moderner Teil) */
  --linie: rgba(47, 44, 40, .3);        /* feine Linien im modernen Teil */
  --linie-stark: rgba(47, 44, 40, .55);
  --hof: var(--papier);                 /* Papierhof hinter Kopf-Logo und „Anfrage“ auf Papier; im hellen modernen Teil das Papierweiß */

  --ease-film: cubic-bezier(.33, 0, .15, 1);
  --ease-kamera: cubic-bezier(.65, 0, .35, 1);
  --dur-blende: 700ms;
  --dur-schnitt: 120ms;
  --dur-zeile: 380ms;

  --courier: 'Courier Prime', 'Courier New', Courier, monospace;
  --bodoni: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --shoulders: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --fraunces: 'Fraunces', Georgia, 'Times New Roman', serif;
  --unbounded: 'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --shrikhand: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --syne: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --michroma: 'Michroma', 'Eurostile', 'Bank Gothic', 'Helvetica Neue', Arial, sans-serif;
  --outfit: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

  --rand: clamp(1rem, 4vw, 3.5rem);
  --kopf-hoehe: calc(3.6rem + env(safe-area-inset-top, 0px));
  --fs-klein: clamp(.74rem, .7rem + .2vw, .86rem);
  --fs-text: clamp(1rem, .95rem + .3vw, 1.15rem);
  --fs-kopf: clamp(.78rem, .62rem + .55vw, 1.2rem);
  --fs-aussage: clamp(1.25rem, 1rem + 1.4vw, 2.35rem);
  --fs-riesig: clamp(2.7rem, 1.4rem + 5.4vw, 6.8rem);   /* Überschriften des modernen Teils: Outfit 300, sehr groß (Bau-Runde 6) */

  --fg: var(--graphit);
  color-scheme: dark;
}
html[data-welt="film"] { --fg: var(--licht); }
html[data-welt="papier"] { --fg: var(--graphit); }
/* Kopf und Timecode folgen dem, was gerade unter ihnen liegt (Papier oder Film), je Element */
[data-welt="film"] { --fg: var(--licht); }
[data-welt="papier"] { --fg: var(--graphit); }

/* ---------- Reset und Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--kino); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: auto; }
body { margin: 0; min-height: 100svh; font: 400 var(--fs-text)/1.55 var(--courier); color: var(--licht); background: var(--kino);
  overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--graphit); color: var(--papier); }

:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Sprunglinks (Tastatur) ---------- */
.sprung { position: fixed; left: var(--rand); top: -5rem; z-index: 60; padding: .7rem 1rem; background: var(--papier); color: var(--graphit);
  font: 700 .9rem/1 var(--courier); text-decoration: none; letter-spacing: .04em; border: 1px solid var(--graphit); white-space: nowrap; }
.sprung + .sprung { top: -10rem; }
.sprung:focus-visible { top: .6rem; outline-offset: -5px; }
.sprung + .sprung:focus-visible { top: 3.4rem; }

/* ---------- Logo: Ein-Strich-Zeichen „RJ“ mit Goldkugel und „Design“ (assets/logo-v2, Fassungen aus tools/logo_web.py).
   Die Pfade stehen einmal je Seite in .logo-defs, jede Instanz nutzt sie per <use>. Linien in currentColor, also Graphit auf
   Papier und Projektorlicht auf Film; die Goldkugel ist ein PNG (marke/gold-128.png) und bleibt in jeder Welt gleich.
   Das Ansichtsfeld endet an der Grundlinie von „Design“ (so sitzt die Marke in einer Zeile auf der Grundlinie), Unterlänge
   des g und der runde J-Fuß dürfen darunter hinausragen (overflow: visible). ---------- */
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { display: block; height: var(--logo-h, 2.4rem); width: auto; aspect-ratio: 2749.87 / 878.92; overflow: visible; fill: currentColor; }
/* Lichthof um die Goldkugel im Kopf: leuchtet, solange gescrollt wird („Aufnahme läuft“), und geht nach 1,5 s Ruhe aus */
.logo__hof { opacity: 0; transition: opacity .7s var(--ease-film); }
html.scrollt .logo__hof { opacity: 1; }

/* ---------- Kopf: immer sichtbar ---------- */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(.5rem + env(safe-area-inset-top, 0px)) var(--rand) .5rem; color: var(--fg); pointer-events: none;
  transition: color .45s var(--ease-film); }
.kopf a { pointer-events: auto; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font: 700 1rem/1 var(--courier); letter-spacing: .02em; white-space: nowrap; transition: color .45s var(--ease-film), text-shadow .45s var(--ease-film); }
.kopf a:focus-visible { outline-offset: 4px; }
.kopf a[data-welt="film"] { text-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 18px rgba(0, 0, 0, .5); }
/* Auf Papier (Skizze wie Drehbuchseite): dünner Papierhof hinter der Schrift, damit sie über Bleistiftlinien und über Text,
   der unter dem festen Kopf durchläuft, lesbar bleibt */
.kopf a[data-welt="papier"], .timecode[data-welt="papier"] { text-shadow: 0 0 .4em var(--hof), 0 0 .15em var(--hof), 0 0 .15em var(--hof); }
/* Im hellen modernen Teil (Kontakt, Fußzeile) ist der Hof das Papierweiß, sonst bliebe ein beiger Schleier um Logo und „Anfrage“ */
html[data-abschnitt="dein-film"] .kopf, html[data-abschnitt="abspann"] .kopf { --hof: var(--papier-hell); }
.kopf-anfrage { padding-inline: .6rem; margin-right: -.6rem; }
/* Logo im Kopf: 32 px am Handy bis 38 px am Rechner (Klickziel bleibt 44 px); auf Film ein weicher Schatten statt text-shadow,
   auf Papier der Papierhof wie beim Text */
.kopf .marke { --logo-h: clamp(2rem, 1.5rem + 1.2vw, 2.4rem); }
.kopf .marke .logo { transition: filter .45s var(--ease-film); }
.kopf .marke[data-welt="film"] .logo { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) drop-shadow(0 0 6px rgba(0, 0, 0, .4)) drop-shadow(0 2px 12px rgba(0, 0, 0, .4)); }
.kopf .marke[data-welt="papier"] .logo { filter: drop-shadow(0 0 .2em var(--hof)) drop-shadow(0 0 .1em var(--hof)); }
/* Eine Marke je Bild: solange der Vorspann steht, trägt das große Logo dort die Marke; das kleine im Kopf kommt, sobald die
   Kamera in die Seite fährt (html.vorspann-steht aus sofort.js und main.js) */
.kopf .marke { transition: color .45s var(--ease-film), opacity .5s var(--ease-film), visibility 0s linear 0s; }
html.vorspann-steht .kopf .marke { opacity: 0; visibility: hidden; transition: color .45s var(--ease-film), opacity .5s var(--ease-film), visibility 0s linear .5s; }
@media (hover: hover) {
  .kopf .marke:hover .logo__hof { opacity: 1; }
  .kopf-anfrage:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
}

/* ---------- Timecode unten links ---------- */
.timecode { position: fixed; left: var(--rand); bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); z-index: 50; pointer-events: none;
  font: 400 var(--fs-klein)/1 var(--courier); letter-spacing: .1em; color: var(--fg); opacity: .9; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: color .45s var(--ease-film), opacity .45s var(--ease-film); }
.timecode[data-welt="film"] { text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 14px rgba(0, 0, 0, .5); }
/* Im Abspann ist der Film zu Ende: der Timecode blendet aus (am Handy läge er sonst über den Links Impressum und Datenschutz) */
html[data-abschnitt="abspann"] .timecode, html[data-abschnitt="programm"] .timecode, html[data-welt="papier"] .timecode { opacity: 0; }   /* Timecode nur in der Filmwelt (überlagerte auf Papier den Text); auch nicht über den dunklen Referenzen (Bau-Runde 6) */
.no-js .timecode { display: none; }
/* Vorführung läuft: Anhalten / Weiter unten rechts, gegenüber dem Timecode (main.js) */
.vorfuehrung { position: fixed; right: var(--rand); bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); z-index: 55; display: inline-flex; align-items: center;
  gap: .6em; min-height: 44px; padding: 0 1.1em; border: 1px solid rgba(244, 237, 225, .38); border-radius: 999px; cursor: pointer;
  background: rgba(7, 8, 7, .55); color: var(--licht); font: 400 var(--fs-klein)/1 var(--courier); letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vorfuehrung[hidden] { display: none; }   /* sonst gewinnt display: inline-flex gegen das hidden-Attribut */
.vorfuehrung__zeichen { font-size: .9em; letter-spacing: 0; }
.vorfuehrung:focus-visible { outline: 2px solid var(--licht); outline-offset: 3px; }

/* ---------- Bewegung reduzieren: alle Blenden sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}