:root {
    --border: #d0d0d0;
    --bg: #ffffff;
    --fg: #1a1a1a;
    --muted: #666;
    --gruen: #2e7d32;
    --gelb: #f9a825;
    --rot: #c62828;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.brand { font-weight: 600; }
.user { color: var(--muted); margin-right: 12px; }

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

th, td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

form { margin-bottom: 16px; }
form.inline-form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

label {
    display: block;
    margin-bottom: 10px;
}

input, select, button {
    padding: 8px;
    font-size: 16px; /* verhindert Auto-Zoom in mobilen Browsern */
}

button {
    background: var(--fg);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-box {
    max-width: 320px;
    margin: 60px auto;
}

.flashes { list-style: none; padding: 0; }
.flash-error { color: var(--rot); }
.flash-info { color: var(--gruen); }

.ampel {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}
.ampel-gruen { background: var(--gruen); }
.ampel-gelb { background: var(--gelb); }
.ampel-rot { background: var(--rot); }

@media (max-width: 600px) {
    main { padding: 8px; }
    table { display: block; overflow-x: auto; white-space: nowrap; }
}