/* ============================================================
   EDMQ WEBCAM — minimal full-screen player
   Logo · camera selector · viewer · film strip. Nothing else.
   Grounded in the MDG · EDMQ system: IBM Plex Sans + Mono,
   radius 9/11/13/pill-20, green=live / red=offline, German copy.
   Self-hosted fonts (no external requests).
   ============================================================ */

/* Self-hosted IBM Plex (SIL OFL) — no external requests (DSGVO-friendly). */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-mono-600.woff2') format('woff2'); }

:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --bg-sky-top: #cfe1f2;
  --bg-sky-bottom: #eef3f8;
  --surface: #ffffff;
  --surface-soft: #f5f8fc;
  --surface-sunken: #e9eff6;
  --surface-stage: #0c1a2e;

  --line: rgba(30,54,86,.15);
  --line-strong: rgba(30,54,86,.24);

  --ink: #16243a;
  --ink-2: #41546e;
  --ink-3: #51637c;
  --ink-mute: #6b7d96;

  --primary: #176093;
  --primary-bright: #2b8fd0;
  --primary-tint: rgba(43,143,208,.12);
  --primary-tint-br: rgba(43,143,208,.34);

  --club: #ffb020;
  --club-deep: #c77a12;
  --club-tint: rgba(255,176,32,.16);

  --live-glow: #3be37a;
  --offline-glow: #ff5a5a;

  --r-sm: 9px;
  --r-md: 11px;
  --r-lg: 13px;
  --r-pill: 20px;

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-bright);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #d9e8f6 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-sky-top) 0%, var(--bg-sky-bottom) 46%);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------
   FULL-SCREEN SHELL
   --------------------------------------------------------------- */
.player {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2.2vh, 22px) clamp(12px, 2.2vw, 28px);
  gap: clamp(10px, 1.8vh, 18px);
}

/* ---------------------------------------------------------------
   TOP BAR — logo + camera selector
   --------------------------------------------------------------- */
.bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bar-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.logo-img { height: clamp(40px, 5.6vh, 54px); width: auto; display: block; flex: none; }
.bar-div { flex: none; width: 1px; height: clamp(34px, 4.6vh, 44px); background: var(--line-strong); }
.title-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eyebrow {
  font-size: clamp(10px, 1.3vh, 11.5px);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--ink-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.page-title {
  font-size: clamp(20px, 2.8vh, 26px);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}

/* Selector + inline status share a row */
.selector-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Compact status pill next to the selector (mobile only; hidden on desktop where
   the overlay badge is used instead). Toggled visible in the media queries below. */
.status-inline {
  display: none;
  align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; flex: none;
  box-shadow: 0 1px 2px rgba(22,36,58,.06);
}
.status-inline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live-glow); box-shadow: 0 0 6px rgba(59,227,122,.5); flex: none; }
.status-inline .si-label { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; }
.status-inline .si-time { font-family: var(--font-mono); font-weight: 500; color: var(--ink-3); }
.status-inline.is-offline { border-color: rgba(255,90,90,.4); }
.status-inline.is-offline .dot { background: var(--offline-glow); box-shadow: 0 0 6px var(--offline-glow); }
.status-inline.is-archiv { border-color: rgba(255,176,32,.5); }
.status-inline.is-archiv .dot { background: var(--club); box-shadow: 0 0 6px rgba(255,176,32,.55); }

/* Camera selector (segmented control / tablist) */
.segmented {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 4px;
}
.seg {
  position: relative;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: clamp(13px, 1.6vh, 15px);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
.seg:hover:not([aria-disabled="true"]):not([aria-selected="true"]) { background: rgba(255,255,255,.7); color: var(--ink); }
.seg[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22,36,58,.08);
}
.seg[aria-selected="true"] > .tick { width: 7px; height: 7px; border-radius: 50%; background: var(--club); box-shadow: 0 0 7px rgba(255,176,32,.55); }
.seg[aria-disabled="true"] { color: var(--ink-mute); cursor: not-allowed; opacity: .85; }
.seg .tag-soon {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--club-deep); background: var(--club-tint);
  border: 1px solid rgba(255,176,32,.4); padding: 2px 6px; border-radius: var(--r-pill); line-height: 1;
}

/* ---------------------------------------------------------------
   VIEWER — fills the available space
   --------------------------------------------------------------- */
.stage {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-stage);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(22,36,58,.06), 0 10px 36px rgba(22,36,58,.10);
}
.stage-sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      #7eb0dd 0%, #9cc4e6 30%, #c4dbee 52%, #e2ecf2 62%,
      #d9e0cf 62.2%, #c2cdac 74%, #aeba93 100%);
}
.stage-sky::before {
  content: ""; position: absolute; left: 0; right: 0; top: 14%; height: 30%;
  background:
    radial-gradient(60% 120% at 22% 60%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(50% 120% at 70% 40%, rgba(255,255,255,.45), transparent 62%);
  filter: blur(2px);
}
.stage-sky::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 46%; height: 38%;
  background: linear-gradient(180deg, rgba(70,82,70,0) 0%, rgba(60,70,58,.30) 100%);
  clip-path: polygon(46% 0, 54% 0, 74% 100%, 26% 100%);
}

/* Status badge */
.badge {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  padding: 8px 13px; border-radius: var(--r-pill);
  background: rgba(7,17,28,.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(59,227,122,.4);
  white-space: nowrap;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live-glow); box-shadow: 0 0 8px var(--live-glow); animation: pulse 2s ease-in-out infinite; }
.badge .label { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--live-glow); }
.badge .sep { color: #5d769a; }
.badge .time { font-family: var(--font-mono); color: #d6e3f4; font-weight: 500; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------------------------------------------------------------
   FILM STRIP — band along the bottom
   --------------------------------------------------------------- */
.strip-wrap {
  flex: none;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.strip { display: flex; gap: 8px; padding: 10px 12px; min-width: max-content; }
.thumb {
  flex: none;
  width: clamp(78px, 9vw, 112px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 4px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.thumb:hover { border-color: var(--primary-tint-br); transform: translateY(-1px); }
.thumb .pic { aspect-ratio: 16 / 9; border-radius: 5px; background-size: cover; background-position: center; }
.thumb .time { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; text-align: center; color: var(--ink-3); letter-spacing: .02em; }
.thumb[aria-selected="true"] { border-color: var(--club); box-shadow: 0 0 0 1px var(--club), 0 2px 8px rgba(255,176,32,.25); }
.thumb[aria-selected="true"] .time { color: var(--club-deep); font-weight: 600; }

.tod-dawn  { background: linear-gradient(180deg,#3a4d72 0%,#8a7390 48%,#e0a877 78%,#c9b48e 100%); }
.tod-am    { background: linear-gradient(180deg,#7fa8d4 0%,#bcd4ea 55%,#b8c3a2 100%); }
.tod-day   { background: linear-gradient(180deg,#7eb0dd 0%,#c4dbee 58%,#aeba93 100%); }
.tod-pm    { background: linear-gradient(180deg,#8fb0cf 0%,#cdd8df 55%,#b0b896 100%); }
.tod-dusk  { background: linear-gradient(180deg,#5b6a92 0%,#c98a6e 55%,#e7a35f 78%,#8f8a72 100%); }
.tod-night { background: linear-gradient(180deg,#0e1c33 0%,#1a2c49 60%,#243a52 100%); }

/* ---------------------------------------------------------------
   24-HOUR TIME SLIDER
   --------------------------------------------------------------- */
.timebar {
  flex: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 6px 0;
}
.u-micro {
  font-size: 11px; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink-3); font-weight: 600;
}
.tb-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tb-ctrl { display: flex; align-items: center; gap: 12px; }
.tb-time { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ink); min-width: 5ch; text-align: right; }
.tb-play {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff; border: 0;
  display: grid; place-items: center;
  transition: transform .12s, background .15s;
}
.tb-play:hover { transform: scale(1.07); background: var(--primary-bright); }
.tb-play.is-playing .ic-play { display: none; }
.tb-play .ic-pause[hidden] { display: none; }
.tb-play.is-playing .ic-pause { display: block; }

.tb-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 6px; background: transparent; cursor: pointer; margin: 2px 0;
}
.tb-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--primary) 0 var(--fill,75%), var(--surface-sunken) var(--fill,75%) 100%);
  border: 1px solid var(--line);
}
.tb-range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--surface-sunken); border: 1px solid var(--line); }
.tb-range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--primary); }
.tb-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -7px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--primary);
  box-shadow: 0 1px 3px rgba(22,36,58,.3);
}
.tb-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--primary);
  box-shadow: 0 1px 3px rgba(22,36,58,.3);
}
.tb-range:focus-visible { box-shadow: none; }
.tb-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.tb-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

.tb-scale {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); letter-spacing: .04em;
}

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
  padding: 0 4px;
}
.foot .club { min-width: 0; }
.foot-links { display: flex; align-items: center; gap: 10px; }
.foot-links a { color: var(--primary); font-weight: 500; }
.foot-links .sep { color: var(--ink-mute); }

/* ===============================================================
   WIRING ADDITIONS (live image + badge states + real thumbnails)
   =============================================================== */
.stage-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* show the whole frame, no cropping */
  display: block;
  background: var(--surface-stage);
}
.stage-img[hidden] { display: none; }     /* fall back to .stage-sky while loading */

.badge { cursor: pointer; }               /* clickable: returns to live */
.badge.is-offline { border-color: rgba(255,90,90,.45); }
.badge.is-offline .dot { background: var(--offline-glow); box-shadow: 0 0 8px var(--offline-glow); animation: none; }
.badge.is-offline .label { color: var(--offline-glow); }
.badge.is-archiv { border-color: rgba(255,176,32,.5); }
.badge.is-archiv .dot { background: var(--club); box-shadow: 0 0 8px rgba(255,176,32,.6); animation: none; }
.badge.is-archiv .label { color: var(--club); }

/* camera-selector tick reflects live state: green = fresh live data, red = stale */
.seg[aria-selected="true"].is-live > .tick { background: var(--live-glow); box-shadow: 0 0 7px rgba(59,227,122,.6); }
.seg[aria-selected="true"].is-dead > .tick { background: var(--offline-glow); box-shadow: 0 0 7px rgba(255,90,90,.5); }

/* mobile: keep the header from overflowing the viewport */
@media (max-width: 600px) {
  .eyebrow { white-space: normal; letter-spacing: .1em; font-size: 10px; line-height: 1.3; }
  .page-title { white-space: normal; }
  .bar-left { gap: 12px; }
  .bar-div { display: none; }
  /* The overlay badge covers too much of the frame — drop it and show a compact
     status next to the selector instead. */
  .badge { display: none; }
  .status-inline { display: inline-flex; }
}

/* Mobile landscape: give the video nearly the whole screen. Compact the header,
   hide the film strip and footer, keep just the scrub slider. */
@media (orientation: landscape) and (max-height: 600px) {
  .player { padding: 8px 12px; gap: 8px; }
  .bar { flex-wrap: nowrap; gap: 12px; }
  .title-block, .bar-div { display: none; }        /* slim top bar: logo + selector + status only */
  .logo-img { height: 34px; }
  .badge { display: none; }
  .status-inline { display: inline-flex; }
  .strip-wrap { display: none; }                   /* film strip blocks too much — hide it */
  .foot { display: none; }
  .timebar { padding: 2px 4px 0; gap: 4px; }
  .tb-scale { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .badge .dot { animation: none; }
  .thumb { transition: none; }
}