.film-page {
  --film-ink: #f7f6f1;
  --film-black: #080b10;
  background: #f5f3ed;
}
.film-page .site-header {
  color: var(--film-ink);
  border-color: #ffffff16;
  background: var(--film-black);
}
.film-page .site-header-inner { min-height: 62px; }
.film-page .site-header .brand img { background: #f7f5ef; border-radius: 8px; padding: 3px; }
.film-page .site-header nav a { color: #e3e5e9; }
.film-run {
  --film-height: max(470px, calc(100svh - 62px));
  --film-progress: 0;
  position: relative;
  background: var(--film-black);
  color: var(--film-ink);
}
/* Der Film belegt eine Bildschirmhöhe; die Szenen wechseln von selbst (film.js). */
.film-run.is-scrollable { height: auto; }
.film-pin {
  position: sticky;
  top: 0;
  height: var(--film-height);
  overflow: hidden;
  isolation: isolate;
  background: #0b1018;
}
.film-screen, .film-shot, .film-shade {
  position: absolute;
  inset: 0;
}
.film-screen { z-index: -3; }
.film-shot {
  --visibility: 0;
  --shot-scale: 1;
  opacity: var(--visibility);
  overflow: hidden;
  background: #0b1018;
}
.film-intro { background: #101c29; }
.film-football { background: #091a23; }
.film-rift { background: #0c1424; }
.film-keep { background: #191629; }
.film-shot img, .film-shot video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--shot-scale));
}
.film-shot video { opacity: 0; }
.film-shot.is-playing video { opacity: 1; }
.film-portrait img, .film-portrait video {
  left: auto;
  width: min(68%, calc(var(--film-height) * .79));
  object-position: 50% 50%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%);
}
.film-intro img, .film-intro video { object-position: 50% 47%; }
.film-football img, .film-football video { object-position: 50% 55%; }
.film-landscape img, .film-landscape video { object-position: 65% 50%; }
.film-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, #040910d9, #04090f94 37%, #04091005 72%),
    linear-gradient(0deg, #06090ff7 1%, #06090f96 14%, #06090f00 38%);
}
.film-inner { display: flex; align-items: center; position: relative; height: 100%; }
.film-copy { width: min(55%, 670px); padding-bottom: 5.5rem; }
.film-panel { animation: film-copy-reveal .38s ease-out both; }
@keyframes film-copy-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.film-kicker {
  color: #efc992;
  font: 650 .72rem/1.5 var(--heading);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.3rem;
}
.film-panel h1, .film-panel h2 {
  max-width: 11.7ch;
  color: #fffbf3;
  font-size: clamp(3.6rem, 7.7vw, 7.8rem);
  font-weight: 560;
  letter-spacing: -.075em;
  line-height: .98;
  text-wrap: balance;
}
.film-panel p:not(.film-kicker) {
  max-width: 34ch;
  color: #e5e6eb;
  font-size: clamp(1.12rem, 1.65vw, 1.43rem);
  line-height: 1.43;
  margin-top: 1.45rem;
}
.film-link {
  display: inline-flex;
  gap: .65rem;
  align-items: center;
  margin-top: 1.5rem;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-weight: 700;
}
.film-link:hover { color: #efc992; }
.film-catalog-link {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-height: 46px;
  margin-top: clamp(.9rem, 2.4vw, 1.65rem);
  padding: .55rem 1rem;
  border: 1px solid #efc992;
  border-radius: 6px;
  background: #10141bea;
  color: #fff5e2;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
}
.film-catalog-link span { color: #efc992; }
.film-catalog-link:hover { background: #29231d; }
.film-page #katalog { scroll-margin-top: .75rem; }
.film-chapters { position: absolute; inset: auto 0 1.35rem; }
.film-progress { height: 1px; background: #ffffff47; }
.film-progress span { display: block; height: 2px; background: #efc992; transform: scaleX(var(--film-progress)); transform-origin: left; }
.film-chapter-bar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.film-chapter-bar nav { display: flex; gap: clamp(.55rem, 3vw, 2.8rem); }
.film-chapter-bar nav[hidden] { display: none; }
.film-chapter-bar button, .film-chapter-bar a {
  color: #cdd2dc;
  background: transparent;
  border: 0;
  min-height: 44px;
  padding: .3rem 0;
  text-decoration: none;
  font-size: .93rem;
}
.film-chapter-bar nav button[aria-current], .film-chapter-bar button:hover, .film-chapter-bar a:hover { color: #efc992; }
.film-chapter-bar nav button small { color: #acb4c2; padding-right: .28rem; font-variant-numeric: tabular-nums; }
.film-tools { display: flex; align-items: center; gap: .9rem; flex: none; }
.film-pause:not([hidden]) { display: grid; place-items: center; width: 44px; height: 44px; font-size: 1.15rem; }
.film-scroll { margin-top: .16rem; color: #c4c9d0; font-size: .82rem; }
.film-page :focus-visible { outline-offset: 5px; }
.film-pin :focus-visible { outline-color: #efc992; }
.film-editorial { background: #f5f3ed; padding-block: clamp(4.1rem, 10vw, 9.25rem); }
.film-editorial-grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 7vw, 6rem);
}
.film-editorial h2, .film-library h2, .film-home h2 { letter-spacing: -.067em; }
.film-editorial p:not(.eyebrow), .film-home p:not(.eyebrow) {
  margin-block: 1.15rem 1.45rem;
  color: #485960;
  max-width: 44ch;
}
.film-editorial figure { background: #0c1521; position: relative; }
.film-editorial video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.film-editorial figcaption { position: absolute; bottom: .8rem; right: .8rem; }
.film-library { padding-block: .5rem clamp(2.5rem, 8vw, 7rem); }
.film-library-intro { padding-bottom: 1.3rem; border-bottom: 1px solid #c9d0d0; }
.film-library [hidden] { display: none; }
.catalog-filters {
  display: grid;
  gap: .85rem;
  padding-block: 1.25rem .6rem;
}
.catalog-filters[hidden] { display: none; }
.catalog-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 15rem));
  gap: .7rem clamp(.7rem, 3vw, 1.15rem);
}
.catalog-fields label {
  display: grid;
  gap: .35rem;
  min-width: 0;
  color: #1a303a;
  font-size: .9rem;
  font-weight: 700;
}
.catalog-fields select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: .5rem .55rem;
  border: 1px solid #aebcbd;
  border-radius: .45rem;
  background-color: #faf9f4;
  color: #172833;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
}
.catalog-filter-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .95rem; }
.catalog-filter-meta .catalog-preview-controls { margin: 0 0 0 auto; }
#catalog-result-count { color: #40515b; font-size: .9rem; font-variant-numeric: tabular-nums; }
#catalog-reset {
  min-height: 44px;
  padding: .25rem .15rem;
  border: 0;
  background: transparent;
  color: #155e5c;
  font: inherit;
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
#catalog-reset:disabled { visibility: hidden; }
.catalog-empty { max-width: 42ch; color: #40515b; padding-block: .6rem 1.4rem; }
.film-library .product-card[hidden] { display: none; }
@media (max-width: 410px) {
  .catalog-fields { grid-template-columns: minmax(0, 1fr); }
}
.film-library .catalog-world { padding-block: clamp(2.3rem, 6vw, 5rem); }
.film-library .catalog-heading { margin-bottom: 1.2rem; }
.film-library .product-grid { display: block; border-top: 1px solid #ccd2cf; }
.film-library .product-card {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ccd2cf;
  border-radius: 0;
  padding: clamp(1.35rem, 2.7vw, 2.9rem) 0;
  overflow: visible;
}
.film-library .card-media {
  overflow: hidden;
  border-radius: 2px;
  background: #090f17;
  box-shadow: 0 18px 42px #07101922;
}
.film-library .card-media .card-preview { object-fit: contain; background: #080e16; }
.film-library .card-copy { padding: 0; gap: .8rem; max-width: 41ch; }
.film-library .card-copy h3 {
  font-size: clamp(1.45rem, 2.65vw, 2.3rem);
  line-height: 1.1;
}
.film-library .card-copy .card-story {
  color: #34464c;
  font-size: clamp(1.05rem, 1.55vw, 1.24rem);
  font-weight: 400;
  line-height: 1.35;
}
.film-library .card-copy .card-category { font-size: .88rem; font-weight: 400; }
.film-library .card-link { margin-top: .05rem; padding-block: .25rem; }
.film-home { background: #102638; color: #fffdf8; padding-block: clamp(4rem, 8vw, 7rem); }
.film-home .eyebrow { color: #eac892; }
.film-home p:not(.eyebrow) { color: #d8e1e7; }
@media (max-width: 760px) {
  .film-run { --film-height: max(435px, calc(100svh - 60px)); }
  .film-inner { align-items: flex-start; }
  .film-copy { width: 100%; padding: clamp(1.7rem, 6vh, 4.5rem) 0 0; }
  .film-kicker { margin-bottom: .8rem; }
  .film-panel h1, .film-panel h2 { max-width: 13ch; font-size: clamp(2.45rem, 9.9vw, 4.6rem); }
  .film-panel p:not(.film-kicker) { margin-top: .7rem; font-size: 1rem; max-width: 30ch; }
  .film-link { margin-top: .4rem; }
  .film-portrait img, .film-portrait video { width: 100%; mask-image: none; }
  .film-shot img, .film-shot video { object-position: 50% 54%; }
  .film-landscape img, .film-landscape video { object-position: 65% 53%; }
  .film-shade {
    background: linear-gradient(180deg, #050a13f2 1%, #050a13b0 21%, #050a1300 57%, #050a138c 83%, #050a13f7 100%);
  }
  .film-chapters { bottom: .6rem; }
  .film-chapter-bar { gap: 3px; }
  .film-chapter-bar nav { flex: 1; gap: 0; justify-content: space-between; padding-right: .32rem; }
  .film-chapter-bar nav button { font-size: .73rem; text-align: left; padding-inline: 2px; }
  .film-chapter-bar nav button small { display: block; padding: 0; }
  .film-tools { gap: 0; }
  .film-tools a { display: none; }
  .film-scroll { font-size: .75rem; }
  .film-editorial-grid { grid-template-columns: 1fr; }
  .film-library .product-card { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .film-library .card-copy { max-width: 53ch; gap: .55rem; }
  .film-library .card-media .clip-button.clip-icon { right: 8px; bottom: 8px; }
}
@media (max-width: 360px) {
  .film-page .site-header .brand { font-size: .84rem; }
  .film-page .site-header .brand img { width: 25px; height: 25px; }
  .film-page .site-header nav { gap: 8px; }
  .film-page .site-header nav a { font-size: .72rem; white-space: nowrap; }
  .film-chapter-bar nav button { font-size: .67rem; }
}
@media (prefers-reduced-motion: reduce) {
  .film-run.is-scrollable { height: auto; }
  .film-panel { animation: none; }
}

/* Zwei getrennte Einstiege: Welt entdecken oder nach Fach und Jahrgang suchen. */
.film-entry-links { display: flex; flex-wrap: wrap; gap: .6rem .8rem; margin-top: clamp(.9rem, 2.4vw, 1.65rem); }
.film-entry-links .film-catalog-link { margin-top: 0; }
.film-world-link { background: #efc992; color: #14110c; }
.film-world-link span { color: inherit; }
.film-world-link:hover { background: #f6dbb0; }
.site-header nav small { font-weight: 500; font-size: .78em; opacity: .75; }
@media (max-width: 760px) {
  .film-entry-links { flex-direction: column; align-items: stretch; max-width: 21rem; }
  .film-entry-links .film-catalog-link { justify-content: space-between; }
  .site-header nav small { display: none; }
}

.catalog-compare { margin-top: .7rem; color: var(--muted); }
.catalog-compare a { color: var(--navy); font-weight: 700; text-underline-offset: 4px; }

/* ── Laufband mit allen Spielen ───────────────────────────────────────── */
.film-band { overflow: hidden; background: #0b151c; color: #fffdf8; border-block: 1px solid #ffffff1f; }
.film-band-track { display: flex; width: max-content; }
.film-band-track:not(.is-running) { width: auto; overflow-x: auto; scrollbar-width: none; }
.film-band ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.film-band a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.5rem;
  padding-inline: clamp(.9rem, 2vw, 1.5rem);
  color: inherit;
  font: 600 clamp(.95rem, 1.3vw, 1.1rem)/1.2 var(--heading);
  letter-spacing: -.02em;
  white-space: nowrap;
  text-decoration: none;
}
.film-band a::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--color-of, #b9f4d7);
}
.film-band a:has(img)::before { content: none; }
.film-band img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.film-band a:hover { color: var(--color-of, #b9f4d7); }
.film-band a:focus-visible { outline: 2px solid var(--color-of, #b9f4d7); outline-offset: -4px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes film-band-run { to { transform: translateX(-50%); } }
  .film-band-track.is-running { animation: film-band-run var(--band-seconds, 50s) linear infinite; }
  .film-band:hover .film-band-track,
  .film-band:focus-within .film-band-track { animation-play-state: paused; }
}

/* ── So läuft eine Stunde: drei Schritte an einer Linie ───────────────── */
.film-lesson { margin-top: clamp(3.5rem, 8vw, 7rem); }
.film-lesson-intro h2 { max-width: 18ch; }
.film-lesson-steps {
  --line: #c9d0d0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 2.25rem);
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.film-lesson-steps li { position: relative; display: grid; align-content: start; }
.film-lesson-steps figure { overflow: hidden; border-radius: 12px; background: #0c1521; box-shadow: 0 18px 30px -24px #10202b; }
.film-lesson-steps img { display: block; width: 100%; height: auto; }
/* Die Linie verbindet die drei Nummern. */
.film-lesson-steps li::before {
  content: "";
  position: absolute;
  top: calc(1.2rem - 1px);
  left: 0;
  right: calc(-1 * clamp(1rem, 2.6vw, 2.25rem));
  height: 2px;
  background: var(--line);
}
.film-lesson-steps li:last-child::before { right: 0; }
.film-lesson-steps li::after {
  content: "";
  position: absolute;
  top: calc(1.2rem - 1px);
  left: 0;
  right: calc(-1 * clamp(1rem, 2.6vw, 2.25rem));
  height: 2px;
  background: var(--teal, #226b69);
  transform-origin: left;
}
.film-lesson-steps li:last-child::after { right: 0; }
.film-editorial .film-lesson-steps .film-lesson-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  order: -1;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 0 1.1rem;
  border-radius: 50%;
  background: var(--navy, #102a43);
  color: #fffdf8;
  font: 700 1rem/1 var(--heading);
  max-width: none;
}
.film-lesson-steps h3 { margin-top: 1rem; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.035em; }
.film-editorial .film-lesson-steps li > p:last-child { margin-block: .4rem 0; max-width: 34ch; }
.film-lesson-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.film-editorial .film-lesson-links { max-width: none; }
@media (max-width: 760px) {
  .film-lesson-steps { grid-template-columns: 1fr; gap: 0; padding-left: 3.4rem; }
  .film-lesson-steps li { padding-bottom: 2.25rem; }
  .film-lesson-steps li:last-child { padding-bottom: 0; }
  /* Am Handy läuft die Linie senkrecht links neben den Schritten. */
  .film-lesson-steps li::before,
  .film-lesson-steps li::after { top: 0; bottom: 0; left: -2.25rem; right: auto; width: 2px; height: auto; transform-origin: top; }
  .film-lesson-steps li:last-child::before,
  .film-lesson-steps li:last-child::after { right: auto; }
  .film-editorial .film-lesson-steps .film-lesson-number { position: absolute; top: 0; left: -3.4rem; margin: 0; }
  .film-lesson-steps h3 { margin-top: .9rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes film-line-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes film-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes film-step-in { from { opacity: .25; transform: translateY(26px); } to { opacity: 1; transform: none; } }
    .film-lesson-steps { view-timeline: --film-lesson block; }
    .film-lesson-steps li::after { animation: film-line-x linear both; animation-timeline: --film-lesson; }
    .film-lesson-steps li:nth-child(1)::after { animation-range: entry 20% cover 32%; }
    .film-lesson-steps li:nth-child(2)::after { animation-range: cover 32% cover 44%; }
    .film-lesson-steps li:nth-child(3)::after { animation-range: cover 44% cover 56%; }
    .film-lesson-steps li { animation: film-step-in linear both; animation-timeline: --film-lesson; }
    .film-lesson-steps li:nth-child(1) { animation-range: entry 0% entry 60%; }
    .film-lesson-steps li:nth-child(2) { animation-range: entry 25% entry 85%; }
    .film-lesson-steps li:nth-child(3) { animation-range: entry 50% cover 30%; }
    @media (max-width: 760px) {
      .film-lesson-steps li { view-timeline: --film-step block; animation-timeline: view(); animation-range: entry 0% entry 45%; }
      .film-lesson-steps li::after { animation-name: film-line-y; animation-timeline: --film-step; animation-range: entry 40% cover 60%; }
    }
  }
}

/* ── Welten-Bühne: sieben Welten nebeneinander, Wechsel per Pfeil, Reiter oder Wischen ── */
.film-stage { padding-block: clamp(3rem, 7vw, 6rem) 0; background: #0b151c; color: #fffdf8; }
.film-stage .film-library-intro { border-bottom: 0; padding-bottom: .4rem; }
.film-stage .film-library-intro .eyebrow { color: #b9f4d7; }
.film-stage .catalog-compare { color: #c9d6da; }
.film-stage .catalog-compare a { color: #fffdf8; }
.film-stage .catalog-fields label { color: #dfe8ea; }
.film-stage .catalog-fields select { border-color: #ffffff3d; background-color: #14222c; color: #fffdf8; }
.film-stage #catalog-result-count { color: #c9d6da; }
.film-stage #catalog-reset { color: #b9f4d7; }
.film-stage .catalog-empty { color: #c9d6da; }

.stage-tabs {
  display: flex;
  gap: .6rem;
  width: min(100% - clamp(2rem, 8vw, 8rem), 1250px);
  margin: 1.1rem auto 0;
  padding-block: .35rem 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "figure index" "figure name";
  align-items: center;
  column-gap: .7rem;
  flex: 1 0 auto;
  min-width: 9.5rem;
  min-height: 4.25rem;
  padding: .55rem .95rem .55rem .65rem;
  border: 1px solid #ffffff2e;
  border-radius: 14px;
  background: #ffffff0d;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stage-tab img { grid-area: figure; width: 3rem; height: 3rem; object-fit: contain; }
.stage-tab-index { grid-area: index; align-self: end; font: 700 .68rem/1 var(--heading); letter-spacing: .13em; color: #b9c7cc; }
.stage-tab-name { grid-area: name; align-self: start; font: 650 1.05rem/1.15 var(--heading); letter-spacing: -.02em; white-space: nowrap; }
.stage-tab:not(:has(img)) { grid-template-columns: 1fr; grid-template-areas: "index" "name"; padding-left: .95rem; }
.stage-tab:hover { background: #ffffff1a; }
.stage-tab[aria-current="true"] { border-color: #b9f4d7; background: #b9f4d7; color: #0b151c; }
.stage-tab[aria-current="true"] .stage-tab-index { color: #0b151ccc; }
.stage-tab:focus-visible, .stage-arrow:focus-visible, .stage-enter:focus-visible { outline: 3px solid #fffdf8; outline-offset: 2px; }

.stage { position: relative; }
.stage-track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.stage-track::-webkit-scrollbar { display: none; }
.film-library .stage-panel {
  position: relative;
  isolation: isolate;
  flex: 0 0 100%;
  min-width: 0;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  border-bottom: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.stage-panel[hidden] { display: none; }
.stage-art {
  position: absolute;
  inset: 0 -6%;
  z-index: -2;
  background: #0b151c 70% top / cover no-repeat;
}
/* Figuren der Welt neben der Überschrift. */
.stage-cast {
  position: absolute;
  top: clamp(4.6rem, 6.5vw, 5.6rem);
  right: max(clamp(1rem, 4vw, 4rem), calc((100vw - 1250px) / 2));
  z-index: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(.5rem, 1.6vw, 1.5rem);
  /* So hoch wie der Überschriftenblock, damit keine Figur in die Karten ragt. */
  height: clamp(7.5rem, 12vw, 10.5rem);
  pointer-events: none;
}
.stage-cast img { height: 100%; width: auto; filter: drop-shadow(0 22px 22px #000a); }
.stage-cast img:nth-child(2) { height: 88%; }
/* Schleier: links dunkel für den Text, unten in die Seite auslaufend. */
.stage-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0b151c 0%, #0b151c4d 13%, #0b151c33 40%, #0b151cb8 74%, #0b151c 100%),
    linear-gradient(90deg, #0b151c99, #0b151c00 62%);
}
.film-library .stage-panel .catalog-heading { display: block; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); max-width: 46rem; }
.stage-panel .catalog-index { display: block; color: #b9f4d7; }
.stage-panel .catalog-heading h2 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1; letter-spacing: -.06em; }
.stage-panel .catalog-heading p { margin-top: .8rem; max-width: 40ch; color: #e3ecee; font-size: 1.12rem; }
.stage-enter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.9rem;
  margin-top: 1.1rem;
  padding: 0 1.15rem;
  border-radius: 8px;
  background: #fffdf8;
  color: #0b151c;
  font: 700 .98rem/1.2 var(--heading);
  text-decoration: none;
}
.stage-enter:hover { background: #b9f4d7; }

/* Spielkarten auf der Bühne: dunkles Glas statt weißer Zeilen. */
.film-library .stage-panel .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(.8rem, 1.6vw, 1.25rem);
  border-top: 0;
}
.film-library .stage-panel .product-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border: 1px solid #ffffff26;
  border-radius: 14px;
  background: #0d1820d9;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.film-library .stage-panel .product-card[hidden] { display: none; }
.film-library .stage-panel .card-media { border-radius: 0; box-shadow: none; }
.film-library .stage-panel .card-copy { max-width: none; gap: .5rem; padding: 1rem 1.1rem 1.15rem; }
.film-library .stage-panel .card-copy h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); color: #fffdf8; }
.film-library .stage-panel .card-copy .card-story { color: #e3ecee; font-size: 1rem; line-height: 1.4; }
.film-library .stage-panel .card-copy .card-teaching { display: none; }
.film-library .stage-panel .card-copy .card-category { color: #b9f4d7; font-size: .84rem; }
.film-library .stage-panel .card-link { color: #fffdf8; }
/* Eine Welt mit nur einem Spiel zeigt es groß und quer. */
@media (min-width: 761px) {
  .film-library .stage-panel[data-count="1"] .product-grid { grid-template-columns: minmax(0, 54rem); }
  .film-library .stage-panel[data-count="1"] .product-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .film-library .stage-panel[data-count="1"] .card-copy .card-teaching { display: block; color: #c9d6da; }
  .film-library .stage-panel[data-count="2"] .product-grid { grid-template-columns: repeat(2, minmax(0, 26rem)); }
}

.stage-arrow {
  position: absolute;
  top: clamp(3rem, 7vw, 6rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid #ffffff59;
  border-radius: 50%;
  background: #0b151ccc;
  color: #fffdf8;
  font: 600 1.35rem/1 var(--heading);
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.stage-previous { left: clamp(.5rem, 1.6vw, 1.75rem); }
.stage-next { right: clamp(.5rem, 1.6vw, 1.75rem); }
.stage-arrow:hover:not(:disabled) { background: #b9f4d7; color: #0b151c; border-color: #b9f4d7; }
.stage-arrow:disabled { opacity: .28; cursor: default; }
@media (max-width: 1420px) {
  /* Kein Rand neben dem Inhalt: Die Pfeile stehen oben rechts über der Welt. */
  .stage-arrow { top: 1rem; width: 2.9rem; height: 2.9rem; }
  .stage-previous { left: auto; right: calc(clamp(1rem, 4vw, 4rem) + 3.5rem); }
  .stage-next { right: clamp(1rem, 4vw, 4rem); }
  .film-library .stage-panel { padding-top: clamp(4.6rem, 9vw, 5.5rem); }
}
@media (max-width: 760px) {
  .stage-tabs { width: calc(100% - 32px); }
  .stage-tab { min-width: 8.2rem; min-height: 3.75rem; }
  .stage-tab img { width: 2.5rem; height: 2.5rem; }
  .stage-previous { right: calc(16px + 3.4rem); }
  .stage-next { right: 16px; }
  /* Am Handy liegen die Karten quer: Bild links, Text rechts. */
  .film-library .stage-panel .product-grid { grid-template-columns: 1fr; }
  /* Das Spielbild bleibt ganz sichtbar (16:9), nichts wird angeschnitten. */
  .film-library .stage-panel .product-card { display: grid; grid-template-columns: 44% 1fr; align-items: start; }
  .film-library .stage-panel .card-media { aspect-ratio: 16 / 9; margin: .7rem 0 .7rem .7rem; border-radius: 8px; overflow: hidden; }
  .film-library .stage-panel .card-copy { padding: .7rem .8rem .8rem; gap: .3rem; }
  .film-library .stage-panel .card-copy h3 { font-size: 1.08rem; }
  .film-library .stage-panel .card-copy .card-story { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; line-height: 1.35; }
  .film-library .stage-panel .card-copy .card-category { font-size: .78rem; }
  .film-library .stage-panel .card-media .clip-button.clip-icon { right: 4px; bottom: 4px; transform: scale(.8); transform-origin: bottom right; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage-track { transition: height .45s cubic-bezier(.2, .7, .2, 1); }
  .stage-tab { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
  .film-library .stage-panel .product-card { transition: transform .25s ease, border-color .25s ease; }
  @media (hover: hover) {
    .film-library .stage-panel .product-card:hover { border-color: #b9f4d799; }
  }
  @supports (animation-timeline: view()) {
    /* Kamerafahrt: Die Kulisse zieht beim seitlichen Wechsel langsamer mit als der Inhalt. */
    @keyframes stage-pan { from { transform: translateX(5%); } to { transform: translateX(-5%); } }
    .stage-art { animation: stage-pan linear both; animation-timeline: view(inline); }
  }
}

/* ── Auftritt einer Welt: Kamera rückt heran, Figuren fliegen ein, Titel und Karten folgen im Takt ── */
@media (max-width: 760px) {
  /* Am Handy stehen die Figuren als Reihe über dem Titel. */
  .stage-cast { position: static; height: 4.6rem; margin: 0 16px .5rem; justify-content: flex-start; }
  .stage-cast img { filter: drop-shadow(0 10px 12px #000a); }
  .film-library .stage-panel { padding-top: 1rem; }
}
/* Karten neigen sich zum Mauszeiger (film/tilt.js setzt die Werte). */
.film-library .stage-panel .product-card,
.play-tile[data-tilt] {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0px));
}
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) {
    .film-library .stage-panel .product-card:hover { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px); }
  }
  /* Die Kamera rückt langsam an die Kulisse heran, solange die Welt vorn steht. */
  @keyframes stage-push { from { scale: 1.1; } to { scale: 1; } }
  .stage-panel.is-active .stage-art { animation: stage-pan linear both, stage-push 2.4s cubic-bezier(.2, .7, .2, 1) both; animation-timeline: view(inline), auto; }
  @supports not (animation-timeline: view()) {
    .stage-panel.is-active .stage-art { animation: stage-push 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  }
  /* Papierfiguren: Einflug mit leichtem Schwung, danach ruhiges Schweben. */
  @keyframes stage-cutout {
    0% { opacity: 0; transform: translate(34%, 26%) rotate(13deg) scale(.62); }
    62% { opacity: 1; transform: translate(-2%, -3%) rotate(-2.5deg) scale(1.03); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes stage-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  .stage-cast img { opacity: 0; }
  .stage-panel.is-active .stage-cast img {
    opacity: 1;
    animation: stage-cutout .8s cubic-bezier(.2, .8, .3, 1) calc(.18s + var(--cast) * .14s) backwards, stage-float 6s ease-in-out calc(1.2s + var(--cast) * .7s) infinite;
  }
  /* Überschrift: steigt hinter einer Kante hervor. Text und Knopf folgen. */
  @keyframes stage-title { from { clip-path: inset(0 0 100% 0); transform: translateY(.5em); } to { clip-path: inset(-.2em -.1em -.25em -.1em); transform: none; } }
  @keyframes stage-follow { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .stage-panel.is-active .catalog-heading h2 { animation: stage-title .7s cubic-bezier(.2, .7, .2, 1) .05s backwards; }
  .stage-panel.is-active .catalog-index { animation: stage-follow .5s ease-out backwards; }
  .stage-panel.is-active .catalog-heading p { animation: stage-follow .55s ease-out .22s backwards; }
  .stage-panel.is-active .stage-enter { animation: stage-follow .55s ease-out .32s backwards; }
  /* Karten werden nacheinander ausgeteilt. */
  @keyframes stage-deal { from { opacity: 0; transform: translateY(34px) scale(.96); } to { opacity: 1; transform: none; } }
  .film-library .stage-panel.is-active .product-card { animation: stage-deal .55s cubic-bezier(.2, .7, .2, 1) calc(.38s + var(--deal, 0) * .08s) backwards; }
  .stage-tab img { transition: transform .35s cubic-bezier(.2, .8, .3, 1.4); }
  .stage-tab:hover img, .stage-tab[aria-current="true"] img { transform: scale(1.18) rotate(-4deg); }
}

/* Grundsatz seit 12.11.: weniger Text, mehr Bilder. Spielkarten der Bühne
   zeigen Bild, Titel und Einordnung; der Satz zum Spiel steht auf der Produktseite. */
.film-library .stage-panel:not([data-count="1"]) .card-copy .card-story { display: none; }
@media (max-width: 760px) {
  .film-library .stage-panel .card-copy .card-story { display: none; }
  .film-library .stage-panel .product-card { grid-template-columns: 52% 1fr; align-items: center; }
}

/* Durchgang „weniger Text, mehr Bilder“ (12.11.): Kurzwege als Knöpfe statt Sätze. */
.catalog-shortcuts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.catalog-shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: 0 1.05rem;
  border: 1px solid #ffffff4d;
  border-radius: 999px;
  color: #fffdf8;
  font: 650 .95rem/1.2 var(--heading);
  text-decoration: none;
}
.catalog-shortcuts a:first-child { border-color: transparent; background: #b9f4d7; color: #0b151c; }
.catalog-shortcuts a:hover { border-color: #b9f4d7; }
/* Die drei Schritte tragen die Bilder; die Sätze darunter bleiben kurz. */
.film-lesson-steps figure { border-radius: 14px; }

/* ── Weltseite: die eigene Welt als gerahmte Bühne ───────────────────────── */
.stage-single .stage-track { overflow: visible; height: auto !important; }
.film-library .stage-single .stage-panel { border-radius: clamp(16px, 2.4vw, 28px); padding-block: clamp(1.5rem, 4vw, 3rem); }
/* Die Weltseite hat ihre eigene Überschrift; die der Bühne entfällt dort. */
.film-library .stage-single .stage-panel .catalog-heading { display: none; }
.stage-single .stage-cast { position: static; height: clamp(5rem, 9vw, 8rem); margin: 0 0 1.2rem; justify-content: flex-start; padding-inline: clamp(1rem, 4vw, 4rem); }
.stage-single .stage-inner { width: auto; padding-inline: clamp(1rem, 4vw, 4rem); }
.stage-single .stage-panel .card-copy .card-story { display: none; }

/* ── „Für zuhause“ mit Kulisse und Figuren statt reinem Textblock ────────── */
.film-home { position: relative; isolation: isolate; overflow: hidden; }
.film-home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #102638f2 0%, #102638b3 46%, #10263833 100%), url("../assets/welten/rift-run-welt.webp") 70% center / cover no-repeat; }
.film-home-cast { position: absolute; right: max(clamp(1rem, 4vw, 4rem), calc((100vw - 1250px) / 2)); bottom: 0; display: flex; align-items: flex-end; gap: 1rem; height: clamp(9rem, 20vw, 17rem); pointer-events: none; }
.film-home-cast img { height: 100%; width: auto; filter: drop-shadow(0 18px 18px #000a); }
.film-home-cast img:last-child { height: 90%; }
.film-home p:not(.eyebrow) { max-width: 34ch; }
@media (max-width: 760px) { .film-home-cast { position: static; height: 8.5rem; margin: 1.5rem 16px 0; justify-content: flex-end; } .film-home { padding-bottom: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes home-cutout { 0% { opacity: 0; transform: translate(30%, 40%) rotate(12deg) scale(.65); } 70% { opacity: 1; transform: translate(-2%, -2%) rotate(-2deg) scale(1.03); } 100% { opacity: 1; transform: none; } }
    .film-home-cast img { animation: home-cutout linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .film-home-cast img:last-child { animation-range: entry 35% cover 55%; }
  }
}

/* Startfilm ohne Scrollstrecke: etwas niedriger, damit die nächste Zeile hervorschaut. */
.film-run { --film-height: max(470px, calc(92svh - 62px)); }
@media (max-width: 760px) { .film-run { --film-height: max(435px, calc(90svh - 60px)); } }
/* Die Fortschrittslinie läuft von Szene zu Szene weich weiter. */
@media (prefers-reduced-motion: no-preference) { .film-progress span { transition: transform .6s ease, width .6s ease; } }

/* Welt „Lesson Deck“: die Serie in sieben Teilen als Bildreihe unter der Karte. */
.stage-series { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.stage-series-label { margin: 0 0 .8rem; color: #b9f4d7; font: 700 .8rem/1.2 var(--heading); letter-spacing: .14em; text-transform: uppercase; }
.stage-series-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8rem; }
.stage-series-tile { display: block; color: #fffdf8; text-decoration: none; }
.stage-series-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid #ffffff2e; border-radius: 10px; transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease; }
.stage-series-tile span { display: block; margin-top: .5rem; font: 700 .9rem/1.2 var(--heading); }
.stage-series-tile b { margin-right: .4em; color: #b9f4d7; }
.stage-series-tile:hover img { transform: translateY(-4px); border-color: #b9f4d7; }
.stage-series-tile:focus-visible { outline: 2px solid #b9f4d7; outline-offset: 4px; border-radius: 10px; }
@media (max-width: 900px) {
  .stage-series-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: .4rem; }
  .stage-series-row::-webkit-scrollbar { display: none; }
  .stage-series-tile { flex: 0 0 9.5rem; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage-panel.is-active .stage-series-tile { animation: stage-deal .6s cubic-bezier(.2, .7, .2, 1) calc(.25s + var(--deal, 0) * .06s) backwards; }
}

/* Sieben Welten: Am breiten Bildschirm stehen alle Reiter in einer Zeile, keiner wird angeschnitten. */
@media (min-width: 1000px) {
  .stage-tabs { gap: .45rem; }
  .stage-tabs .stage-tab { flex: 1 1 auto; min-width: 0; padding-inline: .7rem; gap: .5rem; font-size: .95rem; }
  .stage-tabs .stage-tab img { width: 40px; height: 40px; }
}

/* Karten der Bühne: Die ganze Karte ist anklickbar, der Link ist ein deutlicher Knopf. */
.film-library .stage-panel .product-card { cursor: pointer; }
.film-library .stage-panel .card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--la-button-s, 2.5rem);
  margin-top: .5rem;
  padding: 0 1.05rem;
  border-radius: var(--la-radius-s, 10px);
  background: #b9f4d7;
  color: #0b151c;
  font: 700 .94rem/1.2 var(--heading);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease;
}
.film-library .stage-panel .product-card:hover .card-link { background: #fffdf8; transform: translateX(3px); }
.film-library .stage-panel .product-card:hover { border-color: #b9f4d780; }

/* Auftakt ohne Szenenwechsel: keine Kapitelleiste, nur der Pausenknopf. */
.film-chapters-solo { border: 0; }
.film-chapters-solo .film-chapter-bar { justify-content: flex-end; }

/* „Für Lehrkräfte“ dunkel statt heller Fläche (Rückmeldung 12.11.): Stadion als
   Kulisse, helle Schrift, mintfarbene Akzente wie in der Welten-Bühne. */
.film-editorial {
  position: relative;
  isolation: isolate;
  background: #0b151c;
  color: #fffdf8;
}
.film-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0b151c 0%, #0b151cd9 22%, #0b151ce6 78%, #0b151c 100%),
    url("../assets/welten/fussballwelt.webp") center / cover no-repeat;
}
.film-editorial h2, .film-editorial h3 { color: #fffdf8; }
.film-editorial .eyebrow { color: #b9f4d7; }
.film-editorial p:not(.eyebrow) { color: #d5dfe2; }
.film-editorial .button.primary { background: #b9f4d7; color: #0b151c; border-color: transparent; }
.film-editorial .text-link { color: #fffdf8; }
.film-editorial .film-lesson-steps figure { border: 1px solid #ffffff26; box-shadow: 0 24px 40px -28px #000; }
.film-editorial .film-lesson-steps li::before { background: #ffffff2e; }
.film-editorial .film-lesson-steps li::after { background: #b9f4d7; }
.film-editorial .film-lesson-steps .film-lesson-number { background: #b9f4d7; color: #0b151c; border-color: transparent; }

/* Auftakt: drei Highlights als Glaskarten statt eines Fließtexts. */
.film-intro-copy { font: 700 clamp(1.15rem, 1.8vw, 1.5rem)/1.2 var(--heading); letter-spacing: -.02em; color: #f3c56d; }
.film-highlights { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.1rem 0 1.6rem; padding: 0; list-style: none; }
.film-highlights a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1rem .55rem .6rem;
  border: 1px solid #ffffff38;
  border-radius: 16px;
  background: linear-gradient(140deg, #ffffff24, #ffffff0d);
  backdrop-filter: blur(14px);
  color: #fffdf8;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, background .3s ease;
}
.film-highlights a:hover { transform: translateY(-4px); border-color: #f3c56d; background: linear-gradient(140deg, #ffffff33, #ffffff14); }
.film-highlights img { width: 2.6rem; height: 2.6rem; object-fit: contain; border-radius: 8px; filter: drop-shadow(0 6px 8px #0008); }
.film-highlights span { display: grid; gap: .1rem; font-size: .86rem; line-height: 1.2; color: #dbe4e6; }
.film-highlights strong { font: 700 1.02rem/1.15 var(--heading); letter-spacing: -.02em; color: #fffdf8; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hl-in { from { opacity: 0; transform: translateY(1.2rem) scale(.94); } to { opacity: 1; transform: none; } }
  .film-highlights li { animation: hl-in .7s cubic-bezier(.2, .8, .3, 1.15) calc(.5s + var(--hl) * .14s) backwards; }
  @keyframes hl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
  .film-highlights img { animation: hl-float 4.5s ease-in-out calc(var(--hl) * .6s) infinite; }
}
@media (max-width: 760px) {
  .film-highlights { flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
  /* Über dem hellen Wolkenbild brauchen die Karten am Handy einen dunkleren Grund. */
  .film-highlights a { padding: .5rem .9rem .5rem .55rem; background: #0b151cc7; }
}

/* Vier Highlights im selben Schema (ein Verb, eine Zeile): am breiten Bildschirm zwei mal zwei. */
@media (min-width: 761px) {
  .film-highlights { display: grid; grid-template-columns: repeat(2, max-content); }
}

/* Auftakt entschlackt (12.11.): nur Überschrift und zwei große Knöpfe. */
html .film-entry-links { gap: .8rem 1rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
html .film-entry-links .film-catalog-link { min-height: 3.9rem; padding: 0 1.9rem; border-radius: 14px; font-size: 1.18rem; gap: .8rem; }
html .film-entry-links .film-catalog-link:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: no-preference) { .film-entry-links .film-catalog-link { transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease; } }

/* Pfeile der Welten-Bühne: größer, mintfarben gefüllt, an den Seiten der Bühne. */
.stage-arrow {
  width: 4.2rem;
  height: 4.2rem;
  border: 0;
  background: #b9f4d7;
  color: #0b151c;
  font-size: 1.7rem;
  box-shadow: 0 16px 34px -12px #000c, 0 0 0 6px #b9f4d726;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.stage-arrow:hover:not(:disabled) { background: #fffdf8; transform: scale(1.08); box-shadow: 0 20px 40px -12px #000, 0 0 0 9px #b9f4d733; }
.stage-arrow:disabled { opacity: .22; box-shadow: none; }
@media (max-width: 760px) { .stage-arrow { width: 3.3rem; height: 3.3rem; font-size: 1.35rem; } }
/* Die größeren Pfeile stehen nebeneinander, ohne sich zu überdecken. */
@media (max-width: 1420px) {
  .stage-arrow { width: 4.2rem; height: 4.2rem; }
  .stage-previous { right: calc(clamp(1rem, 4vw, 4rem) + 5rem); }
}
@media (max-width: 760px) {
  .stage-arrow { width: 3.3rem; height: 3.3rem; }
  .stage-previous { right: calc(clamp(1rem, 4vw, 4rem) + 4rem); }
}

/* Auftaktfilm als Leinwand: Der Zusammenschnitt aus den Welten (werkzeuge/auftakt-film.sh) steht ganz
   im Bild, rechts neben der Überschrift, statt angeschnitten den Hintergrund zu füllen. */
.film-leinwand img, .film-leinwand video {
  inset: 50% clamp(1rem, 4vw, 4rem) auto auto;
  width: min(50%, calc((var(--film-height) - 9rem) * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  translate: 0 -50%;
  object-fit: cover;
  border-radius: var(--la-radius-l, 28px);
  box-shadow: 0 60px 120px -50px #000, 0 0 0 1px #ffffff2e;
}
/* Leitbild der Startseite (Codex, Auftrag 17 · B2): links ruhig für die Schrift, rechts trägt es das Filmfenster. */
.film-leinwand.film-intro { background: linear-gradient(90deg, #070b16f5 0%, #070b16d1 30%, #070b1661 58%, #070b162e 100%), url("../assets/film/start-quer.webp") center / cover no-repeat #0c1424; }
@media (max-width: 900px) and (orientation: portrait) {
  .film-leinwand.film-intro { background: linear-gradient(180deg, #070b16f0 0%, #070b16c7 46%, #070b1666 100%), url("../assets/film/start-hoch.webp") center / cover no-repeat #0c1424; }
}
@media (max-width: 900px) {
  .film-leinwand img, .film-leinwand video { inset: auto 16px 7.5rem 16px; width: auto; translate: none; border-radius: var(--la-radius-m, 16px); }
}
/* Neben der Leinwand bleibt die Überschrift in ihrer Spalte. */
@media (min-width: 901px) { body:has(.film-leinwand) .film-copy, body:has(.film-leinwand) .film-panel[data-panel="0"] { width: min(38vw, 36rem); max-width: none; } body:has(.film-leinwand) .film-panel[data-panel="0"] h1 { max-width: none; font-size: clamp(2.4rem, 4.6vw, 4.8rem); } }

/* Welt-Reiter mit gemalter Kachel (Codex, Auftrag 17 · B8) */
.stage-tab[style*="--tab-bild"] { position: relative; isolation: isolate; overflow: hidden; }
.stage-tab[style*="--tab-bild"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0b151ce0 0%, #0b151ca8 55%, #0b151c59 100%), var(--tab-bild) center / cover no-repeat; transition: filter .25s ease; }
.stage-tab[style*="--tab-bild"]:hover::before { filter: brightness(1.25); }
.stage-tab[style*="--tab-bild"][aria-current="true"] { background: none; color: #fffdf8; border-color: #b9f4d7; box-shadow: 0 0 0 2px #b9f4d7; }
.stage-tab[style*="--tab-bild"][aria-current="true"]::before { background: linear-gradient(90deg, #0b151cbf 0%, #0b151c66 55%, #0b151c1a 100%), var(--tab-bild) center / cover no-repeat; }
.stage-tab[style*="--tab-bild"][aria-current="true"] .stage-tab-index { color: #b9f4d7; }