a { color:#5D5D9E; } 
a:visited { color:#5D5D9E; } 
a:active { color:#5C615E; } 
a:hover { color:#B2B3B4; } 

/* Status-Text */
#status-message,
[data-role="status-message"] {
    font-family: Segoe, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 12px;
}

/* Artist */
#artist-display,
[data-role="artist-display"] {
    font-family: Segoe, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 26px;
    font-weight: bold;
}

/* Title */
#title-display,
[data-role="title-display"] {
    font-family: Segoe, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 18px;
}
#moderator-name,
[data-role="moderator-name"] {
    font-family: Segoe, "Segoe UI", "Helvetica Neue", sans-serif;
    font-size: 18px;
}body { background-color:#3CE395; padding:0;  margin: 0; }
.textstyle1 { text-align:left; }
#container_798fb160 { vertical-align: top; position:relative; display: inline-block; width:100%; background:none;  }
#container_798fb160_padding { margin: 20px 10px 20px 10px;display: block;  }
.textstyle2 { text-align:center; }
#container_58b21c8d { vertical-align: top; border-radius: 15px; position:relative; display: inline-block; width:100%; max-width:1200px; background-color:#FFFFFF; box-shadow: 5px 5px 10px 10px rgba(40, 42, 54, 0.588235);  }
#container_58b21c8d_padding { margin: 20px 0px 20px 0px;display: block;  }
#container_1497f3b4 { vertical-align: top; position:relative; display: inline-block; width:100%; background:none;  }
#container_5318f513 { vertical-align: top; position:relative; display: inline-block; width:100%; background:none;  }
#container_1b6faec5 { vertical-align: top; position:relative; display: inline-block; width:25%; background:none;  }
#container_4f89c297 { vertical-align: top; position:relative; display: inline-block; width:100%; background:none;  }
.textstyle3 { font-size:14pt; font-family:Segoe, 'Segoe UI', 'Helvetica Neue', sans-serif; color:#000000; font-weight:bold;  }
.textstyle4 { font-size:12pt; font-family:Arial, Helvetica, sans-serif; color:#000000;  }
#html_55c6bb89 { vertical-align: top; position:relative; display: inline-block; margin:10px 0px 0px 0px;background:none;  }
#html_d28b6b8 { vertical-align: top; position:relative; display: inline-block; background:none;  }
#container_b404f9c { vertical-align: top; position:relative; display: inline-block; width:50%; background:none;  }
#container_7f0e379e { box-sizing: border-box; vertical-align: top; border-radius: 15px; position:relative; display: inline-block; width:95%; max-width:600px; background:none; border: 3px solid #282A36;  }
#container_12299969 { vertical-align: top; position:relative; display: inline-block; width:100%; background:none;  }
#container_1e24092a { vertical-align: top; position:relative; display: inline-block; width:25%; background:none;  }
#container_1e24092a_padding { margin: 10px; display: block;  }
#img_37f1edb3 { box-sizing: border-box; vertical-align: bottom; border-radius: 15px; position:relative; display: inline-block; margin:10px 0px 0px 0px;max-width:130px; background:none; border: 1px solid #404040; height:auto;  }
#container_9022bbf { vertical-align: bottom; position:relative; display: inline-block; width:75%; background:none;  }
#container_9022bbf_padding { margin: 10px 0px 10px 0px;display: block;  }
#img_fb7d91b { vertical-align: top; position:relative; display: inline-block; max-width:50px; background:none; height:auto; cursor: pointer;
 }
#html_353946e3 { vertical-align: bottom; position:relative; display: inline-block; margin:0px 0px 0px 5px;background:none;  }
#html_76461fe4 { vertical-align: bottom; position:relative; display: inline-block; width:100%; height:23px; max-width:137px; background:none;  }
#html_149edc9c { vertical-align: top; position:relative; display: inline-block; background:none;  }
#container_2a5034ab { vertical-align: top; position:relative; display: inline-block; width:25%; background:none;  }
#container_2a5034ab_padding { margin: 10px; display: block;  }
#html_17666c37 { vertical-align: bottom; position:relative; display: inline-block; background:none;  }
/* ==== Layout über data-role für Player/Moderator ==== */

/* Desktop: Reihe als Flex-Container
   -> Flex auf den INNEREN Wrapper legen */
[data-role="player-row"] > .textstyle1 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 10px;
}

/* Linker & rechter Bereich (Platzhalter) */
[data-role="future-panel"] {
    width: 220px;
    /* rechts darf ruhig immer Platz haben */
}

[data-role="moderator-panel"] {
    width: 220px;
    /* KEIN min-height hier! */
    text-align: center;
    font-family: Segoe, "Segoe UI", "Helvetica Neue", sans-serif;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Wenn Moderator aktiv ist -> sichtbar + Mindesthöhe */
[data-role="moderator-panel"].has-moderator {
    visibility: visible;
    opacity: 1;
    min-height: 150px;
}

/* Wenn Moderator NICHT aktiv ist -> komplett einklappen */
[data-role="moderator-panel"]:not(.has-moderator) {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Moderatorenbild */
[data-role="moderator-photo"] {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* Mobile: Player oben, Moderator darunter, Poster zuletzt */
@media only screen and (max-width: 600px) {

    /* Flex-Container vertikal statt horizontal */
    [data-role="player-row"] > .textstyle1 {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Reihenfolge festlegen: Player -> Moderator -> Poster */
    [data-role="player-panel"] {
        order: 1;
        width: 100%;
    }

    [data-role="moderator-panel"] {
        order: 2;
        width: 100%;
    }

    [data-role="future-panel"] {
        order: 3;
        width: 100%;
    }

    /* Für die alten RocketCake-Container-IDs zusätzlich */
    #container_1b6faec5,
    #container_b404f9c,
    #container_1e24092a,
    #container_2a5034ab {
        width: 100%;
    }
}