:root {
    --bg: #f8f9fc;
    --primary: #007bff;
    --success: #28a745;
    --gray: #e9ecef;
}

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

header { 
    background: white; padding: 10px 40px; 
    display: flex; justify-content: space-between; align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

.main-logo { height: 50px; width: auto; }
nav a { margin-left: 20px; text-decoration: none; color: #333; font-weight: bold; }

main { max-width: 900px; margin: 30px auto; padding: 25px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }

/* Wochen-Navigation */
.week-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
}

.nav-btn {
    background: var(--primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
}

.date-picker-wrapper {
    position: relative;
    cursor: pointer;
    background: var(--gray);
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
}

/* Verstecktes Datum-Input-Feld, das über das JS getriggert wird */
#dateSelect {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    left: 0;
}

.legende { display: flex; gap: 15px; margin-bottom: 25px; font-size: 0.85em; justify-content: center; }
.box { width: 15px; height: 15px; display: inline-block; border-radius: 3px; vertical-align: middle; }
.grau { background: white; border: 1px solid #ccc; }
.blau { background: var(--primary); }
.grün { background: var(--success); }

.table-container { width: 100%; overflow-x: auto; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { border: 1px solid #eee; padding: 12px; text-align: center; }
th { background: #f4f4f4; font-size: 0.9em; }

td[data-status] { cursor: pointer; transition: 0.2s; }
td.status-1 { background: var(--primary); color: white; }
td.status-2 { background: var(--success); color: white; }
td.pause { background: #333; color: white; cursor: default; font-weight: bold; font-size: 0.8em; }
td.empty { background: #fafafa; cursor: default; }

button#saveBtn { 
    background: var(--primary); color: white; border: none; padding: 15px; 
    width: 100%; border-radius: 8px; cursor: pointer; margin-top: 25px; font-weight: bold; font-size: 1.1em;
}
button:disabled { opacity: 0.6; cursor: not-allowed; }
#status { text-align: center; margin-top: 12px; font-weight: bold; height: 20px; }