.campaign-container {
    display: grid;
    grid-template-columns: repeat(100, 1fr);
    grid-auto-rows: minmax(40px, auto);
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    background-color: rgba(30, 30, 30, 0.9);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    padding: 20px 5px 0px 5px;
}

.campaign-row {
    font-size: 1rem;
    line-height: 1.2rem;
    display: contents;
}

.campaign-row > div {
    padding: 1px 5px;
    display: flex;
    align-items: center;
    min-height: 25px;
}

/* Spaltenbreiten - basierend auf Prozentangaben */
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-14 { grid-column: span 14; }
.col-15 { grid-column: span 15; }
.col-16 { grid-column: span 16; }
.col-17 { grid-column: span 17; }
.col-18 { grid-column: span 18; }
.col-20 { grid-column: span 20; }
.col-22 { grid-column: span 22; }
.col-23 { grid-column: span 23; }
.col-24 { grid-column: span 24; }
.col-26 { grid-column: span 26; }
.col-27 { grid-column: span 27; }


/* Positive/Negative Values */
.positive {
    color: #4ade80;
    font-weight: 700;
}

.negative {
    color: #f87171;
    font-weight: 700;
}

.stat {
    font-weight: 700;
    font-size: 1.5rem;
}

.grn {
    color: #299148;
}
.red {
    color: #d62424;
}
.pnk {
    color: #f527dd;
}
.gry {
    color: #606060;
}

.curdat {
    color: #a0a0a0;
}

.olddat {
    color: #f87171;
}

.closedat {
    color: #464646;
}


.highlight {
    justify-content: center;
    font-size: 1.5rem;
}

/* Cassandra Logo - spans 3 rows */
.cass-img {
    grid-row: span 3;
    display: flex;
    align-self: center;
    justify-self:end;
    max-height: 100px;
}

.cass-img img {
    width: 100%;
    max-height: 90px;
    object-fit: contain;
}

.cassandra-link {
    color: #f0f0f0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cassandra-link:hover {
    color: #ffcc33;
    text-decoration: underline;
}

.cass-img a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cass-img a:hover img {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.cass-cell {
    justify-content: center;
    padding: 2px;
}

/* Company Logo - spans 3 rows */
.corp-img {
    grid-row: span 3;
    display: flex;
    align-self: center;
    justify-self: start;
}

.corp-img img {
    width: 100%;
    max-height: 90px;
    object-fit: contain;
}

.logo-cell {
    justify-content: center;
    padding: 2px;
}

.cassandra-name {
    font-weight: 700;
    font-size: 1.3rem;
    justify-content: end;
    color: #f0f0f0;
}



.dat {
    font-weight: 400;
    font-size: 0.8rem;
    color: #ffcc33;
}

.pricedate {
    font-weight: 400;
    font-size: 1rem;
    justify-content: end;
    color: #a0a0a0;
}

/* Company Name */
.company-name {
    font-weight: bold;
    font-size: 1.3rem;
    color: #ffcc33;
}

.eml {
    padding: 2px 4px;
    font-weight: 400;
    font-size: 1rem;
    color: #888888;
    justify-content: start;
}

.country {
    justify-content: start;
    font-weight: 700;
    font-size: 1.1rem;
    color: #f0f0f0;
}

@media (max-width: 1024px) {
    .campaign-container {
        grid-template-columns: repeat(50, 1fr);
        font-size: 0.9rem;
    }
    
    /* Spalten halbieren */
    .col-4 { grid-column: span 2; }
    .col-5 { grid-column: span 3; }
    .col-7 { grid-column: span 4; }
    .col-8 { grid-column: span 4; }
    .col-9 { grid-column: span 5; }
    .col-10 { grid-column: span 5; }
    .col-12 { grid-column: span 6; }
    .col-14 { grid-column: span 7; }
    .col-15 { grid-column: span 8; }
    .col-16 { grid-column: span 8; }
    .col-17 { grid-column: span 9; }
    .col-18 { grid-column: span 9; }
    .col-27 { grid-column: span 14; }
}

/* Mobile - Stack alles vertikal */
@media (max-width: 768px) {
    .campaign-container {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    
    .campaign-row > div {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
        padding: 5px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Logos zentrieren im Mobile */
    .corp-img, .cass-img {
        justify-content: center !important;
        grid-row: span 1;
        max-height: 100px;
    }
    
    .corp-img img, .cass-img img {
        width: auto;
        max-height: 100px;
    }
    
    /* Performance-Werte größer */
    .highlight {
        font-size: 2rem;
        justify-content: center !important;
    }
    
    .stat {
        font-size: 1.8rem;
    }
}