/* Produktfilm auf der Anmeldeseite (27.09.2026), siehe Produktfilm.tsx.
   Eigene Datei statt globals.css, damit der Film abgeschlossen bleibt. Alle
   Klassen beginnen mit "pfilm-". */

.pfilm {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #060608;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  color: #eef0f4;
  font-family: var(--sans, ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.pfilm-navy {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(70% 55% at 50% 18%, #1a1d2e 0%, #10121c 55%, #0a0a0d 100%);
}
.pfilm-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* Raum mit den Seitenfotos */
.pfilm-welt {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1700px;
  perspective-origin: 50% 45%;
  overflow: hidden;
}
.pfilm-kamera {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.pfilm-ebene {
  position: absolute;
  left: -720px;
  width: 1440px;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0d;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 90px 180px rgba(0, 0, 0, 0.75);
  opacity: 0;
  backface-visibility: hidden;
}
.pfilm-ebene img {
  display: block;
  width: 1440px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.pfilm-licht {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.075) 50%, transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
}
.pfilm-verlauf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4, 4, 6, 0.92) 0%, rgba(4, 4, 6, 0.7) 35%, rgba(4, 4, 6, 0) 100%);
}

/* Kinobalken, Blende, Untertitel, Abspann */
.pfilm-balken {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 8;
  background: #000;
  transform: scaleY(0);
  pointer-events: none;
}
.pfilm-balken[data-seite="oben"] { top: 0; transform-origin: center top; }
.pfilm-balken[data-seite="unten"] { bottom: 0; transform-origin: center bottom; }
.pfilm-blende {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.pfilm-untertitel {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  bottom: calc(var(--pfilm-balken, 0px) + 5cqh);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
}
.pfilm-untertitel .klein {
  font-size: clamp(10px, 1.3cqmin, 12px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9aa0ad;
  font-weight: 600;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85);
}
.pfilm-untertitel .gross {
  font-size: min(36px, 5.4cqw);
  font-weight: 600;
  color: #eef0f4;
  letter-spacing: -0.01em;
  margin-top: 0.3em;
  line-height: 1.15;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.85);
}
.pfilm-abspann {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 15.5cqmin);
  z-index: 5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.pfilm-abspann .marke {
  font-size: clamp(13px, 2.1cqmin, 20px);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  font-weight: 600;
  color: #e6e9f0;
}
.pfilm-abspann .satz {
  margin-top: 0.9em;
  font-size: clamp(11px, 1.45cqmin, 14px);
  color: #919195;
}
.pfilm-ueberspringen {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--pfilm-balken, 0px) + max(14px, env(safe-area-inset-bottom, 0px)));
  z-index: 10;
  font: inherit;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.pfilm-ueberspringen:hover,
.pfilm-ueberspringen:focus-visible { color: rgba(255, 255, 255, 0.9); }

/* Metall-Logo am Ende */
.pfilm-logo-halter {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.pfilm-logo {
  position: relative;
  width: 24cqmin;
  height: 24cqmin;
  opacity: 0;
}
.pfilm-logo-flaeche {
  position: absolute;
  inset: 0;
  border-radius: 22%;
  background: linear-gradient(165deg, #1d1f2a 0%, #111219 55%, #0b0c11 100%);
}
.pfilm-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pfilm-logo rect { fill: none; stroke-width: 0.7; }
.pfilm-fx {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12.6cqmin;
  line-height: 1;
  letter-spacing: -0.05em;
  padding-right: 0.05em;
  user-select: none;
}
.pfilm-fx-licht {
  color: #e8eeff;
  opacity: 0;
  text-shadow: 0 0 6px rgba(190, 210, 255, 0.9), 0 0 18px rgba(130, 160, 255, 0.7), 0 0 42px rgba(110, 140, 255, 0.5);
}
.pfilm-fx-hell {
  color: transparent;
  background: linear-gradient(160deg, #fcfcfe 0%, #dcdfe6 28%, #9da1ac 50%, #eceef3 68%, #aeb2bc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(100deg, #000 42%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.pfilm-fx-glanz {
  color: transparent;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 55%, transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}
.pfilm-hof {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 70cqmin;
  height: 70cqmin;
  margin: -35cqmin 0 0 -35cqmin;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(175, 198, 255, 0.55), rgba(110, 140, 255, 0.2) 45%, transparent);
}
.pfilm-strahlen {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Eingebettet (Landingpage, Vorschau): füllt nur den umgebenden Rahmen */
.pfilm.eingebettet { position: absolute; z-index: 1; }