:root {
        --secondary-color: #f1f1f1;
        --text-color: #555;
        --border-color: #ececec;
    }

    .dlaa table {
        width: 100%;
        border-collapse: collapse;
        overflow: hidden;
        border: 1px solid #ededed;
    }

    /* Header Styling */
    .dlaa thead {
        background-color: #fff;
        border-bottom: 2px solid var(--border-color);
    }

    .dlaa th {
        padding: 15px !important;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.05em;
        color: #222;
    }

    /* Spalten-Ausrichtung */
    .dlaa td {
        padding: 10px;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
    }

    /* Rank Spalte */
    .dlaa-rank { width: 50px; font-weight: bold; text-align: center; }
    
    /* Vorschau Spalte */
    .dlaa-preview { width: 80px; text-align: center; }
    .thumbnail {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    /* Produkt Spalte */
    .dlaa-product { text-align: left; font-size: 0.9em; }

    /* Preis Spalte */
    .dlaa-price { text-align: left; }
    .dlaa-product-price { font-size: 0.9em; }

    /* Kaufen Spalte */
    .dlaa-buy { text-align: center; width: 180px; }

    /* Button im Flatsome Stil */
    .buy-button {
        display: inline-block;
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        font-size: 0.8rem;
        text-transform: uppercase;
        border-radius: 5px;
        font-weight: bold;
        transition: background 0.3s ease;
    }
    .buy-button--green {
        background-color: #27AE5D;
    }
    .buy-button--red {
        background-color: #e74c3c;
    }
    .buy-button--system {
        background-color: var(--primary-color);
    }

    .buy-button--amazon {
        display: inline-block;
        padding: 8px 16px;
        text-decoration: none;
        font-size: 0.8rem;
        text-transform: uppercase;
        font-weight: bold;
        transition: background 0.3s ease;
        background: #f0c14b;
        background: linear-gradient(180deg, #f7dfa5, #f0c14b) repeat scroll 0 0 transparent;
        border-color: #9c7e31 #90742d #786025 !important;
        border-radius: 3px;
        box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4);
        color: #111 !important;
    }

    /* RESPONSIVE DESIGN */
    @media screen and (max-width: 768px) {
        .dlaa table, thead, tbody, th, td, tr {
            display: block;
        }

        /* Verstecke den Tabellen-Header auf Mobilgeräten */
        .dlaa thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        .dlaa tr {
            border: 1px solid var(--border-color);
            margin-bottom: 15px;
            background: white;
        }

        .dlaa td {
            border: none;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
            padding-left: 50%; /* Platz für das Label */
            text-align: right !important; /* Text rechtsbündig auf Mobile */
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        /* Label hinzufügen für Mobile über data-attribute */
        .dlaa td::before {
            content: attr(data-label);
            position: absolute;
            left: 15px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.75rem;
            color: #999;
        }

        .thumbnail {
            margin-left: auto;
        }

        .dlaa-rank, .dlaa-preview, .dlaa-product, .dlaa-price, .dlaa-buy {
            width: auto;
        }
    }