body{

    margin:0;

    background:#1e1e1e;

    color:white;

    font-family:Arial;

}

header{

    background:#111;

    padding:15px;

    font-size:24px;

}

.container{

    display:flex;

    height:calc(100vh - 60px);

}

.sidebar{

    width:250px;

    background:#181818;

    padding:15px;

}

.sidebar button{

    width:100%;

    margin-bottom:10px;

    background:#2c2c2c;

    color:white;

    border:none;

    padding:15px;

    border-radius:10px;

    cursor:pointer;

    text-align:left;

    transition:.2s;

}

.sidebar button:hover{

    background:#0078d7;

}

.sidebar button.active{

    background:#0078d7;

}

.sidebar i{

    width:25px;

}

main{

    flex:1;

    padding:20px;

    overflow:auto;

}

.cards{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.card{

    min-width:250px;

    background:#2b2b2b;

    border-radius:15px;

    padding:25px;

    box-shadow:0 0 10px rgba(0,0,0,.3);

    font-size:20px;

}

.card-value{

    font-size:40px;

    font-weight:bold;

    margin-top:15px;

}

/* ===== Allgemeine Formular-Elemente ===== */

input[type=text],
input[type=number],
input[type=email],
input[type=password],
select,
textarea {
    width:100%;
    box-sizing:border-box;
    background:#2c2c2c;
    color:white;
    border:1px solid #444;
    border-radius:8px;
    padding:10px 12px;
    font-size:14px;
    font-family:Arial;
    margin-bottom:10px;
    outline:none;
    transition:.2s;
}

input:focus, select:focus, textarea:focus {
    border-color:#0078d7;
}

label {
    display:block;
    font-size:12px;
    color:#aaa;
    margin-bottom:4px;
    margin-top:6px;
}

button {
    cursor:pointer;
    border:none;
    border-radius:8px;
    padding:10px 18px;
    font-size:14px;
    font-family:Arial;
    transition:.2s;
}

.btn-primary {
    background:#0078d7;
    color:white;
}

.btn-primary:hover { background:#005fa3; }

.btn-secondary {
    background:#3c3c3c;
    color:white;
}

.btn-secondary:hover { background:#555; }

.btn-danger {
    background:#c0392b;
    color:white;
}

.btn-danger:hover { background:#96281b; }

.btn-icon {
    background:#3c3c3c;
    color:white;
    padding:8px 12px;
    border-radius:8px;
}

.btn-icon:hover { background:#555; }
.btn-icon.btn-danger { background:#c0392b; }
.btn-icon.btn-danger:hover { background:#96281b; }

.hint {
    color:#777;
    padding:20px 0;
    font-size:14px;
}

.hint.small { padding:8px 0; font-size:13px; }

/* ===== Produkte-Modul ===== */

.products-toolbar {
    display:flex;
    gap:12px;
    margin-bottom:16px;
    align-items:center;
}

.products-toolbar input {
    flex:1;
    margin-bottom:0;
}

.products-layout {
    display:flex;
    gap:20px;
    height:calc(100vh - 180px);
}

.products-list {
    width:320px;
    min-width:220px;
    background:#232323;
    border-radius:12px;
    padding:10px;
    overflow-y:auto;
    flex-shrink:0;
}

.products-detail {
    flex:1;
    background:#232323;
    border-radius:12px;
    padding:20px;
    overflow-y:auto;
}

.list-item {
    padding:12px 14px;
    border-radius:8px;
    cursor:pointer;
    margin-bottom:4px;
    transition:.15s;
}

.list-item:hover { background:#2e2e2e; }
.list-item.active { background:#0078d7; }

.list-item-title { font-weight:bold; font-size:14px; }
.list-item-sub { font-size:12px; color:#aaa; margin-top:2px; }
.list-item.active .list-item-sub { color:#cce4ff; }

.detail-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:16px;
}

.detail-header h2 { margin:0 0 4px; font-size:20px; }
.detail-sub { font-size:13px; color:#aaa; }

.detail-actions { display:flex; gap:8px; }

.detail-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:16px;
}

.detail-field {
    background:#2b2b2b;
    border-radius:8px;
    padding:10px 14px;
    font-size:13px;
}

.detail-field .label {
    display:block;
    font-size:11px;
    color:#888;
    margin-bottom:4px;
}

.detail-section {
    margin-top:20px;
}

.section-title {
    font-size:12px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:10px;
    font-weight:bold;
}

.stock-total {
    font-size:15px;
    margin-bottom:8px;
}

.stock-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    background:#2b2b2b;
    border-radius:8px;
    margin-bottom:6px;
    font-size:13px;
}

.stock-row i { color:#888; margin-right:6px; }

.action-row {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn-action {
    background:#2c2c2c;
    color:white;
    padding:10px 16px;
    border-radius:8px;
    font-size:13px;
    border:1px solid #444;
}

.btn-action:hover { background:#0078d7; border-color:#0078d7; }

.history-list { display:flex; flex-direction:column; gap:6px; }

.history-row {
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:#2b2b2b;
    border-radius:8px;
    padding:10px 14px;
    font-size:13px;
}

.history-icon { color:#888; width:20px; text-align:center; padding-top:1px; }
.history-info { flex:1; }
.history-comment { color:#aaa; font-size:12px; margin-top:2px; }
.history-meta { text-align:right; }
.history-date { font-size:11px; color:#777; margin-top:2px; }

.tag {
    display:inline-block;
    background:#2c2c2c;
    border:1px solid #444;
    border-radius:20px;
    padding:3px 10px;
    font-size:12px;
    margin-right:4px;
    margin-bottom:4px;
}

/* ===== Modal ===== */

.modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
}

.modal-box {
    background:#252525;
    border-radius:14px;
    padding:24px;
    width:100%;
    max-width:460px;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.modal-box h3 { margin:0 0 16px; font-size:17px; }

.modal-footer {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px;
}
/* ===== Seiten-Header ===== */

.page-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.page-header h1 { margin:0; }

.page-header-actions { display:flex; gap:10px; }

/* ===== Tabs ===== */

.tab-bar {
    display:flex;
    gap:6px;
    margin-bottom:16px;
    border-bottom:2px solid #333;
    padding-bottom:0;
}

.tab {
    background:none;
    border:none;
    color:#888;
    padding:8px 16px;
    font-size:14px;
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-2px;
    border-radius:0;
    transition:.15s;
}

.tab:hover { color:white; }
.tab.active { color:#0078d7; border-bottom-color:#0078d7; }

/* ===== Aufmass-Layout ===== */

.measurements-layout {
    display:flex;
    gap:20px;
    height:calc(100vh - 220px);
}

.measurements-list {
    width:300px;
    min-width:200px;
    background:#232323;
    border-radius:12px;
    padding:10px;
    overflow-y:auto;
    flex-shrink:0;
}

.measurements-detail {
    flex:1;
    background:#232323;
    border-radius:12px;
    padding:20px;
    overflow-y:auto;
}

.list-item-comment {
    font-size:12px;
    color:#aaa;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ===== Positionen-Tabelle ===== */

.section-title-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.btn-small {
    background:#2c2c2c;
    color:white;
    border:1px solid #444;
    border-radius:6px;
    padding:5px 12px;
    font-size:12px;
    cursor:pointer;
    transition:.15s;
}

.btn-small:hover { background:#0078d7; border-color:#0078d7; }

.items-table {
    background:#2b2b2b;
    border-radius:8px;
    overflow:hidden;
}

.items-header {
    display:grid;
    grid-template-columns:2fr 1fr 2fr auto;
    padding:8px 14px;
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid #383838;
}

.items-row {
    display:grid;
    grid-template-columns:2fr 1fr 2fr auto;
    padding:10px 14px;
    font-size:13px;
    border-bottom:1px solid #333;
    align-items:center;
}

.items-row:last-child { border-bottom:none; }

/* ===== Projekte ===== */

.project-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #333;
}

.project-row:last-of-type { border-bottom:none; }

.project-name { font-size:15px; font-weight:bold; }
.project-address { font-size:12px; color:#888; margin-top:2px; }
.project-actions { display:flex; gap:6px; }

/* ===== Danger-Soft Button ===== */

.btn-danger-soft {
    background:#2c2c2c;
    color:#e74c3c;
    border:1px solid #e74c3c;
}

.btn-danger-soft:hover { background:#e74c3c; color:white; border-color:#e74c3c; }

/* ===== Fahrzeuge-Modul ===== */

.vehicles-layout {
    display:flex;
    gap:20px;
    height:calc(100vh - 150px);
}

.vehicles-sidebar {
    width:240px;
    min-width:160px;
    background:#232323;
    border-radius:12px;
    padding:10px;
    overflow-y:auto;
    flex-shrink:0;
}

.vehicles-main {
    flex:1;
    background:#232323;
    border-radius:12px;
    padding:20px;
    overflow-y:auto;
}

.vehicle-header {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr auto;
    padding:8px 14px;
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid #383838;
}

.vehicle-row {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr auto;
    padding:10px 14px;
    font-size:13px;
    border-bottom:1px solid #333;
    align-items:center;
    gap:8px;
}

.vehicle-row:last-child { border-bottom:none; }
.vehicle-row.missing { background:rgba(231,76,60,.04); }
.vehicle-row.ok { background:rgba(39,174,96,.04); }

.row-sub {
    font-size:11px;
    color:#888;
    margin-top:2px;
}

.missing-summary {
    background:#2b2b2b;
    border-radius:8px;
    overflow:hidden;
}

.missing-row {
    display:flex;
    justify-content:space-between;
    padding:8px 14px;
    font-size:13px;
    border-bottom:1px solid #333;
}

.missing-row:last-child { border-bottom:none; }

.btn-warning {
    background:#e67e22;
    color:white;
    border:none;
}

.btn-warning:hover { background:#ca6f1e; }

/* ===== Inventur-Modul ===== */

.inv-layout {
    display:flex;
    gap:20px;
    height:calc(100vh - 200px);
}

.inv-panel {
    flex:1;
    background:#232323;
    border-radius:12px;
    padding:16px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:0;
}

.inv-panel-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:14px;
    gap:10px;
}

.inv-panel-title { font-size:15px; font-weight:bold; }
.inv-panel-sub { font-size:12px; color:#888; margin-top:3px; }

.inv-tool-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #2e2e2e;
    gap:10px;
}

.inv-tool-row.compact { padding:7px 0; }
.inv-tool-row:last-child { border-bottom:none; }

.inv-tool-info { flex:1; min-width:0; }
.inv-tool-name { font-size:14px; font-weight:bold; }
.inv-tool-sub { font-size:12px; color:#888; margin-top:2px; }

.inv-empty {
    text-align:center;
    padding:40px 20px;
    color:#777;
}

.btn-sm {
    padding:6px 12px;
    font-size:12px;
    border-radius:6px;
    white-space:nowrap;
}

/* Status-Badges */

.status-badge {
    display:inline-block;
    padding:2px 8px;
    border-radius:10px;
    font-size:11px;
    font-weight:bold;
}

.status-active { background:#1a4a1a; color:#27ae60; }
.status-borrowed { background:#1a3a5c; color:#3498db; }
.status-defective { background:#4a1a1a; color:#e74c3c; }
.status-lost { background:#3a2a1a; color:#e67e22; }
.status-retired { background:#2a2a2a; color:#888; }

/* Sammel-Inventur */

.bulk-progress {
    background:#333;
    border-radius:10px;
    height:8px;
    margin-bottom:8px;
    overflow:hidden;
}

.bulk-bar {
    background:#0078d7;
    height:100%;
    border-radius:10px;
    transition:.3s;
}

.bulk-list {
    max-height:300px;
    overflow-y:auto;
    margin-bottom:10px;
}

.bulk-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 4px;
    border-bottom:1px solid #333;
    cursor:pointer;
    font-size:13px;
    transition:.15s;
}

.bulk-row:hover { background:#2a2a2a; border-radius:6px; }
.bulk-row.found { color:#27ae60; }

/* Material-Inventur */

.inv-stock-layout {
    display:flex;
    gap:20px;
    height:calc(100vh - 200px);
}

.inv-loc-list {
    width:220px;
    background:#232323;
    border-radius:12px;
    padding:10px;
    overflow-y:auto;
    flex-shrink:0;
}

.inv-stock-main {
    flex:1;
    background:#232323;
    border-radius:12px;
    padding:20px;
    overflow-y:auto;
}

.inv-stock-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
    gap:12px;
}

.stock-inv-hint {
    background:#1e2e1e;
    border:1px solid #2a4a2a;
    border-radius:8px;
    padding:10px 14px;
    font-size:13px;
    color:#7ec87e;
    margin-bottom:14px;
}

.stock-inv-header {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr;
    padding:8px 14px;
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid #383838;
}

.stock-inv-row {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr;
    padding:8px 14px;
    font-size:13px;
    border-bottom:1px solid #2e2e2e;
    align-items:center;
    gap:8px;
    transition:.15s;
}

.stock-inv-row:last-child { border-bottom:none; }
.stock-inv-row.edited { background:rgba(0,120,215,.08); }

.qty-input {
    width:80px !important;
    padding:5px 8px !important;
    font-size:13px !important;
    margin:0 auto !important;
    display:block;
    text-align:right;
}

/* ===== Lieferungen-Modul ===== */

.deliveries-layout {
    display:flex;
    gap:20px;
    height:calc(100vh - 220px);
}

.deliveries-list {
    width:300px;
    min-width:200px;
    background:#232323;
    border-radius:12px;
    padding:10px;
    overflow-y:auto;
    flex-shrink:0;
}

.deliveries-detail {
    flex:1;
    background:#232323;
    border-radius:12px;
    padding:20px;
    overflow-y:auto;
}

.delivery-header {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr auto;
    padding:8px 14px;
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid #383838;
    gap:8px;
}

.delivery-row {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr auto;
    padding:10px 14px;
    font-size:13px;
    border-bottom:1px solid #2e2e2e;
    align-items:center;
    gap:8px;
}

.delivery-row:last-child { border-bottom:none; }
.delivery-row.done { background:rgba(39,174,96,.05); }

.order-header {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr;
    padding:8px 14px;
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid #383838;
    gap:8px;
}

.order-row {
    display:grid;
    grid-template-columns:3fr 1fr 1fr 1fr;
    padding:10px 14px;
    font-size:13px;
    border-bottom:1px solid #2e2e2e;
    align-items:center;
    gap:8px;
}

.order-row:last-child { border-bottom:none; }

/* ===== Werkzeuge-Modul ===== */

.tools-toolbar {
    display:flex;
    gap:10px;
    margin-bottom:16px;
    align-items:center;
}

.tools-toolbar input {
    flex:1;
    margin:0;
}

.tools-toolbar select {
    margin:0;
}

/* ===== Scanner-Modul ===== */

.scanner-header {
    margin-bottom:16px;
}

.scanner-mode-bar {
    display:flex;
    gap:10px;
}

.mode-btn {
    flex:1;
    padding:14px;
    font-size:16px;
    background:#2c2c2c;
    color:#aaa;
    border:2px solid transparent;
    border-radius:10px;
    transition:.2s;
}

.mode-btn:hover { background:#333; color:white; }
.mode-btn.active { background:#0a2a4a; color:#0078d7; border-color:#0078d7; }

.scanner-actions {
    display:flex;
    gap:10px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.action-tile {
    flex:1;
    min-width:80px;
    padding:14px 10px;
    background:#2c2c2c;
    color:#aaa;
    border:2px solid transparent;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:12px;
    transition:.2s;
    cursor:pointer;
}

.action-tile i { font-size:20px; }
.action-tile:hover { background:#333; color:white; }
.action-tile.active { background:#0a2a4a; color:#0078d7; border-color:#0078d7; }

.scanner-context {
    display:flex;
    align-items:center;
    gap:12px;
    background:#232323;
    border-radius:10px;
    padding:12px 16px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.ctx-label {
    font-size:13px;
    color:#aaa;
    white-space:nowrap;
    margin:0;
}

.ctx-select {
    flex:1;
    min-width:180px;
    margin:0;
    padding:8px 12px;
    font-size:14px;
}

.ctx-input {
    margin:0;
    padding:8px 12px;
    font-size:14px;
}

.scanner-input-area {
    margin-bottom:14px;
}

.scanner-input-wrap {
    display:flex;
    align-items:center;
    background:#2c2c2c;
    border:2px solid #444;
    border-radius:12px;
    padding:4px 4px 4px 16px;
    gap:10px;
    transition:.2s;
}

.scanner-input-wrap:focus-within {
    border-color:#0078d7;
}

.scanner-input-icon {
    color:#555;
    font-size:20px;
    flex-shrink:0;
}

.scanner-input {
    flex:1;
    background:transparent;
    border:none;
    color:white;
    font-size:18px;
    padding:10px 0;
    margin:0;
    outline:none;
    width:100%;
}

.scanner-input::placeholder { color:#555; }

.scanner-input-btn {
    background:#0078d7;
    color:white;
    border:none;
    border-radius:8px;
    padding:12px 20px;
    font-size:16px;
    cursor:pointer;
    transition:.2s;
    flex-shrink:0;
}

.scanner-input-btn:hover { background:#005fa3; }

.scanner-hint {
    font-size:12px;
    color:#666;
    margin-top:8px;
    padding-left:4px;
}

.scanner-result {
    background:#232323;
    border-radius:12px;
    padding:20px;
    margin-bottom:14px;
}

.result-title {
    font-size:18px;
    font-weight:bold;
    margin-bottom:8px;
}

.result-meta {
    font-size:13px;
    color:#aaa;
    margin-bottom:14px;
}

.result-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    border-bottom:1px solid #2e2e2e;
    font-size:14px;
}

.result-row:last-child { border-bottom:none; }
.result-row.clickable { cursor:pointer; padding:10px 8px; border-radius:6px; border:none; margin-bottom:4px; background:#2b2b2b; }
.result-row.clickable:hover { background:#333; }

.result-locations { margin-top:4px; }
.result-empty { color:#666; font-size:13px; padding:8px 0; }

.transfer-form {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
}

.tf-row {
    display:flex;
    align-items:center;
    gap:12px;
}

.tf-row label {
    min-width:60px;
    font-size:13px;
    color:#aaa;
    margin:0;
}

.tf-row select, .tf-row input {
    flex:1;
    margin:0;
    padding:8px 12px;
}

.scanner-feedback {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    border-radius:12px;
    font-size:15px;
    font-weight:bold;
}

.feedback-success { background:#0d2a0d; color:#27ae60; border:1px solid #27ae60; }
.feedback-error   { background:#2a0d0d; color:#e74c3c; border:1px solid #e74c3c; }
.feedback-warn    { background:#2a1e0d; color:#f39c12; border:1px solid #f39c12; }

/* ===== Kamera-Scanner ===== */

.scanner-cam-btn {
    background:#2c2c2c;
    color:#aaa;
    border:none;
    border-radius:8px;
    padding:12px 16px;
    font-size:16px;
    cursor:pointer;
    transition:.2s;
    flex-shrink:0;
}

.scanner-cam-btn:hover { background:#333; color:white; }

.camera-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.camera-box {
    width:100%;
    max-width:480px;
    background:#1a1a1a;
    border-radius:16px;
    overflow:hidden;
}

.camera-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 18px;
    background:#111;
    font-size:16px;
    font-weight:bold;
}

.camera-close {
    background:none;
    border:none;
    color:#aaa;
    font-size:20px;
    cursor:pointer;
    padding:4px 8px;
    border-radius:6px;
    transition:.2s;
}

.camera-close:hover { background:#333; color:white; }

#cameraReader {
    width:100%;
}

#cameraReader video {
    width:100% !important;
    border-radius:0 !important;
}

#cameraReader img { display:none; }

.camera-hint {
    text-align:center;
    padding:14px;
    font-size:14px;
    color:#888;
    background:#111;
}

/* ===== PWA Install-Banner ===== */

.install-banner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:linear-gradient(135deg, #003d6b, #0078d7);
    border-radius:14px;
    padding:18px 22px;
    margin-bottom:24px;
    gap:16px;
    box-shadow:0 4px 20px rgba(0,120,215,.3);
}

.install-banner-text {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:24px;
    color:#cce4ff;
}

.install-banner-text div { font-size:14px; }
.install-banner-text strong { font-size:16px; color:white; display:block; margin-bottom:2px; }

/* ===== Dashboard ===== */

.dash-kpi-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:14px;
    margin-bottom:20px;
}

.dash-kpi {
    background:#232323;
    border-radius:14px;
    padding:20px 18px;
    transition:.2s;
    position:relative;
    overflow:hidden;
}

.dash-kpi:hover { background:#2a2a2a; transform:translateY(-2px); }

.dash-kpi-icon { font-size:22px; margin-bottom:10px; }
.dash-kpi-value { font-size:36px; font-weight:bold; line-height:1; margin-bottom:6px; }
.dash-kpi-label { font-size:13px; color:#888; }
.dash-kpi-sub { font-size:11px; color:#f39c12; margin-top:4px; }

.skeleton {
    background:linear-gradient(90deg, #232323 25%, #2a2a2a 50%, #232323 75%);
    background-size:200% 100%;
    animation:shimmer 1.4s infinite;
    height:110px;
}

@keyframes shimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

.dash-main {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

@media (max-width:800px) {
    .dash-main { grid-template-columns:1fr; }
}

.dash-col { display:flex; flex-direction:column; gap:16px; }

.dash-widget {
    background:#232323;
    border-radius:14px;
    overflow:hidden;
}

.dash-widget-title {
    padding:14px 18px;
    font-size:14px;
    font-weight:bold;
    border-bottom:1px solid #2e2e2e;
    display:flex;
    align-items:center;
    gap:8px;
}

.dash-widget-body { padding:10px 0; }

.dash-loading {
    text-align:center;
    padding:20px;
    color:#555;
    font-size:20px;
}

.dash-empty {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:24px;
    color:#666;
    font-size:13px;
    text-align:center;
}

/* Warnungen */

.dash-warn-row {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 18px;
    cursor:pointer;
    transition:.15s;
    border-bottom:1px solid #2a2a2a;
}

.dash-warn-row:last-child { border-bottom:none; }
.dash-warn-row:hover { background:#2a2a2a; }

.dash-warn-icon { width:28px; text-align:center; font-size:16px; flex-shrink:0; }
.dash-warn-info { flex:1; min-width:0; }
.dash-warn-title { font-size:13px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-warn-sub { font-size:11px; color:#888; margin-top:2px; }

/* Werkzeug-Status Bar */

.dash-bar-track {
    display:flex;
    height:12px;
    border-radius:6px;
    overflow:hidden;
    margin:12px 18px 14px;
    gap:2px;
}

.dash-bar-seg { border-radius:3px; transition:.3s; }

.dash-bar-legend {
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    padding:0 18px 14px;
    font-size:13px;
    color:#aaa;
}

.dash-legend-item { display:flex; align-items:center; gap:6px; }
.dash-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Letzte Aktivitaeten */

.dash-activity-row {
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:10px 18px;
    border-bottom:1px solid #2a2a2a;
    font-size:13px;
}

.dash-activity-row:last-child { border-bottom:none; }

.dash-activity-icon { width:28px; text-align:center; font-size:14px; padding-top:2px; flex-shrink:0; }
.dash-activity-info { flex:1; min-width:0; }
.dash-activity-title { line-height:1.4; }
.dash-activity-qty { font-size:12px; color:#888; margin-right:3px; }
.dash-activity-sub { font-size:11px; color:#888; margin-top:2px; }
.dash-activity-date { font-size:11px; color:#666; white-space:nowrap; flex-shrink:0; padding-top:2px; }

/* ===== Header Benutzer ===== */

header { display:flex; justify-content:space-between; align-items:center; }

.header-user {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#ccc;
}

.header-logout {
    background:none;
    border:none;
    color:#888;
    font-size:16px;
    cursor:pointer;
    padding:6px 8px;
    border-radius:6px;
    transition:.15s;
}

.header-logout:hover { background:#333; color:white; }

/* ===== Login ===== */

.login-overlay {
    position:fixed;
    inset:0;
    background:#1e1e1e;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.login-box {
    width:100%;
    max-width:380px;
    background:#252525;
    border-radius:18px;
    padding:36px 32px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.login-logo {
    text-align:center;
    font-size:28px;
    font-weight:bold;
    margin-bottom:28px;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.login-logo i { font-size:48px; color:#0078d7; }

.login-error {
    background:#2a0d0d;
    color:#e74c3c;
    border:1px solid #e74c3c;
    border-radius:8px;
    padding:10px 14px;
    font-size:13px;
    margin-bottom:14px;
}

/* ===== Benutzer-Modul ===== */

.user-list-header {
    display:grid;
    grid-template-columns:2fr 1.5fr 1fr 1fr auto;
    padding:8px 14px;
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.06em;
    border-bottom:1px solid #333;
    gap:10px;
}

.user-row {
    display:grid;
    grid-template-columns:2fr 1.5fr 1fr 1fr auto;
    padding:12px 14px;
    font-size:13px;
    border-bottom:1px solid #2a2a2a;
    align-items:center;
    gap:10px;
    background:#232323;
    border-radius:0;
    transition:.15s;
}

.user-row:first-of-type { border-radius:0; }
.user-row:hover { background:#2a2a2a; }
.user-row.inactive { opacity:.5; }

.user-name { font-weight:bold; font-size:14px; }
.user-sub { color:#888; }

/* ===== Einheitliches Modul-Styling ===== */

main h1 {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

main h1 i {
    color: #0078d7;
    font-size: 20px;
}

/* Panel-Konsistenz: alle Listen- und Detail-Panels */
.products-list,
.products-detail,
.measurements-list,
.measurements-detail,
.vehicles-sidebar,
.vehicles-main,
.deliveries-list,
.deliveries-detail,
.inv-panel,
.inv-loc-list,
.inv-stock-main {
    border: 1px solid #2a2a2a;
}

/* Hover-Effekt auf alle klickbaren Kacheln */
.dash-kpi,
.list-item,
.inv-tool-row,
.dash-warn-row,
.dash-activity-row,
.bulk-row {
    transition: background .15s, transform .1s;
}

/* Sektions-Titel einheitlich */
.section-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tabs aktiv-Indikator auch auf mobile deutlicher */
.tab.active {
    font-weight: bold;
}

/* Scrollbar dezent stylen */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Tabellenzeilen — einheitlicher Hover */
.vehicle-row:hover,
.delivery-row:hover,
.order-row:hover,
.stock-inv-row:hover,
.items-row:hover,
.history-row:hover,
.project-row:hover,
.user-row:hover {
    background: #2a2a2a;
}

/* Buttons in Aktions-Zeilen — einheitlichere Größe */
.action-row .btn-action {
    flex: 1;
    min-width: 120px;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Detail-Felder: etwas mehr Luft */
.detail-grid {
    margin-bottom: 20px;
}

/* Modal: dezente Animation */
.modal-overlay {
    animation: fadeIn .15s ease;
}

.modal-box {
    animation: slideUp .15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Sidebar: aktiver Button deutlicher */
.sidebar button.active {
    box-shadow: inset 3px 0 0 white;
}

/* Page-Header Abstand einheitlich */
.page-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #2a2a2a;
}

/* ===== Inventur-Session-Modus ===== */

.session-progress-bar {
    height: 10px;
    background: #2a2a2a;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}

.session-progress-fill {
    height: 100%;
    background: #0078d7;
    border-radius: 5px;
    transition: width .4s ease;
}

.session-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 16px;
}

.session-scan-area {
    margin-bottom: 12px;
    position: relative;
}

.session-search-results {
    background: #1e1e1e;
    border: 1px solid #0078d7;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.session-search-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #2a2a2a;
    font-size: 14px;
    transition: .15s;
}

.session-search-item:last-child { border-bottom: none; }
.session-search-item:hover { background: #2a2a2a; }

.session-item-name { font-weight: bold; }

.session-duplicate-warn {
    background: #2a1e00;
    border: 1px solid #f39c12;
    border-radius: 10px;
    padding: 12px 16px;
    color: #f39c12;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.session-duplicate-warn button { margin-left: auto; }

.session-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.session-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #2b2b2b;
    border-radius: 8px;
    gap: 12px;
    border-left: 3px solid #0078d7;
}

.session-item-info { flex: 1; min-width: 0; }

/* ===== Ausleihen Typ-Toggle ===== */

.borrow-type-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.borrow-type-btn {
    flex: 1;
    padding: 9px 14px;
    background: #2c2c2c;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
}

.borrow-type-btn:hover { background: #333; color: white; }
.borrow-type-btn.active { background: #0a2a4a; color: #0078d7; border-color: #0078d7; }

/* ===== Kollegen-Banner in Werkzeug-Detail ===== */

.colleague-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a2a3a;
    border: 1px solid #0078d7;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 15px;
    color: #7ec8ff;
}

.colleague-banner i { font-size: 20px; color: #0078d7; }


/* =====================================================
   RESPONSIVE / MOBILE DESIGN  (ab hier alles Mobile)
   Breakpoint: 768px
   ===================================================== */

/* Kein horizontales Scrollen global */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }

/* Logo-Varianten */
.logo-short { display: none; }

@media (max-width: 768px) {
    .logo-full  { display: none; }
    .logo-short { display: inline; }
}

/* ===== MOBILE LAYOUT (fixed Header + fixed Bottom-Nav) ===== */
@media (max-width: 768px) {

    /* Header: oben fixiert */
    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 600;
        padding: 0 12px;
        height: 48px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        flex-shrink: 1;
    }

    .header-user {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        flex-shrink: 0;
    }

    #headerUserName {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Container: normaler Block, kein Flex */
    .container {
        display: block;
        height: auto;
        /* Platz für Header oben (48px) und Bottom-Nav unten (60px) */
        margin-top: 48px;
        margin-bottom: 60px;
    }

    /* Main: volle Breite, scrollbar */
    main {
        flex: none;
        width: 100%;
        padding: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: calc(100vh - 108px);
    }

    /* Sidebar: Bottom-Navigation, fixiert am unteren Rand */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 600;
        width: 100%;
        height: 60px;
        background: #111;
        border-top: 1px solid #2a2a2a;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar::-webkit-scrollbar { display: none; }

    .sidebar button {
        flex-shrink: 0;
        min-width: 64px;
        width: auto;
        height: 60px;
        margin: 0;
        padding: 4px 8px 6px;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-size: 10px;
        background: transparent;
        color: #888;
        border: none;
        border-right: 1px solid #1e1e1e;
        text-align: center;
    }

    .sidebar button i {
        width: auto;
        font-size: 20px;
        margin-bottom: 1px;
    }

    .sidebar button.active {
        background: transparent;
        color: #0078d7;
        border-top: 2px solid #0078d7;
        box-shadow: none;
    }

    .sidebar button:hover { background: #1a1a1a; }

    /* ===== Alle Split-Layouts: gestapelt ===== */
    .products-layout,
    .measurements-layout,
    .vehicles-layout,
    .deliveries-layout,
    .inv-stock-layout {
        flex-direction: column;
        height: auto;
        gap: 12px;
    }

    .products-list,
    .measurements-list,
    .deliveries-list,
    .vehicles-sidebar,
    .inv-loc-list {
        width: 100%;
        min-width: 0;
        max-height: 40vh;
    }

    .products-detail,
    .measurements-detail,
    .deliveries-detail,
    .vehicles-main,
    .inv-stock-main {
        width: 100%;
        min-width: 0;
    }

    /* Mobile: nur Liste ODER Detail anzeigen */
    .mobile-show-detail .products-list,
    .mobile-show-detail .measurements-list,
    .mobile-show-detail .deliveries-list,
    .mobile-show-detail .vehicles-sidebar,
    .mobile-show-detail .inv-loc-list { display: none !important; }

    /* Inventur-Layout */
    .inv-layout {
        flex-direction: column;
        height: auto;
        gap: 12px;
    }

    .inv-panel { min-height: 150px; }

    /* ===== Dashboard ===== */
    .dash-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .dash-kpi {
        padding: 14px 12px;
    }

    .dash-kpi-value { font-size: 28px; }
    .dash-kpi-label { font-size: 12px; }
    .dash-kpi-icon { font-size: 18px; margin-bottom: 8px; }

    .dash-main { grid-template-columns: 1fr; gap: 12px; }

    .install-banner { flex-direction: column; gap: 10px; padding: 14px; }

    /* ===== Modals: Bottom-Sheet ===== */
    .modal-overlay { align-items: flex-end; }

    .modal-box {
        max-width: 100%;
        width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 92vh;
        animation: slideUpMobile .2s ease;
    }

    @keyframes slideUpMobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* ===== Page-Header ===== */
    .page-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-header h1 { font-size: 17px; }
    .page-header-actions { flex-wrap: wrap; gap: 6px; }

    /* ===== Toolbars ===== */
    .products-toolbar,
    .tools-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .products-toolbar input { flex: 1; min-width: 0; margin: 0; }
    .tools-toolbar input { flex: 1; min-width: 0; margin: 0; }
    .tools-toolbar select { flex: 1; min-width: 0; margin: 0; }

    /* ===== Detail ===== */
    .detail-grid { grid-template-columns: 1fr; }

    .detail-header { flex-wrap: wrap; gap: 8px; }
    .detail-header h2 { font-size: 17px; word-break: break-word; }
    .detail-header > div:first-child { min-width: 0; flex: 1; }

    /* ===== Aktions-Buttons ===== */
    .btn-action {
        flex: 1;
        min-width: calc(50% - 5px);
        font-size: 12px;
        padding: 10px 8px;
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* ===== Tabellen ===== */
    .vehicle-header,
    .vehicle-row {
        grid-template-columns: 2fr 1fr 1fr auto;
        font-size: 12px;
        gap: 4px;
    }

    .delivery-header,
    .delivery-row {
        grid-template-columns: 2fr 1fr 1fr;
        font-size: 12px;
    }

    .delivery-row > div:nth-child(4),
    .delivery-row > div:nth-child(5),
    .delivery-header > div:nth-child(4),
    .delivery-header > div:nth-child(5) { display: none; }

    .items-header,
    .items-row { font-size: 12px; }

    .stock-inv-row { font-size: 12px; gap: 4px; }
    .stock-inv-header { font-size: 10px; }

    .user-list-header,
    .user-row {
        grid-template-columns: 2fr 1fr auto;
    }

    .user-list-header > div:nth-child(2),
    .user-row > div:nth-child(2),
    .user-list-header > div:nth-child(4),
    .user-row > div:nth-child(4) { display: none; }

    /* ===== Scanner ===== */
    .scanner-actions { gap: 6px; }

    .action-tile {
        min-width: 58px;
        padding: 10px 6px;
        font-size: 11px;
    }

    .action-tile i { font-size: 17px; }

    .scanner-context { flex-wrap: wrap; gap: 8px; }
    .ctx-select, .ctx-input { min-width: 0; flex: 1; }

    /* ===== Tabs ===== */
    .tab-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab { white-space: nowrap; padding: 8px 12px; font-size: 13px; }

    /* ===== Inv-Stock-Header ===== */
    .inv-stock-header { flex-wrap: wrap; gap: 8px; }

    /* ===== Borrow-Toggle ===== */
    .borrow-type-toggle { flex-wrap: wrap; }

    /* ===== Zurück-Button ===== */
    .mobile-back-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #2c2c2c;
        border: none;
        color: #0078d7;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 12px;
        width: 100%;
    }

    /* ===== Allgemeine Overflow-Kontrolle ===== */
    main > * { max-width: 100%; }

    input, select, textarea { max-width: 100%; }

    /* Inline-Styles mit festen Breiten überschreiben */
    .inv-stock-header input,
    .inv-stock-header [style*="width"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Desktop: Zurück-Button nie sichtbar */
@media (min-width: 769px) {
    .mobile-back-btn { display: none !important; }
}

/* ===== Artikelbild ===== */

.product-image-wrap {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #2a2a2a;
    border: 2px dashed #444;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-wrap:hover {
    border-color: #0078d7;
    background: #1a2a3a;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.product-image-placeholder {
    color: #555;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-image-wrap:hover .product-image-placeholder {
    color: #0078d7;
}

@media (max-width: 768px) {
    .product-image-wrap {
        width: 64px;
        height: 64px;
    }
}

/* ===== Artikel-Listenvorschau mit Bild ===== */

.list-item-with-img {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-item-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 16px;
}

.list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.list-item.active .list-item-thumb {
    background: rgba(255,255,255,.15);
}

.list-item.active .list-item-thumb i {
    color: rgba(255,255,255,.5);
}

/* ===== Verteilerplanung ===== */

.board-layout { display:flex; flex-direction:column; gap:14px; }

.board-group {
    border-radius:10px;
    overflow:hidden;
    border:1px solid #333;
}

.board-group-direct { border-color:#444; }

.board-rcd-header {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:#0a2a4a;
    color:#7ec8ff;
    font-size:14px;
}

.board-direct-header { background:#2a2a2a; color:#aaa; }

.rcd-count {
    margin-left:auto;
    font-size:12px;
    background:rgba(255,255,255,.1);
    padding:2px 8px;
    border-radius:10px;
}

.board-circuits { background:#1e1e1e; }

.board-circuit-row {
    display:grid;
    grid-template-columns:1fr auto auto;
    padding:10px 14px;
    border-bottom:1px solid #2a2a2a;
    align-items:center;
    gap:10px;
}

.board-circuit-row:last-child { border-bottom:none; }

.board-circuit-name { font-size:14px; font-weight:bold; }
.board-circuit-type { font-size:12px; color:#888; margin-top:2px; }

.board-circuit-spec {
    display:flex;
    align-items:center;
    gap:6px;
}

.phase-badge {
    display:inline-block;
    padding:2px 6px;
    border-radius:4px;
    font-size:11px;
    font-weight:bold;
}

.phase-1 { background:#1a3a1a; color:#27ae60; }
.phase-2 { background:#1a2a4a; color:#3498db; }
.phase-3 { background:#3a1a1a; color:#e74c3c; }

.breaker-label {
    font-size:13px;
    font-weight:bold;
    color:#ccc;
    min-width:40px;
}

.board-circuit-actions { display:flex; gap:4px; }

/* Phase-Toggle */
.phase-toggle {
    display:flex;
    gap:6px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.phase-btn {
    flex:1;
    min-width:80px;
    padding:8px 12px;
    background:#2c2c2c;
    color:#aaa;
    border:1px solid #444;
    border-radius:8px;
    font-size:13px;
    cursor:pointer;
    transition:.15s;
}

.phase-btn:hover { background:#333; color:white; }
.phase-btn.active { background:#0a2a4a; color:#0078d7; border-color:#0078d7; }

.form-hint {
    font-size:11px;
    color:#888;
    margin-top:-6px;
    margin-bottom:10px;
    font-style:italic;
}

/* Stueckliste */
.parts-table { border-radius:8px; overflow:hidden; }

.parts-header {
    display:grid;
    grid-template-columns:1fr auto;
    padding:8px 14px;
    background:#333;
    font-size:11px;
    color:#aaa;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.parts-row {
    display:grid;
    grid-template-columns:1fr auto;
    padding:10px 14px;
    font-size:13px;
    border-bottom:1px solid #2a2a2a;
    background:#2b2b2b;
}

.parts-row:last-child { border-bottom:none; }
.parts-row:nth-child(even) { background:#262626; }

.board-circuit-pos {
    font-size: 11px;
    color: #0078d7;
    margin-top: 2px;
}

.board-group-placeholder { border-color:#333; }
.board-placeholder-header { background:#1e1e1e; color:#777; }

.fi-pos-badge {
    background: rgba(0,120,215,.25);
    color: #7ec8ff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: normal;
}

.board-warning {
    display: flex;
    gap: 10px;
    background: #2a1800;
    border: 1px solid #e67e22;
    border-radius: 10px;
    padding: 12px 16px;
    color: #f39c12;
    font-size: 13px;
    margin-bottom: 14px;
}

.board-warning i { font-size: 18px; flex-shrink: 0; padding-top: 2px; }

/* ===== Favoriten Schnellzugriff ===== */

#favoritesWidget {
    margin-bottom: 16px;
}

.fav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.fav-card {
    background: #2b2b2b;
    border-radius: 10px;
    overflow: hidden;
    width: calc(33.333% - 7px);
    min-width: 160px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .fav-card { width: calc(50% - 5px); min-width: 140px; }
}

.fav-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    transition: .15s;
}

.fav-card-top:hover { background: #333; }

.fav-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.fav-img-placeholder {
    width: 44px;
    height: 44px;
    background: #333;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 18px;
    flex-shrink: 0;
}

.fav-info { min-width: 0; }
.fav-name  { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-stock { font-size: 11px; color: #888; margin-top: 2px; }

.fav-actions {
    display: flex;
    border-top: 1px solid #333;
}

.fav-btn {
    flex: 1;
    padding: 8px 4px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 11px;
    cursor: pointer;
    transition: .15s;
    border-right: 1px solid #333;
}

.fav-btn:last-child { border-right: none; }
.fav-btn:hover { background: #0078d7; color: white; }
.fav-btn-in:hover { background: #27ae60; color: white; }
.fav-btn i { display: block; font-size: 14px; margin-bottom: 2px; }

/* ===== Verteiler — Reihen-Ansicht ===== */

.board-rows-view { display:flex; flex-direction:column; gap:12px; }

.board-row-block { background:#232323; border-radius:10px; overflow:hidden; border:1px solid #2a2a2a; }

.board-row-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px; background:#1e1e1e; border-bottom:1px solid #2a2a2a;
}

.board-row-title {
    display:flex; align-items:center; gap:8px; font-weight:bold; font-size:14px;
}

.board-row-slots { font-size:11px; color:#555; background:#2a2a2a; padding:2px 6px; border-radius:4px; }

.board-row-empty { font-size:12px; color:#555; font-style:italic; }
.board-row-count { font-size:12px; color:#888; }

.board-circuit-list { padding:6px; }

.board-circuit-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 10px; border-radius:8px; margin-bottom:4px; background:#2b2b2b;
    transition:.15s;
}

.board-circuit-item:hover { background:#2e2e2e; }
.board-circuit-item:last-child { margin-bottom:0; }

.board-circuit-fi { background:#0a1e35; border-left:3px solid #0078d7; }
.board-circuit-ph { background:#1e1e1e; border-left:3px solid #444; }

.circuit-item-left { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }

.circuit-slot-badge {
    font-size:10px; color:#555; background:#1a1a1a;
    padding:2px 5px; border-radius:4px; white-space:nowrap; flex-shrink:0;
}

.board-circuit-fi .circuit-slot-badge { color:#0078d7; background:#0a2040; }

.circuit-name { font-size:13px; font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.circuit-sub  { font-size:11px; color:#888; margin-top:1px; }

.circuit-item-actions { display:flex; gap:4px; flex-shrink:0; }

/* =====================================================
   DESIGN-UPDATE — Alle Module
   ===================================================== */

/* ===== Globale Verbesserungen ===== */

/* Subtile Seitenleisten-Trennlinie */
.sidebar {
    border-right: 1px solid #1a1a1a;
}

/* Header schicker */
header {
    background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
    border-bottom: 1px solid #222;
}

.logo i { color: #0078d7; }

/* ===== Panel-Rahmen mit Farbakzent oben ===== */

.products-list,
.products-detail,
.measurements-list,
.measurements-detail,
.vehicles-sidebar,
.vehicles-main,
.deliveries-list,
.deliveries-detail,
.inv-panel,
.inv-loc-list,
.inv-stock-main {
    border-top: 2px solid #0078d7;
}

/* ===== Listenelement-Verbesserungen ===== */

.list-item {
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background .15s, border-color .15s;
}

.list-item:hover {
    background: #252525;
    border-left-color: #0078d7;
}

.list-item.active {
    background: linear-gradient(135deg, #003d6b, #0055a0);
    border-left-color: #00aaff;
}

/* ===== Section-Titel mit Akzentlinie ===== */

.section-title {
    position: relative;
    padding-left: 10px;
    color: #7ec8ff;
    letter-spacing: .1em;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: #0078d7;
    border-radius: 2px;
}

/* ===== Detail-Header verbessert ===== */

.detail-header {
    padding-bottom: 14px;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 18px;
}

.detail-header h2 {
    color: #fff;
    font-size: 20px;
}

/* ===== Detail-Felder mit hover ===== */

.detail-field {
    border: 1px solid #2a2a2a;
    transition: border-color .15s, background .15s;
    cursor: default;
}

.detail-field:hover {
    border-color: #0078d7;
    background: #2e2e2e;
}

.detail-field .label {
    color: #0078d7;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ===== Stock-Rows ===== */

.stock-row {
    border: 1px solid #2a2a2a;
    transition: border-color .15s;
}

.stock-row:hover {
    border-color: #0078d7;
}

/* ===== Aktions-Buttons farbiger ===== */

.btn-action {
    transition: background .15s, border-color .15s, transform .1s;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,120,215,.3);
}

/* ===== Tags hübscher ===== */

.tag {
    background: #0a2a4a;
    border-color: #0078d7;
    color: #7ec8ff;
}

/* ===== Werkzeug-Status-Badges ===== */

.status-active   { background: #0d2a0d; color: #4cba4c; border: 1px solid #27ae60; }
.status-borrowed { background: #0a1e3a; color: #5aadea; border: 1px solid #3498db; }
.status-defective{ background: #2a0d0d; color: #e85050; border: 1px solid #e74c3c; }
.status-lost     { background: #2a1a0a; color: #f0a030; border: 1px solid #e67e22; }
.status-retired  { background: #1a1a1a; color: #888; border: 1px solid #555; }

/* ===== Reihen-Tabellen hübscher ===== */

.vehicle-row.missing {
    border-left: 3px solid #e74c3c;
    background: rgba(231,76,60,.06);
}

.vehicle-row.ok {
    border-left: 3px solid #27ae60;
}

/* ===== Board-Gruppen (Verteiler) ===== */

.board-group {
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.board-rcd-header {
    background: linear-gradient(135deg, #0a1e35, #0a2a4a);
}

/* ===== History-Rows ===== */

.history-row {
    border-left: 3px solid #2a2a2a;
    transition: border-color .15s;
}

.history-row:hover {
    border-left-color: #0078d7;
    background: #2e2e2e;
}

/* ===== Modal-Box verfeinert ===== */

.modal-box {
    border: 1px solid #2a2a2a;
    border-top: 3px solid #0078d7;
}

.modal-box h3 {
    color: #7ec8ff;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

/* ===== Tab-Bar ===== */

.tab.active {
    color: #7ec8ff;
    border-bottom-color: #0078d7;
}

/* ===== Page-Header aufgewertet ===== */

.page-header {
    padding-bottom: 16px;
    border-bottom: 1px solid #1e1e1e;
}

.page-header h1 {
    font-size: 22px;
    color: #fff;
}

.page-header h1 i {
    color: #0078d7;
    font-size: 20px;
}

/* ===== Dashboard-Cards verfeinert ===== */

.dash-kpi {
    border: 1px solid #2a2a2a;
    border-top: 3px solid #0078d7;
    background: linear-gradient(160deg, #252525, #1e1e1e);
}

.dash-kpi:hover {
    border-top-color: #00aaff;
    box-shadow: 0 6px 20px rgba(0,120,215,.2);
}

.dash-widget {
    border: 1px solid #2a2a2a;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.dash-widget-title {
    background: linear-gradient(135deg, #1a1a1a, #222);
    border-bottom: 1px solid #2a2a2a;
    font-size: 13px;
    font-weight: bold;
    color: #ccc;
}

.dash-widget-title i {
    color: #0078d7;
}

/* ===== Warn-Rows Dashboard ===== */

.dash-warn-row:hover {
    border-left: 3px solid #f39c12;
}

/* ===== Fav-Cards ===== */

.fav-card {
    border: 1px solid #2a2a2a;
    border-top: 2px solid #0078d7;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    transition: border-top-color .15s, box-shadow .15s;
}

.fav-card:hover {
    border-top-color: #00aaff;
    box-shadow: 0 4px 16px rgba(0,120,215,.2);
}

/* ===== Scrollbar noch dezenter ===== */

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3a3a3a, #2a2a2a);
}

/* ===== Inputs fokussiert ===== */

input:focus, select:focus, textarea:focus {
    border-color: #0078d7;
    box-shadow: 0 0 0 2px rgba(0,120,215,.15);
}

/* ===== Hint-Text ===== */

.hint {
    color: #666;
    font-style: italic;
}

.hint i {
    color: #0078d7;
}

/* ===== Install-Banner ===== */

.install-banner {
    border: 1px solid rgba(0,120,215,.3);
}

/* Mobile: Panel-Borders behalten */
@media (max-width: 768px) {
    .products-list,
    .products-detail,
    .measurements-list,
    .measurements-detail,
    .vehicles-sidebar,
    .vehicles-main,
    .deliveries-list,
    .deliveries-detail {
        border-top: 2px solid #0078d7;
        border-left: none;
    }
}

/* ===== VDE Erstprüfung ===== */

.vde-progress-bar {
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden;
}
.vde-progress-bar-inner {
    height: 100%;
    background: #0078d7;
    border-radius: 3px;
    transition: width .3s;
}
.vde-circuit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #2a2a2a;
    margin-bottom: 4px;
    background: #1e1e1e;
    transition: background .15s;
}
.vde-circuit-row:hover { background: #252525; }
.vde-circuit-row.selected { border-color: #0078d7; background: #1a2a3a; }
.vde-circuit-name { flex: 1; font-size: .85rem; }
.vde-circuit-meta { font-size: .75rem; color: #888; }
.vde-indicator {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vde-indicator.ok  { background: #27ae60; }
.vde-indicator.nok { background: #e74c3c; }
.vde-indicator.pending { background: #888; }
.vde-val  { color: #ccc; font-size: .85rem; }
.vde-ok   { color: #27ae60; font-weight: bold; }
.vde-nok  { color: #e74c3c; font-weight: bold; }
.vde-measure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.vde-iso-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.vde-measure-section {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.vde-measure-title {
    font-size: .8rem;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

/* ===== VDE Tabs ===== */

.vde-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 0 0;
    border-bottom: 1px solid #2a2a2a;
    overflow-x: auto;
}
.vde-tab {
    padding: 7px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.vde-tab:hover { color: #ccc; }
.vde-tab.active { color: #0078d7; border-bottom-color: #0078d7; }
.vde-tabpanel { padding-top: 12px; }

/* ===== VDE Sichtprüfung ===== */

.vde-sp-group { margin-bottom: 14px; }
.vde-sp-group-title {
    font-size: .78rem;
    font-weight: bold;
    color: #0078d7;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 4px 0;
    border-bottom: 1px solid #1a2a3a;
    margin-bottom: 6px;
}
.vde-sp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #1e1e1e;
}
.vde-sp-label { flex: 1; font-size: .82rem; color: #ccc; }
.vde-sp-btns { display: flex; gap: 4px; flex-shrink: 0; }
.vde-sp-btn {
    padding: 3px 8px;
    font-size: .75rem;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1e1e1e;
    color: #888;
    cursor: pointer;
    transition: all .15s;
}
.vde-sp-btn.sp-ok-active  { background: #1a3a1a; border-color: #27ae60; color: #27ae60; }
.vde-sp-btn.sp-nok-active { background: #3a1a1a; border-color: #e74c3c; color: #e74c3c; }
.vde-sp-btn.sp-na-active  { background: #2a2a2a; border-color: #666; color: #aaa; }

/* ===== VDE Übergabe Checkboxen ===== */

.vde-check-row { margin: 8px 0; }
.vde-check-label { display: flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.vde-check-label input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; accent-color: #0078d7; }

/* ===== Toast Notification ===== */

.toast-msg {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #27ae60;
    color: white;
    padding: 10px 22px;
    border-radius: 20px;
    font-size: .88rem;
    z-index: 9999;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.toast-msg.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Kategorien-Chips ===== */
.cat-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.cat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

.cat-pick-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid #6c757d;
    color: var(--text);
    background: transparent;
    transition: background .15s, color .15s;
    user-select: none;
}

.cat-pick-chip:hover {
    opacity: 0.85;
}

.cat-manage-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Kategorie-Filterleiste ===== */
.cat-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.cat-filter-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid var(--chip-color, #555);
    color: var(--text, #fff);
    background: transparent;
    transition: background .15s, color .15s;
    user-select: none;
}

.cat-filter-chip.active {
    background: var(--chip-color, #555);
    color: #fff;
}

.cat-filter-chip:hover:not(.active) {
    background: rgba(255,255,255,.07);
}

.list-cat-divider {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    padding: 10px 6px 4px;
    border-left: 3px solid #555;
    margin: 6px 0 2px;
}

/* ===== Kalender-Modul ===== */
.cal-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.cal-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 12px;
    color: #aaa;
}

.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.cal-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    background: #232323;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #aaa;
}

.cal-grid-wrap { overflow: auto; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-head {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    padding: 4px 0 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cal-cell {
    background: #232323;
    border-radius: 10px;
    min-height: 76px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    border: 2px solid transparent;
}

.cal-cell:hover { background: #2e2e2e; }
.cal-cell.empty { background: transparent; cursor: default; border: none; }
.cal-cell.weekend { background: #1c1c1c; cursor: pointer; }
.cal-cell.weekend:hover { background: #242424; }
.cal-cell.today { border-color: #0078d7; }

.cal-cell.ok        { background: #1a2e1a; }
.cal-cell.ok:hover  { background: #203520; }
.cal-cell.partial   { background: #2e2210; }
.cal-cell.partial:hover { background: #352810; }
.cal-cell.missing   { background: #2e1515; }
.cal-cell.missing:hover { background: #351818; }
.cal-cell.frei      { background: #102030; }
.cal-cell.frei:hover{ background: #142840; }
.cal-cell.feiertag      { background: #1e1028; }
.cal-cell.feiertag:hover{ background: #261332; }
.cal-cell.urlaub        { background: #0d2420; }
.cal-cell.urlaub:hover  { background: #112b27; }

.cal-holiday-name {
    font-size: 8px;
    color: #c39bd3;
    line-height: 1.2;
    margin-top: 1px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.cal-day-num {
    font-size: 14px;
    font-weight: 700;
    color: #ccc;
    line-height: 1;
}

.today-num {
    color: #0078d7;
}

.cal-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 2px;
}

.cal-hours {
    font-size: 11px;
    color: #aaa;
    margin-top: auto;
}

/* ===== Tages-Popup ===== */
.day-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.day-popup-box {
    background: #252525;
    border-radius: 14px;
    padding: 22px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
}

.day-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.day-popup-stats {
    display: flex;
    gap: 20px;
    background: #1e1e1e;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.day-stat { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.day-stat-label { font-size: 11px; color: #888; }

.day-popup-entries { display: flex; flex-direction: column; gap: 8px; }

.day-entry-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #1e1e1e;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

.day-entry-time {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    min-width: 90px;
    padding-top: 2px;
}

.day-entry-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.day-act-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}

.day-entry-ref { font-size: 12px; color: #aaa; }
.day-entry-note { font-size: 11px; color: #777; font-style: italic; }
.day-entry-dur { font-size: 12px; color: #ccc; white-space: nowrap; padding-top: 2px; min-width: 50px; text-align: right; }

/* Etiketten-Checkliste */
.lbl-check-row:hover { background: #252525; }
.lbl-check-row:last-child { border-bottom: none !important; }

/* Urlaubsstatistik-Leiste */
.vacation-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #1e1a14;
    border: 1px solid #1abc9c44;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.vac-stat { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.vac-label { color: #888; font-size: 11px; margin-right: 4px; }
.vac-progress-wrap {
    flex: 1; min-width: 120px; height: 6px;
    background: #333; border-radius: 3px; overflow: hidden;
}
.vac-progress-bar { height: 100%; border-radius: 3px; transition: width .4s; }

/* ===== Bedarfserfassung / Baustellenlager ===== */
.bedarf-search-wrap {
    margin-bottom: 10px;
}
.bedarf-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #252525;
    border: 1px solid #444;
    border-radius: 8px;
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 20px #0006;
}
.bedarf-dd-item {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #2e2e2e;
    display: flex;
    align-items: center;
}
.bedarf-dd-item:last-child { border-bottom: none; }
.bedarf-dd-item:hover { background: #333; }
.bedarf-dd-custom { color: #f39c12; }
.bedarf-art-nr {
    font-size: 11px;
    color: #666;
    margin-left: 6px;
    font-family: monospace;
}
.bedarf-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bedarf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #1e1e1e;
    border-radius: 8px;
    border: 1px solid #2e2e2e;
}
.bedarf-item-name {
    flex: 1;
    font-size: 13px;
    min-width: 0;
}
.bedarf-custom-tag {
    display: inline-block;
    font-size: 10px;
    background: #f39c1220;
    color: #f39c12;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.bedarf-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.bedarf-qty {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}
.bedarf-unit {
    font-size: 11px;
    color: #888;
    min-width: 24px;
}
.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #2a2a2a;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qty-btn:hover { background: #3a3a3a; color: #fff; }
.qty-btn:active { transform: scale(.93); }
.qty-del { border-color: #c0392b44; color: #c0392b; font-size: 12px; }
.qty-del:hover { background: #c0392b22; }