/* /style.css (Hauptordner) */
:root {
    --primary-dark: #1a2a3a; 
    --accent-red: #d9534f;   
    --accent-red-hover: #c9302c;
    --ocean-blue: #2c3e50;
    --light-bg: #f4f7f9;
}

body { 
    font-family: 'Segoe UI', Roboto, sans-serif; 
    background: var(--light-bg); 
    padding: 20px; 
    color: #333; 
    margin: 0;
}

.container { 
    max-width: 1650px; 
    margin: auto; 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
}

/* Buttons */
.btn-red { 
    background: var(--accent-red); 
    color: white; 
    border: none; 
    padding: 10px 25px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
}
.btn-red:hover { background: var(--accent-red-hover); transform: translateY(-1px); }

.btn-gray { 
    background: #6c757d; 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 4px; 
    cursor: pointer; 
    text-transform: uppercase; 
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}

/* Info Boxen */
.info-explanation { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
.info-rules { background: #f0f7ff; border: 1px solid #cce5ff; color: #004085; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 12px; line-height: 1.5; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
th { background: var(--primary-dark); color: white; padding: 12px; text-align: left; font-size: 12px; }
td { padding: 10px; border-bottom: 1px solid #eee; font-size: 13px; }
.row-campaign-header { background: #eaeded; font-weight: bold; border-top: 2px solid #ccc; }

/* Status Farben */
.acos-green { color: #28a745; font-weight: bold; }
.acos-red { color: var(--accent-red); font-weight: bold; }

/* Historie & Config Bar */
.history-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 20px; margin-bottom: 20px; }
.history-box { font-size: 11px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; padding: 10px; }
.config-bar { background: #eef7ff; border: 2px solid #b3d7ff; padding: 15px; border-radius: 8px; margin-bottom: 10px; font-size: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 8px; align-items: end; }
.config-bar label { font-weight: bold; display: block; margin-bottom: 3px; color: #004085; }
.config-bar input { padding: 4px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }

.soll-input { width: 60px; padding: 3px; border: 1px solid var(--accent-red); border-radius: 4px; text-align: right; font-weight: bold; }
.ist-budget-val { color: var(--accent-red); font-weight: bold; }