BODY {FONT-FAMILY: verdana,arial,helvetica,sans-serif; }


.tb-content {
    padding: 20px 20px 20px 30px;
    width: 100%;
    box-sizing: border-box;
    background-color: #DFF8FF !important;
    font-size: 11px;
    overflow-x: hidden;
}
.tb-content {
    -webkit-text-size-adjust: 100%;
}


br {
    display: none;
}

.tb-content .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 5px;
    margin-bottom: 6px;
    border-bottom: 1px solid #0084D2;
    background-color: #DFF8FF;
    box-sizing: border-box;
}

.tb-content .header-right {
    display: flex;
    gap: 15px; /* ersetzt alle padding-left */
}

.tb-content .icon {
    width: 33px;
    height: 33px;
    padding-bottom: 5px;
}


.tb-content .pro_he {
    WIDTH: 99%; 
    HEIGHT: 40px; 
    PADDING: 5px; 
    MARGIN-BOTTOM: 6px; 
    BORDER-BOTTOM: 1px solid #0084D2
}


.tb-content .pro_a {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 4px;     /* Titel: kontrollierter Abstand */
}

.tb-content .pro_b {
    font-size: 13px;
    margin-bottom: 6px;     /* Choreograph(en): leicht größer */
}
                                                    

/* pro_c darf KEIN flex-column sein */
.tb-content .pro_c {
    padding: 4px;
    border: 1px solid #0084D2;
    background-color: #B9E4FF;
    box-sizing: border-box;
}

/* br verhindert EINZEILIG — also neutralisieren */
br {
    display: none;
}

/* beide nebeneinander */
.tb-content .pro_d,
.tb-content .pro_e {
    display: inline-block;
    vertical-align: top;
}

/* linke Spalte */
.tb-content .pro_d {
    width: 120px;
    font-weight: bold;
}

/* rechte Spalte */
.tb-content .pro_e {
    width: calc(100% - 120px);
}


.tb-content .pro_d {
    font-weight: bold;
}

.tb-content .pro_l {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100px;
    margin-left: 5px;
    font-weight: normal;
    min-height: 1em;
    box-sizing: border-box;
    vertical-align: top;
}



/* Safari/iPad Fix für leere pro_l */
.tb-content .pro_l:empty::after {
    content: " ";
    visibility: hidden;
}

/* WICHTIG: pro_s NICHT als flex! */
.tb-content .pro_s {
    display: inline-block;     /* statt inline-flex */
    width: calc(100% - 105px);
    box-sizing: border-box;
    vertical-align: top;
}


.tb-content .pro_o,
.tb-content .pro_y {
    display: block;
    width: 100%;
    padding: 4px 6px;
    font-weight: bold;      /* NUR diese beiden */
    background-color: #B9E4FF;
    text-align: left;
    box-sizing: border-box;
}

.tb-content .pro_o {
    margin-top: 12px;      /* Abstand nach oben */
}

.tb-content .pro_x {
    display: block;
    width: 100%;
    padding: 4px 6px 0px 6px;
    margin-top: 12px;        /* Abstand nach oben */
    font-weight: normal;     /* NICHT fett */
    color: #FF00FF;          /* pink */
    background-color: #B9E4FF;
    text-align: left;
    box-sizing: border-box;
}


.tb-content .pro_c1,
.tb-content .pro_c2 {
    display: block;
    width: 100%;
    padding: 4px;
    margin-bottom: 10px;
    border: 1px solid #0084D2;
    box-sizing: border-box;
}

.tb-content .pro_c1 {
    background-color: #B9E4FF;
}

.tb-content .pro_c2 {
    background-color: #ffffff;
}

.tb-content .pro_d1,
.tb-content .pro_e1,
.tb-content .pro_d2 {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
}

.tb-content .pro_d1,
.tb-content .pro_d2 {
    width: 25%;
    margin-left: 5px;
}

.tb-content .pro_d1 {
    font-weight: bold;   /* Artist fett */
}

.tb-content .pro_d2 {
    font-weight: normal; /* Album NICHT fett */
}


.tb-content .pro_e1 {
    display: inline-block;   /* statt inline-flex */
    width: 65%;
    box-sizing: border-box;
}



.tb-content .pb {WIDTH: 99%; FLOAT: left; FONT-SIZE: 10px; MARGIN-TOP: 10px; BORDER-TOP: 1px solid #0084D2; text-align: right}                                   /* Aufnahme, Copyright Druck */
.tb-content .pc {FONT-SIZE: 11px; MARGIN-TOP:10px; FLOAT: left;}                                                                                                   /* Aufnahme Anzeige */

@media screen {
   .pb { display: none; }
   .pro_he { display: none; }
   .pro_he + br { display: none; }
}


@media Print
{
.hide {DISPLAY: none !important;}
.pro_c .hide {DISPLAY: none !important;}
.header {DISPLAY: none}
.header_back {DISPLAY: none}
.copyright {DISPLAY: none}
.myMenu {DISPLAY: none; WIDTH: 0px}
.content {WIDTH: 99%}
P.hp {COLOR: #000; BACKGROUND-COLOR: #ffffff}
}