.song-share-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 9px 14px;

    border: 1px solid rgba(0, 255, 100, .45);
    border-radius: 10px;

    background: #050505;
    color: #39ff75;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.song-share-button:hover {
    background: #39ff75;
    color: #000;
    border-color: #39ff75;

    transform: translateY(-1px);

    box-shadow:
        0 0 0 1px rgba(57,255,117,.15),
        0 0 18px rgba(57,255,117,.18);
}

.song-share-button:active {
    transform: translateY(0);
}

.song-share-button.is-sharing {
    opacity: .75;
    pointer-events: none;
}

.song-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    font-size: 17px;
    line-height: 1;
}

.song-share-message {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 8px);

    transform: translateX(-50%);

    white-space: nowrap;

    padding: 7px 10px;

    border: 1px solid rgba(57,255,117,.4);
    border-radius: 8px;

    background: #050505;
    color: #39ff75;

    font-size: 12px;
    font-weight: 700;

    z-index: 99999;

    box-shadow: 0 5px 25px rgba(0,0,0,.45);
}

@media (max-width: 640px) {
    .song-share-button {
        width: 100%;
        min-height: 42px;
    }
}


/* ============================================================
 * BMP SHARE FREIGABE PRO SONG
 * ============================================================ */

.bmp-share-setting-form{
  display:inline-flex;
  margin:0;
  padding:0;
}

.bmp-share-toggle{
  appearance:none;
  border:1px solid rgba(0,255,102,.30);
  border-radius:12px;
  min-height:40px;
  padding:8px 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  font:inherit;
  font-weight:900;
  letter-spacing:.1px;
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.bmp-share-toggle:hover{
  transform:translateY(-1px);
}

.bmp-share-toggle.is-enabled{
  color:#00ff66;
  background:#031008;
  border-color:rgba(0,255,102,.48);
  box-shadow:0 0 18px rgba(0,255,102,.08);
}

.bmp-share-toggle.is-disabled{
  color:#d7e4dc;
  background:#090d0b;
  border-color:rgba(255,255,255,.14);
}

.bmp-share-toggle-dot{
  width:9px;
  height:9px;
  min-width:9px;
  border-radius:50%;
  background:#6f7b74;
  box-shadow:0 0 0 3px rgba(111,123,116,.10);
}

.bmp-share-toggle.is-enabled .bmp-share-toggle-dot{
  background:#00ff66;
  box-shadow:
    0 0 0 3px rgba(0,255,102,.10),
    0 0 12px rgba(0,255,102,.55);
}

.bmp-share-saved-message{
  width:100%;
  margin:0 0 18px;
  padding:13px 16px;
  border:1px solid rgba(0,255,102,.28);
  border-radius:14px;
  background:#031008;
  color:#00ff66;
  font-weight:900;
}


/* ============================================================
   BMP SONG SHARE – FINAL ALIGNMENT 2026
   ============================================================ */

.song-share-button{
    position:relative !important;

    display:inline-grid !important;

    grid-template-columns:30px max-content !important;
    grid-template-rows:30px !important;

    align-items:center !important;
    justify-content:center !important;

    column-gap:8px !important;
    row-gap:0 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    padding:5px 12px 5px 8px !important;

    box-sizing:border-box !important;

    overflow:visible !important;

    white-space:nowrap !important;

    text-align:left !important;
    text-indent:0 !important;

    vertical-align:middle !important;
}

/* Runder Pfeil */
.song-share-button .song-share-icon{
    position:static !important;

    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex:0 0 30px !important;

    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;

    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;

    transform:none !important;

    inset:auto !important;

    line-height:1 !important;

    text-align:center !important;
}

/* Teilen-Text */
.song-share-button > span:not(.song-share-icon){
    position:static !important;

    grid-column:2 !important;
    grid-row:1 !important;

    display:block !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;

    transform:none !important;

    inset:auto !important;

    line-height:1.1 !important;

    white-space:nowrap !important;

    text-align:left !important;
    text-indent:0 !important;
}

/*
 * Falls der Buttontext als reiner Textknoten vorliegt,
 * verhindert das Grid trotzdem jede Überlagerung.
 */
.song-share-button{
    font-size:inherit !important;
    line-height:1 !important;
}

/* Keine künstlichen Zusatzzeichen über dem echten Pfeil */
.song-share-button::before,
.song-share-button::after{
    content:none !important;

    display:none !important;

    position:static !important;

    inset:auto !important;

    transform:none !important;
}

/* Hover / Focus darf die Geometrie nicht verändern */
.song-share-button:hover .song-share-icon,
.song-share-button:focus .song-share-icon,
.song-share-button:focus-visible .song-share-icon{
    transform:none !important;
}

/* Mobile */
@media (max-width:640px){

    .song-share-button{
        display:inline-grid !important;

        grid-template-columns:30px max-content !important;
        grid-template-rows:30px !important;

        width:auto !important;
        min-width:0 !important;
        max-width:100% !important;

        height:40px !important;
        min-height:40px !important;

        padding:5px 12px 5px 8px !important;

        column-gap:8px !important;

        white-space:nowrap !important;
    }

    .song-share-button .song-share-icon{
        width:30px !important;
        min-width:30px !important;
        max-width:30px !important;

        height:30px !important;
        min-height:30px !important;
        max-height:30px !important;
    }
}

/* ============================================================
   /BMP SONG SHARE – FINAL ALIGNMENT 2026
   ============================================================ */


/* ============================================================
   BMP_SONG_SHARE_OVERLAP_FINAL_2026
   FINALER GEOMETRIE-FIX

   Ziel:
   [ ↗ ] Teilen

   Der Icon-Kreis darf niemals den Text überlagern.
   Keine absolute Positionierung.
   Keine Grid-Reste.
   Keine Transformation der Geometrie.
   ============================================================ */

html body .song-share-button,
html body a.song-share-button,
html body button.song-share-button{
    position:relative !important;

    display:inline-flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    width:auto !important;
    min-width:82px !important;
    max-width:none !important;

    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;

    box-sizing:border-box !important;

    margin:0 !important;

    padding:4px 10px 4px 6px !important;

    overflow:hidden !important;

    white-space:nowrap !important;

    text-align:center !important;
    text-indent:0 !important;

    line-height:1 !important;

    isolation:isolate !important;

    transform:none !important;
}

/* ------------------------------------------------------------
   ICON – eigener echter Flex-Bereich
   ------------------------------------------------------------ */

html body .song-share-button .song-share-icon{
    position:relative !important;

    display:flex !important;
    flex:0 0 30px !important;

    align-items:center !important;
    justify-content:center !important;

    order:0 !important;

    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;

    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;

    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 !important;

    inset:auto !important;

    float:none !important;
    clear:none !important;

    transform:none !important;

    line-height:1 !important;

    z-index:2 !important;
}

/* ------------------------------------------------------------
   TEXT – immer rechts vom Kreis
   ------------------------------------------------------------ */

html body .song-share-button > span:not(.song-share-icon){
    position:relative !important;

    display:block !important;

    flex:0 0 auto !important;

    order:1 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 !important;

    inset:auto !important;

    float:none !important;
    clear:none !important;

    transform:none !important;

    text-align:left !important;
    text-indent:0 !important;

    white-space:nowrap !important;

    line-height:1.1 !important;

    z-index:3 !important;
}

/* ------------------------------------------------------------
   PSEUDO-ELEMENTE DES BUTTONS KOMPLETT AUS
   ------------------------------------------------------------ */

html body .song-share-button::before,
html body .song-share-button::after{
    content:none !important;

    display:none !important;

    position:static !important;

    width:0 !important;
    height:0 !important;

    margin:0 !important;
    padding:0 !important;

    inset:auto !important;

    transform:none !important;
}

/* ------------------------------------------------------------
   HOVER / FOCUS DARF NICHTS VERSCHIEBEN
   ------------------------------------------------------------ */

html body .song-share-button:hover,
html body .song-share-button:active,
html body .song-share-button:focus,
html body .song-share-button:focus-visible,
html body .song-share-button.is-sharing{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    transform:none !important;
}

html body .song-share-button:hover .song-share-icon,
html body .song-share-button:active .song-share-icon,
html body .song-share-button:focus .song-share-icon,
html body .song-share-button:focus-visible .song-share-icon,
html body .song-share-button.is-sharing .song-share-icon{
    position:relative !important;

    transform:none !important;

    margin:0 !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:700px){

    html body .song-share-button,
    html body a.song-share-button,
    html body button.song-share-button{
        display:inline-flex !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        align-items:center !important;
        justify-content:center !important;

        gap:7px !important;

        width:auto !important;
        min-width:82px !important;

        height:40px !important;
        min-height:40px !important;

        padding:4px 9px 4px 5px !important;

        overflow:hidden !important;
    }

    html body .song-share-button .song-share-icon{
        flex:0 0 30px !important;

        width:30px !important;
        min-width:30px !important;

        height:30px !important;
        min-height:30px !important;
    }

    html body .song-share-button > span:not(.song-share-icon){
        flex:0 0 auto !important;

        white-space:nowrap !important;
    }
}

/* ============================================================
   /BMP_SONG_SHARE_OVERLAP_FINAL_2026
   ============================================================ */