body{
 font-family:system-ui,Arial,sans-serif;
 background:#f4f6f8;
 margin:0;
 padding:16px;
}
.container{
 max-width:1200px;
 margin:auto;
 background:#fff;
 padding:24px;
 border-radius:20px;
}
.nav{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin-bottom:12px;
}
.nav a{
 padding:8px 16px;
 border-radius:20px;
 background:#eef1f4;
 text-decoration:none;
 color:#333;
 font-weight:500;
 font-size:14px;
}
.nav a.active{background:#007bff;color:#fff}
.nav .logout{background:#f7c5c5}

/* Countdown */
.countdown{
 font-size:13px;
 color:#666;
 margin-bottom:12px;
 text-align:right;
}
.countdown.warn{
 color:#d9534f;
 font-weight:bold;
 animation:pulse 1s infinite;
}
@keyframes pulse{
 0%{opacity:1}
 50%{opacity:.4}
 100%{opacity:1}
}

/* Cards */
.card{
 padding:14px;
 border-radius:16px;
 margin-bottom:12px;
 font-size:14px;
}
.gruen{background:#c8f7c5}
.gelb{background:#fff3b0}
.rot{background:#f7c5c5}

/* Tables – Desktop */
.table-wrap{
 overflow-x:auto;
}
table{
 width:100%;
 border-collapse:separate;
 border-spacing:0;
 font-size:14px;
}
table th{
 background:#f1f3f6;
 font-weight:600;
 padding:10px;
 border-bottom:2px solid #e0e4ea;
 text-align:center;
 white-space:nowrap;
}
table td{
 padding:8px;
 text-align:center;
 border-bottom:1px solid #eaecef;
}
table tr:hover td{
 background:#fafbfc;
}

/* Forms */
label{
 display:flex;
 align-items:center;
 gap:10px;
 padding:6px 0;
 font-size:15px;
}
input[type=checkbox]{transform:scale(1.25)}
button{
 width:100%;
 padding:14px;
 border:none;
 border-radius:14px;
 background:#28a745;
 color:#fff;
 font-size:16px;
 margin-top:14px;
 cursor:pointer;
}

/* Mobile tweaks */
@media (max-width:768px){
 .container{padding:16px}
 .nav{
  overflow-x:auto;
  flex-wrap:nowrap;
 }
 .nav a{white-space:nowrap}
 h2{font-size:18px}
 table{font-size:12px}
}