/* ============================================================
   Sound-Prototyp — persistenter Player (self-hosted Audio)
   PLAYER BAR exakt nach Figma-Design "player bar" (4827:18200).
   Breakpoints: XS 0–599 · S 600–809 · M 810–1199 · L 1200+
   ============================================================ */

:root {
  --scp-yellow: #FFF600;
  --scp-black:  #000000;
  --scp-grey:   #373737;
  --scp-font:   'Open Sans', sans-serif;

  --scp-pad-x: 12px;           /* XS / S */
  --scp-bar-h: 60px;
  --scp-progress-h: 2px;
}
@media (min-width: 810px)  { :root { --scp-pad-x: 80px; } }    /* M */
@media (min-width: 1200px) { :root { --scp-pad-x: 180px; } }   /* L */


/* --- Dock (Bar + Pull-up) --- */
.scp-dock { position: fixed; inset: auto 0 0 0; z-index: 100000; font-family: var(--scp-font); }

/* Backdrop, wenn Pull-up offen */
.scp-backdrop {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.scp-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ============================================================
   PLAYER BAR
   ============================================================ */
.scp-bar {
  background: var(--scp-yellow);
  color: var(--scp-black);
  /* Scroll-Hide: einfahren (zeigen) langsam/expo-out wie Pull-up,
     ausfahren (verstecken) schneller/ease-in — gleiche Kurven wie das Panel. */
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
/* Hover-Catcher im collapsed Zustand: das .scp-dock belegt im Layout
   weiterhin die volle Bar-Höhe am unteren Viewport-Rand (transform
   verschiebt nur visuell, nicht layout) → Hover auf diese Fläche zieht
   die Bar wieder hoch. So muss man nicht den 2px-Strip treffen. */
.scp-dock:hover .scp-bar.is-collapsed {
  transform: none;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}

/* Versteckt: Bar fährt um (Eigen-Höhe − 2px Progress) nach unten →
   nur die 2px Progress-Bar bleibt am unteren Viewport-Rand sichtbar.
   Wird nur gesetzt, wenn der Pull-up GESCHLOSSEN ist (JS-Logik). */
.scp-bar.is-collapsed {
  transform: translateY(calc(100% - var(--scp-progress-h)));
  transition: transform .35s cubic-bezier(.5, 0, .75, 0);
}

/* Process-Bar: 2px hoch, gelber Hintergrund mit schwarzem Fortschritt */
.scp-progress {
  position: relative;
  height: var(--scp-progress-h);
  width: 100%;
  background: var(--scp-yellow);
  cursor: pointer;
}
.scp-progress::after { content: ""; position: absolute; inset: -7px 0; }   /* größere Klickfläche */
.scp-progress-fill {
  height: 100%; width: 0%;
  background: var(--scp-black);
  /* keine transition — Update per rAF (60fps) ist smooth genug */
}

/* Bar-Zeile — Grid 1fr | center | 1fr → Play-Button IMMER horizontal mittig,
   egal was links (Meta) oder rechts (Pill) breit ist.
   min-height statt height: wenn der Center-Inhalt (Play 64px) größer als die Bar
   ist, wächst sie symmetrisch mit → oben/unten gleiche Abstände. */
.scp-playerbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--scp-bar-h);
  padding: 0 var(--scp-pad-x);
}

/* ---------- Track-Info (links auf L/M/S) ---------- */
.scp-meta {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  color: var(--scp-black);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  grid-column: 1; justify-self: start; max-width: 100%;
}
.scp-series {
  font: 500 12px/1 var(--scp-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scp-title {
  font: 400 16px/1.2 var(--scp-font);   /* Headroom für Unterlängen (g, p, y) */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Center Navigation (224×48 fix-ish, immer Slot 2 = mittig) ---------- */
.scp-center {
  grid-column: 2;
  display: flex; align-items: center; gap: 20px;
  padding: 0 8px;
}
.scp-back-play-next {
  display: flex; align-items: center; gap: 12px;
}
.scp-iconbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--scp-black);
}
.scp-iconbtn img { width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity .15s ease; }
.scp-iconbtn[aria-pressed="true"] img { opacity: .5; }    /* Shuffle aktiv = 50% */

.scp-play {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 64px; height: 64px; flex: none;
}
.scp-play img { width: 100%; height: 100%; display: block; }

/* ---------- Series-Pill (rechts, Slot 3, am rechten Rand) ---------- */
.scp-spacer { display: none; }   /* nicht mehr nötig — Grid übernimmt die Verteilung */

.scp-pill {
  grid-column: 3; justify-self: end;
  background: transparent;                       /* default: nimmt Bar-Gelb auf */
  border: 2px solid var(--scp-black);
  border-radius: 100px;
  width: 52px; height: 32px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .2s ease;
}
/* IS-OPEN: invertiert — schwarzer BG, gelbes Icon (Figma "state=is open") */
.scp-pill.is-open { background: var(--scp-black); }

/* Icon per CSS-mask, damit es per color umgefärbt werden kann */
.scp-pill-icon {
  width: 20px; height: 20px;
  background-color: var(--scp-black);            /* default: schwarz */
  -webkit-mask: url("/sound/icons/playlist.svg") center / contain no-repeat;
          mask: url("/sound/icons/playlist.svg") center / contain no-repeat;
  transition: background-color .2s ease;
}
.scp-pill.is-open .scp-pill-icon { background-color: var(--scp-yellow); }

/* ---------- XS-Layout: 2 Zeilen, Track-Info UNTER der Bar ---------- */
.scp-xs-track {
  display: none;
  align-items: center; justify-content: center;
  padding: 8px 12px;                     /* padding-top 8px, symmetrisch */
  background: var(--scp-yellow);
  font: 400 12px/1 var(--scp-font);      /* Regular 12px (vorher Medium 10px) */
  color: var(--scp-black);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 599px) {
  /* XS: Track-Info raus (kommt als 2. Zeile darunter), Pill wird Kreis 32×32 */
  .scp-meta { display: none; }
  .scp-pill { width: 32px; height: 32px; padding: 0; }
  .scp-xs-track { display: flex; }
}

/* ============================================================
   PULL-UP (nach Figma — area series + area tracklist gleichzeitig)
   ============================================================ */
.scp-panel {
  height: 0; overflow: hidden;
  background: #000; color: #fff;
  /* Schließen: schnell + sanft (350ms ease-in) */
  transition: height .35s cubic-bezier(.5, 0, .75, 0);
}
/* Öffnen + Höhen-Wechsel: "expo-out"-Spline → bremst weich ab.
   Die konkrete height wird per JS auf scrollHeight gesetzt — animiert in BEIDE
   Richtungen, weil height (anders als max-height) das Element wirklich resized. */
.scp-panel.is-open {
  transition: height .55s cubic-bezier(.16, 1, .3, 1);
}
/* Inhalt ist size-bounded — Scroll wenn länger als 80vh */
.scp-panel-inner { max-height: min(80vh, 800px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* DESKTOP (M+L, ≥810): wenn inner scrollt (z.B. Poetry mit 24 Tracks auf M),
   bleibt der Series-Slider oben sticky — nur die Tracklist wandert. Auf Series
   ohne Overflow (alles passt) verhält sich sticky neutral (kein sticky-Trigger). */
@media (min-width: 810px) {
  .scp-area-series {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #000;
  }
}

/* MOBILE (< 810: S + XS): Trailing-Spacer im Slider, damit AUCH die LETZTE
   Card via Auto-Scroll bis an die linke erste Position rutschen kann (sonst
   limitiert maxScrollLeft die letzten Cards in der Mitte). Card 240 + 8 gap = 248. */
@media (max-width: 809px) {
  .scp-series-slider::after {
    content: "";
    flex: 0 0 auto;
    width: max(0px, calc(100% - 248px));
  }
}

/* MOBILE (< 810: S + XS): Pull-up nutzt bis zur vollen Viewport-Höhe
   (abzgl. Bar). Series-Slider bleibt FIX oben, NUR die Tracklist scrollt. */
@media (max-width: 809px) {
  .scp-panel-inner {
    max-height: none;
    height: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .scp-area-series { flex: 0 0 auto; }
  .scp-area-tracklist {
    flex: 1 1 auto;
    min-height: 0;                     /* erlaubt flex-shrink → overflow kann greifen */
    overflow-y: auto;
    overscroll-behavior: contain;      /* Touch-Scroll bubblet nicht zur Page */
    -webkit-overflow-scrolling: touch;
    /* WICHTIG: Multi-Column abschalten — sonst erzeugt der Browser bei
       begrenzter Höhe HORIZONTALE Spalten und die Liste scrollt nicht
       vertikal. !important überschreibt das per JS gesetzte style.columnCount. */
    column-count: auto !important;
    column-width: auto;
  }
}

/* Backdrop sanft synchronisiert */
.scp-backdrop { transition: opacity .35s cubic-bezier(.5, 0, .75, 0); }
.scp-backdrop.is-open { transition: opacity .55s cubic-bezier(.16, 1, .3, 1); }

/* ---------- AREA SERIES (oben) ---------- */
.scp-area-series {
  padding: 48px var(--scp-pad-x) 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.scp-area-head {
  display: flex; align-items: center; justify-content: flex-end;
}
.scp-close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  color: #fff; cursor: pointer; font: 400 18px/1 var(--scp-font); flex: none;
}
.scp-close:hover { border-color: rgba(255,255,255,.5); }

/* Series-Slider: horizontale Karten-Reihe, scroll-snap.
   Fixe Höhe 160 + items vertikal mittig → nur die selected Card wächst beim Klick
   symmetrisch (148→160) aus dem Slider-Mittelpunkt heraus, die anderen Cards bleiben
   in Position. */
.scp-series-slider {
  display: flex; gap: 8px;
  align-items: center;
  height: 160px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
}
.scp-series-slider::-webkit-scrollbar { display: none; }
.scp-series-slider > * { scroll-snap-align: start; flex: none; }

/* Series-Card 240×148 (default), wächst auf 160 wenn selected (Figma). 4 States nach Figma. */
.scp-card {
  box-sizing: border-box;              /* Border zählt zur Fix-Größe */
  width: 240px; height: 148px;
  background: #000; color: #fff;
  border: 1px solid #6B6B6B;           /* default: grau */
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: height .25s cubic-bezier(.16, 1, .3, 1),
              background-color .2s ease,
              border-color .2s ease;
}

/* HOVER: Border + Title weiß */
.scp-card:hover { border-color: #fff; }
.scp-card:hover .scp-card-title { color: #fff; }

/* BROWSING: gelber Border + Title/Tag gelb (Tracks bleibt grau) */
.scp-card.is-browsing { border-color: var(--scp-yellow); }

/* SELECTED: invertiert — gelber BG, schwarzer Text, +12px Höhe */
.scp-card.is-selected {
  height: 160px;
  background: var(--scp-yellow);
  border-color: var(--scp-yellow);
}
.scp-card-title {
  flex: 1; min-height: 0;
  font: 300 32px/1.1 var(--scp-font);   /* Open Sans Light 32px */
  color: #6B6B6B;                       /* default: grau (Title, Tag, Tracks alle grau) */
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  transition: color .2s ease;
}
.scp-card-meta {
  display: flex; justify-content: space-between; gap: 10px;
  font: 400 12px/1 var(--scp-font);
}
.scp-card-tag, .scp-card-count {
  color: #6B6B6B;
  transition: color .2s ease;
}
/* BROWSING: Title + Tag gelb (Tracks bleibt grau) */
.scp-card.is-browsing .scp-card-title { color: var(--scp-yellow); }
.scp-card.is-browsing .scp-card-tag   { color: var(--scp-yellow); }
/* SELECTED: Title + Tag schwarz auf gelbem BG (Tracks bleibt grau — Figma) */
.scp-card.is-selected .scp-card-title { color: #000; }
.scp-card.is-selected .scp-card-tag   { color: #000; }

/* Slider-Navigation (chevron-Pills rechts) */
.scp-slider-nav {
  display: flex; gap: 8px; justify-content: flex-end;
}
.scp-nav-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; flex: none;
}
.scp-nav-btn img { width: 100%; height: 100%; display: block; }
.scp-nav-btn:disabled { opacity: .35; cursor: default; }

/* ---------- AREA TRACKLIST (unten) ---------- */
/* CSS Multi-Column → Items werden SPALTENWEISE gestapelt (1-8 in col1, 9-16 in col2, …),
   wie in Figma. column-count wird per JS gesetzt (applyColumnCount), abhängig von
   Track-Anzahl × Viewport — sonst hätten 2 Tracks bei "column-count: 3" je 1 pro Spalte,
   statt untereinander. */
.scp-area-tracklist {
  padding: 0 var(--scp-pad-x) 24px;    /* S/XS: 24px unten (Figma) */
  column-count: 1;                     /* Default fallback */
  column-gap: 8px;
  opacity: 1;
  transition: opacity .2s ease;        /* für sanftes Cross-Fade beim Card-Wechsel */
}
.scp-area-tracklist.is-fading { opacity: 0; }
@media (min-width: 810px)  { .scp-area-tracklist { padding-bottom: 48px; } }    /* M: 48px unten */

/* Items dürfen nicht zwischen Spalten umgebrochen werden */
.scp-area-tracklist .scp-track {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Track-Item — 40px (inkl. Padding wie Figma), default/hover/playing */
.scp-track {
  box-sizing: border-box;            /* Padding zählt zur 40px-Höhe wie in Figma */
  display: flex; align-items: center;
  height: 40px; padding: 4px 8px 4px 4px;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: background .12s;
}
.scp-track:hover { background: rgba(255,255,255,0.12); }   /* 12% weiß */
.scp-tnum {
  width: 28px; text-align: center;
  font: 400 12px/1 var(--scp-font); color: #6B6B6B;
  font-variant-numeric: tabular-nums; flex: none;
}
.scp-tname {
  flex: 1; min-width: 0;
  font: 400 16px/1.4 var(--scp-font); color: #FFFFFF;   /* lh 1.4 → Unterlängen (g,p,y) nicht abgeschnitten */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 8px;
}
.scp-tdur {
  font: 400 12px/1 var(--scp-font); color: #6B6B6B;
  font-variant-numeric: tabular-nums; flex: none;
  padding-left: 24px;
}
/* playing: 24% weiß BG (Figma) + Index + Title gelb */
.scp-track.is-playing { background: rgba(255,255,255,0.24); }
.scp-track.is-playing .scp-tnum { color: var(--scp-yellow); }
.scp-track.is-playing .scp-tname { color: var(--scp-yellow); }

/* ============================================================
   Page-Transition (Brand-Blende)
   ============================================================ */
/* Pagefade als TRANSITION (nicht Animation): Swup wartet sauber, bis das
   Fade voll deckend ist, swappt dann den Content (transitionend) und fadet
   anschließend wieder aus. So scheint die neue Seite nie durch den noch
   halbtransparenten Cover. Brand fadet mit dem Layer ein und aus. */
.transition-pagefade {
  position: fixed; inset: 0; z-index: 99990;
  display: grid; place-items: center;
  background: #ffffff;
  opacity: 0; pointer-events: none;
  transition: opacity 1s ease;
}
html.is-animating .transition-pagefade {
  opacity: 1;
  pointer-events: auto;
}
.scp-brandmark {
  width: 84px; height: 84px;
  background-color: #E1E1E1;
  -webkit-mask: url("/files/VGAicon.svg") center / contain no-repeat;
          mask: url("/files/VGAicon.svg") center / contain no-repeat;
}