/* Showreel: framed portrait reel in About plus its modal theater.
   Isolated from chapter, player and gallery layouts. Motion starts on chapter
   entry and runs on its own clock; nothing here is coupled to scrolling. */

/* ---------- Tile ---------- */
.showreel {
  --sr-pad: 6px;
  --sr-radius: 12px;
  --sr-ease: var(--ease, cubic-bezier(.22,.72,.12,1));
  box-sizing: border-box; margin: 0; padding: var(--sr-pad); border-radius: var(--sr-radius);
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; gap: 5px;
  color: #fff; -webkit-tap-highlight-color: transparent;
}
.showreel__screen {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: calc(var(--sr-radius) - 4px);
  background: #050204; isolation: isolate;
  box-shadow: inset 0 0 0 1px #ffffff14;
}
.showreel__video, .showreel__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.showreel__poster { z-index: 1; transition: opacity .8s ease .45s; }
.showreel__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 95% 80% at 50% 46%, #0a0208b8, #050104e6 78%),
    linear-gradient(180deg, #ff00901f, transparent 45%);
  transition: opacity 1.2s ease .3s;
}
.showreel__lettering {
  position: absolute; inset: 3% 2% 2%; z-index: 3; display: grid; place-items: center; pointer-events: none;
  transform-origin: 50% 55%;
  transition: opacity 1.1s var(--sr-ease), filter 1.1s var(--sr-ease), transform 1.3s var(--sr-ease), visibility 0s linear 0s;
}
.showreel__spray { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.showreel__lettering-text {
  font: 400 clamp(15px, 2.1vw, 34px)/.92 var(--brush, "Arial Black", sans-serif);
  color: var(--pink, #ff0090); text-transform: uppercase; text-align: center; letter-spacing: .01em;
  transform: rotate(-6deg); max-width: 6.2em; text-wrap: balance;
}
.showreel.has-spray .showreel__spray { display: block; }
.showreel.has-spray .showreel__lettering-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.showreel__progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; pointer-events: none;
  background: #ffffff1f; opacity: 0; transition: opacity .4s ease;
}
.showreel__progress i {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--sr-progress, 0));
  background: linear-gradient(90deg, #ff0090, #ff6cc0); box-shadow: 0 0 8px #ff0090b0;
}
.showreel__open {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: #fff; cursor: pointer;
  touch-action: manipulation;
}
.showreel__open:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.showreel__badge {
  display: grid; place-items: center; width: clamp(34px, 28%, 58px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid #ff0090c4; background: #12040dd6; box-shadow: 0 0 22px #ff009059, inset 0 1px 0 #ffffff4d;
  opacity: 0; transform: scale(.82); transition: opacity .3s ease, transform .4s var(--sr-ease);
}
.showreel__badge svg { width: 46%; height: 46%; fill: currentColor; }
.showreel__bar {
  container-type: inline-size; min-width: 0;
  display: flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 1px;
  font: 400 12px/1 var(--display, Impact, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #f4dbe9;
}
.showreel__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 4px; }
.showreel__label b { color: var(--pink, #ff0090); font-weight: 400; }
/* Narrow frames keep the duration and drop the word. */
@container (max-width: 176px) { .showreel__label span { display: none; } }
.showreel__bar button {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0;
  border: 1px solid #ff00905c; border-radius: 50%; background: #170a12cc; color: #fff; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; touch-action: manipulation;
}
.showreel__bar button svg { width: 12px; height: 12px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.showreel__bar button svg[data-stroke] { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.showreel__bar button:hover { background: #5a0035; border-color: #ff0090d1; box-shadow: 0 0 14px #ff00904d; }
.showreel__bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.showreel [hidden] { display: none !important; }

/* State: the reel is running or was revealed. */
.showreel[data-state="playing"] .showreel__poster,
.showreel[data-state="paused"] .showreel__poster,
.showreel[data-state="theater"] .showreel__poster { opacity: 0; }
.showreel[data-state="playing"] .showreel__scrim,
.showreel[data-state="paused"] .showreel__scrim,
.showreel[data-state="theater"] .showreel__scrim { opacity: 0; }
.showreel[data-state="playing"] .showreel__lettering,
.showreel[data-state="paused"] .showreel__lettering,
.showreel[data-state="theater"] .showreel__lettering {
  opacity: 0; filter: blur(18px); transform: scale(1.16) rotate(-1.5deg); visibility: hidden;
  /* The blur leads and the fade follows, so the lettering visibly melts instead of just switching off. */
  transition: filter 1.3s cubic-bezier(.3,.1,.3,1), opacity 1s cubic-bezier(.5,0,.75,.4) .3s, transform 1.5s cubic-bezier(.2,.6,.2,1), visibility 0s linear 1.5s;
}
.showreel[data-state="playing"] .showreel__progress,
.showreel[data-state="paused"] .showreel__progress { opacity: 1; }
.showreel[data-state="playing"] { animation: showreel-push .9s var(--sr-ease) 1; }
/* The play badge invites a manual start when autoplay is unavailable or paused. */
.showreel[data-state="paused"] .showreel__badge,
.showreel[data-autostart="off"][data-state="idle"] .showreel__badge { opacity: 1; transform: none; }
.showreel[data-autostart="off"][data-state="idle"] .showreel__lettering { inset: 2% 2% 27%; }
.showreel[data-autostart="off"][data-state="idle"] .showreel__badge { margin-top: 92%; }
@keyframes showreel-push {
  0% { box-shadow: inset 0 1px 1px #fff9, 0 0 0 0 #ff0090cc, 0 0 15px #ff00901c; }
  55% { box-shadow: inset 0 1px 1px #fff9, 0 0 0 7px #ff009000, 0 0 46px #ff009075; }
  100% { box-shadow: inset 0 1px 1px #fff9, inset 1px 0 1px #fff3, inset 0 -2px 2px #ff009054, 0 0 1px 1px #ff009057, 0 0 15px #ff00901c; }
}
@media (hover: hover) and (pointer: fine) {
  .showreel:hover .showreel__badge { opacity: 1; transform: none; }
  .showreel[data-state="playing"]:hover .showreel__badge { opacity: .92; }
}

/* ---------- Placement: desktop stage, beside the headline ---------- */
@media (min-width: 1200px) {
  #about .showreel {
    position: absolute; z-index: 7; left: calc(100% + 3.8vw); top: -3.1dvh;
    width: min(10.8vw, 24dvh);
  }
}
/* Coarse-pointer devices up to 1366px share the compact composition below. */
@media (min-width: 1200px) and (max-width: 1366px) and (any-pointer: coarse) {
  #about .showreel { position: relative; z-index: auto; left: auto; top: auto; width: auto; }
}

/* ---------- Placement: tablet ---------- */
/* Position and size live in about-refresh.css (reel above the key-figure strip); touch opens the theater. */
@media (min-width: 601px) and (max-width: 1199px) and (min-height: 501px),
       (min-width: 601px) and (max-width: 1366px) and (min-height: 501px) and (any-pointer: coarse) {
  #about .showreel { --sr-pad: 5px; }
  #about .showreel__bar [data-showreel-toggle], #about .showreel__bar [data-showreel-mute] { display: none; }
}

/* ---------- Placement: phone, centre of the key-figure row ---------- */
@media (max-width: 600px), (max-height: 500px) and (max-width: 1000px) {
  #about .kpi-grid { align-items: end; }
  #about .showreel { --sr-pad: 4px; --sr-radius: 9px; gap: 3px; min-width: 0; }
  #about .showreel__bar { min-height: 18px; font-size: 12px; letter-spacing: .06em; justify-content: center; }
  #about .showreel__bar button { display: none; }
  #about .showreel__label { flex: none; padding: 0; text-align: center; }
  #about .showreel__label span { display: none; }
  #about .showreel__label::before { content: ""; display: inline-block; margin-right: 5px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--pink, #ff0090); }
}
@media (max-height: 500px) and (max-width: 1000px) {
  #about .showreel { width: min(100%, 120px); justify-self: center; }
}

/* ---------- Theater ---------- */
.showreel-theater {
  position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: clamp(12px, 2.4vw, 30px); border: 0; background: transparent; color: #fff; overflow: hidden;
  overscroll-behavior: contain;
}
.showreel-theater:not([open]) { display: none; }
.showreel-theater[open] { display: grid; place-items: center; }
.showreel-theater::backdrop {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #1a0211b8, #040003cf 70%);
  backdrop-filter: blur(7px) saturate(.85); -webkit-backdrop-filter: blur(7px) saturate(.85);
  animation: showreel-backdrop .32s ease both;
}
.showreel-theater__panel {
  --stage-h: min(calc(100dvh - 196px - clamp(24px, 4.8vw, 60px)), calc((100vw - clamp(24px, 4.8vw, 60px)) * 1.25));
  display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 14px;
  width: min(100%, calc(var(--stage-h) * .8 + 2px)); min-width: min(100%, 300px);
  animation: showreel-panel .38s cubic-bezier(.2,.7,.2,1) both;
}
.showreel-theater__header { position: relative; width: 100%; min-height: 48px; display: grid; align-content: center; padding-right: 58px; box-sizing: border-box; }
.showreel-theater__eyebrow { margin: 0; font: 500 12px/1.3 var(--body, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: #c3b9c0; }
.showreel-theater h2 { margin: 3px 0 0; font: 400 clamp(26px, 3.2vw, 38px)/.95 var(--display, Impact, sans-serif); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.showreel-theater h2 em { font-style: normal; color: var(--pink, #ff0090); }
.showreel-theater button {
  touch-action: manipulation; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0;
  color: #fff; background: #180b14c9; border: 1px solid #ff009078; border-radius: 50%; cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.showreel-theater button:hover, .showreel-theater__download:hover { background: #5a0035; border-color: #ff0090d1; box-shadow: 0 0 20px #ff009038; }
.showreel-theater button:focus-visible, .showreel-theater input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.showreel-theater button svg { width: 18px; height: 18px; fill: currentColor; }
.showreel-theater button svg[data-stroke] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.showreel-theater__close { position: absolute; right: 0; top: 2px; }
.showreel-theater__download { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; box-sizing: border-box; color: #fff; background: #180b14c9; border: 1px solid #ff009078; border-radius: 50%; transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; touch-action: manipulation; }
.showreel-theater__download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.showreel-theater__download:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.showreel-theater__stage {
  position: relative; height: var(--stage-h); aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 14px;
  background: #050204; isolation: isolate;
  box-shadow: 0 0 0 1px #ff6fb9a6, 0 0 0 5px #0d0409, 0 0 0 6px #ff009047, 0 0 120px #ff009038, 0 30px 80px -30px #000;
}
.showreel-theater__stage video, .showreel-theater__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #050204; }
.showreel-theater__poster { z-index: 1; object-fit: cover; transition: opacity .45s ease; }
.showreel-theater[data-state="playing"] .showreel-theater__poster,
.showreel-theater[data-state="paused"] .showreel-theater__poster { opacity: 0; pointer-events: none; }
.showreel-theater .showreel-theater__surface { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
.showreel-theater .showreel-theater__surface:hover { background: transparent; box-shadow: none; }
.showreel-theater .showreel-theater__surface:focus-visible { outline-offset: -5px; }
.showreel-theater__bigplay {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: 86px; height: 86px; pointer-events: none;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid #ff0090d6; background: #12040dd9;
  box-shadow: 0 0 40px #ff009066, inset 0 1px 0 #ffffff59; opacity: 0; scale: .85; transition: opacity .25s ease, scale .35s cubic-bezier(.2,.7,.2,1);
}
.showreel-theater__bigplay svg { width: 34px; height: 34px; fill: #fff; margin-left: 5px; }
.showreel-theater:not([data-state="playing"]):not([data-state="loading"]) .showreel-theater__bigplay { opacity: 1; scale: 1; }
.showreel-theater__status {
  position: absolute; z-index: 4; left: 50%; bottom: 16px; translate: -50% 0; margin: 0; padding: 9px 14px; max-width: calc(100% - 32px);
  border-radius: 8px; background: #080408e6; font: 400 13px/1.45 var(--body, sans-serif); text-align: center;
}
.showreel-theater__controls {
  box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto auto; align-items: center; gap: 10px 12px;
  padding: 10px 14px; border-radius: 16px; border: 1px solid #df679d70; background: linear-gradient(165deg, #130f12d9, #000000eb 62%, #0c0308de);
  box-shadow: inset 0 1px 1px #ffffff5c, inset 0 -2px 2px #ff009047, 0 0 18px #ff00901f;
}
.showreel-theater__seek { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.showreel-theater__time { font: 500 12px/1 var(--body, sans-serif); letter-spacing: .08em; color: #eee4eb; font-variant-numeric: tabular-nums; white-space: nowrap; }
.showreel-theater__volume { display: flex; align-items: center; gap: 8px; min-width: 0; justify-self: end; width: min(100%, 210px); }
.showreel-theater input[type=range] {
  --fill: 0%; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; accent-color: #ff0090;
}
.showreel-theater input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right,#ff2b9f var(--fill),#ffffff29 var(--fill)); }
.showreel-theater input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(to right,#ff2b9f var(--fill),#ffffff29 var(--fill)); }
.showreel-theater input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #ffe6f3; box-shadow: 0 0 9px #ff009080; }
.showreel-theater input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #ffe6f3; }
.showreel-theater [hidden] { display: none !important; }
/* Fullscreen keeps the controls: the whole panel fills the screen, not the bare video. */
.showreel-theater__panel:fullscreen {
  --stage-h: calc(100vh - 118px);
  box-sizing: border-box; width: 100vw; max-width: none; height: 100vh; padding: 14px; gap: 12px; background: #030002;
  grid-template-rows: minmax(0,1fr) auto; grid-template-columns: minmax(0,1fr); align-content: center; animation: none;
}
.showreel-theater__panel:fullscreen .showreel-theater__header { display: none; }
.showreel-theater__panel:fullscreen .showreel-theater__stage { grid-row: 1; grid-column: 1; height: min(var(--stage-h), calc((100vw - 28px) * 1.25)); }
.showreel-theater__panel:fullscreen .showreel-theater__controls { grid-row: 2; grid-column: 1; width: min(100%, 760px); justify-self: center; }
@keyframes showreel-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes showreel-panel { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .showreel-theater { padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); }
  .showreel-theater__panel { --stage-h: min(calc(100dvh - 214px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), calc((100vw - 24px) * 1.25)); gap: 10px; }
  .showreel-theater__controls { grid-template-columns: auto auto minmax(0,1fr) auto auto; gap: 8px 8px; padding: 9px 10px; }
  .showreel-theater__volume { width: 100%; }
  .showreel-theater__bigplay { width: 70px; height: 70px; }
}
/* Short landscape screens: reel on the left, header and controls beside it. */
@media (max-height: 500px) {
  .showreel-theater { padding: 8px 14px; }
  .showreel-theater__panel {
    --stage-h: calc(100dvh - 16px);
    width: auto; max-width: 100%; grid-template-rows: auto 1fr; grid-template-columns: auto minmax(220px, 330px); column-gap: 18px; justify-items: stretch; align-items: center;
  }
  .showreel-theater__stage { grid-row: 1 / 3; grid-column: 1; }
  .showreel-theater__header { grid-column: 2; align-self: end; }
  .showreel-theater__controls { grid-column: 2; align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .showreel__poster, .showreel__scrim, .showreel__lettering, .showreel__badge, .showreel__progress,
  .showreel-theater__poster, .showreel-theater__bigplay, .showreel-theater button, .showreel__bar button { transition: none !important; }
  .showreel[data-state="playing"] { animation: none; }
  .showreel[data-state="playing"] .showreel__lettering,
  .showreel[data-state="paused"] .showreel__lettering,
  .showreel[data-state="theater"] .showreel__lettering { filter: none; transform: none; }
  .showreel-theater__panel, .showreel-theater::backdrop { animation: none; }
}

/* Kev 16.10.2026: Das Video ist ab dem ersten Bild zu sehen – Plakat, Abdunklung und Schriftzug gehen beim Abspielen ohne
   Verzögerung in rund 0,2 s weg (vorher 0,3–0,45 s Verzögerung, frei erst nach etwa 1,5–1,7 s). */
.showreel[data-state="playing"] .showreel__poster,
.showreel[data-state="playing"] .showreel__scrim { transition: opacity .2s ease 0s; }
.showreel[data-state="playing"] .showreel__lettering {
  transition: filter .3s ease, opacity .22s ease, transform .3s ease, visibility 0s linear .22s;
}

/* Kev 16.10.2026: Download-Knopf oben links in jeder Ansicht, auch am Handy; liegt über der Öffnen-Fläche. */
.showreel__download {
  position: absolute; top: 8px; left: 8px; z-index: 6; display: grid; place-items: center; width: 32px; height: 32px;
  box-sizing: border-box; border-radius: 50%; color: #fff; background: #12040dd9; border: 1px solid #ff0090c4;
  box-shadow: 0 0 14px #ff009059, inset 0 1px 0 #ffffff40; transition: background .18s ease, box-shadow .18s ease;
  touch-action: manipulation;
}
.showreel__download svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.showreel__download:hover { background: #5a0035; box-shadow: 0 0 18px #ff009080; }
.showreel__download:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px), (max-height: 500px) and (max-width: 1000px) {
  #about .showreel__download { top: 5px; left: 5px; width: 26px; height: 26px; }
  #about .showreel__download svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) { .showreel__download { transition: none; } }