/* BlueLaserBoys */

/* Schriften liegen auf dem eigenen Server (keine Verbindung zu Google).
   Rubik ist eine variable Schrift: eine Datei deckt die Stärken 300–900 ab.
   Lizenz: SIL Open Font License, siehe schriften/OFL-*.txt */
@font-face {
  font-family: "Rubik";
  font-weight: 300 900;
  font-display: swap;
  src: url("schriften/rubik-latin.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: "Rubik";
  font-weight: 300 900;
  font-display: swap;
  src: url("schriften/rubik-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Rubik Mono One";
  font-weight: 400;
  font-display: swap;
  src: url("schriften/rubik-mono-one-latin.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: "Rubik Mono One";
  font-weight: 400;
  font-display: swap;
  src: url("schriften/rubik-mono-one-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #3d45b8;
  --blue-deep: #343ba6;
  --pink: #f3cfcf;
  --night: #060813;
  --sky: #a9aef0;

  --m: clamp(16px, 2.2vw, 32px);
  --section: clamp(112px, 12vw, 200px);
  --cols: repeat(12, minmax(0, 1fr));
  --gutter: clamp(16px, 2vw, 28px);

  /* Fünf Schriftgrößen, mehr nicht */
  --f-display: clamp(36px, 5.2vw, 80px);
  --f-head: clamp(24px, 2.3vw, 34px);
  --f-body: 18px;
  --f-small: 15px;

  --mono: "Rubik Mono One", "Rubik", sans-serif;
  --sans: "Rubik", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--f-body);
  line-height: 1.55;
  color: var(--night);
  background: var(--pink);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--blue); color: var(--pink); }
h1, h2, h3 { font-weight: 500; line-height: 1.1; }

.btn {
  display: inline-block;
  padding: 14px 22px;
  background: var(--pink);
  color: var(--blue);
  font-weight: 500;
  font-size: var(--f-body);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--night); color: var(--pink); }
.btn:active { transform: translateY(2px); }

.round {
  display: inline-grid;
  place-items: center;
  width: .9em;
  height: .9em;
  border-radius: 50%;
  background: var(--pink);
  color: var(--blue);
  line-height: 1;
  transition: transform .25s var(--ease);
}

/* ---------- Einstieg ---------- */

.hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100svh;
  min-height: 600px;
  background: var(--blue);
  color: var(--pink);
}
.hero-photo { position: relative; overflow: hidden; background: var(--night); container-type: inline-size; }
.hero-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: grayscale(1) contrast(1.05);
}

/* Projektbilder mit Titel: harte Schnitte, der Titel knallt rein */
.shot {
  position: absolute;
  inset: 0;
  display: grid;
  padding: calc(var(--m) + 52px) var(--m) calc(var(--m) + 44px);
  color: var(--pink);
  text-decoration: none;
  visibility: hidden;
}
.shot.is-active { visibility: visible; }
.shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot.is-active .shot-img { animation: push 6s linear both; }
.shot-title {
  position: relative;
  max-width: 100%;
  font-size: calc(var(--g) * 1cqw);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.03em;
  text-wrap: balance;
}
/* --g: Breite des Titel-Schriftzugs in Prozent der Bildbreite (aus header.md "groesse") */
.shot-logo { position: relative; width: calc(var(--g) * 1cqw); max-width: 100%; height: auto; }
.shot.is-active .shot-title, .shot.is-active .shot-logo { animation: slam .45s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes slam { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }

.shot-controls { position: absolute; right: var(--m); bottom: var(--m); display: flex; }
.shot-controls button {
  border: 0;
  padding: 8px 14px;
  background: var(--night);
  color: var(--pink);
  font-size: var(--f-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.shot-controls button:hover { background: var(--pink); color: var(--night); }

.hero-nav {
  position: absolute;
  top: var(--m);
  right: var(--m);
  display: flex;
  background: var(--night);
}
.hero-nav a { color: var(--pink); }
.hero-nav a, .bar-nav a {
  padding: 10px 14px;
  font-size: var(--f-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.hero-nav a:hover { background: var(--pink); color: var(--night); }

.hero-band { padding: 24px var(--m) clamp(20px, 3vh, 32px); container-type: inline-size; }
.hero-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(24px, 5vh, 56px);
}
.hero-intro p { max-width: 30em; }

/* Der Name: drei gleich große Wörter in festen Fenstern, ohne Lücke dazwischen.
   Jedes Fenster ist so breit wie die längste Variante (--n Zeichen à .85em).
   BLUELASERBOYS steht mittig; das letzte Fenster ragt mit einem negativen Rand
   nach rechts, damit lange Wörter (FAMILY) die Mitte nicht verschieben.
   --zeile (Zeichen) kommt aus build.mjs und reserviert dafür genug Platz zum Rand. */
.name {
  display: flex;
  justify-content: center;
  font-family: var(--mono); /* taste-skill-ignore: Markenschrift Rubik Mono One, keine Code-Schrift */
  font-weight: 400;
  font-size: calc(100cqw / (var(--zeile) * .85));
  line-height: .9;
  cursor: pointer;
  user-select: none;
  transform-origin: 50% 100%;
}
.slot {
  display: block;
  flex: none;
  width: calc(var(--n) * .85em);
  height: .9em;
  overflow: hidden;
}
.slot-3 { margin-right: calc(var(--ueber) * -.85em); }
.reel { display: block; transition: transform .6s var(--ease); }
.reel > span { display: block; height: .9em; }
.slot:hover .reel { opacity: .85; }

@supports (animation-timeline: scroll()) {
  .name {
    animation: settle linear both;
    animation-timeline: scroll(root);
    animation-range: 0 90svh;
  }
  @keyframes settle { to { scale: .93; } }
}

/* ---------- Video-Einstieg (Fassung "video") ----------
   Clips vollflächig, BLUELASERBOYS mittig darüber, Einleitung unten links.
   Doppelte Klasse, damit die Handy-Regeln für den Bilder-Einstieg hier nicht greifen. */
.hero.hero--video {
  position: relative;
  display: block;
  height: 100svh;
  min-height: 560px;
  background: var(--night);
  color: var(--pink);
}
.hero--video .hero-photo { position: absolute; inset: 0; }
.hero--video .shot { padding: 0; }
.hero--video .shot.is-active .shot-img { animation: none; }
/* Clip erst zeigen, wenn er läuft; bis dahin ist das Standbild darunter zu sehen.
   Ohne Überblendung: das Standbild ist das erste Bild des Clips, der Wechsel fällt nicht auf. */
.shot-video { opacity: 0; }
.shot-video.laeuft { opacity: 1; }
/* keine Abdunklung: der Schriftzug ist blau und braucht eher helles Bild */
.hero--video .hero-nav { z-index: 3; }
/* Handy: Die Adressleiste blendet sich beim Scrollen aus, der Bildschirm wird höher.
   Darum ist der Einstieg so hoch wie der große Bildschirm (lvh), damit unten kein Rosa durchblitzt.
   Projektname und Schriftzug richten sich nach dem sichtbaren Teil (svh), damit die Leiste sie nicht verdeckt. */
@supports (height: 100lvh) {
  .hero.hero--video { height: 100lvh; }
  .hero--video .hero-mitte { top: 50svh; }
  .hero--video .clip-name { bottom: calc(var(--m) + 100lvh - 100svh); }
}
.hero-mitte {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  padding: 0 var(--m);
  container-type: inline-size;
  pointer-events: none;
}
.hero-mitte .name { pointer-events: auto; color: var(--blue); }
.clip-name {
  position: absolute;
  right: var(--m);
  bottom: var(--m);
  z-index: 1;
  padding: 6px 12px;
  background: var(--night);
  color: var(--pink);
  font-size: var(--f-small);
  font-weight: 500;
}
a.shot:hover .clip-name { background: var(--pink); color: var(--night); }

/* ---------- Projekte ---------- */

.work { padding: calc(var(--section) / 2) var(--m); }
.work h2, .about h2, .p-facts h2, .p-story h2, .p-next h2 { font-size: var(--f-head); }
.work h2 { margin-bottom: 48px; color: var(--blue); }
/* Einleitungssatz der Video-Startseite: erst beim Scrollen sichtbar, über den Projekten */
.einleitung { max-width: 26em; margin-bottom: clamp(48px, 6vw, 96px); font-size: var(--f-head); line-height: 1.25; text-wrap: balance; }
.work-grid { display: grid; grid-template-columns: var(--cols); column-gap: var(--gutter); }
.work-list { grid-column: 1 / 9; list-style: none; }
.work-list a {
  display: block;
  padding: 10px 0;
  color: var(--blue);
  text-decoration: none;
  transition: color .25s;
}
.work-thumb { display: none; }
.work-name {
  font-size: var(--f-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
  display: inline;
}
.work-name::after {
  content: " →";
  display: inline-block;
  opacity: 0;
  transform: translateX(-.3em);
  transition: opacity .25s, transform .3s var(--ease);
}
.work-meta {
  display: block;
  margin-top: 8px;
  font-size: var(--f-small);
  font-weight: 500;
}
.work-list a.is-active, .work-list a:hover, .work-list a:focus-visible { color: var(--night); }
.work-list a.is-active .work-name::after { opacity: 1; transform: none; }

.work-frame {
  grid-column: 9 / 13;
  position: sticky;
  top: 15vh;
  align-self: start;
  aspect-ratio: 1024 / 1448;
  background: var(--blue);
}
.work-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .3s, transform .6s var(--ease);
}
.work-frame img.is-active { opacity: 1; transform: none; }

/* ---------- Über uns ---------- */

.about { background: var(--night); color: var(--pink); padding: calc(var(--section) / 2) var(--m); }
.about h2 { margin-bottom: 48px; }
.about-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); align-items: start; }
.about-photo img { width: 100%; filter: grayscale(1); }
.about-text { max-width: 40em; }
.about-text .statement { font-size: var(--f-head); line-height: 1.25; margin-bottom: 32px; }
.about-text p + p { margin-top: 1em; }

/* Partner: kleine einfarbige Logos nebeneinander; die Logodateien sind weiße Masken,
   die Farbe kommt von hier */
.partner { margin-top: clamp(80px, 9vw, 140px); }
.partner h3 { font-size: var(--f-head); font-weight: 500; margin-bottom: 48px; }
.partner-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px clamp(32px, 4vw, 56px); list-style: none; }
.partner-logo {
  display: block;
  max-width: 42vw;
  background: var(--pink);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.partner-name { font-weight: 700; font-size: var(--f-body); letter-spacing: -.01em; }

/* ---------- Fuß ---------- */

.footer {
  display: grid;
  padding: 40px var(--m) 20px;
  background: var(--pink);
  color: var(--night);
}
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gutter); font-size: var(--f-small); }
.footer-cols p:first-child { font-weight: 500; margin-bottom: 6px; color: var(--blue); }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-mark { display: block; margin-top: clamp(96px, 12vw, 180px); color: var(--blue); }
.footer-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer-mark text { font-family: var(--mono); /* taste-skill-ignore: Markenschrift Rubik Mono One, keine Code-Schrift */ font-size: 128px; fill: currentColor; }
.footer-legal { font-size: var(--f-small); margin-top: 16px; }

/* ---------- Projektseite ---------- */

/* Farbschemata: dieselben drei Farben, je Projekt anders auf die Blöcke verteilt
   (Kopf mit Medien / Eckdaten und Inhalt / nächstes Projekt). Auswahl in projekt.md: "farben: 1–4" */
.project, .farben-1 {
  --i-bg: var(--night); --i-fg: var(--pink); --i-ak: var(--sky);
  --b-bg: var(--pink);  --b-fg: var(--night); --b-ak: var(--blue);
  --n-bg: var(--blue);  --n-fg: var(--pink);
}
.farben-2 {
  --i-bg: var(--blue);  --i-fg: var(--pink); --i-ak: var(--pink);
  --b-bg: var(--pink);  --b-fg: var(--night); --b-ak: var(--blue);
  --n-bg: var(--night); --n-fg: var(--pink);
}
.farben-3 {
  --i-bg: var(--pink);  --i-fg: var(--night); --i-ak: var(--blue);
  --b-bg: var(--night); --b-fg: var(--pink); --b-ak: var(--sky);
  --n-bg: var(--blue);  --n-fg: var(--pink);
}
.farben-4 {
  --i-bg: var(--blue);  --i-fg: var(--pink); --i-ak: var(--pink);
  --b-bg: var(--night); --b-fg: var(--pink); --b-ak: var(--sky);
  --n-bg: var(--pink);  --n-fg: var(--night);
}
.project { background: var(--b-bg); }

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px var(--m);
  background: var(--i-bg);
  color: var(--i-fg);
}
.bar-mark { font-family: var(--mono); /* taste-skill-ignore: Markenschrift Rubik Mono One, keine Code-Schrift */ font-size: var(--f-body); text-decoration: none; }
.bar-nav { display: flex; }
.bar-nav a:hover { background: var(--i-fg); color: var(--i-bg); }

.p-intro { background: var(--i-bg); color: var(--i-fg); padding: clamp(40px, 6vw, 88px) var(--m) clamp(64px, 8vw, 120px); }
.p-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.p-head h1 { font-size: var(--f-display); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.p-head > * { min-width: 0; }
.p-title-bild { max-width: 100%; }
.p-title-bild img { display: block; width: auto; height: auto; max-width: min(100%, 880px); max-height: clamp(72px, 13vw, 190px); }
.p-format { color: var(--i-ak); padding-bottom: .3em; }

/* Bühne mit Trailer oder Bild, darunter die Galerie. Die Breite richtet sich nach der
   Bildschirmhöhe: Bühne und Vorschaubilder füllen zusammen gerade so den Bildschirm
   (160 px = Leiste der Vorschaubilder plus etwas Rand). */
.p-media { max-width: min(100%, calc((100svh - 160px) * 16 / 9)); margin-inline: auto; scroll-margin-top: 12px; }
.stage { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.stage > img, .stage > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage > video { object-fit: contain; }
.stage > img { animation: einblenden .4s var(--ease) both; }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Pfeile links und rechts auf der Bühne, in der Akzentfarbe auf der Grundfarbe des Kopfs */
.stage-rahmen { position: relative; }
.stage-pfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.5vw, 64px);
  height: clamp(40px, 4.5vw, 64px);
  translate: 0 -50%;
  border: 0;
  padding: 0;
  background: var(--i-bg);
  color: var(--i-ak);
  cursor: pointer;
  transition: background-color .2s, color .2s, scale .2s var(--ease);
}
.stage-pfeil--zurueck { left: 0; }
.stage-pfeil--vor { right: 0; }
.stage-pfeil svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; }
.stage-pfeil:hover { background: var(--i-ak); color: var(--i-bg); }
.stage-pfeil:active { scale: .94; }

/* Leiste der Vorschaubilder: hoch genug für den Markierungsstrich (kein senkrechtes Scrollen),
   waagerecht scrollbar mit einer flachen Leiste in der Akzentfarbe statt der grauen Standardleiste */
.thumbs {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 20px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
}
.thumbs li { flex: none; }
/* Chrome, Edge, Safari: flache, eckige Leiste ohne Pfeilknöpfe */
.thumbs::-webkit-scrollbar { height: 6px; }
.thumbs::-webkit-scrollbar-track { background: color-mix(in srgb, var(--i-fg) 16%, transparent); }
.thumbs::-webkit-scrollbar-thumb { background: var(--i-ak); }
.thumbs::-webkit-scrollbar-thumb:hover { background: var(--i-fg); }
.thumbs::-webkit-scrollbar-button { display: none; }
/* Firefox kennt nur die einfache Variante */
@supports not selector(::-webkit-scrollbar) {
  .thumbs { scrollbar-width: thin; scrollbar-color: var(--i-ak) color-mix(in srgb, var(--i-fg) 16%, transparent); }
}
.thumb {
  position: relative;
  display: block;
  width: clamp(96px, 11vw, 168px);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
/* Nicht gewählte Bilder abgedunkelt (nicht durchsichtig, sonst scheint die Grundfarbe durch) */
.thumb img, .thumb video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; filter: brightness(.5); transition: filter .2s; }
.thumb:hover img, .thumb:hover video { filter: brightness(.85); }
.thumb[aria-pressed="true"] img, .thumb[aria-pressed="true"] video { filter: none; }
.thumb[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px; background: var(--i-ak); }
.thumb--video::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  translate: -35% -50%;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--pink);
}

.video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.video > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.video:hover > img { transform: scale(1.025); }
.video-play {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  max-width: 100%;
  padding: 16px 24px 16px 16px;
  background: var(--night);
  color: var(--pink);
  font-size: var(--f-body);
  font-weight: 500;
  text-align: left;
}
.video-label { white-space: nowrap; }
.video-note { font-size: var(--f-small); font-weight: 400; color: var(--sky); }
.video-play .round { width: 48px; height: 48px; }
.video-play .round::before {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--blue);
}
.video:hover .video-play .round { transform: scale(1.08); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.p-intro--short { padding-bottom: clamp(24px, 3vw, 40px); }
.p-intro--short .p-head { margin-bottom: 0; }

.logline { font-size: var(--f-head); line-height: 1.25; }

.p-body {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: var(--gutter);
  padding: clamp(64px, 8vw, 120px) var(--m) calc(var(--section) / 2);
  background: var(--b-bg);
  color: var(--b-fg);
}
.p-body a { color: var(--b-ak); }
.p-poster { grid-column: 1 / 5; position: sticky; top: 32px; align-self: start; }
.p-poster img { width: 100%; }
.p-main { grid-column: 6 / 13; }
.p-main h2 { font-size: var(--f-head); margin-bottom: 32px; color: var(--b-ak); }
.facts { display: grid; gap: 18px; }
.facts > div { display: grid; grid-template-columns: minmax(120px, 11em) minmax(0, 1fr); gap: 4px 24px; }
.facts dd { overflow-wrap: break-word; }
.facts dt { color: var(--b-ak); font-weight: 500; }
.facts ul { list-style: none; }

/* Auszeichnungen: Lorbeeren und Siegel in einer Reihe zwischen Eckdaten und Inhalt,
   einfarbig in der Textfarbe des Blocks (die Logodateien sind Masken) */
.preise { margin-top: clamp(56px, 6vw, 88px); }
.preis-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 28px clamp(28px, 3vw, 48px); list-style: none; }
.preis-logo {
  display: block;
  max-width: 100%;
  background: var(--b-fg);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.preise + .story-text { margin-top: clamp(56px, 6vw, 88px); }

.story-text { margin-top: clamp(80px, 9vw, 140px); max-width: 38em; }
.story-text .logline { margin-bottom: 32px; }
.story-text p + p, .story-text p + blockquote, .story-text blockquote + p { margin-top: 1em; }

/* Textseiten (Impressum, Datenschutz): Überschrift links, Text rechts, im Raster der Projektseiten */
.seite { padding: clamp(64px, 8vw, 120px) var(--m) calc(var(--section) / 2); background: var(--b-bg); color: var(--b-fg); }
.seite-zeile { display: grid; grid-template-columns: var(--cols); column-gap: var(--gutter); }
.seite-zeile + .seite-zeile { margin-top: clamp(48px, 5vw, 80px); }
.seite-zeile h2 { grid-column: 1 / 6; font-size: var(--f-head); line-height: 1.15; color: var(--b-ak); text-wrap: balance; }
.seite-text { grid-column: 6 / 13; max-width: 38em; }
.seite-text--intro { font-size: var(--f-head); line-height: 1.25; }
.seite-text p + p { margin-top: 1em; }
.seite-text a { color: var(--b-ak); }
/* Zitate sind gesprochene Sprache: kursiv in der Akzentfarbe */
.story-text blockquote { margin: 1.4em 0; font-size: var(--f-head); font-style: italic; line-height: 1.25; color: var(--b-ak); }

.p-next { background: var(--n-bg); color: var(--n-fg); padding: clamp(64px, 8vw, 120px) var(--m); display: grid; grid-template-columns: var(--cols); column-gap: var(--gutter); }
.p-next h2 { grid-column: 1 / 6; }
.p-next a { grid-column: 6 / 13; display: grid; grid-template-columns: clamp(96px, 12vw, 180px) 1fr; gap: var(--gutter); align-items: end; text-decoration: none; }
.p-next img { transition: transform .5s var(--ease); }
.p-next a:hover img { transform: translateY(-6px); }
.next-name { display: block; font-size: var(--f-display); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.next-meta { display: block; margin-top: 12px; font-size: var(--f-small); }

/* ---------- Auftritt beim Scrollen ---------- */

.js [data-rise] { opacity: 0; transform: translateY(24px); }
.js [data-rise].is-in, .js.ready [data-rise] {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease) calc(var(--d, 0) * 80ms), transform .8s var(--ease) calc(var(--d, 0) * 80ms);
}

/* ---------- Telefon und Tablet ---------- */

@media (max-width: 900px) {
  .work-list { grid-column: 1 / -1; }
  .work-frame { display: none; }
  .work-list li + li { margin-top: 24px; }
  .work-list a { display: grid; grid-template-columns: 30% 1fr; gap: 16px; align-items: center; padding: 0; color: var(--night); }
  .work-thumb { display: block; width: 100%; }
  .work-name { display: block; font-size: clamp(28px, 7vw, 56px); }
  .work-name::after { display: none; }
  .work-meta { display: block; margin: 8px 0 0; color: var(--blue); }

  .about-row { grid-template-columns: 1fr; row-gap: 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }

  .p-poster { grid-column: 1 / 6; }
  .p-main { grid-column: 7 / 13; }
  /* Eckdaten: Beschriftung über dem Wert, die schmale Spalte reicht sonst nicht */
  .facts > div { grid-template-columns: 1fr; }
  .p-next h2, .p-next a { grid-column: 1 / -1; }
  .p-next h2 { margin-bottom: 24px; }
}

@media (max-width: 640px) {
  /* Video-Einstieg auf dem Handy: Projektname unten rechts, wie auf dem großen Bildschirm */
  .hero--video .hero-mitte { top: 42svh; }
  /* Nächstes Projekt: Plakat über dem Namen, damit lange Titel ("Wimpernschlag") in die Breite passen */
  .p-next a { grid-template-columns: 1fr; gap: 16px; }
  .p-next img { width: 96px; }
  .next-name { font-size: clamp(28px, 10vw, 44px); }
  .hero { grid-template-rows: 46svh auto; height: auto; min-height: 100svh; }
  .hero-band { display: flex; flex-direction: column; justify-content: space-between; }
  .hero-intro { flex-direction: column; align-items: flex-start; }
  .hero-nav { left: var(--m); right: auto; }
  /* Telefon: drei Zeilen, gemeinsame linke Kante, als Block mittig */
  .name { flex-direction: column; align-items: center; font-size: calc(100cqw / (var(--hoch) * .85 + .1)); }
  .slot { width: calc(var(--hoch) * .85em); }
  .slot-3 { margin-right: 0; }
  .shot { padding: calc(var(--m) + 60px) var(--m) calc(var(--m) + 44px); }
  .shot-logo { width: calc(var(--g) * 1.5cqw); }
  .shot-controls button { padding: 6px 10px; }

  .partner-list { gap: 28px 32px; }

  .footer-cols { grid-template-columns: 1fr 1fr; }

  .bar-mark { font-size: var(--f-small); }
  .bar-nav a { padding: 8px 8px; white-space: nowrap; }
  .bar-nav a[href$="#ueber-uns"] { display: none; }
  .p-poster, .p-main { grid-column: 1 / -1; }
  .seite-zeile h2, .seite-text { grid-column: 1 / -1; }
  .seite-zeile h2 { margin-bottom: 12px; }
  .p-poster { position: static; width: 62%; margin-bottom: 48px; }
  .facts > div { grid-template-columns: 1fr; }
  .video-play { padding: 12px 16px 12px 12px; }
}

/* Sehr schmale Handys: obere Leiste enger, damit Schriftzug und Menü nebeneinander passen */
@media (max-width: 400px) {
  .bar { gap: 8px; }
  .bar-mark { font-size: 13px; }
  .bar-nav a { padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js [data-rise] { transform: none; }
}