/* zrm-player 1.0.0 | zeit:raum Design System | nutzt die Seiten-Tokens (--fg, --ease, --font-*) mit Fallbacks */
.zrm-video{
  --zrm-fg:var(--fg,#fff);
  --zrm-muted:var(--muted,rgba(255,255,255,.62));
  --zrm-line:var(--line-strong,rgba(255,255,255,.18));
  --zrm-glass:rgba(0,0,0,.55);
  --zrm-ease:var(--ease,cubic-bezier(.21,.4,.48,1));
  --zrm-head:var(--font-head,"Zeitraum Head","Zeitraum Text",Arial,sans-serif);
  --zrm-text:var(--font-text,"Zeitraum Text",Arial,sans-serif);
  --zrm-mono:var(--font-mono,"JetBrains Mono",ui-monospace,Menlo,monospace);
  position:relative;width:100%;aspect-ratio:var(--zrm-ratio,16/9);border-radius:12px;overflow:hidden;
  background:var(--bg-elev,#0A0A0B);color:var(--zrm-fg);container-type:inline-size;isolation:isolate;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none
}
.zrm-video video{display:block;width:100%;height:100%;max-width:none;object-fit:contain;background:#000}
.zrm-video:focus{outline:none}
.zrm-video :focus-visible{outline:1px solid var(--zrm-fg);outline-offset:2px}
.zrm-video [hidden]{display:none!important}
.zrm-hide{cursor:none}
.zrm-mono{font-family:var(--zrm-mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
:where(.zrm-video) button{font:inherit;color:inherit;margin:0;-webkit-appearance:none;appearance:none}

/* Grosser Play-Button im Stil von .play */
.zrm-big{position:absolute;left:24px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 22px 0 7px;
  border-radius:999px;background:var(--zrm-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--zrm-line);
  font-family:var(--zrm-head);font-weight:700;font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;
  transition:opacity 300ms var(--zrm-ease),visibility 0s,background 250ms var(--zrm-ease)}
.zrm-big:hover{background:rgba(0,0,0,.72)}
.zrm-big:focus-visible{outline-offset:4px}
.zrm-dot{flex:none;width:34px;height:34px;border-radius:50%;background:var(--zrm-fg);color:#000;display:grid;place-items:center;transition:transform 300ms var(--zrm-ease)}
.zrm-big:hover .zrm-dot{transform:scale(1.06)}
.zrm-dot svg{width:16px;height:16px;margin-left:2px}
.zrm-bigdur{color:var(--zrm-muted)}
.zrm-bigdur:empty{display:none}
.is-started:not(.is-ended) .zrm-big{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 300ms var(--zrm-ease),visibility 0s 300ms}

/* Steuerleiste (Glas) */
.zrm-ctrl{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;padding:4px 6px 2px;border-radius:12px;background:var(--zrm-glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--zrm-line);
  transition:opacity 300ms var(--zrm-ease),transform 300ms var(--zrm-ease),visibility 0s}
.zrm-video:not(.is-started) .zrm-ctrl,.is-ended .zrm-ctrl{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 300ms var(--zrm-ease),transform 300ms var(--zrm-ease),visibility 0s 300ms}
.zrm-hide .zrm-ctrl{opacity:0;transform:translateY(8px);pointer-events:none}
.zrm-row{display:flex;align-items:center;gap:2px;min-width:0}
.zrm-btn{flex:none;display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;transition:background 200ms var(--zrm-ease)}
.zrm-btn:hover{background:rgba(255,255,255,.1)}
.zrm-btn[aria-pressed=true]{background:rgba(255,255,255,.16)}
.zrm-btn svg{width:20px;height:20px}
.zrm-qbtn{padding:0 12px;font-size:11px}
.zrm-hqbtn{padding:0 10px;font-size:11px;letter-spacing:.06em}.zrm-hqbtn[aria-pressed="true"]{color:#000;background:#fff;border-radius:999px}  /* 03.11. G5 */
.zrm-time{flex:none;padding:0 10px;color:var(--zrm-muted);white-space:nowrap}
.zrm-cur{color:var(--zrm-fg)}
.zrm-sp{flex:1;min-width:0}

/* Fortschritt */
.zrm-bar{position:relative;height:22px;margin:0 10px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.zrm-bar:focus-visible{outline-offset:0}
.zrm-track{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;transition:height 200ms var(--zrm-ease)}
.zrm-bar:hover .zrm-track,.zrm-bar:focus-visible .zrm-track{height:4px}
.zrm-buf,.zrm-fill{position:absolute;inset:0;display:block;transform-origin:0 50%;transform:scaleX(0)}
.zrm-buf{background:rgba(255,255,255,.4)}
.zrm-fill{background:var(--chA,linear-gradient(90deg,#3a5bff 0%,#2ad8ff 14%,#fff 34%,#fff 66%,#ffd84a 86%,#ff2a2a 100%));background-size:100% 100%;transform:none;clip-path:inset(0 calc((1 - var(--zp,0)) * 100%) 0 0)}
.zrm-knob{position:absolute;left:calc(var(--zp,0) * 100%);top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;pointer-events:none;transition:transform 200ms var(--zrm-ease)}
.zrm-bar:hover .zrm-knob,.zrm-bar:focus-visible .zrm-knob{transform:scale(1.5)}
.zrm-tip{position:absolute;bottom:26px;left:0;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:var(--zrm-glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--zrm-line);color:var(--zrm-fg);font-size:11px;line-height:1;
  opacity:0;pointer-events:none;transition:opacity 200ms var(--zrm-ease)}
.zrm-tip:empty{display:none}
@media (hover:hover){.zrm-bar:hover .zrm-tip{opacity:1}}

/* Qualitaet */
.zrm-menu{position:absolute;right:6px;bottom:calc(100% + 8px);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;max-width:calc(100% - 12px);padding:4px;
  border-radius:999px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--zrm-line)}
.zrm-menu button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--zrm-muted);
  font-family:var(--zrm-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:background 200ms var(--zrm-ease),color 200ms var(--zrm-ease)}
.zrm-menu button:hover{color:var(--zrm-fg);background:rgba(255,255,255,.08)}
.zrm-menu button[aria-checked=true]{color:#000;background:var(--zrm-fg)}
.zrm-menu small{font-size:inherit;opacity:.6}

/* Untertitel (eigene Darstellung, rutscht ueber die Steuerleiste) */
.zrm-cues{position:absolute;left:6%;right:6%;bottom:28px;z-index:1;text-align:center;pointer-events:none;transition:bottom 300ms var(--zrm-ease)}
.zrm-cues span{padding:.12em .45em;border-radius:2px;background:rgba(0,0,0,.62);-webkit-box-decoration-break:clone;box-decoration-break:clone;
  font-family:var(--zrm-text);font-weight:400;font-size:clamp(14px,2.4cqi,24px);line-height:1.55;white-space:pre-line}
.is-started:not(.zrm-hide):not(.is-ended) .zrm-cues{bottom:96px}
.is-menu .zrm-cues{opacity:0}

/* Laden, Fehler */
.zrm-spin{position:absolute;left:50%;top:50%;z-index:1;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);
  border-top-color:var(--zrm-fg);opacity:0;pointer-events:none;transition:opacity 200ms var(--zrm-ease)}
.is-waiting .zrm-spin{opacity:1;animation:zrm-spin 900ms linear infinite}
@keyframes zrm-spin{to{transform:rotate(360deg)}}
.is-error::after{content:"Video nicht verfügbar";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--zrm-mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--zrm-muted)}

/* Vollbild */
.zrm-video:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:#000}
.zrm-video:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:#000}

/* Ambient-Loop */
.zrm-amb video{object-fit:cover}
.zrm-abtn{position:absolute;right:12px;bottom:12px;z-index:2;background:var(--zrm-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--zrm-line);opacity:0;transition:opacity 300ms var(--zrm-ease),background 200ms var(--zrm-ease)}
.zrm-amb:hover .zrm-abtn,.zrm-abtn:focus-visible,.zrm-amb:not(.is-playing) .zrm-abtn{opacity:1}
@media (hover:none){.zrm-abtn{opacity:.8}}

/* Kompakt (Kacheln, Mobil) */
@container (max-width:520px){
  .zrm-big{left:12px;bottom:12px;min-height:44px;gap:10px;padding-right:16px;font-size:14px}
  .zrm-dot{width:30px;height:30px}
  .zrm-ctrl{left:8px;right:8px;bottom:8px;padding:2px 4px 0}
  .zrm-btn{min-width:36px;height:36px}
  .zrm-time{padding:0 6px;font-size:11px}
  .zrm-bar{margin:0 8px}
  .zrm-cues span{font-size:13px}
  .zrm-menu{gap:0;padding:3px}
  .zrm-menu button{min-height:30px;padding:0 8px}
  .zrm-menu small{display:none}
  .is-started:not(.zrm-hide):not(.is-ended) .zrm-cues{bottom:84px}
}
@container (max-width:340px){.zrm-sep,.zrm-dur{display:none}}

@media (prefers-reduced-motion:reduce){
  .zrm-video *,.zrm-video *::before,.zrm-video *::after{transition:none!important;animation:none!important}
  .zrm-ctrl{transform:none!important}
}

.zrm-logo{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 14px 0 10px;color:#fff;opacity:.62;pointer-events:none}
.zrm-logo svg{display:block;height:11px;width:auto}
@media (max-width:480px){.zrm-logo{display:none}}