.kleinanzeigen-table {
    box-sizing: border-box;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 10px auto;
    width: 100%;
}

    .kleinanzeigen-table th {
        background-color: #636363; /* Dunkleres Grau für den Header */
        color: #ffffff; /* Weiße Schrift für besseren Kontrast */
        border: 1px solid #444; /* Dunklerer Border für den Header */
    }

    .kleinanzeigen-table th,
    .kleinanzeigen-table td {
        border: 1px solid #ddd;
        text-align: left;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.4;
    }

        .kleinanzeigen-table th:nth-child(1),
        .kleinanzeigen-table td:nth-child(1) {
            width: 35%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .kleinanzeigen-table th:nth-child(2),
        .kleinanzeigen-table td:nth-child(2) {
            width: 15%;
        }

        .kleinanzeigen-table th:nth-child(3),
        .kleinanzeigen-table td:nth-child(3) {
            width: 10%;
            text-align: right;
        }

        .kleinanzeigen-table th:nth-child(4),
        .kleinanzeigen-table td:nth-child(4) {
            width: 20%;
        }

        .kleinanzeigen-table th:nth-child(5),
        .kleinanzeigen-table td:nth-child(5) {
            width: 12%;
            white-space: nowrap;
        }

        .kleinanzeigen-table th:nth-child(6),
        .kleinanzeigen-table td:nth-child(6) {
            width: 8%;
            text-align: center;
        }

        .kleinanzeigen-table td a {
            color: #1E90FF;
            text-decoration: none;
            display: inline-block;
        }

            .kleinanzeigen-table td a:hover {
                text-decoration: underline;
            }

    .kleinanzeigen-table tr:hover {
        background-color: #cff7f5a0;
    }

/* 🔵 Blau für Special Items */
.special-item {
    background-color: #1E90FF;
    color: white;
    font-weight: bold;
}

    .special-item:hover {
        background-color: #1C86EE !important;
    }

    .special-item a {
        color: white !important;
    }

/* ✅ 🟢 Grün für Berlin */
.berlin-row {
    background-color: #2E8B57;
    color: white;
    font-weight: bold;
}

    .berlin-row:hover {
        background-color: #276a4a !important;
    }

    .berlin-row a {
        color: white !important;
    }

    /* 🟣 Lila, falls ein Artikel sowohl Berlin als auch Special ist */
    .berlin-row.special-item {
        background-color: #800080;
    }

        .berlin-row.special-item:hover {
            background-color: #660066 !important;
        }

/* 🔶 Orange für Flohmarkt in Berlin */
.flohmarkt-row {
    background-color: orange !important;
    color: white !important;
    font-weight: bold;
}

    .flohmarkt-row a {
        color: white !important;
    }

    .flohmarkt-row:hover {
        background-color: darkorange !important;
    }

/* 🟦 Türkis für Neukölln */
.neukoelln-row {
    background-color: #c13838 !important;
    color: white !important;
    font-weight: bold;
}
.neukoelln-row a {
    color: white !important;
}
.neukoelln-row:hover {
    background-color: #008e7c !important;
}

/* 4K (3840x2160) */
@media screen and (min-width: 2560px) {
    .kleinanzeigen-table {
        width: 100%;
        max-width: none;
        font-size: 16px;
    }

    .kleinanzeigen-table th,
    .kleinanzeigen-table td {
        padding: 12px 8px;
    }

    .kleinanzeigen-table th:nth-child(1),
    .kleinanzeigen-table td:nth-child(1) { 
        width: 35%;
        white-space: normal;
    }

    .kleinanzeigen-table th:nth-child(2),
    .kleinanzeigen-table td:nth-child(2) { width: 15%; }

    .kleinanzeigen-table th:nth-child(3),
    .kleinanzeigen-table td:nth-child(3) { 
        width: 10%;
        text-align: right;
    }

    .kleinanzeigen-table th:nth-child(4),
    .kleinanzeigen-table td:nth-child(4) { width: 20%; }

    .kleinanzeigen-table th:nth-child(5),
    .kleinanzeigen-table td:nth-child(5) { width: 12%; }

    .kleinanzeigen-table th:nth-child(6),
    .kleinanzeigen-table td:nth-child(6) { width: 8%; }

    .kleinanzeigen-table th {
        font-size: 18px;
        font-weight: bold;
    }
}

/* 1920x1080 (Landscape) */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    .kleinanzeigen-table {
        width: 98%;
        max-width: 1880px;
        font-size: 16px;
    }

    .kleinanzeigen-table th,
    .kleinanzeigen-table td {
        padding: 16px 12px;
    }

    .kleinanzeigen-table th:nth-child(1),
    .kleinanzeigen-table td:nth-child(1) { 
        width: 40%;
        white-space: normal;
    }

    .kleinanzeigen-table th:nth-child(2),
    .kleinanzeigen-table td:nth-child(2) { width: 15%; }

    .kleinanzeigen-table th:nth-child(3),
    .kleinanzeigen-table td:nth-child(3) { 
        width: 10%;
        text-align: right;
    }

    .kleinanzeigen-table th:nth-child(4),
    .kleinanzeigen-table td:nth-child(4) { width: 20%; }

    .kleinanzeigen-table th:nth-child(5),
    .kleinanzeigen-table td:nth-child(5) { width: 10%; }

    .kleinanzeigen-table th:nth-child(6),
    .kleinanzeigen-table td:nth-child(6) { width: 5%; }
}

/* 1080x1920 (Portrait) - Nur für Portrait-Modus! */
@media screen and (max-width: 1080px) and (orientation: portrait) {
    .kleinanzeigen-table {
        width: 100%;
        font-size: 14px;
        margin: 5px 0;
    }

    .kleinanzeigen-table th,
    .kleinanzeigen-table td {
        padding: 8px 4px;
    }

    .kleinanzeigen-table th:nth-child(1),
    .kleinanzeigen-table td:nth-child(1) { 
        width: 30%;
        white-space: normal;
        overflow-wrap: break-word;
        font-size: 13px;
    }

    .kleinanzeigen-table th:nth-child(2),
    .kleinanzeigen-table td:nth-child(2) { 
        width: 15%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kleinanzeigen-table th:nth-child(3),
    .kleinanzeigen-table td:nth-child(3) { 
        width: 12%;
        white-space: nowrap;
        text-align: right;
    }

    .kleinanzeigen-table th:nth-child(4),
    .kleinanzeigen-table td:nth-child(4) { 
        width: 23%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kleinanzeigen-table th:nth-child(5),
    .kleinanzeigen-table td:nth-child(5) { 
        width: 13%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kleinanzeigen-table th:nth-child(6),
    .kleinanzeigen-table td:nth-child(6) { 
        width: 7%;
        text-align: center;
        white-space: nowrap;
    }

    .kleinanzeigen-table td a {
        padding: 4px 2px;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kleinanzeigen-table th {
        white-space: nowrap;
        font-size: 13px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Standard-Layout für andere Auflösungen */
@media screen and (min-width: 1081px) and (max-width: 1919px) {
    .kleinanzeigen-table {
        width: 98%;
        font-size: 15px;
    }

    .kleinanzeigen-table th,
    .kleinanzeigen-table td {
        padding: 12px 8px;
    }

    .kleinanzeigen-table th:nth-child(1),
    .kleinanzeigen-table td:nth-child(1) { 
        width: 35%;
        white-space: normal;
    }

    .kleinanzeigen-table th:nth-child(2),
    .kleinanzeigen-table td:nth-child(2) { width: 15%; }

    .kleinanzeigen-table th:nth-child(3),
    .kleinanzeigen-table td:nth-child(3) { 
        width: 12%;
        text-align: right;
    }

    .kleinanzeigen-table th:nth-child(4),
    .kleinanzeigen-table td:nth-child(4) { width: 23%; }

    .kleinanzeigen-table th:nth-child(5),
    .kleinanzeigen-table td:nth-child(5) { width: 10%; }

    .kleinanzeigen-table th:nth-child(6),
    .kleinanzeigen-table td:nth-child(6) { width: 5%; }
}

.legende {
    margin: 5px 0 10px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 1rem;
}
.legende-box {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    vertical-align: middle;
    border: 1px solid #222;
}