:root {
    --green: #2d6a2d;
    --green-light: #eaf3de;
    --green-mid: #639922;
    --blue: #185fa5;
    --blue-light: #e6f1fb;
    --amber: #ba7517;
    --amber-light: #faeeda;
    --red: #a32d2d;
    --red-light: #fcebeb;
    --gray: #f5f5f2;
    --border: #ddd;
    --text: #222;
    --text-muted: #666;
    --radius: 8px;
    --shadow: 0 1px 4px rgba(0,0,0,.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--gray); }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.navbar { background: var(--green); color: #fff; padding: 0 1.5rem; display: flex; align-items: center; gap: 1.5rem; height: 52px; }
.navbar strong { font-size: 16px; margin-right: 1.5rem; }
.navbar a { color: rgba(255,255,255,.85); font-size: 13px; padding: 6px 10px; border-radius: 5px; }
.navbar a:hover, .navbar a.active { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.nav-spacer { margin-left: auto; }
.nav-status { font-size: 12px; padding: 4px 9px; border-radius: 12px; }
.nav-status.nav-in { background: rgba(255,255,255,.22); color: #fff; }
.nav-status.nav-out { background: rgba(0,0,0,.18); color: rgba(255,255,255,.75); }
.navbar a.nav-logout { font-weight: 600; border: 1px solid rgba(255,255,255,.4); }
.container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.page-title { font-size: 20px; font-weight: 600; margin-bottom: 1.25rem; color: var(--green); }

/* Cards */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 0.5px solid var(--border); margin-bottom: 1.25rem; }
.card-header { padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: .5rem; }
.card-body { padding: 1.25rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 13px; font-weight: 500; transition: background .15s; }
.btn:hover { background: var(--gray); }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: #245424; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-amber { background: var(--amber); color: #fff; border-color: var(--amber); }

/* Forms */
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
input[type=text], input[type=number], input[type=password], input[type=email], select, textarea {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
    background: #fff; color: var(--text); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
.form-group.w120 input, .form-group.w120 select { width: 120px; }
.form-group.w180 input, .form-group.w180 select { width: 180px; }
.form-group.w240 input, .form-group.w240 select { width: 240px; }

/* Tables */
.tbl-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th { font-size: 11px; font-weight: 600; color: var(--text-muted); text-align: left; padding: 8px 8px; border-bottom: 2px solid var(--border); white-space: nowrap; background: var(--gray); }
table.data td { padding: 7px 8px; border-bottom: 1px solid #eee; vertical-align: middle; }
table.data tr:hover td { background: #f9f9f6; }
table.data input[type=number] { width: 70px; padding: 4px 6px; text-align: center; }

/* Preisvergleich: scrollbarer Bereich mit eingefrorener Kopfzeile */
.price-scroll { max-height: calc(100vh - 220px); overflow: auto; }
/* border-collapse:collapse verhindert sticky thead -> separate erzwingen */
#preisTable { border-collapse: separate; border-spacing: 0; }
#preisTable thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--gray);
    box-shadow: inset 0 -2px 0 var(--border);
}
#preisTable td { border-bottom: 1px solid #eee; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-amber { background: var(--amber-light); color: var(--amber); }
.badge-red { background: var(--red-light); color: var(--red); }
.badge-gray { background: #eee; color: #666; }

/* Price cells */
.price-best { background: var(--green-light); color: var(--green); font-weight: 600; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.price-normal { white-space: nowrap; }
.price-pause { color: var(--amber); font-size: 11px; }
.price-vk { background: var(--blue-light); color: var(--blue); font-weight: 600; border-radius: 4px; padding: 2px 6px; }
.price-gesamt { background: var(--green-light); color: var(--green); font-weight: 600; border-radius: 4px; padding: 2px 6px; }
.staffel-badge { font-size: 10px; color: var(--amber); margin-left: 2px; }
.na { color: #bbb; font-size: 11px; }

/* Alerts */
.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 13px; }
.alert-success { background: var(--green-light); color: var(--green); border: 1px solid #b6d98a; }
.alert-error { background: var(--red-light); color: var(--red); border: 1px solid #f0b0b0; }
.alert-info { background: var(--blue-light); color: var(--blue); border: 1px solid #aacfee; }

/* Bestellvorschlag */
.order-block { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; }
.order-block-header { background: var(--green-light); padding: .7rem 1rem; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.order-block-header.warning { background: var(--amber-light); }
.order-block-header.ok { background: var(--green-light); }
.order-block table { width: 100%; }
.order-block td, .order-block th { padding: 6px 10px; border-bottom: 1px solid #eee; font-size: 13px; }
.order-block th { background: var(--gray); font-size: 11px; color: var(--text-muted); font-weight: 600; }
.total-row td { font-weight: 600; background: var(--gray); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; }
.tab { padding: 8px 16px; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-muted); border: 1px solid transparent; border-bottom: none; }
.tab.active { background: #fff; border-color: var(--border); border-bottom-color: #fff; color: var(--green); margin-bottom: -2px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Filters bar */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters select, .filters input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: #fff; }
.filters label { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }

/* Responsive */
@media (max-width: 768px) {
    .container { padding: .75rem; }
    .form-row { flex-direction: column; }
    .navbar { gap: .75rem; }
}