html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
    border-radius: 15px;
    margin: 0;
    padding: 0;  
    font-family: sans-serif; /* Optionale Standard-Schriftart für bessere Optik */
    
}

.table-container::-webkit-scrollbar {
    width: 5px;
    height: 3px;  
}

.table-container::-webkit-scrollbar-thumb {
    background: #3399ff;
    border-radius: 30px;  
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 30px;
    box-shadow: inset 0px 0px 0px 0px #F0F0F0;   
}

.table-container {
    box-sizing: border-box;
    border-radius: 20px;
    background:#7abdff;
    max-width: 230px;         /* Maximale Breite der Box */
    max-height: 400px;        /* Maximale Höhe, danach wird gescrollt */
    overflow-y: auto;         /* Aktiviert den vertikalen Scrollbalken bei Bedarf */
    padding: 10px;            /* Innenabstand zum Rand */
    
}

/* Die Tabelle selbst strecken, damit sie das DIV ausfüllt */
.table-container table {
    width: calc(100% - 18px); /* Nutzt den verfügbaren Platz abzüglich des linken Margins */
    /*border-separate: separate; /* Wichtig, damit border-radius auf Tabellenzellen funktioniert */
    border-spacing: 0 8px;     /* Erzeugt einen Abstand zwischen den Zeilen für den Abrundungs-Effekt */
}

table {
    
    margin-left: 10px;
    background-color: #7abdff; /* Hellblaues Hintergrund-Design für die Einträge */
    /* background-color entfernt, da sonst der Hintergrund hinter den abgerundeten Ecken hervorsteht */
}

table tr {
    border-radius:15px;
}

/* Kopfbereich (th statt td wegen der HTML-Korrektur) */
thead th {
    position: sticky;
    top: 0;
    background-color: #3399ff; /* WICHTIG: Ein Hintergrund verhindert, dass Songs durchschimmern */
    z-index: 10;               /* Sorgt dafür, dass die Überschrift immer über den Songs liegt */
    padding: 10px;
    border-bottom: 2px solid #333;
}

tbody td {

    line-height: 1.78em;
    font-family: Arial;
    color: #ffffff;
    background-color: #3399ff;
    text-align: center;
    font-size: 13px;    
    border-radius: 15px;      /* Rundet die Ecken der einzelnen Zeilen ab */
        /* DIESE ZEILEN HINZUFÜGEN: */
    word-break: break-word;       /* Erlaubt den Umbruch bei langen Wörtern */
    overflow-wrap: anywhere;     /* Verhindert das Sprengen des Containers */
}

tbody td span {     
    display: block;           /* Erlaubt korrekte Textausrichtung im span */
    text-align: center;
    font-size: 14px;
}