/* ---------------------------------------------------------
   TRICKKISTE – Tanktabelle (FINAL VERSION)
--------------------------------------------------------- */

/* Wrapper – ermöglicht Scrollen auf kleinen Geräten */
.tank-table-wrapper {
    width: 100%;
    overflow-x: auto;
    text-align: center;
    margin: 18px 0;
    box-sizing: border-box;
}

/* Tabelle */
.tank-table {
    width: 100%;
    border-collapse: collapse;
    background: #626262;
    color: #fff;
    border: 3px solid #333;
    table-layout: fixed; /* feste Spalten – stabil */
}

/* Zellen – Gitterlinien */
.tank-table th,
.tank-table td {
    border: 3px solid #333;  /* das komplette Gitter */
    padding: 8px;
    vertical-align: middle;
    box-sizing: border-box;

    /* Textumbrüche, wichtig! */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Erste Spalte (Textspalte) */
.tank-table th:first-child,
.tank-table td:first-child {
    width: 30%;
    text-align: left;
    padding-left: 10px;
}

/* Drei Bild-/Datenspalten auf Desktop */
.tank-table th:nth-child(n+2),
.tank-table td:nth-child(n+2) {
    width: calc(70% / 3);
    text-align: center;
}

/* Tabellenkopf */
.tank-table thead th {
    background: #4d4d4d;
    padding: 6px;
}

/* Bilder im Tabellenkopf – Desktop */
.tank-table thead th img {
    width: 120px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 6px auto 0;

    background: #fff;
    border: 2px solid #333;
    border-radius: 6px;
}

/* Bildbeschriftung (optional) */
.tank-table thead th .caption {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------
   MOBILE VERSION
--------------------------------------------------------- */
@media screen and (max-width: 750px) {

    /* Wrapper – Scroll bleibt aktiv */
    .tank-table-wrapper {
        overflow-x: auto;
    }

    /* Erste Spalte breiter für lesbaren Text */
    .tank-table th:first-child,
    .tank-table td:first-child {
        width: 40%;
        padding-left: 6px;
        font-size: 0.85rem;
    }

    /* Drei Bildspalten teilen 60% */
    .tank-table th:nth-child(n+2),
    .tank-table td:nth-child(n+2) {
        width: calc(60% / 3);
    }

    /* Kleinere Bilder für Mobil */
    .tank-table thead th img {
        width: 48px;
        height: 48px;
    }

    /* Kompaktere Zellen */
    .tank-table th,
    .tank-table td {
        padding: 4px 3px;
        font-size: 0.8rem;
    }
}