/* =========================
   FULLSCREEN OVERLAY
   ========================= */
/* 27-01-2026 – FullscreenPlayer.css */
/* FULLSCREEN OVERLAY */


#fspOverlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* wird per JS geöffnet */

  background: #000;        /* ✅ Startseite weg */
  /* optional: statt komplett schwarz:
  background: rgba(0,0,0,0.95);
  */
}

/* FULLSCREEN PLAYER */
#fullscreenPlayer {
  position: absolute;     /* wichtig: NICHT fixed */
  top: 10px;
  left: 15px;
  right: 15px;          /* Abstand vom Viewport + Scrollbar */
  bottom: 10px;

  height: 85vh;
  max-height: 85vh;

  display: flex;
  flex-direction: column;

  background: #000;
  color: #fff;

  border-radius: 30px;
  overflow: hidden;

  z-index: 100;
}

/* Scrollbare Root */
#fspScrollRoot {
  width: 100%;
  height: 100%;
  overflow-y: auto;   /* Scrollen bleibt aktiv */
  -webkit-overflow-scrolling: touch; /* smooth scrolling auf iOS */
  scrollbar-width: none;  /* Firefox: Scrollbar ausblenden */
  -ms-overflow-style: none; /* IE/Edge: Scrollbar ausblenden */
}

/* Chrome, Safari, Opera */
#fspScrollRoot::-webkit-scrollbar {
  display: none;
}

#fspScrollRoot::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

#fspScrollRoot::-webkit-scrollbar-track {
  background: transparent;
}


/* hidden Attribut */
#fullscreenPlayer[hidden] {
  display: none;
}

/* =========================
   BACKGROUND
   ========================= */

.fsp-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  display: flex;  /* Sicherstellen, dass Bild oder Video im Container angezeigt wird */
  justify-content: center;
  align-items: center;
}

.fsp-background-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  display: none; /* Bild wird nur angezeigt, wenn es gesetzt ist */
}

.fsp-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* Video wird nur angezeigt, wenn es gesetzt ist */
}

.fsp-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.65)
  );
  z-index: 1;  /* Stellt sicher, dass der Gradient immer über Bild oder Video liegt */
}


/* =========================
   TOP BAR
   ========================= */


.fsp-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;

  background: rgba(0, 0, 0, 0.15);   /* Transparenz einstellbar */
  backdrop-filter: blur(8px);

  color: #fff;
  font-size: 1.8rem;                /* Größe des × */
  line-height: 1;

  display: flex;
  align-items: center;              /* exakt mittig */
  justify-content: center;

  cursor: pointer;
}

.fsp-top {
  position: relative;
  z-index: 2;

  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fsp-title {
  font-size: 1.6rem;
  font-weight: 700;
}

.fsp-artist {
  font-size: 0.9rem;
  opacity: 0.8;
 display: flex;
  align-items: center;
  gap: 8px;
}

/* Comments Header */
.fsp-comments-title{
  font-size: 20px;      /* <- hier anpassen (z.B. 14/16/18) */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
}

.fsp-comments-title { 
font-size: 18px; 
font-weight: 600; 
margin-bottom: 3px;   /* Standard ist oft 12–16px */

}

/* Status-Zeile: nur Platz wenn Text da ist */
#fspOverlay .fsp-comments-status{
   margin: 4px 8px 2px;
  min-height: 0;          /* ← Platzhalter weg */
  line-height: 1.2;
  padding: 0;
  font-size: 13px;        /* ✅ kleiner */
  line-height: 1.1;
  text-align: center;
  min-height: 0;          /* ✅ keine reservierte Höhe */
  display: none;          /* ✅ unsichtbar wenn leer */
}

/* Wenn JS eine Klasse setzt (error/success) -> anzeigen */
#fspOverlay .fsp-comments-status.is-error,
#fspOverlay .fsp-comments-status.is-success{
  display: block;
  margin: 4px 0 4px;      /* ✅ kleiner Abstand wenn sichtbar */
}

/* Farben */
#fspOverlay .fsp-comments-status.is-error{ color:#ff3b3b; }
#fspOverlay .fsp-comments-status.is-success{ color:#3ad17a; }

#fspOverlay .fsp-comments-head{
  margin-top: -16px;   /* ← nach oben schieben */
}

.fsp-comments-status.is-error { color: #ff3b3b; }
.fsp-comments-status.is-success { color: #3ad17a; }


/* =========================
   CENTER (COVER)
   ========================= */



.fsp-cover {
  position: relative;
}

.fsp-cover img {
  width: 72vw;
  max-width: 260px;
  height: auto;
  border-radius: 16px;
  display: block;
}
.fsp-follow {
  margin-left: 8px;

  padding: 4px 10px;
  font-size: 0.75rem;

  background: transparent;
  color: #fff;

  border: 1px solid #fff;
  border-radius: 999px;

  cursor: pointer;
  white-space: nowrap;
}

/* =========================
   ACTION BUTTONS (RECHTS)
   ========================= */

.fsp-actions {
  position: absolute;
  right: 16px;
  bottom: 100px;

  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fsp-actions button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;

  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(10px);

  color: #fff;
  font-size: 1.4rem;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* Share Icon (weiß, kein blaues Quadrat) */
.icon-share {
  width: 22px;
  height: 22px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 000-1.39l7-4.11A3 3 0 0018 7.91a3 3 0 10-3-3 3 3 0 00.04.49l-7 4.11a3 3 0 100 5.78l7.05 4.14c-.02.13-.05.26-.05.39a3 3 0 103-3z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7a3.27 3.27 0 000-1.39l7-4.11A3 3 0 0018 7.91a3 3 0 10-3-3 3 3 0 00.04.49l-7 4.11a3 3 0 100 5.78l7.05 4.14c-.02.13-.05.26-.05.39a3 3 0 103-3z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* =========================
   BOTTOM PLAYER (IMMER SICHTBAR)
   ========================= */

.fsp-bottom {
  position: relative;
  z-index: 2;
  padding: 14px 16px;
  background: transparent;
}

/* ZEILE FÜR SEEK + CONTROLS */
.fsp-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

/* Seekbar */
.fsp-seek {
  -webkit-appearance: none;
  flex: 0.5;               /* bewusst etwas kürzer */
  min-width: 0;
  height: 4px;             /* schmaler */
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
}

/* Thumb */
.fsp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;             /* etwas kleiner */
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

.fsp-seek::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: none;
}

/* Buttons allgemein */
.fsp-bottom button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  padding: 0;
  cursor: pointer;
}

/* Controls Buttons */
.fsp-controls button {
  font-size: 1.6rem;
  padding: 6px;
}

/* Zeit */
#fsp-current-time {
  font-size: 0.95rem;
  min-width: 48px;
  text-align: right;
  white-space: nowrap;
}

.fsp-play::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================
   CONTROL ROW – RICHTIGE ANORDNUNG
   ========================= */

.fsp-prev {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.6rem;          /* egal, bleibt Basis */
  line-height: 1;

  transform: translateY(-2px) scale(1.4); /* ← HIER wird er größer */
}


/* Prev-Button korrekt steuerbar */
.fsp-controls .fsp-prev {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 3rem;     /* HIER skaliert es */
  line-height: 1;

  transform: translateY(-2px); /* HIER verschiebt es */
}


.fsp-control-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}


/* Seekbar nimmt mittleren Platz ein */
.fsp-seek {
  flex: 0.95;                       /* wächst zwischen Buttons */
}

/* Buttons links/rechts sauber zentriert */
.fsp-control-row button,
.fsp-control-row .fsp-time {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Zeit etwas kompakter */
#fsp-current-time {
  min-width: 50px;
  text-align: center;
}

/* Comments list: show ~3 items and scroll */
#fspOverlay .fsp-comments-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Höhe: ca. 3 Kommentarzeilen (je nach deinem Item-Layout) */
  max-height: 170px;

  /* verhindert, dass die List den Card-Container sprengt */
  flex: 0 0 auto;
}

/* Optional: sauberer Abstand */
/* =========================
   COMMENTS – endless + scroll
   ========================= */

#fspOverlay .fsp-comments-card {
  display: flex;
  flex-direction: column;
  max-height: 330px;
}


#fspOverlay .fsp-comments-status {
  flex: 0 0 auto;
}

/* =========================
   DESKTOP
   ========================= */

@media (min-width: 769px) {
  #fullscreenPlayer {
    inset: 0;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .fsp-actions {
    bottom: 180px;
  }

  .fsp-title {
    font-size: 1.6rem;
  }
}



/* === SVG ICONS === */

.fsp-play { /* aus meiner letzten Antwort */ }

/* =========================
   FIXES / KOMPATIBILITÄT
   ========================= */

/* Track Wrapper */
.fsp-track {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Textblock */
.fsp-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
   margin-top: 8px;   /* Wert steuert die Verschiebung */
}

/* Artist Cover (IMG – falls genutzt) */
.fsp-artist-cover {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: none; /* default aus */
}

/* Falls IMG benutzt wird → anzeigen */
.fsp-artist.has-image::before {
  display: none;
}
.fsp-artist.has-image + .fsp-artist-cover {
  display: block;
}

/* Artist-Zeile sauber */
.fsp-artist {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Zeit (HTML .fsp-time) */
.fsp-time {
  font-size: 0.95rem;
  min-width: 48px;
  text-align: center;
  white-space: nowrap;
}

/* Sicherstellen, dass Control-Row greift */
.fsp-control-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Prev-Button: EINDEUTIG */
.fsp-control-row .fsp-prev {
  font-size: 2rem;
  transform: translateY(-2px);
}
/* =========================
   FIX: kein zentrales Cover mehr
   ========================= */
.fsp-center {
  display: none;
}
/* =========================
   FIX: Flex-Spacer hält Bottom unten
   ========================= */
.fsp-spacer {
  flex: 1;
  min-height: 0;
}
/* =========================
   FIX: altes Artist-Pseudo-Bild aus
   ========================= */
.fsp-artist::before {
  display: none !important;
}
/* =========================
   FIX: echtes Cover neben Artist
   ========================= */
#fsp-cover-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
/* =========================
   FIX: Artist-Zeile stabil
   ========================= */
.fsp-artist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;   /* Wert nach Wunsch erhöhen */
}
.icon-playlist {
  width: 22px;
  height: 22px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm16-4V7h2v5h-2zm0 2h2v5h-2v-5z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm16-4V7h2v5h-2zm0 2h2v5h-2v-5z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.fsp-play.is-playing::before {
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fsp-next::before {
  content: "";
  width: 26px;
  height: 26px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 5h2v14h-2zM6 5l9 7-9 7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 5h2v14h-2zM6 5l9 7-9 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.icon-comment {
  width: 22px;
  height: 22px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H7l-3 4V4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H7l-3 4V4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.icon-like {
  width: 22px;
  height: 22px;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.35-7-10a4 4 0 017-2.65A4 4 0 0119 11c0 5.65-7 10-7 10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21s-7-4.35-7-10a4 4 0 017-2.65A4 4 0 0119 11c0 5.65-7 10-7 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================
   PLAYLEISTE – EINHEITLICHES LAYOUT (iOS/Android stabil)
   NUR DIESER BLOCK für die Playleiste (ganz ans Ende!)
   ========================= */

#fspOverlay .fsp-bottom .fsp-control-row{
  /* Ein Layout: Grid (links | mitte | rechts) */
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;

  /* wichtig: kein “rauslaufen” auf iOS, kein Quetschen */
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;

  /* Abstand zur Pill-Innenkante */
  padding: 0 6px !important;

  /* Gap kontrolliert – nicht zu groß */
  column-gap: 8px !important;
}

/* ---------- Links: PLAYLIST (rund, transparent, bleibt links) ---------- */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-bottom-playlist{
  justify-self: start !important;

  /* rund + transparent */
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: transparent !important;

  /* Icon + Text im Kreis */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  /* verhindert Verschieben/Quetschen */
  flex: 0 0 auto !important;
  min-width: 56px !important;

  /* kleiner Abstand nach links innerhalb der Leiste */
  margin-left: 2px !important;
}

#fspOverlay .fsp-bottom .fsp-control-row .fsp-bottom-playlist .icon-playlist{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

#fspOverlay .fsp-bottom .fsp-control-row .fsp-bottom-playlist .fsp-playlist-text{
  display: block !important;          /* Text darf NICHT verschwinden */
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  opacity: .9 !important;
  white-space: nowrap !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* ---------- Mitte: NUR Prev | Play | Next als Block exakt zentriert ---------- */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls{
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* enger zusammen */
  gap: 8px !important;

  /* darf shrinken ohne “zusammendrücken” */
  min-width: 0 !important;
}

/* Prev/Next kleiner */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-prev,
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-next{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* alte Skalierungen/Transforms neutralisieren (sonst Chaos je Gerät) */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-prev{
  transform: none !important;
}

/* Next: falls irgendwo Text drin ist -> weg */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-next{
  font-size: 0 !important;
}

/* Play: transparent + etwas kleiner (Leiste niedriger), Icon größer */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-play{
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: transparent !important; /* ✅ kein grauer Hintergrund */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Icon größer */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-play::before{
  width: 46px !important;
  height: 46px !important;
}

/* Pause ebenfalls größer */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-play.is-playing::before{
  width: 36px !important;
  height: 36px !important;
}


/* ---------- Rechts: REPEAT (kein Emoji -> SVG mask, immer weiß) ---------- */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat{
  justify-self: end !important;

  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;

  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;

  /* Wir rendern kein Text/Emoji mehr */
  color: #fff !important;
  line-height: 1 !important;

  margin-right: 2px !important;
}

/* ✅ auch bei Focus/Active kein Blau */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat:focus,
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat:focus-visible,
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat:active{
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Icon: immer weiß via mask */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat .icon-repeat{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  background: #fff !important;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 1l4 4-4 4V6H7a4 4 0 000 8h1v2H7a6 6 0 010-12h10V1zm-10 22l-4-4 4-4v3h10a4 4 0 000-8h-1V8h1a6 6 0 010 12H7v3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 1l4 4-4 4V6H7a4 4 0 000 8h1v2H7a6 6 0 010-12h10V1zm-10 22l-4-4 4-4v3h10a4 4 0 000-8h-1V8h1a6 6 0 010 12H7v3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- kleine Geräte: minimal kompakter, aber gleiche Strategie ---------- */
@media (max-width: 360px){
  #fspOverlay .fsp-bottom .fsp-control-row{
    padding: 0 4px !important;
    column-gap: 6px !important;
  }

  #fspOverlay .fsp-bottom .fsp-control-row .fsp-bottom-playlist{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  #fspOverlay .fsp-bottom .fsp-control-row .fsp-bottom-playlist .fsp-playlist-text{
    font-size: 8px !important;
  }

  #fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls{
    gap: 6px !important;
  }

  #fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-prev,
  #fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-next{
    width: 36px !important;
    height: 36px !important;
  }

  /* Play Button: kein grauer Hintergrund, Leiste flacher */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-play{
  width: 52px !important;                 /* kleiner -> Leiste niedriger */
  height: 52px !important;
  border-radius: 999px !important;
  background: transparent !important;     /* ✅ KEIN grauer Hintergrund */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

  #fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}
/* ---------- Bottom PREV Icon (damit "Previous Track" sichtbar ist) ---------- */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-center-controls .fsp-prev::before{
  content: "";
  width: 26px;
  height: 26px;
  display: block;
  background: #fff;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5h2v14H8zM18 5l-9 7 9 7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5h2v14H8zM18 5l-9 7 9 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* =========================
   REPEAT – VISUAL STATES (All/One/Off)
   ========================= */

/* Default: OFF -> Icon etwas transparenter */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat .icon-repeat{
  opacity: .55;
}

/* Repeat ALL oder ONE -> Icon voll sichtbar */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat.is-on .icon-repeat{
  opacity: 1;
}

/* Repeat ALL -> leichtes Highlight + "ALL" Badge */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat.is-on{
  background: rgba(255,255,255,0.10) !important;
  position: relative !important;
}

/* "ALL" Badge (nur wenn NICHT is-one) */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat.is-on:not(.is-one)::after{
  content: "ALL";
  position: absolute;
  right: 8px;
  top: 9px;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .06em;
  color: #000;
  background: #fff;
  border-radius: 999px;
  padding: 2px 5px;
}

/* Repeat ONE -> stärker + "1" Badge */
#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat.is-one{
  background: rgba(255,255,255,0.18) !important;
  position: relative !important;
}

#fspOverlay .fsp-bottom .fsp-control-row .fsp-repeat.is-one::after{
  content: "1";
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #000;
  background: #fff;
  border-radius: 999px;
  padding: 2px 5px;
}

/* =========================
   COMMENTS UI (LEFT ALIGNED like playlist pill)
   ========================= */

#fspOverlay{
  --rightRail: 82px;  /* Abstand bis zur rechten Buttonleiste */
  --leftInset: 18px;  /* entspricht padding von .fsp-bottom */
}

/* Layer über dem Content */
#fspOverlay .fsp-comments-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

/* Kommentar-Card: LINKS, Flucht mit Playleiste */
#fspOverlay .fsp-comments-card{
  pointer-events:auto;
  position:absolute;
  left: var(--leftInset);
  right: calc(var(--rightRail) + var(--leftInset));

  /* sitzt oberhalb von Composer + Seek */
  bottom: 198px;

  border-radius: 18px;
  padding: 14px 14px;

  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color:#fff;
}

/* Header (Comments + Anzahl + Options) */
#fspOverlay .fsp-comments-card .fsp-comments-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  margin-bottom:0px;
  opacity:.95;
}

/* Einzelner Kommentar */
#fspOverlay .fsp-comments-card .fsp-comment-item{
  display:grid;
  grid-template-columns: 38px 1fr auto;
  gap:10px;
  align-items:start;
}

/* Avatar */
#fspOverlay .fsp-comments-card .fsp-comment-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;

  background:
    rgba(255,255,255,.38)
    url("https://www.pablorival.de/musikseite/images/avatar_con.jpg")
    center / 60% no-repeat;
}


/* Text */
#fspOverlay .fsp-comments-card .fsp-comment-meta{
  text-transform: uppercase;
  letter-spacing: .06em;          /* wichtig für Lesbarkeit */
  font-size: 12px;                /* minimal kleiner, wirkt edel */
  color: rgba(255,255,255,0.68);   /* ruhiger als Kommentar */
  font-weight: 600;
  margin-bottom: 2px;
}
/* Kommentartext: leicht abgedunkelt / inaktiv */
#fspOverlay .fsp-comments-card .fsp-comment-text{
  color: rgba(255,255,255,0.48); /* weniger hart als #fff */
  font-size: 12px;
  line-height: 1.3;
}

#fspOverlay .fsp-comment-item.is-new .fsp-comment-text{
  color: rgba(255,255,255,0.95);
}
/* Like Count rechts */
#fspOverlay .fsp-comments-card .fsp-comment-likecount{
  font-size: 13px;
  opacity:.85;
  padding-top: 2px;
}

/* =========================
   Composer: LINKS, Breite wie Playleiste, über Seek
   ========================= */

#fspOverlay .fsp-comments-composer{
  pointer-events:auto;
  position:absolute;

  left:18px;
  right:18px;
  bottom: 132px;        /* über Seek-row → anpassen */
  height: 54px;

  border-radius: 999px;
  padding: 0 14px;

  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display:flex;
  align-items:center;
  gap:10px;
}

/* Input */
#fspOverlay .fsp-comments-composer input{
  flex:1;
  min-width:0;
  height: 100%;
  border:0;
  outline:0;
  background: transparent;
  color:#fff;
  font-size:14px;
}

/* Send Button rechts */
#fspOverlay .fsp-comments-composer button{
  width:38px;
  height:38px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.14);
  padding:0;
  position:relative;
}

/* Icon perfekt mittig */
#fspOverlay .fsp-comments-composer button::before{
  content:"↵";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:30px;
  line-height:1;
  color:#fff;
}
/* ======================================================================
   [JUMP:SHARE_CSS_START]
   SHARE / TEILEN UI
   - links ausgerichtet (wie Comments)
   - Extras-Leiste unterhalb der Share-Card
   - oberhalb der Seek-Leiste
   ====================================================================== */

#fspOverlay .fsp-share-layer{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none; /* click-through außerhalb */
}

/* Card + Extras klickbar */
#fspOverlay .fsp-share-card,
#fspOverlay .fsp-share-extras{
  pointer-events:auto;
}

/* -------------------------
   Share Card (LINKS)
   ------------------------- */
#fspOverlay .fsp-share-card{
  position:absolute;

  left: var(--leftInset);
  right: calc(var(--rightRail) + var(--leftInset));

  bottom: 198px; /* oberhalb Extras + Seek */

  border-radius:18px;
  padding:14px;

  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color:#fff;
}

/* Header */
#fspOverlay .fsp-share-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

#fspOverlay .fsp-share-title{
  font-size:18px;
  font-weight:700;
  opacity:.95;
}

#fspOverlay .fsp-share-options{
  font-size:22px;
  line-height:1;
  opacity:.9;
}

/* Grid */
#fspOverlay .fsp-share-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

#fspOverlay .fsp-share-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

#fspOverlay .fsp-share-item button{
  width:58px;
  height:58px;
  border-radius:999px;
  border:0;

  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#fspOverlay .fsp-share-label{
  font-size:12px;
  opacity:.9;
  text-align:center;
  line-height:1.1;
  max-width:90px;
}

/* -------------------------
   Extras-Leiste (RUNDE ICONS)
   ------------------------- */
#fspOverlay .fsp-share-extras{
  position:absolute;

  left:18px;
  right:18px;
  bottom:132px; /* exakt über Seek */

  height:64px;
  padding:0 12px;

  border-radius:999px;

  background: rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display:flex;
  align-items:center;
  gap:10px;
}

#fspOverlay .fsp-share-extras .fsp-extra-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;

  background: rgba(0,0,0,.18);
  color:#fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#fspOverlay .fsp-share-extras .fsp-extra-spacer{
  flex:1;
}

#fspOverlay .fsp-share-extras .fsp-share-toast{
  font-size:12px;
  opacity:.9;
  white-space:nowrap;
}
@media (max-width: 360px){
  #fspOverlay .fsp-share-grid{
    gap: 12px;
  }
}

/* ======================================================================
   [JUMP:SHARE_CSS_END]
   ====================================================================== */

/* ======================================================================
   [JUMP:SHARE_ICON_CSS_START]
   Share Icons (SVG Mask, immer weiß) – wie deine bestehenden icon-* Klassen
   ====================================================================== */

#fspOverlay .fsp-share-icon{
  width: 22px;
  height: 22px;
  display:block;
  background:#fff;
}

/* Copy / Link */
#fspOverlay .icon-share-copy{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 1H4a2 2 0 00-2 2v12h2V3h12V1zm4 4H8a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h12v14z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 1H4a2 2 0 00-2 2v12h2V3h12V1zm4 4H8a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2zm0 16H8V7h12v14z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* WhatsApp (simplified bubble/phone) */
#fspOverlay .icon-share-whatsapp{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.93.56 3.72 1.52 5.22L2 22l4.99-1.62a9.86 9.86 0 005.05 1.39c5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm0 17.82c-1.63 0-3.15-.43-4.47-1.18l-.32-.19-2.96.96.96-2.89-.21-.34a7.84 7.84 0 01-1.22-4.23c0-4.34 3.53-7.87 7.87-7.87s7.87 3.53 7.87 7.87-3.53 7.87-7.87 7.87zm4.6-5.76c-.25-.12-1.5-.74-1.73-.83-.23-.09-.4-.12-.57.12-.17.25-.65.83-.8 1-.15.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.24-.74-.66-1.24-1.48-1.38-1.73-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.17-.25.25-.42.08-.17.04-.31-.02-.43-.06-.12-.57-1.37-.78-1.87-.2-.48-.41-.42-.57-.43h-.49c-.17 0-.43.06-.66.31-.23.25-.86.84-.86 2.06 0 1.22.88 2.4 1 2.57.12.17 1.73 2.65 4.2 3.72.59.25 1.05.4 1.41.51.59.19 1.12.16 1.54.1.47-.07 1.5-.61 1.71-1.2.21-.59.21-1.09.15-1.2-.06-.11-.23-.17-.48-.29z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.93.56 3.72 1.52 5.22L2 22l4.99-1.62a9.86 9.86 0 005.05 1.39c5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm0 17.82c-1.63 0-3.15-.43-4.47-1.18l-.32-.19-2.96.96.96-2.89-.21-.34a7.84 7.84 0 01-1.22-4.23c0-4.34 3.53-7.87 7.87-7.87s7.87 3.53 7.87 7.87-3.53 7.87-7.87 7.87zm4.6-5.76c-.25-.12-1.5-.74-1.73-.83-.23-.09-.4-.12-.57.12-.17.25-.65.83-.8 1-.15.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.24-.74-.66-1.24-1.48-1.38-1.73-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.17-.25.25-.42.08-.17.04-.31-.02-.43-.06-.12-.57-1.37-.78-1.87-.2-.48-.41-.42-.57-.43h-.49c-.17 0-.43.06-.66.31-.23.25-.86.84-.86 2.06 0 1.22.88 2.4 1 2.57.12.17 1.73 2.65 4.2 3.72.59.25 1.05.4 1.41.51.59.19 1.12.16 1.54.1.47-.07 1.5-.61 1.71-1.2.21-.59.21-1.09.15-1.2-.06-.11-.23-.17-.48-.29z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Facebook (f) */
#fspOverlay .icon-share-facebook{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 22v-8h3l1-4h-4V7c0-1.03.34-2 2-2h2V1h-3c-3.36 0-5 2.09-5 5v4H8v4h3v8h2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 22v-8h3l1-4h-4V7c0-1.03.34-2 2-2h2V1h-3c-3.36 0-5 2.09-5 5v4H8v4h3v8h2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Email (envelope) */
#fspOverlay .icon-share-email{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Messages (chat bubble) */
#fspOverlay .icon-share-messages{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H7l-3 4V4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H7l-3 4V4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Instagram (simple camera) */
#fspOverlay .icon-share-instagram{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm10 2H7a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3zm-5 4a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6zm5.2-2.3a1.1 1.1 0 110 2.2 1.1 1.1 0 010-2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm10 2H7a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3zm-5 4a5 5 0 110 10 5 5 0 010-10zm0 2a3 3 0 100 6 3 3 0 000-6zm5.2-2.3a1.1 1.1 0 110 2.2 1.1 1.1 0 010-2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Telegram (paper plane) */
#fspOverlay .icon-share-telegram{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.7 2.3L2.9 10.2c-1.3.5-1.3 1.2-.2 1.5l4.8 1.5 1.8 5.6c.2.6.1.9.8.9.5 0 .7-.2 1-.5l2.4-2.3 4.9 3.6c.9.5 1.5.2 1.7-.8l3.2-15.2c.3-1.2-.5-1.7-1.4-1.3zM8.2 12.8l10.6-6.7c.5-.3 1-.1.6.2l-8.6 7.8-.3 3.3-1.8-4.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.7 2.3L2.9 10.2c-1.3.5-1.3 1.2-.2 1.5l4.8 1.5 1.8 5.6c.2.6.1.9.8.9.5 0 .7-.2 1-.5l2.4-2.3 4.9 3.6c.9.5 1.5.2 1.7-.8l3.2-15.2c.3-1.2-.5-1.7-1.4-1.3zM8.2 12.8l10.6-6.7c.5-.3 1-.1.6.2l-8.6 7.8-.3 3.3-1.8-4.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Messenger (bolt bubble simplified) */
#fspOverlay .icon-share-messenger{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.14 2 11.25c0 2.91 1.45 5.5 3.72 7.2V22l3.38-1.86c.92.26 1.9.4 2.9.4 5.5 0 10-4.14 10-9.25S17.5 2 12 2zm-1 11l-3 3 4-5 3 3 3-3-4 5-3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C6.5 2 2 6.14 2 11.25c0 2.91 1.45 5.5 3.72 7.2V22l3.38-1.86c.92.26 1.9.4 2.9.4 5.5 0 10-4.14 10-9.25S17.5 2 12 2zm-1 11l-3 3 4-5 3 3 3-3-4 5-3-3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* QR (classic squares) */
#fspOverlay .icon-share-qr{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm10 0h2v2h-2v-2zm2 2h2v2h-2v-2zm-2 2h2v2h-2v-2zm4 0h2v2h-2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h8v8H3V3zm2 2v4h4V5H5zm8-2h8v8h-8V3zm2 2v4h4V5h-4zM3 13h8v8H3v-8zm2 2v4h4v-4H5zm10 0h2v2h-2v-2zm2 2h2v2h-2v-2zm-2 2h2v2h-2v-2zm4 0h2v2h-2v-2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Search (magnifier) */
#fspOverlay .icon-share-search{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2a8 8 0 105.29 14l4.7 4.7 1.41-1.41-4.7-4.7A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 2a8 8 0 105.29 14l4.7 4.7 1.41-1.41-4.7-4.7A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* System Share (three dots connected) */
#fspOverlay .icon-share-system{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16a3 3 0 00-2.4 1.2L8.9 13.8a3.2 3.2 0 000-3.6l6.7-3.4A3 3 0 0018 8a3 3 0 10-3-3c0 .17.02.33.05.49L8.3 8.9a3 3 0 100 6.2l6.75 3.4c-.03.16-.05.33-.05.5a3 3 0 103-3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 16a3 3 0 00-2.4 1.2L8.9 13.8a3.2 3.2 0 000-3.6l6.7-3.4A3 3 0 0018 8a3 3 0 10-3-3c0 .17.02.33.05.49L8.3 8.9a3 3 0 100 6.2l6.75 3.4c-.03.16-.05.33-.05.5a3 3 0 103-3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ======================================================================
   [JUMP:SHARE_ICON_CSS_END]
   ====================================================================== */

/* ===== COMMENTS HEIGHT: Card bestimmt Höhe, Liste füllt & scrollt ===== */
#fspOverlay .fsp-comments-card{
  max-height: 270px !important;   /* ← HIER stellst du die Containerhöhe ein */
}

#fspOverlay .fsp-comments-list{
  max-height: none !important;     /* ← WICHTIG: Limit der Liste weg */
  flex: 1 1 auto !important;       /* ← Liste nimmt den restlichen Platz */
  overflow-y: auto !important;
}

/* =========================
   PATCH: Stabilität / Konflikte (ans ENDE)
   ========================= */

/* 1) Einheitliche Variablen, damit Kommentare/Share exakt fluchten */
#fspOverlay{
  --rightRail: 82px;
  --leftInset: 18px;
}

/* 2) „Alte“ Flex-Control-Row Regeln neutralisieren: Grid gewinnt (ohne Chaos) */
#fspOverlay .fsp-control-row{
  display: block; /* neutral */
}

/* 3) Seek nur noch EINMAL definieren (du nutzt im JS ohnehin ProgressRow separat) */
#fspOverlay .fsp-seek{
  flex: 0 0 auto;
}

/* 4) Prev Skalierungsreste killen (du setzt Icons über ::before) */
#fspOverlay .fsp-prev{
  transform: none !important;
  font-size: 0 !important; /* verhindert Text/Emoji-Reste */
}

/* 5) Comments Status: „display none wenn leer“ sicher */
#fspOverlay .fsp-comments-status{
  display: none;
}
#fspOverlay .fsp-comments-status.is-error,
#fspOverlay .fsp-comments-status.is-success{
  display: block;
}

/* 6) Backdrop-filter Fallback (Performance/Battery) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  #fspOverlay .fsp-close,
  #fspOverlay .fsp-actions button,
  #fspOverlay .fsp-comments-card,
  #fspOverlay .fsp-comments-composer,
  #fspOverlay .fsp-share-card,
  #fspOverlay .fsp-share-extras{
    background: rgba(0,0,0,.45) !important; /* fallback statt „leer“ */
  }
}

/* 7) Reduced motion: weniger jank (ohne Feature-Entfernung) */
@media (prefers-reduced-motion: reduce){
  #fspOverlay *{

    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;

  }
}