/* ZwischenRaum V1 Baseline
   Eine visuelle Wahrheit: Tokens, Base, Header, Karussell, Detail, Tracks, Lyrics, Player, Info-Sheet, Responsive.
*/

:root {
  color-scheme: dark;
  --zr-bg: #0F0F10;
  --zr-bg-deep: #050506;
  --zr-surface: #1B1B1F;
  --zr-surface-elevated: #232327;
  --zr-surface-soft: #18191C;
  --zr-line: rgba(255,255,255,.08);
  --zr-line-soft: rgba(255,255,255,.055);
  --zr-text: #EDEAE4;
  --zr-text-soft: #C8C1BA;
  --zr-muted: #8F8A84;
  --zr-accent: #D8C08A;
  --zr-accent-strong: #E5C982;
  --zr-radius-card: 22px;
  --zr-radius-pill: 999px;
  --zr-max-carousel: 1180px;
  --zr-max-content: 820px;
  --zr-font-ui: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zr-font-heading: "Michroma", Inter, ui-sans-serif, system-ui, sans-serif;
  --zr-shadow: 0 22px 70px rgba(0,0,0,.38);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--zr-bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--zr-text);
  font-family: var(--zr-font-ui);
  letter-spacing: -.018em;
  background:
    radial-gradient(circle at 20% -12%, rgba(216,192,138,.045), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.035), transparent 28%),
    linear-gradient(180deg, var(--zr-bg) 0%, #090A0B 50%, var(--zr-bg-deep) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at top, black, transparent 78%);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

button,
summary {
  -webkit-tap-highlight-color: transparent;
}

.zr-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(var(--zr-max-carousel), 100vw);
  margin: 0 auto;
  padding: calc(62px + env(safe-area-inset-top)) 16px calc(190px + env(safe-area-inset-bottom));
}

.zr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  min-height: calc(52px + env(safe-area-inset-top));
  padding: calc(7px + env(safe-area-inset-top)) 14px 7px;
  border-bottom: 1px solid var(--zr-line-soft);
  background: rgba(15,15,16,.95);
  backdrop-filter: blur(22px);
}

.zr-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.zr-brandmark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(94%) sepia(7%) saturate(256%) hue-rotate(349deg) brightness(101%) contrast(92%);
}

.zr-brand strong,
.zr-brand em {
  display: block;
}

.zr-brand strong {
  color: var(--zr-text);
  font-family: var(--zr-font-heading);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.zr-brand em {
  margin-top: 2px;
  color: var(--zr-text-soft);
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.zr-section {
  padding: 0 0 34px;
}

.zr-audio-host {
  display: none;
}

.zr-kicker {
  margin: 0 0 10px;
  color: var(--zr-accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.zr-error {
  padding: 16px;
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius-card);
  color: var(--zr-text-soft);
  background: rgba(255,255,255,.04);
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}

/* Zyklus-Karussell */

.zr-track-grid {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
}

.zr-cycle-shell {
  display: grid;
  width: 100%;
  max-width: var(--zr-max-carousel);
  margin-inline: auto;
  gap: 12px;
  overflow-x: hidden;
}

.zr-cycle-carousel {
  display: grid;
  grid-template-columns: minmax(44px, 13vw) minmax(0, min(76vw, 330px)) minmax(44px, 13vw);
  justify-content: center;
  align-items: center;
  min-height: min(84vw, 350px);
  margin-top: clamp(1px, .5vh, 12px);
  gap: 8px;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.zr-cycle-carousel.is-dragging {
  cursor: grabbing;
}

.zr-cycle-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--zr-line-soft);
  border-radius: 22px;
  color: var(--zr-text);
  background: rgba(255,255,255,.035);
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
  cursor: pointer;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transition:
    transform 230ms cubic-bezier(.22,.61,.36,1),
    opacity 190ms ease,
    filter 190ms ease,
    border-color 190ms ease,
    box-shadow 190ms ease;
}

.zr-cycle-carousel.is-dragging .zr-cycle-card {
  transition: none;
}

.zr-cycle-card img,
.zr-cycle-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zr-cycle-card-video {
  pointer-events: none;
}

.zr-cycle-card-video::-webkit-media-controls,
.zr-cycle-card-video::-webkit-media-controls-enclosure,
.zr-cycle-card-video::-webkit-media-controls-panel {
  display: none;
  opacity: 0;
}

.zr-cycle-card-video + .zr-cycle-card-fallback {
  display: none;
}

.zr-cycle-card-center {
  width: min(76vw, 330px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  border-radius: 24px;
  opacity: 1;
  border-color: rgba(216,192,138,.34);
}

.zr-cycle-card-left,
.zr-cycle-card-right {
  width: min(13vw, 62px);
  height: min(58vw, 270px);
  justify-self: center;
  border-radius: 22px;
  opacity: .54;
  filter: saturate(.82) brightness(.68);
}

.zr-cycle-card-left img {
  object-position: left center;
}

.zr-cycle-card-right img {
  object-position: right center;
}

.zr-cycle-card-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.62)),
    rgba(15,15,16,.55);
  backdrop-filter: blur(12px);
}

.zr-cycle-card-left .zr-cycle-card-meta,
.zr-cycle-card-right .zr-cycle-card-meta {
  display: none;
}

.zr-cycle-card-center.has-video .zr-cycle-card-meta {
  opacity: 0;
  transform: translateY(14px) scale(.985);
}

.zr-cycle-card-center.has-video.is-video-playing .zr-cycle-card-meta {
  animation: zrTitleFadeIn 3.8s ease-out .25s forwards;
}

.zr-cycle-card-center.has-video.is-video-ended .zr-cycle-card-meta,
.zr-cycle-card-center.is-title-visible .zr-cycle-card-meta,
.zr-cycle-card-center:not(.has-video) .zr-cycle-card-meta {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.22,.61,.36,1);
}

@keyframes zrTitleFadeIn {
  0% { opacity: 0; transform: translateY(14px) scale(.985); }
  45% { opacity: .48; transform: translateY(8px) scale(.992); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.zr-cycle-card-meta em {
  color: var(--zr-accent);
  font-style: normal;
  font-size: .68rem;
  font-weight: 900;
}

.zr-cycle-card-meta strong {
  color: var(--zr-text);
  font-size: clamp(.92rem, 4.6vw, 1.28rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.zr-cycle-card-meta small {
  color: var(--zr-text-soft);
  font-size: .72rem;
}

/* Detailbereich */

.zr-cycle-detail-shell {
  width: min(100%, var(--zr-max-content));
  max-width: var(--zr-max-content);
  margin: 12px auto 0;
}

.zr-cycle-detail {
  width: 100%;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--zr-line-soft);
  border-radius: var(--zr-radius-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.024)),
    rgba(27,27,31,.88);
  box-shadow: var(--zr-shadow);
}

.zr-cycle-detail h3 {
  margin: 0 0 8px;
  color: var(--zr-text);
  font-family: var(--zr-font-heading);
  font-size: clamp(1.34rem, 7.1vw, 2.12rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.zr-cycle-detail p {
  color: var(--zr-text-soft);
  line-height: 1.48;
}

.zr-cycle-transition-copy,
.zr-cycle-album-context {
  padding: 11px;
  margin: 12px 0;
  border: 1px solid var(--zr-line-soft);
  border-radius: 18px;
  background: rgba(0,0,0,.13);
}

.zr-cycle-transition-copy h4 {
  margin: 2px 0 6px;
  color: var(--zr-text);
  font-family: var(--zr-font-heading);
  font-size: clamp(.98rem, 4.6vw, 1.34rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.zr-cycle-album-context p {
  margin-bottom: 10px;
  font-size: .86rem;
}

.zr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.zr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid var(--zr-line-soft);
  border-radius: var(--zr-radius-pill);
  color: var(--zr-muted);
  background: rgba(255,255,255,.035);
  font-size: .66rem;
  font-weight: 800;
}

/* Tracks und Lyrics */

.zr-cycle-track-list {
  display: grid;
  gap: 9px;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
}

.zr-album-track {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--zr-line-soft);
  border-radius: 17px;
  background: rgba(255,255,255,.03);
}

.zr-album-track.is-active {
  border-color: rgba(216,192,138,.36);
}

.zr-album-track-main {
  width: 100%;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.zr-album-track-main img {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  object-fit: cover;
}

.zr-album-track-main span {
  min-width: 0;
}

.zr-album-track-main strong {
  display: block;
  margin-bottom: 4px;
  color: var(--zr-text);
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.zr-album-track-main em {
  display: -webkit-box;
  color: var(--zr-muted);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.33;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zr-track-play-indicator {
  color: var(--zr-accent);
  font-size: 21px;
}

.zr-track-lyrics {
  margin: 0 9px 9px;
  overflow: hidden;
  border: 1px solid var(--zr-line-soft);
  border-radius: 13px;
  background: rgba(0,0,0,.13);
}

.zr-track-lyrics summary {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--zr-text-soft);
  font-size: .76rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.zr-track-lyrics summary::-webkit-details-marker {
  display: none;
}

.zr-track-lyrics summary .material-symbols-rounded {
  font-size: 18px;
}

.zr-track-lyrics-body {
  max-height: min(42vh, 430px);
  overflow: auto;
  padding: 12px 12px 42px;
  border-top: 1px solid var(--zr-line-soft);
  color: rgba(237,234,228,.84);
  font-size: .84rem;
  line-height: 1.56;
  overflow-wrap: anywhere;
  scroll-padding-bottom: 120px;
}

/* Player */

.zr-player-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 130;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 46px 34px 34px;
  gap: 6px;
  align-items: center;
  min-height: 58px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--zr-line);
  border-radius: 22px;
  background: rgba(15,15,16,.93);
  backdrop-filter: blur(22px);
  box-shadow: 0 16px 54px rgba(0,0,0,.54);
}

.zr-player-now {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.zr-player-now img {
  width: 36px;
  height: 36px;
  border: 1px solid var(--zr-line);
  border-radius: 11px;
  object-fit: cover;
}

.zr-player-now span {
  min-width: 0;
}

.zr-player-now strong,
.zr-player-now em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zr-player-now strong {
  color: var(--zr-text);
  font-size: .76rem;
  line-height: 1.08;
}

.zr-player-now em {
  margin-top: 2px;
  color: var(--zr-muted);
  font-size: .64rem;
  font-style: normal;
  line-height: 1.06;
}

.zr-player-small,
.zr-player-main,
.zr-player-info {
  display: grid;
  place-items: center;
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius-pill);
  text-decoration: none;
  cursor: pointer;
}

.zr-player-small,
.zr-player-info {
  width: 34px;
  height: 34px;
  color: var(--zr-text-soft);
  background: rgba(255,255,255,.04);
}

.zr-player-main {
  width: 46px;
  height: 46px;
  color: #17130b;
  background: var(--zr-accent);
  border-color: transparent;
}

.zr-player-main.is-playing {
  background: var(--zr-accent-strong);
}

.zr-player-main .material-symbols-rounded {
  font-size: 27px;
}

.zr-player-small .material-symbols-rounded,
.zr-player-info .material-symbols-rounded {
  font-size: 20px;
}

/* Info-Sheet */

.zr-info-sheet {
  position: fixed;
  z-index: 160;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-height: min(76vh, 720px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 28px;
  color: var(--zr-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    rgba(27,27,31,.97);
  box-shadow: 0 30px 90px rgba(0,0,0,.68);
  backdrop-filter: blur(28px);
  transform: translateY(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
}

body.zr-info-open .zr-info-sheet {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.zr-info-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
}

.zr-info-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--zr-line);
  border-radius: var(--zr-radius-pill);
  color: var(--zr-text);
  background: rgba(255,255,255,.05);
  cursor: pointer;
}

.zr-info-sheet h2 {
  margin: 10px 0 18px;
  color: var(--zr-text);
  font-family: var(--zr-font-heading);
  font-size: clamp(1.9rem, 9vw, 3rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.06em;
}

.zr-info-sheet p {
  color: var(--zr-text-soft);
  font-size: .95rem;
  line-height: 1.55;
}

/* Desktop */

@media (min-width: 700px) {
  .zr-page {
    width: min(var(--zr-max-carousel), calc(100vw - 64px));
    max-width: var(--zr-max-carousel);
    padding: 0 0 calc(124px + env(safe-area-inset-bottom));
  }

  .zr-header {
    position: sticky;
    top: 8px;
    left: auto;
    right: auto;
    width: min(var(--zr-max-content), calc(100vw - 64px));
    min-height: 56px;
    margin: 8px auto 0;
    padding: 10px 14px;
    border: 1px solid var(--zr-line-soft);
    border-radius: var(--zr-radius-pill);
  }

  .zr-brandmark {
    width: 36px;
    height: 36px;
  }

  .zr-brand strong {
    font-size: .9rem;
  }

  .zr-brand em {
    font-size: .62rem;
  }

  .zr-section {
    padding-top: 24px;
  }

  .zr-cycle-carousel {
    width: min(var(--zr-max-carousel), calc(100vw - 64px));
    grid-template-columns: 150px minmax(0, min(44vw, 520px)) 150px;
    min-height: min(44vw, 520px);
    margin: 24px auto 0;
  }

  .zr-cycle-card-center {
    width: min(44vw, 520px);
    max-width: 520px;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: 150px;
    height: 360px;
    border-radius: 28px;
  }

  .zr-cycle-card-meta {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 14px 18px;
  }

  .zr-cycle-detail-shell {
    width: min(100%, var(--zr-max-content));
    max-width: var(--zr-max-content);
    margin: 18px auto 0;
  }

  .zr-cycle-detail {
    padding: 22px;
  }

  .zr-cycle-detail h3 {
    font-size: clamp(2rem, 4vw, 3.15rem);
    letter-spacing: -.06em;
  }

  .zr-album-track-main {
    grid-template-columns: 58px minmax(0, 1fr) 34px;
  }

  .zr-album-track-main img {
    width: 58px;
    height: 58px;
  }

  .zr-cycle-track-list {
    padding-bottom: 110px;
  }

  .zr-player-bar {
    left: 50%;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(760px, calc(100vw - 64px));
    grid-template-columns: minmax(0, 1fr) 42px 56px 42px 42px;
    gap: 8px;
    min-height: 66px;
    padding: 8px 10px;
    border-radius: 24px;
    transform: translateX(-50%);
  }

  .zr-player-now {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .zr-player-now img {
    width: 44px;
    height: 44px;
  }

  .zr-player-main {
    width: 56px;
    height: 56px;
  }

  .zr-player-small,
  .zr-player-info {
    width: 42px;
    height: 42px;
  }

  .zr-info-sheet {
    left: 50%;
    right: auto;
    bottom: 104px;
    width: min(720px, calc(100vw - 64px));
    transform: translate(-50%, calc(100% + 32px));
  }

  body.zr-info-open .zr-info-sheet {
    transform: translate(-50%, 0);
  }
}

@media (max-width: 390px) {
  .zr-page {
    padding-bottom: calc(180px + env(safe-area-inset-bottom));
  }

  .zr-cycle-carousel {
    grid-template-columns: minmax(40px, 12vw) minmax(0, min(77vw, 310px)) minmax(40px, 12vw);
  }

  .zr-cycle-card-center {
    width: min(77vw, 310px);
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: min(12vw, 52px);
    height: min(56vw, 240px);
  }
}


/* ZwischenRaum V1 Baseline REV2
   Screenshot-QA: Header bleibt oben, Karussell startet darunter,
   Player bleibt horizontal, Info-Sheet bleibt außerhalb des Scrollflows. */

.zr-page {
  padding-top: calc(66px + env(safe-area-inset-top));
  padding-bottom: calc(226px + env(safe-area-inset-bottom));
}

.zr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 420;
  width: 100%;
  min-height: calc(54px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  border: 0;
  border-bottom: 1px solid var(--zr-line-soft);
  border-radius: 0;
  background: rgba(15,15,16,.96);
  backdrop-filter: blur(22px);
  transform: none;
}

.zr-brandmark {
  width: 32px;
  height: 32px;
}

.zr-brand strong {
  font-size: .82rem;
}

.zr-brand em {
  font-size: .56rem;
}

.zr-section {
  padding-top: 0;
}

.zr-cycle-carousel {
  margin-top: clamp(8px, 1.6vh, 22px);
}

/* Player-Bar explizit und unabhängig von früheren Bottom-Nav-Regeln */
.zr-player-bar {
  position: fixed;
  z-index: 430;
  left: 12px;
  right: 12px;
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 46px 34px 34px;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 58px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: rgba(15,15,16,.94);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 58px rgba(0,0,0,.62);
  transform: none;
}

.zr-player-now {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.zr-player-now img {
  width: 36px;
  height: 36px;
}

.zr-player-small,
.zr-player-info {
  width: 34px;
  height: 34px;
}

.zr-player-main {
  width: 46px;
  height: 46px;
}

/* Info-Sheet bleibt default unsichtbar */
.zr-info-sheet {
  position: fixed;
  z-index: 460;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-height: min(76vh, 720px);
  overflow: auto;
  transform: translateY(calc(100% + 48px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 260ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease,
    visibility 0s linear 260ms;
}

body.zr-info-open .zr-info-sheet {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 260ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease,
    visibility 0s;
}

body.zr-info-open::before {
  z-index: 450;
}

/* Content-Reserve zum Player */
.zr-hoerraum-main::after {
  content: "";
  display: block;
  height: calc(150px + env(safe-area-inset-bottom));
}

.zr-cycle-track-list {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

.zr-track-lyrics-body {
  padding-bottom: 48px;
  scroll-padding-bottom: 140px;
}

@media (max-width: 699px) {
  .zr-cycle-detail-shell {
    margin-top: 12px;
  }
}

/* Desktop: Header oben fixiert, Karussell darunter */
@media (min-width: 700px) {
  .zr-page {
    width: min(var(--zr-max-carousel), calc(100vw - 64px));
    max-width: var(--zr-max-carousel);
    padding-top: 88px;
    padding-bottom: calc(154px + env(safe-area-inset-bottom));
  }

  .zr-header {
    left: 50%;
    right: auto;
    top: 16px;
    width: min(var(--zr-max-content), calc(100vw - 64px));
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--zr-line-soft);
    border-radius: var(--zr-radius-pill);
    transform: translateX(-50%);
  }

  .zr-brandmark {
    width: 36px;
    height: 36px;
  }

  .zr-brand strong {
    font-size: .9rem;
  }

  .zr-brand em {
    font-size: .62rem;
  }

  .zr-section {
    padding-top: 0;
  }

  .zr-cycle-carousel {
    margin-top: 10px;
    width: min(var(--zr-max-carousel), calc(100vw - 64px));
    grid-template-columns: 150px minmax(0, min(44vw, 520px)) 150px;
    min-height: min(44vw, 520px);
  }

  .zr-cycle-detail-shell {
    margin-top: 18px;
  }

  .zr-player-bar {
    left: 50%;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: min(760px, calc(100vw - 64px));
    grid-template-columns: minmax(0, 1fr) 42px 56px 42px 42px;
    gap: 8px;
    min-height: 66px;
    padding: 8px 10px;
    border-radius: 24px;
    transform: translateX(-50%);
  }

  .zr-player-now {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .zr-player-now img {
    width: 44px;
    height: 44px;
  }

  .zr-player-main {
    width: 56px;
    height: 56px;
  }

  .zr-player-small,
  .zr-player-info {
    width: 42px;
    height: 42px;
  }

  .zr-info-sheet {
    left: 50%;
    right: auto;
    bottom: 104px;
    width: min(720px, calc(100vw - 64px));
    transform: translate(-50%, calc(100% + 48px));
  }

  body.zr-info-open .zr-info-sheet {
    transform: translate(-50%, 0);
  }
}


/* ZwischenRaum V1 Baseline REV3
   Screenshot-QA:
   - Desktop-Header kollidiert nicht mehr mit dem Karussell.
   - Seitliche Karussellkarten sind quadratische Cover/CD-Flächen, keine vertikalen Streifen.
   - Karussell bleibt Bühne; Detailinhalt bleibt schmaler.
*/

@media (max-width: 699px) {
  .zr-page {
    padding-top: calc(62px + env(safe-area-inset-top)) !important;
  }

  .zr-cycle-carousel {
    margin-top: clamp(8px, 1.4vh, 18px) !important;
    grid-template-columns: minmax(54px, 18vw) minmax(0, min(76vw, 330px)) minmax(54px, 18vw) !important;
    min-height: min(84vw, 350px) !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .zr-cycle-card-center {
    width: min(76vw, 330px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 2 !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: min(46vw, 205px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
    opacity: .42 !important;
    filter: saturate(.72) brightness(.58) !important;
    z-index: 1 !important;
  }

  .zr-cycle-card-left {
    justify-self: end !important;
    transform: translateX(22%) scale(.82) !important;
    transform-origin: right center !important;
  }

  .zr-cycle-card-right {
    justify-self: start !important;
    transform: translateX(-22%) scale(.82) !important;
    transform-origin: left center !important;
  }

  .zr-cycle-card-left img,
  .zr-cycle-card-right img,
  .zr-cycle-card-left video,
  .zr-cycle-card-right video {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}

@media (min-width: 700px) {
  .zr-page {
    padding-top: 132px !important;
    padding-bottom: calc(154px + env(safe-area-inset-bottom)) !important;
  }

  .zr-section {
    padding-top: 0 !important;
  }

  .zr-cycle-carousel {
    margin-top: 0 !important;
    grid-template-columns: 230px minmax(0, min(44vw, 520px)) 230px !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: min(44vw, 520px) !important;
  }

  .zr-cycle-card-center {
    width: min(44vw, 520px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 2 !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: min(22vw, 260px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 28px !important;
    opacity: .42 !important;
    filter: saturate(.72) brightness(.58) !important;
    z-index: 1 !important;
  }

  .zr-cycle-card-left {
    justify-self: end !important;
    transform: translateX(16%) scale(.86) !important;
    transform-origin: right center !important;
  }

  .zr-cycle-card-right {
    justify-self: start !important;
    transform: translateX(-16%) scale(.86) !important;
    transform-origin: left center !important;
  }

  .zr-cycle-card-left img,
  .zr-cycle-card-right img,
  .zr-cycle-card-left video,
  .zr-cycle-card-right video {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .zr-cycle-detail-shell {
    margin-top: 22px !important;
  }
}

/* Beim Drag darf JS die Default-Transforms überschreiben. Nach Reset greifen diese REV3 Defaults wieder. */
.zr-cycle-card {
  will-change: transform, opacity, filter !important;
}


/* ZwischenRaum V1 Baseline REV4
   Screenshot-QA:
   - Seitliche Cover liegen eindeutig hinter dem Hauptcover.
   - Seitliche Cover erhalten perspektivische Raumwirkung.
   - Hauptcover und Titeloverlay bleiben oberste visuelle Ebene.
*/

.zr-cycle-carousel {
  perspective: 1100px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.zr-cycle-card {
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
}

.zr-cycle-card-center {
  position: relative !important;
  z-index: 10 !important;
  transform: translateZ(42px) !important;
  box-shadow: 0 26px 78px rgba(0,0,0,.44) !important;
}

.zr-cycle-card-center .zr-cycle-card-meta {
  z-index: 12 !important;
}

.zr-cycle-card-left,
.zr-cycle-card-right {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.34) !important;
}

@media (max-width: 699px) {
  .zr-cycle-carousel {
    grid-template-columns: minmax(52px, 18vw) minmax(0, min(76vw, 330px)) minmax(52px, 18vw) !important;
    perspective-origin: 50% 48% !important;
  }

  .zr-cycle-card-center {
    width: min(76vw, 330px) !important;
    aspect-ratio: 1 / 1 !important;
    z-index: 10 !important;
    transform: translateZ(46px) !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: min(48vw, 210px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
    opacity: .40 !important;
    filter: saturate(.70) brightness(.56) !important;
  }

  .zr-cycle-card-left {
    justify-self: end !important;
    transform:
      translateX(34%)
      translateZ(-90px)
      rotateY(38deg)
      scale(.84) !important;
    transform-origin: right center !important;
  }

  .zr-cycle-card-right {
    justify-self: start !important;
    transform:
      translateX(-34%)
      translateZ(-90px)
      rotateY(-38deg)
      scale(.84) !important;
    transform-origin: left center !important;
  }

  .zr-cycle-card-left img,
  .zr-cycle-card-right img,
  .zr-cycle-card-left video,
  .zr-cycle-card-right video {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}

@media (min-width: 700px) {
  .zr-cycle-carousel {
    perspective-origin: 50% 48% !important;
  }

  .zr-cycle-card-center {
    z-index: 10 !important;
    transform: translateZ(54px) !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: min(22vw, 260px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    opacity: .40 !important;
    filter: saturate(.70) brightness(.56) !important;
  }

  .zr-cycle-card-left {
    justify-self: end !important;
    transform:
      translateX(24%)
      translateZ(-120px)
      rotateY(32deg)
      scale(.86) !important;
    transform-origin: right center !important;
  }

  .zr-cycle-card-right {
    justify-self: start !important;
    transform:
      translateX(-24%)
      translateZ(-120px)
      rotateY(-32deg)
      scale(.86) !important;
    transform-origin: left center !important;
  }
}

/* Während Drag übernimmt JS die Bewegung; danach fallen die Karten auf REV4-Perspektive zurück. */
.zr-cycle-carousel.is-dragging .zr-cycle-card {
  transition: none !important;
}

.zr-cycle-carousel.is-dragging .zr-cycle-card-center,
.zr-cycle-carousel.is-dragging .zr-cycle-card-left,
.zr-cycle-carousel.is-dragging .zr-cycle-card-right {
  will-change: transform, opacity, filter !important;
}


/* ZwischenRaum V1 Baseline REV5
   Screenshot-QA:
   - Swipe ist optisch erkennbar: Karten bewegen sich mit dem Finger.
   - Seitliche Cover sind sichtbarer als Hinweis auf Wischbarkeit.
   - Beim Loslassen entsteht ein kurzer räumlicher Snap statt harter Fade.
*/

.zr-cycle-carousel {
  perspective: 1100px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.zr-cycle-card {
  transition:
    transform 260ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease,
    filter 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
  will-change: transform, opacity, filter !important;
}

.zr-cycle-carousel.is-dragging .zr-cycle-card {
  transition: none !important;
}

.zr-cycle-carousel.is-settling .zr-cycle-card {
  transition:
    transform 185ms cubic-bezier(.2,.7,.25,1),
    opacity 185ms ease,
    filter 185ms ease !important;
}

.zr-cycle-card-center {
  z-index: 10 !important;
  transform: translateZ(54px) !important;
  box-shadow: 0 28px 84px rgba(0,0,0,.46) !important;
}

.zr-cycle-card-left,
.zr-cycle-card-right {
  z-index: 1 !important;
  opacity: .50 !important;
  filter: saturate(.72) brightness(.58) !important;
}

@media (max-width: 699px) {
  .zr-cycle-carousel {
    grid-template-columns: minmax(70px, 22vw) minmax(0, min(76vw, 330px)) minmax(70px, 22vw) !important;
    gap: 0 !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    width: min(50vw, 216px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  .zr-cycle-card-left {
    justify-self: end !important;
    transform: translateX(34%) translateZ(-90px) rotateY(38deg) scale(.84) !important;
  }

  .zr-cycle-card-right {
    justify-self: start !important;
    transform: translateX(-34%) translateZ(-90px) rotateY(-38deg) scale(.84) !important;
  }
}

@media (min-width: 700px) {
  .zr-cycle-card-left,
  .zr-cycle-card-right {
    opacity: .48 !important;
  }
}


/* ZwischenRaum V1 Baseline REV6
   Runtime-Fix:
   playActiveCardVideo wiederhergestellt, damit renderCycle nicht in den Fehlerzustand läuft.
   Keine Designänderung.
*/


/* ZwischenRaum V1 Baseline REV7
   Abnahme-Polish + neue Audios:
   - Player-Überdeckung entschärft.
   - Detailtitel mobil etwas ruhiger.
   - Side-Cards sichtbarer als Swipe-Hinweis.
   - Trackkarten ohne Lyrics zeigen keinen leeren Lyrics-Button.
*/

.zr-page {
  padding-bottom: calc(250px + env(safe-area-inset-bottom)) !important;
}

.zr-cycle-detail {
  padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}

.zr-cycle-track-list {
  padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
}

.zr-player-bar {
  box-shadow: 0 18px 58px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.04) !important;
}

@media (max-width: 699px) {
  .zr-cycle-detail h3 {
    font-size: clamp(1.26rem, 6.5vw, 1.96rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.052em !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    opacity: .56 !important;
    filter: saturate(.78) brightness(.64) !important;
  }

  .zr-player-bar {
    left: 14px !important;
    right: 14px !important;
    min-height: 54px !important;
    padding: 6px !important;
    border-radius: 20px !important;
  }

  .zr-player-main {
    width: 44px !important;
    height: 44px !important;
  }

  .zr-player-small,
  .zr-player-info {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (min-width: 700px) {
  .zr-cycle-detail {
    padding-bottom: 124px !important;
  }

  .zr-cycle-card-left,
  .zr-cycle-card-right {
    opacity: .52 !important;
    filter: saturate(.78) brightness(.62) !important;
  }
}


/* ZwischenRaum V1 Baseline REV8
   Content-Integration: 10 hochgeladene MP3-Dateien übernommen; keine Layoutänderung.
*/


/* ZwischenRaum V1 Baseline REV9
   Content-Integration: 10 weitere MP3-Dateien übernommen; keine Layoutänderung.
*/


/* ZwischenRaum V1 Baseline REV10
   Interaktions-/Video-QA:
   - Video nutzt Poster/Fallback unter dem Video, falls Mobile-Autoplay verzögert.
   - Video-Elemente bekommen robuste Inline-/Autoplay-Anmutung.
   - Touch-Events werden zusätzlich zu Pointer-Events gebunden, damit Chrome-Mobile-Emulation swipen kann.
   - Swipe-Wechsel rendert direkt im User-Gesture-Kontext, damit Mobile-Video eher startet.
*/

.zr-cycle-card.has-video {
  background: #000 !important;
}

.zr-cycle-card.has-video .zr-cycle-card-fallback,
.zr-cycle-card.has-video .zr-cycle-card-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}

.zr-cycle-card.has-video .zr-cycle-card-fallback {
  z-index: 1 !important;
  opacity: 1 !important;
  filter: saturate(.95) brightness(.82) !important;
}

.zr-cycle-card.has-video .zr-cycle-card-video {
  z-index: 2 !important;
  opacity: 0 !important;
  transition: opacity 240ms ease !important;
  pointer-events: none !important;
}

.zr-cycle-card.has-video.is-video-playing .zr-cycle-card-video,
.zr-cycle-card.has-video.is-video-ready .zr-cycle-card-video,
.zr-cycle-card.has-video.is-video-ended .zr-cycle-card-video {
  opacity: 1 !important;
}

.zr-cycle-card.has-video .zr-cycle-card-meta {
  z-index: 12 !important;
}

@media (max-width: 699px) {
  .zr-cycle-card-left,
  .zr-cycle-card-right {
    opacity: .56 !important;
    filter: saturate(.78) brightness(.66) !important;
  }
}

/* ZwischenRaum V1 Baseline REV11
   Runtime-Stabilisierung:
   - Video play() wird vollständig gegen synchrone Safari/iOS-Fehler abgesichert.
   - Service Worker wird früher registriert, damit Cache-Reset auch bei Renderfehlern greifen kann.
*/

/* ZwischenRaum V1 Baseline REV12
   Legacy-/iOS-Sicherheitsfix:
   - replaceAll entfernt, damit ältere/enge WebViews nicht beim ersten Render abbrechen.
   - optional chaining entfernt.
   - padStart ersetzt.
   - debug=1 zeigt technische Diagnose im Fehlerzustand.
*/
.zr-error {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  color: var(--dg-text-soft, #C8C1BA);
}
.zr-error p {
  margin: 0;
}
.zr-error-detail {
  margin-top: 14px;
  color: rgba(237,234,228,.78);
}
.zr-error-detail pre {
  max-height: 42vh;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
}

/* ZwischenRaum V1 Baseline REV13
   Syntax-Fix:
   - Debug-Fehlertext in app.js korrigiert.
   - Ursache REV12: unescaped newline in JavaScript-String.
*/

/* ZwischenRaum V1 Baseline REV14
   Runtime-Fix:
   - fehlende syncInfoSheetState()-Funktion ergänzt.
   - Ursache REV13-Fehler: Info-Sheet-State wurde beim Init aufgerufen, war aber nicht definiert.
*/