/* Preserve the approved teaser layout; replace only its media block. */
body.teaser-page { background: #ededed; color: #101010; margin: 0; }
.teaser-page .page-scrollbar { display: none; }
.teaser-page p, .teaser-page h1 { margin: 0; }
.teaser-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100svh;
  min-height: 320px;
  padding: clamp(18px, 3vw, 38px) clamp(22px, 4vw, 64px) 22px;
}
.teaser-header, .teaser-footer { align-items: center; display: flex; justify-content: space-between; gap: 18px; }
.teaser-brand { align-items: center; display: inline-flex; gap: 13px; }
.teaser-brand > span { background: #ff6500; height: 13px; width: 13px; }
.teaser-brand img { display: block; height: auto; width: 126px; }
.teaser-header p, .teaser-footer, .teaser-keywords, .teaser-status {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.07em;
}
.teaser-header p, .teaser-footer { color: #696969; }
.teaser-shell > main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.teaser-gallery { position: relative; min-height: 0; }
.workflow-position { position: absolute; inset: 0 0 100px; display: flex; align-items: center; justify-content: center; }
.workflow-player {
  position: relative;
  aspect-ratio: 1376 / 768;
  width: min(58.88vw, 921.6px, calc((100svh - 360px) * 1376 / 768 * .8));
  background: #101010;
}
.workflow-player video { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.workflow-controls { position: absolute; bottom: -50px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; }
.workflow-controls > div { display: flex; gap: 4px; align-items: center; }
.workflow-controls button { font: 400 10px "IBM Plex Mono", monospace; color: #555; background: transparent; border: 0; padding: 8px 5px; cursor: pointer; white-space: nowrap; }
.workflow-controls button:hover { color: #ff6500; }
.workflow-controls button:focus-visible { outline: 2px solid #ff6500; outline-offset: 2px; }
.workflow-controls[hidden], .workflow-timeline[hidden] { display: none; }
.workflow-time { font: 9px "IBM Plex Mono", monospace; color: #777; white-space: nowrap; }
.workflow-timeline { -webkit-appearance: none; appearance: none; position: absolute; left: 0; bottom: -20px; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.workflow-timeline::-webkit-slider-runnable-track { height: 1px; background: #ff6500; }
.workflow-timeline::-moz-range-track { height: 1px; background: #ff6500; }
.workflow-timeline::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border: 0; border-radius: 0; background: #ff6500; margin-top: -4px; }
.workflow-timeline::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 0; background: #ff6500; }
.workflow-timeline:focus-visible { outline: 1px solid #ff6500; outline-offset: 2px; }
.workflow-error { position: absolute; inset: 20% 10% auto; background: #ededed; color: #101010; padding: 16px; font-size: 12px; }
.workflow-error[hidden] { display: none; }
.workflow-player:fullscreen { width: 100vw; height: 100dvh; aspect-ratio: auto; }
.workflow-player:fullscreen video { height: calc(100% - 60px); }
.workflow-player:fullscreen .workflow-timeline { bottom: 38px; left: 16px; width: calc(100% - 32px); }
.workflow-player:fullscreen .workflow-controls { bottom: 4px; left: 16px; right: 16px; }
.workflow-player:fullscreen button { color: #ededed; font-size: 12px; }
.workflow-player:fullscreen .workflow-time { color: #aaa; }
.workflow-player:fullscreen [data-expand] { display: none; }
.teaser-copy { padding: 0 0 clamp(24px, 4vh, 48px); text-align: center; }
.teaser-keywords { color: #696969; }
.teaser-page h1 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; letter-spacing: -0.055em; line-height: 1.1; margin-top: 12px; }
.teaser-page .teaser-status { align-items: center; display: flex; gap: 9px; justify-content: center; margin-top: 19px; }
.teaser-status span { background: #ff6500; height: 5px; width: 5px; }
.teaser-footer a { color: inherit; padding: 5px 0; text-decoration: none; }
.teaser-footer a:hover { color: #101010; }
.is-expanded .teaser-header, .is-expanded .teaser-copy, .is-expanded .teaser-footer { position: fixed; z-index: 4; background: #ededed; left: 0; right: 0; }
.is-expanded .teaser-header { top: 0; padding: 22px clamp(22px, 4vw, 64px); min-height: 66px; }
.is-expanded .teaser-copy { bottom: 42px; padding: 16px 12px 12px; }
.is-expanded h1 { font-size: clamp(24px, 2.7vw, 38px); margin-top: 6px; }
.is-expanded .teaser-status { margin-top: 10px; }
.is-expanded .teaser-footer { bottom: 0; padding: 8px clamp(22px, 4vw, 64px); height: 42px; }
.is-expanded .teaser-gallery { position: fixed; inset: 66px 0 230px; z-index: 3; background: #101010; }
.is-expanded .workflow-position { inset: 0; }
.is-expanded .workflow-player { width: 100%; height: 100%; aspect-ratio: auto; }
.is-expanded .workflow-controls { left: 20px; right: 20px; bottom: -48px; }
.is-expanded .workflow-timeline { left: 20px; width: calc(100% - 40px); }
.is-expanded .teaser-copy { z-index: 2; }
@media (pointer: fine) {
  .teaser-page { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M2 2h13v13H2z' fill='none' stroke='%23ff6500'/%3E%3C/svg%3E") 8 8, default; }
  .teaser-page button, .teaser-page a, .teaser-page input { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M2 2h13v13H2z' fill='%23ff6500'/%3E%3C/svg%3E") 8 8, pointer; }
}
@media (max-width: 600px) {
  .teaser-header p { font-size: 8px; line-height: 1.5; max-width: 110px; text-align: right; }
  .teaser-brand { gap: 9px; }
  .teaser-brand img { width: 102px; }
  .teaser-brand > span { height: 11px; width: 11px; }
  .workflow-player { width: min(65.6vw, calc((100svh - 360px) * 1376 / 768 * .8)); }
  .workflow-controls button { font-size: 9px; padding: 8px 2px; }
  .workflow-controls > div { gap: 2px; }
  .teaser-copy { padding-bottom: 42px; }
  .teaser-keywords { font-size: 9px; letter-spacing: 0.025em; }
  .teaser-footer { font-size: 9px; }
}
@media (max-height: 540px) {
  .teaser-shell { padding-top: 14px; padding-bottom: 12px; }
  .workflow-position { bottom: 75px; }
  .workflow-player { width: min(58.88vw, calc((100svh - 235px) * 1376 / 768 * .8)); }
  .teaser-copy { padding-bottom: 12px; }
  .teaser-page h1 { font-size: 27px; margin-top: 5px; }
  .teaser-page .teaser-status { margin-top: 8px; font-size: 9px; }
  .teaser-keywords { font-size: 8px; }
  .is-expanded .teaser-header { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .is-expanded .teaser-gallery { inset: 44px 0 180px; }
  .is-expanded .teaser-copy { bottom: 30px; padding: 8px 12px; }
  .is-expanded h1 { font-size: 24px; margin-top: 4px; }
  .is-expanded .teaser-status { margin-top: 4px; }
  .is-expanded .teaser-footer { height: 30px; }
}