/* Basis-Style für die Frontend-Tabelle */

.table-auftrittsplan {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Header */
.table-auftrittsplan thead th {
    font-weight: 600;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

/* Body */
.table-auftrittsplan tbody td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

/* Mobile Scroll-Fix */
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* DataTables Elemente deaktivieren (weil wir sie nicht nutzen) */
.dataTables_filter,
.dataTables_paginate,
.dataTables_info,
.dataTables_length {
    display: none !important;
}
#auftrittsplan-table td,
#auftrittsplan-table th {
    color: #000000 !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background: #ffffff !important;        /* weißer Hintergrund */
    border-left-color: #000000 !important; /* dunkler Pfeil */
}
table.dataTable.row-border>tbody>tr>*, table.dataTable.display>tbody>tr>* {
    border-top: 1px solid rgba(0, 0, 0, 0.8);
}
table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}



/* ------------------------------------------------- */
/* Mobile Layout < 575px → ALLES block untereinander */
/* ------------------------------------------------- */
@media (max-width: 575px) {

    table.dataTable > tbody > tr.child span.dtr-title,
    table.dataTable > tbody > tr.child span.dtr-data {
        display: block !important;
        white-space: normal !important;
        width: 100%;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        margin-bottom: 2px;
        font-weight: 600;
    }

    table.dataTable > tbody > tr.child span.dtr-data {
        margin-bottom: 10px;
        word-break: break-word;
    }
}

/* Gesamttabelle Rahmen */
#auftrittsplan-table {
    border: 2px solid rgba(0,0,0,0.8) !important;
    border-collapse: collapse !important;
}

/* Kopfzeile */
#auftrittsplan-table thead th {
    border-bottom: 3px solid rgba(0,0,0,0.8) !important;
}

/* Zeilenrahmen */
#auftrittsplan-table td,
#auftrittsplan-table th {
    border: 1px solid rgba(0,0,0,0.3) !important;
}

/* Abwechselnde Hintergrundfarbe */
#auftrittsplan-table tbody tr:nth-child(even) {
    background: #f8f8f8;
}