/* meteo365 v4 — Livecam Player (Component)
 * Klassen mit Prefix `.lcp` — auf .livecam-player Container.
 * Tokens-konform, --accent (Orange), kein cyan/brand-deep.
 */

.lcp {
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;       /* Fallback; inline-style override pro Cam */
  outline: none;
  cursor: pointer;
}
.lcp:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ===== Media-Slot ===== */
.lcp__media {
  position: absolute; inset: 0;
}
.lcp__media > video,
.lcp__media > img,
.lcp__media > iframe {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  background: #000;
  border: 0;
}

/* ===== LIVE-Badge (auf Wunsch ausgeblendet) ===== */
.lcp__badge {
  display: none !important;
  position: absolute; top: 12px; left: 12px;
  align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.55);
  padding: 4px 10px 4px 8px; border-radius: var(--radius-pill);
  pointer-events: none; user-select: none;
  z-index: 3;
  transition: opacity 180ms var(--ease);
}
.lcp[data-state="error"] .lcp__badge,
.lcp[data-state="offline"] .lcp__badge,
.lcp[data-state="loading"] .lcp__badge { opacity: 0; }
.lcp__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255,59,59,.55);
  animation: lcp-pulse 1.6s ease-out infinite;
}
@keyframes lcp-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,59,59,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,59,59,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,59,59,0);   }
}
@media (prefers-reduced-motion: reduce) { .lcp__badge-dot { animation: none; } }

/* ===== Center Play-Button ===== */
.lcp__center-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(244,169,50,.92);
  color: #0d1b2a;
  border: 0; cursor: pointer; padding: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform 180ms var(--ease), background 180ms var(--ease), opacity 180ms var(--ease);
  z-index: 4;
}
.lcp__center-btn:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--accent-hover); }
.lcp__center-btn[hidden] { display: none; }
.lcp__center-btn svg { width: 38px; height: 38px; fill: currentColor; margin-left: 3px; }
.lcp[data-state="loading"] .lcp__center-btn { opacity: 0; pointer-events: none; }

/* ===== Spinner ===== */
.lcp__spinner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 6px; z-index: 4;
  pointer-events: none;
}
.lcp__spinner > span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.85);
  animation: lcp-bounce 1.2s ease-in-out infinite both;
}
.lcp__spinner > span:nth-child(2) { animation-delay: -0.16s; }
.lcp__spinner > span:nth-child(3) { animation-delay: -0.32s; }
@keyframes lcp-bounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1; }
}
.lcp__spinner[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lcp__spinner > span { animation: none; opacity: .6; } }

/* ===== Controls ===== */
.lcp__controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 60%, rgba(0,0,0,.75));
  z-index: 5;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  opacity: 1;
}
.lcp.is-idle .lcp__controls,
.lcp[data-state="error"]  .lcp__controls,
.lcp[data-state="offline"] .lcp__controls {
  opacity: 0; transform: translateY(8px); pointer-events: none;
}
.lcp__controls[hidden] { display: none; }

.lcp__btn {
  width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #fff;
  border-radius: 8px; display: grid; place-items: center;
  cursor: pointer; transition: background 120ms var(--ease), color 120ms var(--ease);
}
.lcp__btn:hover    { background: rgba(255,255,255,.16); color: var(--accent); }
.lcp__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lcp__btn svg { width: 20px; height: 20px; fill: currentColor; }
.lcp__btn[hidden] { display: none; }

.lcp__spacer { flex: 1; }

/* Volume-Slider */
.lcp__vol {
  width: 0; opacity: 0;
  margin: 0 4px 0 -6px;
  height: 4px; appearance: none; background: rgba(255,255,255,.3); border-radius: 2px;
  cursor: pointer;
  transition: width 200ms var(--ease), opacity 200ms var(--ease);
}
.lcp__btn--mute:hover ~ .lcp__vol,
.lcp__vol:hover, .lcp__vol:focus { width: 84px; opacity: 1; }
.lcp__vol::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  margin-top: -4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.lcp__vol::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff;
}

/* Quality-Menu */
.lcp__quality { position: relative; }
.lcp__quality-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  min-width: 120px; padding: 6px;
  background: rgba(15, 23, 42, .96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  list-style: none; margin: 0;
  display: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  z-index: 10;
}
.lcp__quality-menu.is-open { display: block; }
.lcp__quality-item {
  padding: 8px 12px; font-size: 13px; color: #e5e7eb;
  border-radius: 6px; cursor: pointer; transition: background 120ms;
}
.lcp__quality-item:hover { background: rgba(255,255,255,.10); }
.lcp__quality-item.is-active { color: var(--accent); font-weight: 700; }
.lcp__quality-item.is-active::after { content: ' ●'; }

/* ===== Overlays (Error / Offline) ===== */
.lcp__overlay {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  text-align: center; padding: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75));
  color: #fff; gap: 10px;
  z-index: 6;
}
.lcp__overlay[hidden] { display: none; }
.lcp__overlay-icon { color: var(--accent); }
.lcp__overlay-icon svg { width: 44px; height: 44px; fill: currentColor; }
.lcp__overlay-title { font-size: clamp(16px, 2vw, 20px); }
.lcp__overlay-btn {
  margin-top: 6px;
  font: inherit; font-weight: 600;
  padding: 10px 20px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius-pill);
  cursor: pointer; transition: background 120ms;
}
.lcp__overlay-btn:hover { background: var(--accent-hover); }

/* ===== Fullscreen-Tweaks ===== */
.lcp:fullscreen,
.lcp:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.lcp:fullscreen .lcp__media > video,
.lcp:fullscreen .lcp__media > img { object-fit: contain; }