.ct-search {
    margin: 20px 0;
}

.ct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.ct-table th {
    background: linear-gradient(#0077aa, #005f88);
    color: #fff;
    font-weight: 600;
    padding: 12px;
    border-bottom: 3px solid #004466;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Kopfzeile moderner BVKD-Stil */
.ct-table thead th {
    background: linear-gradient(180deg, #0077aa, #005f88);
    padding: 14px 10px;
    border-bottom: 3px solid #004466;
    text-align: left;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* Suchfelder harmonisch integrieren */
.ct-table thead th input.ctSearchBox.form-control {
    background: rgba(255, 255, 255, 0.15) !important; /* leicht transparent */
    backdrop-filter: blur(2px);                       /* moderner Glas-Effekt */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
    font-size: 14px;
}

/* Placeholder modern */
.ct-table thead th input.ctSearchBox.form-control::placeholder {
    color: #e6f4ff !important;
    opacity: 1 !important;
}

/* Hover-Effekt für bessere Usability */
.ct-table thead th input.ctSearchBox.form-control:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Fokus-Effekt */
.ct-table thead th input.ctSearchBox.form-control:focus {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: #ffffff !important;
    outline: none !important;
}

/* rechte Spalte breiter machen */
.ct-table thead th:last-child {
    width: 120px; /* oder 180px, je nach Geschmack */
}

/* Sticky Kopfzeile */
.ct-table thead th {
    position: sticky;
    top: 0;
    z-index: 50; /* wichtig, damit die Kopfzeile über den Zeilen bleibt */
}

/* Hintergrund fixieren, damit der Verlauf nicht durchsichtig wird */
.ct-table thead {
    background: linear-gradient(180deg, #0077aa, #005f88);
}

/* ===========================
   MOBILE STACKED HEADER
   =========================== */

@media (max-width: 768px) {

    /* Kopfzeile nicht mehr als Tabelle darstellen */
    .ct-table thead,
    .ct-table thead tr,
    .ct-table thead th {
        display: block;
        width: 100% !important;
    }

    /* Abstand zwischen den Suchfeldern */
    .ct-table thead th {
        margin-bottom: 12px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }

    /* Suchfelder 100% Breite */
    .ct-table thead th input.ctSearchBox.form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Sticky Header für mobile Ansicht */
    .ct-table thead th {
        position: sticky;
        top: 70px; /* Helix Mobile Header Höhe */
        z-index: 50;
    }
}

.ct-table td {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.ct-table tr:nth-child(even) {
    background: #d3d3d3;
}

.ct-table tr:hover {
    background: #f0f8ff;
}

.ct-pagination {
    text-align: center;
    margin-top: 20px;
}