*{box-sizing:border-box}html,body,#stage{width:100%;height:100%;margin:0;overflow:hidden;background:transparent}body{font-family:Inter,system-ui,Arial,sans-serif;color:#fff}#stage{position:relative;background:#05070b}#media,#media iframe,#media .main-video{width:100%;height:100%;border:0}#media iframe,#media .main-video{display:block;object-fit:cover;background:#000}.song-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}#media.blur{filter:blur(var(--blur,18px));transform:scale(1.06)}#blackout{position:absolute;inset:0;background:#000;display:none;z-index:10}#paused{position:absolute;inset:0;display:none;place-items:center;background:#000;color:#fff;font-size:clamp(34px,7vw,100px);font-weight:1000;z-index:11}#metadata{position:absolute;left:3%;right:3%;bottom:4%;z-index:20;display:flex;flex-direction:column;align-items:flex-start;padding:28px 34px;border-radius:22px;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.48) 65%,rgba(0,0,0,.05));text-shadow:0 4px 14px #000;box-shadow:0 12px 50px rgba(0,0,0,.35)}#metadata h1{margin:0;max-width:100%;font-size:clamp(42px,6.2vw,106px);line-height:.98;font-weight:1000;letter-spacing:-.035em;overflow-wrap:anywhere}#metadata p{margin:14px 0 0;font-size:clamp(28px,3.5vw,58px);line-height:1;font-weight:800;overflow-wrap:anywhere}#warning{width:100%;display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:12px 20px;border:4px solid #ff4b4b;border-radius:12px;background:linear-gradient(90deg,#b40000,#ef1010);color:#fff;font-size:clamp(24px,3.3vw,54px);font-weight:1000;letter-spacing:.05em;box-shadow:0 0 32px rgba(255,0,0,.65)}#warning[hidden]{display:none}.warning-icon{display:grid;place-items:center;flex:0 0 auto;width:clamp(48px,5vw,82px);height:clamp(48px,5vw,82px);border-radius:50%;background:#fff;color:#c40000;font-size:clamp(36px,4vw,68px);line-height:1;font-weight:1000}
/* Dauerhafte Playeranimation im Hintergrund */
#media {
  position: relative;
  overflow: hidden;
}

#media .background-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Videos und eingebettete Player liegen über der Animation */
#media .foreground-media,
#media iframe,
#media .spotify-embed-container,
#media .song-audio {
  position: absolute;
  z-index: 2;
}

#media .foreground-media,
#media iframe,
#media .spotify-embed-container {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#media .song-audio {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Gesamter Playerbereich */
#media {
  position: relative !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Playeranimation: dauerhaft im Hintergrund */
#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* Spotify-Fenster: sichtbar vor der Animation */
#spotify-embed-container,
#media .spotify-embed-container {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(90vw, 800px) !important;
  height: 352px !important;

  z-index: 100 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* Das eigentliche Spotify-iFrame */
#spotify-embed-container iframe,
#media .spotify-embed-container iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  z-index: 101 !important;
  display: block !important;
}

/* Verhindert, dass allgemeine iframe-Regeln Spotify überschreiben */
#media iframe:not(#spotify-embed-container iframe) {
  z-index: 20;
}

/* BEGIN AUTOMATIC SPOTIFY OBS LAYERS */

/*
 * Der Media-Bereich bildet einen eigenen Ebenenstapel.
 */
#media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/*
 * Playeranimation: immer laufende, unterste Ebene.
 */
#media video.background-animation,
#media video.fallback-animation,
#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/*
 * Spotify-Karte: mittig und deutlich vor der Animation.
 */
#media #spotify-embed-container,
#media .spotify-embed-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(88vw, 760px) !important;
  height: 352px !important;
  min-height: 352px !important;
  max-height: 352px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
}

/*
 * Das von Spotify erzeugte iFrame bleibt ebenfalls ganz oben.
 */
#media #spotify-embed-container iframe,
#media .spotify-embed-container iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 352px !important;
  display: block !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1001 !important;
}

/*
 * Beim gemeldeten Ende sofort ausblenden.
 * Anschließend setzt der Server den Zustand auf idle.
 */
#media .spotify-player-finished {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Sonstige Videos und iFrames liegen vor der Animation,
 * aber unterhalb von Spotify.
 */
#media .foreground-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100 !important;
}

#media iframe:not(
  #spotify-embed-container iframe
) {
  z-index: 100 !important;
}

/* END AUTOMATIC SPOTIFY OBS LAYERS */

/* BEGIN SPOTIFY CLICK LAYER FIX */

/*
 * Der Medienbereich bildet die gemeinsame Ebenenstruktur.
 */
#media {
  position: relative !important;
  isolation: isolate;
}

/*
 * Die Animation bleibt ganz hinten.
 */
#media .background-animation,
#media .fallback-animation {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/*
 * Spotify liegt vor der Animation und bleibt anklickbar.
 */
#spotify-embed-container,
#media .spotify-embed-container {
  position: absolute !important;
  z-index: 500 !important;
  pointer-events: auto !important;
}

#spotify-embed-container iframe,
#media .spotify-embed-container iframe {
  position: relative !important;
  z-index: 501 !important;
  pointer-events: auto !important;
}

/*
 * Titel, Künstler und sonstige Texte dürfen sichtbar bleiben,
 * blockieren aber keine Schaltflächen mehr.
 */
#media .song-info,
#media .song-meta,
#media .song-metadata,
#media .metadata,
#media .track-info,
#media .player-info,
#media .title-overlay,
#media .text-overlay,
#media [class*="song-info"],
#media [class*="metadata"],
#media [class*="track-info"],
#media [class*="title-overlay"],
#media [class*="text-overlay"] {
  pointer-events: none !important;
}

/*
 * Auch große schwarze Textflächen dürfen nicht vor Spotify liegen.
 */
#media > div:not(.spotify-embed-container):not(#spotify-embed-container) {
  pointer-events: none;
}

/*
 * Andere echte Bedienelemente bleiben verwendbar.
 */
#media button,
#media a,
#media input,
#media iframe,
#media video,
#media audio,
#media .spotify-embed-container,
#media #spotify-embed-container {
  pointer-events: auto;
}

/* END SPOTIFY CLICK LAYER FIX */

/* BEGIN SHORT SPOTIFY TEXT OVERLAY */

#media {
  position: relative !important;
  isolation: isolate;
}

/*
 * Das schwarze Titel-/Künstlerfeld endet deutlich vor dem
 * Spotify-Playbutton.
 */
#media .song-info,
#media .song-meta,
#media .song-metadata,
#media .metadata,
#media .track-info,
#media .player-info,
#media .title-overlay,
#media .text-overlay,
#media [class*="song-info"],
#media [class*="song-meta"],
#media [class*="metadata"],
#media [class*="track-info"],
#media [class*="title-overlay"],
#media [class*="text-overlay"] {
  width: auto !important;
  max-width: 58% !important;
  right: auto !important;

  padding-right: 24px !important;

  pointer-events: none !important;
  z-index: 20 !important;
}

/*
 * Spotify liegt über dem Textbereich und bleibt vollständig
 * anklickbar.
 */
#spotify-embed-container,
#media .spotify-embed-container {
  z-index: 100 !important;
  pointer-events: auto !important;
}

#spotify-embed-container iframe,
#media .spotify-embed-container iframe,
#media iframe[src*="open.spotify.com"] {
  z-index: 101 !important;
  pointer-events: auto !important;
}

/*
 * Keine unsichtbare Fläche darf den rechten Bereich des
 * Spotify-Players blockieren.
 */
#media .foreground-media,
#media .spotify-embed-container,
#spotify-embed-container {
  pointer-events: auto !important;
}

/* END SHORT SPOTIFY TEXT OVERLAY */

/* BEGIN OBS COMPACT SONG TEXT */

#media {
  position: relative !important;
  isolation: isolate !important;
}

/*
 * Titelbereich nur noch links unten.
 * Er endet deutlich vor den Spotify-Bedienelementen.
 */
#media .song-info,
#media .song-meta,
#media .song-metadata,
#media .metadata,
#media .track-info,
#media .player-info,
#media .title-overlay,
#media .text-overlay,
#media [class*="song-info"],
#media [class*="song-meta"],
#media [class*="metadata"],
#media [class*="track-info"],
#media [class*="title-overlay"],
#media [class*="text-overlay"] {
  position: absolute !important;

  left: 2.5% !important;
  right: auto !important;
  top: auto !important;
  bottom: 3% !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 42% !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 14px 22px !important;
  margin: 0 !important;

  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.72) !important;

  z-index: 20 !important;
  pointer-events: none !important;
}

/*
 * Spotify liegt immer darüber.
 */
#spotify-embed-container,
#media .spotify-embed-container {
  z-index: 100 !important;
  pointer-events: auto !important;
}

#spotify-embed-container iframe,
#media .spotify-embed-container iframe,
#media iframe[src*="spotify.com"] {
  z-index: 101 !important;
  pointer-events: auto !important;
}

/* END OBS COMPACT SONG TEXT */

/* =========================================================
   SPOTIFY: KEIN TITELFELD – NUR TRIGGERWARNUNG OBEN MITTIG
   ========================================================= */

/*
 * Sobald im Player Spotify aktiv ist, werden alle normalen
 * Titel-, Künstler- und Metadatenfelder ausgeblendet.
 */
body.spotify-active #media .song-info,
body.spotify-active #media .song-meta,
body.spotify-active #media .song-metadata,
body.spotify-active #media .metadata,
body.spotify-active #media .track-info,
body.spotify-active #media .player-info,
body.spotify-active #media .title-overlay,
body.spotify-active #media .text-overlay,
body.spotify-active #media [class*="song-info"],
body.spotify-active #media [class*="song-meta"],
body.spotify-active #media [class*="metadata"],
body.spotify-active #media [class*="track-info"],
body.spotify-active #media [class*="title-overlay"],
body.spotify-active #media [class*="text-overlay"] {
  display: none !important;
}

/*
 * Die Triggerwarnung bleibt sichtbar und sitzt oben mittig.
 */
body.spotify-active #media .trigger-warning,
body.spotify-active #media .triggerWarning,
body.spotify-active #media [class*="trigger-warning"],
body.spotify-active #media [class*="triggerWarning"] {
  display: block !important;

  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: min(90%, 1000px) !important;
  min-width: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 10px 20px !important;

  border: 1px solid rgba(255, 70, 90, 0.8) !important;
  border-radius: 10px !important;

  background: rgba(130, 0, 18, 0.92) !important;
  color: #ffffff !important;

  font-size: clamp(16px, 2vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;

  z-index: 5000 !important;
  pointer-events: none !important;

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(255, 45, 75, 0.28) !important;
}

/*
 * Leere Triggerwarnung wird vollständig ausgeblendet.
 */
body.spotify-active #media .trigger-warning:empty,
body.spotify-active #media .triggerWarning:empty {
  display: none !important;
}