/*
 Theme Name:   Kreis 104
 Description:  Das ist ein Theme, welches auf neve basiert und von David Siemers Webdesign speziell für kreis104.de angepasst wurde.
 Author:       David Siemers Webdesign
 Author URI:   https://davidsiemers.de/
 Template:     neve
 Version:      1.0
 Text Domain:  neve-child
*/

.header{
	border-bottom: 1px solid #0393DE !important;
}


/* =========================================================
   NEVE FOOTER
   Blendet die Neve-Werbung im Footer aus
   ========================================================= */

.footer--row-inner.footer-bottom-inner.footer-content-wrap {
    display: none !important;
}


/* =========================================================
   TRENNLINIEN
   ========================================================= */

.trennlinielinks {
    width: 120px;
    height: 2px;
    background: #0393DE;
}

.trennlinie {
    width: 120px;
    height: 2px;
    background: #0393DE;
    margin: auto;
}


/* =========================================================
   TABLEPRESS – MOBILE / RESPONSIVE
   Gilt bis 767px Bildschirmbreite
   ========================================================= */

@media screen and (max-width: 767px) {


    /* =====================================================
       DATATABLES BEDIENFELDER ZENTRIEREN
       ===================================================== */

    .dt-container .dt-layout-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .dt-container .dt-layout-cell {
        width: 100%;
        text-align: center;
    }


    /* Anzahl der anzuzeigenden Einträge */

    .dt-container .dt-length {
        width: 100%;
        text-align: center;
    }


    /* Suche */

    .dt-container .dt-search {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        text-align: center;
    }

    .dt-container .dt-search input {
        max-width: 220px;
    }


    /* Ergebnisanzeige
       z.B. "1 bis 9 von 9 Einträgen" */

    .dt-container .dt-info {
        width: 100%;
        text-align: center;
    }


    /* Seitennavigation */

    .dt-container .dt-paging {
        width: 100%;
        text-align: center;
    }

    .dt-container .dt-paging nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
    }


    /* =====================================================
       TABLEPRESS-TABELLE IN KARTEN UMWANDELN
       ===================================================== */

    .tablepress {
        display: block;
        width: 100% !important;
    }


    /* Tabellenkopf auf Mobilgeräten ausblenden */

    .tablepress thead {
        display: none;
    }


    /* Tabellenkörper */

    .tablepress tbody {
        display: block;
        width: 100%;
    }


    /* Jede Tabellenzeile wird zu einer eigenen Karte */

    .tablepress tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 18px 0;
        padding: 10px 14px;

        border: 1px solid #ddd;
        border-radius: 8px;

        background: #fff;

        box-sizing: border-box;
    }


    /* =====================================================
       EINZELNE FELDER INNERHALB DER KARTE
       ===================================================== */

    .tablepress tbody td {
        display: grid;

        /* Links Bezeichnung, rechts Inhalt */
        grid-template-columns: 110px minmax(0, 1fr);

        gap: 10px;

        width: 100% !important;

        padding: 8px 0 !important;

        border: 0 !important;
        border-bottom: 1px solid #eee !important;

        text-align: left !important;

        box-sizing: border-box;

        /* Lange E-Mail-Adressen dürfen umbrechen */
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* Beim letzten Feld keine Trennlinie */

    .tablepress tbody td:last-child {
        border-bottom: 0 !important;
    }


    /* =====================================================
       SPALTENBEZEICHNUNGEN
       ===================================================== */

    /* Bezeichnung links fett darstellen */

    .tablepress tbody td::before {
        font-weight: 700;
    }


    /* =====================================================
       TABELLE 1
       Damen & Mixed
       ===================================================== */

    #tablepress-1 tbody td.column-1::before {
        content: "Damen/Mixed";
    }

    #tablepress-1 tbody td.column-2::before {
        content: "Verein";
    }

    #tablepress-1 tbody td.column-3::before {
        content: "Name";
    }

    #tablepress-1 tbody td.column-4::before {
        content: "Tel.";
    }

    #tablepress-1 tbody td.column-5::before {
        content: "Handy";
    }

    #tablepress-1 tbody td.column-6::before {
        content: "E-Mail";
    }


    /* =====================================================
       TABELLE 2
       Adressverzeichnis Vereine
       ===================================================== */

    #tablepress-2 tbody td.column-1::before {
        content: "Verein";
    }

    #tablepress-2 tbody td.column-2::before {
        content: "Name";
    }

    #tablepress-2 tbody td.column-3::before {
        content: "Tel.";
    }

    #tablepress-2 tbody td.column-4::before {
        content: "Handy";
    }

    #tablepress-2 tbody td.column-5::before {
        content: "E-Mail";
    }


    /* =====================================================
       LEERE FELDER AUSBLENDEN
       ===================================================== */

    /*
     Beispiel:
     Wenn keine Handynummer vorhanden ist,
     wird die komplette Handy-Zeile ausgeblendet.
    */

    .tablepress tbody td:empty {
        display: none;
    }


    /* =====================================================
       TABLEPRESS CAPTION / BEARBEITEN-LINK
       ===================================================== */

    .tablepress caption {
        text-align: center !important;
    }

}