@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

#lautlicht-boards-root {
  --c-bg:       #0c0c0e;
  --c-surface:  #141416;
  --c-surface2: #1c1c1f;
  --c-surface3: #242428;
  --c-border:   rgba(255,255,255,0.07);
  --c-border2:  rgba(255,255,255,0.13);
  --c-text:     #f0f0ef;
  --c-muted:    #888885;
  --c-subtle:   #444442;
  --c-accent:   #EB8038;
  --c-accent2:  #d06e28;
  --c-red:      #ff5c5c;
  --c-orange:   #EB8038;
  --c-green:    #4cdb8f;
  --c-blue:     #5b9cf6;
  --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --pad-page: 28px 32px; --pad-card: 20px 22px; --pad-card-lg: 24px;
  --pad-modal: 28px; --pad-table-cell: 12px 16px; --pad-table-head: 10px 16px;
  --pad-btn: 8px 14px; --pad-btn-sm: 5px 10px; --pad-input: 9px 12px;
  --pad-badge: 3px 8px; --pad-tag: 3px 8px; --pad-tooltip: 12px 14px;
  --pad-warn: 12px 14px; --pad-kamp-item: 18px 20px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--c-text);
  background: var(--c-bg); width: 100%; -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}

#lautlicht-boards-root.lb-light {
  --c-bg: #f5f5f3; --c-surface: #ffffff; --c-surface2: #f0efe9;
  --c-surface3: #e8e7e1; --c-border: rgba(0,0,0,0.08); --c-border2: rgba(0,0,0,0.15);
  --c-text: #1a1a18; --c-muted: #6b6b68; --c-subtle: #b0b0ad;
}

.lb-shell { width: 100%; max-width: 1600px; margin: 0 auto; }

.lb-topbar { display:flex; align-items:center; justify-content:space-between; padding:0 32px; height:58px; border-bottom:1px solid var(--c-border); background:var(--c-surface); position:sticky; top:0; z-index:100; transition:background 0.25s; }
.lb-logo { display:flex; align-items:center; gap:10px; }
.lb-logo-mark { width:30px; height:30px; background:var(--c-accent); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.lb-logo-mark span { font-size:14px; font-weight:700; color:#fff; line-height:1; }
.lb-logo-name { font-size:14px; font-weight:600; letter-spacing:-0.02em; }
.lb-logo-sep { color:var(--c-subtle); margin:0 3px; }
.lb-logo-sub { font-size:12px; color:var(--c-muted); }
.lb-topbar-right { display:flex; align-items:center; gap:8px; }

.lb-theme-toggle { width:36px; height:20px; background:var(--c-surface3); border:1px solid var(--c-border2); border-radius:20px; cursor:pointer; position:relative; transition:background 0.2s; flex-shrink:0; }
.lb-theme-toggle::after { content:''; position:absolute; width:14px; height:14px; background:var(--c-accent); border-radius:50%; top:2px; left:2px; transition:transform 0.2s; }
.lb-light .lb-theme-toggle::after { transform:translateX(16px); }

.lb-nav { display:flex; padding:0 32px; border-bottom:1px solid var(--c-border); background:var(--c-surface); overflow-x:auto; scrollbar-width:none; }
.lb-nav::-webkit-scrollbar { display:none; }
.lb-nav-btn { padding:0 18px; height:46px; border:none; background:transparent; cursor:pointer; font-size:13px; font-weight:500; color:var(--c-muted); font-family:'DM Sans',sans-serif; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color 0.15s,border-color 0.15s; }
.lb-nav-btn:hover { color:var(--c-text); }
.lb-nav-btn.active { color:var(--c-accent); border-bottom-color:var(--c-accent); }

.lb-content { padding:var(--pad-page); width:100%; }
.lb-page { display:none; }
.lb-page.active { display:block; animation:fadeUp 0.2s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }

.lb-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:36px; }
.lb-metric { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--pad-card); transition:border-color 0.2s,transform 0.2s; }
.lb-metric:hover { border-color:var(--c-border2); transform:translateY(-1px); }
.lb-metric-label { font-size:11px; font-weight:500; color:var(--c-muted); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:10px; }
.lb-metric-val { font-size:36px; font-weight:300; letter-spacing:-0.04em; line-height:1; }
.lb-metric-pct { font-size:14px; font-weight:400; letter-spacing:-0.01em; opacity:0.55; margin-left:7px; vertical-align:middle; }
.lb-metric-val.v-green { color:var(--c-green); }
.lb-metric-val.v-orange { color:var(--c-orange); }
.lb-metric-val.v-red { color:var(--c-red); }

@keyframes lb-spin { from{transform:rotate(0deg);}to{transform:rotate(360deg);} }
@keyframes lb-flash-row { 0%,100%{background:transparent;}50%{background:rgba(235,128,56,0.06);} }
.lb-row-flash { animation:lb-flash-row 0.5s ease; }

.lb-badge { display:inline-flex; align-items:center; gap:5px; padding:var(--pad-badge); border-radius:6px; font-size:11px; font-weight:500; }
.lb-badge::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.lb-badge-belegt     { background:rgba(76,219,143,0.12); color:var(--c-green);  } .lb-badge-belegt::before     { background:var(--c-green); }
.lb-badge-abgelaufen { background:rgba(235,128,56,0.12);  color:var(--c-orange); } .lb-badge-abgelaufen::before { background:var(--c-orange); }
.lb-badge-defekt     { background:rgba(255,92,92,0.12);   color:var(--c-red);    } .lb-badge-defekt::before     { background:var(--c-red); }
.lb-badge-aktiv      { background:rgba(76,219,143,0.1);   color:var(--c-green);  } .lb-badge-aktiv::before      { background:var(--c-green); }

.lb-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.lb-input { padding:var(--pad-input); border:1px solid var(--c-border); border-radius:var(--r); font-size:13px; background:var(--c-surface); color:var(--c-text); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.15s; }
.lb-input:focus { border-color:rgba(235,128,56,0.5); }
.lb-input::placeholder { color:var(--c-subtle); }
.lb-input-search { min-width:240px; flex:1; }
select.lb-input { min-width:150px; flex:0; cursor:pointer; }

.lb-table-wrap { border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; overflow-x:auto; }
.lb-table { width:100%; border-collapse:collapse; font-size:13px; }
.lb-table thead { background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.lb-table th { text-align:left; padding:var(--pad-table-head); font-weight:500; font-size:11px; color:var(--c-muted); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
.lb-table td { padding:var(--pad-table-cell); border-bottom:1px solid var(--c-border); vertical-align:middle; }
.lb-table tbody tr:last-child td { border-bottom:none; }
.lb-table tbody tr { background:var(--c-bg); transition:background 0.1s; cursor:pointer; }
.lb-table tbody tr:hover { background:var(--c-surface); }
.lb-mono { font-family:'DM Mono',monospace; font-size:12px; }

.lb-foto-cell { width:88px; }
.lb-foto-thumb { width:88px; height:56px; border-radius:7px; overflow:hidden; background:var(--c-surface3); border:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color 0.15s,transform 0.15s; flex-shrink:0; }
.lb-foto-thumb:hover { border-color:var(--c-accent); transform:scale(1.04); }
.lb-foto-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.lb-foto-empty { font-size:18px; color:var(--c-subtle); }

/* QR Code Zelle */
.lb-qr-cell { width:52px; }
.lb-qr-mini { width:44px; height:44px; background:#fff; border-radius:5px; padding:3px; cursor:pointer; transition:transform 0.15s; display:flex; align-items:center; justify-content:center; }
.lb-qr-mini:hover { transform:scale(1.12); }
.lb-qr-mini canvas, .lb-qr-mini img { width:38px; height:38px; display:block; }

.lb-btn { display:inline-flex; align-items:center; gap:6px; padding:var(--pad-btn); border-radius:var(--r); border:1px solid var(--c-border2); background:var(--c-surface2); color:var(--c-text); font-size:13px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background 0.15s,transform 0.1s; white-space:nowrap; }
.lb-btn:hover { background:var(--c-surface3); }
.lb-btn:active { transform:scale(0.98); }
.lb-btn-accent { background:var(--c-accent); color:#fff; border-color:transparent; font-weight:600; }
.lb-btn-accent:hover { background:var(--c-accent2); }
.lb-btn-ghost { background:transparent; border-color:transparent; color:var(--c-muted); padding:6px 10px; }
.lb-btn-ghost:hover { background:var(--c-surface2); color:var(--c-text); }
.lb-btn-danger { background:rgba(255,92,92,0.08); color:var(--c-red); border-color:rgba(255,92,92,0.18); }
.lb-btn-danger:hover { background:rgba(255,92,92,0.15); }
.lb-btn-sm { padding:var(--pad-btn-sm); font-size:12px; border-radius:7px; }

.lb-tag { display:inline-block; padding:var(--pad-tag); border-radius:6px; font-size:11px; font-weight:500; font-family:'DM Mono',monospace; background:var(--c-surface3); color:var(--c-muted); border:1px solid var(--c-border); }

.lb-etagen-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.lb-etage-btn { padding:6px 14px; border-radius:var(--r); border:1px solid var(--c-border); background:var(--c-surface2); color:var(--c-muted); font-size:12px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.15s; }
.lb-etage-btn.active { background:rgba(235,128,56,0.1); border-color:var(--c-accent); color:var(--c-accent); }

.lb-map-legend { display:flex; gap:16px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.lb-legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-muted); }
.lb-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.lb-map-wrap { position:relative; width:100%; background:var(--c-surface); border-radius:var(--r-lg); border:1px solid var(--c-border); overflow:hidden; min-height:400px; }
.lb-tooltip { position:absolute; background:var(--c-surface3); border:1px solid var(--c-border2); border-radius:var(--r); padding:var(--pad-tooltip); font-size:12px; pointer-events:none; z-index:10; min-width:185px; display:none; line-height:1.7; }
.lb-tooltip strong { display:block; font-size:13px; font-weight:600; margin-bottom:5px; }
.lb-pin { cursor:pointer; }
.lb-pin:hover { filter:brightness(1.4); }

.lb-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.lb-form-group { display:flex; flex-direction:column; gap:6px; }
.lb-form-group label { font-size:11px; font-weight:500; color:var(--c-muted); text-transform:uppercase; letter-spacing:0.07em; }
.lb-form-group input, .lb-form-group select, .lb-form-group textarea { padding:var(--pad-input); border:1px solid var(--c-border); border-radius:var(--r); font-size:13px; background:var(--c-surface); color:var(--c-text); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.15s; }
.lb-form-group input:focus, .lb-form-group select:focus { border-color:rgba(235,128,56,0.5); }
.lb-form-group input::placeholder { color:var(--c-subtle); }
.lb-form-section-label { font-size:10px; font-weight:600; color:var(--c-subtle); text-transform:uppercase; letter-spacing:0.1em; margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--c-border); }

.lb-section-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.lb-section-title { font-size:17px; font-weight:600; letter-spacing:-0.025em; }
.lb-section-sub { font-size:12px; color:var(--c-muted); margin-top:3px; }

.lb-warn { display:flex; align-items:flex-start; gap:10px; background:rgba(235,128,56,0.06); border:1px solid rgba(235,128,56,0.2); border-radius:var(--r); padding:var(--pad-warn); font-size:12px; color:var(--c-orange); margin-bottom:20px; line-height:1.6; }

.lb-result-card { background:var(--c-surface); border-radius:var(--r-lg); border:1px solid var(--c-border); padding:var(--pad-card-lg); margin-top:20px; animation:fadeUp 0.25s ease; }
.lb-result-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.lb-result-metric { background:var(--c-surface2); border:1px solid var(--c-border); border-radius:var(--r); padding:14px 16px; }
.lb-result-metric-label { font-size:11px; color:var(--c-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.lb-result-metric-val { font-size:26px; font-weight:300; letter-spacing:-0.03em; }
.lb-result-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--c-border); font-size:13px; }
.lb-result-row:last-child { border-bottom:none; }
.lb-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

.lb-progress-wrap { margin-bottom:20px; }
.lb-progress-label { display:flex; justify-content:space-between; font-size:12px; color:var(--c-muted); margin-bottom:6px; }
.lb-progress-track { height:3px; background:var(--c-surface3); border-radius:4px; overflow:hidden; }
.lb-progress-fill { height:100%; border-radius:4px; transition:width 0.6s ease; }

.lb-modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:1000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); animation:fadeIn 0.15s ease; }
@keyframes fadeIn { from{opacity:0;}to{opacity:1;} }
.lb-modal { background:var(--c-surface); border:1px solid var(--c-border2); border-radius:var(--r-xl); padding:var(--pad-modal); width:580px; max-width:95vw; max-height:90vh; overflow-y:auto; animation:modalIn 0.2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(0.96) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);} }
.lb-modal-title { font-size:17px; font-weight:600; letter-spacing:-0.02em; margin-bottom:4px; }
.lb-modal-sub { font-size:12px; color:var(--c-muted); margin-bottom:20px; }
.lb-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--c-border); }

/* QR Modal */
.lb-qr-display { background:#fff; border-radius:12px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:16px; }
.lb-qr-display canvas { display:block; }
.lb-qr-label { font-size:13px; color:#111; font-weight:600; text-align:center; font-family:'DM Mono',monospace; }
.lb-qr-sublabel { font-size:11px; color:#888; text-align:center; }
.lb-qr-url { font-size:10px; color:#aaa; text-align:center; word-break:break-all; font-family:'DM Mono',monospace; }

/* Upload area */
.lb-upload-area { border:2px dashed var(--c-border2); border-radius:var(--r-lg); padding:28px 20px; text-align:center; cursor:pointer; transition:border-color 0.2s,background 0.2s; }
.lb-upload-area:hover { border-color:var(--c-accent); background:rgba(235,128,56,0.04); }
.lb-upload-area.drag-over { border-color:var(--c-accent); background:rgba(235,128,56,0.08); }
.lb-upload-icon { font-size:28px; margin-bottom:8px; }
.lb-upload-text { font-size:13px; color:var(--c-muted); }
.lb-upload-hint { font-size:11px; color:var(--c-subtle); margin-top:4px; }
.lb-upload-preview { width:100%; height:120px; object-fit:cover; border-radius:var(--r); margin-top:12px; display:none; }
.lb-upload-progress { height:3px; background:var(--c-surface3); border-radius:4px; margin-top:10px; overflow:hidden; display:none; }
.lb-upload-progress-fill { height:100%; background:var(--c-accent); border-radius:4px; transition:width 0.3s; }

/* Lightbox */
.lb-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:2000; display:flex; align-items:center; justify-content:center; cursor:pointer; animation:fadeIn 0.15s ease; }
.lb-lightbox img { max-width:90vw; max-height:88vh; border-radius:8px; object-fit:contain; }
.lb-lightbox-close { position:absolute; top:24px; right:28px; font-size:28px; color:rgba(255,255,255,0.7); cursor:pointer; }

/* Kampagne list */
.lb-kamp-item { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--pad-kamp-item); margin-bottom:8px; transition:border-color 0.15s; cursor:pointer; }
.lb-kamp-item:hover { border-color:var(--c-border2); }
.lb-kamp-section-label { font-size:11px; font-weight:500; color:var(--c-subtle); text-transform:uppercase; letter-spacing:0.08em; margin:28px 0 10px; }
.lb-empty { text-align:center; padding:60px 20px; color:var(--c-subtle); font-size:13px; }

.lb-fixed-fields { background:var(--c-surface2); border-radius:var(--r); padding:14px 16px; margin-bottom:16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.lb-fixed-field-item label { font-size:10px; font-weight:600; color:var(--c-subtle); text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:4px; }
.lb-fixed-field-item span { font-size:13px; font-weight:500; color:var(--c-text); }

/* QR Codes Tab */
.lb-qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.lb-qr-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; align-items:center; gap:12px; transition:border-color 0.15s; }
.lb-qr-card:hover { border-color:var(--c-border2); }
.lb-qr-card-qr { background:#fff; border-radius:8px; padding:10px; }
.lb-qr-card-qr canvas { display:block; }
.lb-qr-card-info { text-align:center; width:100%; }
.lb-qr-card-name { font-size:14px; font-weight:600; font-family:'DM Mono',monospace; margin-bottom:2px; }
.lb-qr-card-sub { font-size:11px; color:var(--c-muted); }
.lb-qr-card-actions { display:flex; gap:6px; width:100%; }
.lb-qr-card-actions .lb-btn { flex:1; justify-content:center; }

/* Mobile QR scan view */
.lb-mobile-view { max-width:480px; margin:0 auto; padding:24px 16px; }
.lb-mobile-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--c-border); }
.lb-mobile-logo { width:36px; height:36px; background:var(--c-accent); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; flex-shrink:0; }
.lb-mobile-title { font-size:16px; font-weight:600; letter-spacing:-0.02em; }
.lb-mobile-sub { font-size:12px; color:var(--c-muted); }
.lb-mobile-rahmen-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-xl); padding:20px; margin-bottom:16px; }
.lb-mobile-rahmen-nr { font-size:28px; font-weight:300; letter-spacing:-0.04em; margin-bottom:4px; font-family:'DM Mono',monospace; }
.lb-mobile-upload-btn { width:100%; padding:16px; font-size:15px; border-radius:var(--r-lg); margin-top:8px; }
.lb-mobile-fallback { text-align:center; padding:60px 20px; color:var(--c-muted); }
.lb-mobile-fallback h2 { font-size:20px; font-weight:300; margin-bottom:8px; }

/* Print styles */
@media print {
  .lb-topbar, .lb-nav, .lb-toolbar, .lb-modal-bg, .lb-btn, .lb-lightbox { display:none!important; }
  #lautlicht-boards-root { background:#fff!important; color:#000!important; }
  .lb-qr-print-page { page-break-after:always; padding:20mm; font-family:sans-serif; }
  .lb-qr-print-page:last-child { page-break-after:avoid; }
}

@media (max-width:768px) {
  #lautlicht-boards-root { --pad-page:16px; }
  .lb-topbar, .lb-nav { padding:0 16px; }
  .lb-metrics { grid-template-columns:1fr 1fr; }
  .lb-form-grid { grid-template-columns:1fr; }
  .lb-result-metrics { grid-template-columns:1fr 1fr; }
  .lb-metric-val { font-size:26px; }
  .lb-fixed-fields { grid-template-columns:1fr 1fr; }
  .lb-qr-grid { grid-template-columns:1fr 1fr; }
}

/* ── Custom Login ─────────────────────────────────────────────────────────── */
.lb-login-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px; background: var(--c-bg);
}
.lb-login-card {
  width: 100%; max-width: 400px;
  background: var(--c-surface); border: 1px solid var(--c-border2);
  border-radius: var(--r-xl); padding: 36px 32px;
  animation: fadeUp 0.25s ease;
}
.lb-login-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.lb-login-heading {
  font-size: 20px; font-weight: 600; letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.lb-login-sub {
  font-size: 13px; color: var(--c-muted); margin-bottom: 24px; line-height: 1.5;
}
.lb-login-form { display: flex; flex-direction: column; gap: 14px; }
.lb-login-submit {
  width: 100%; justify-content: center; padding: 11px;
  font-size: 14px; margin-top: 4px;
}
.lb-login-remember {
  font-size: 13px; color: var(--c-muted);
  display: flex; align-items: center; gap: 6px;
}
.lb-login-remember input { cursor: pointer; }
.lb-login-link {
  display: block; text-align: center; margin-top: 16px;
  font-size: 13px; color: var(--c-muted); text-decoration: none;
  transition: color 0.15s;
}
.lb-login-link:hover { color: var(--c-accent); }
.lb-login-error {
  background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.25);
  border-radius: var(--r); padding: 10px 14px; font-size: 13px;
  color: var(--c-red); margin-bottom: 4px;
}
.lb-login-success { text-align: center; padding: 12px 0; }
.lb-login-success-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(76,219,143,0.12); color: var(--c-green);
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.lb-login-footer {
  margin-top: 24px; font-size: 11px; color: var(--c-subtle); text-align: center;
}

/* ── User-Avatar in Topbar ───────────────────────────────────────────────── */
.lb-user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 20px;
  border: 1px solid var(--c-border); background: var(--c-surface2);
  cursor: pointer; transition: border-color 0.15s;
}
.lb-user-pill:hover { border-color: var(--c-border2); }
.lb-user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-accent); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
  overflow: hidden; flex-shrink: 0;
}
.lb-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-user-name { font-size: 12px; font-weight: 500; color: var(--c-text); }

/* ── Kampagnen Statistik ─────────────────────────────────────────────────── */
.lb-kamp-stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--c-muted);
  background: var(--c-surface2); border-radius: 5px;
  padding: 2px 7px; margin-right: 6px;
}
.lb-kamp-rahmen-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 8px; margin-top: 10px;
}
.lb-kamp-rahmen-item {
  background: var(--c-surface2); border: 1px solid var(--c-border);
  border-radius: var(--r); padding: 10px 12px;
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.lb-sync-btn-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.lb-sync-info { font-size: 12px; color: var(--c-muted); }

/* ── Metric Format Pills ──────────────────────────────────────────────────── */
.lb-metric-fmts {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px;
}
.lb-metric-fmt-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--c-surface3); border: 1px solid var(--c-border);
  border-radius: 5px; padding: 2px 7px;
  font-size: 11px; color: var(--c-muted);
  font-family: 'DM Mono', monospace;
}
.lb-metric-fmt-pill strong {
  color: var(--c-muted); font-weight: 600;
}
/* Light mode: etwas dunkleres grau damit lesbar */
#lautlicht-boards-root.lb-light .lb-metric-fmt-pill strong {
  color: var(--c-muted);
}

/* ── Metric val-wrap (A0 groß + Einheit) ─────────────────────────────────── */
.lb-metric-val-wrap {
  display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px;
}
.lb-metric-val-unit {
  font-size: 13px; font-weight: 500; color: var(--c-muted);
  font-family: 'DM Mono', monospace; letter-spacing: 0.02em;
}
.lb-metric-fmt-label {
  font-size: 10px; color: var(--c-subtle);
  font-family: 'DM Mono', monospace; margin-right: 2px;
}
/* Metric val ohne margin-bottom wenn val-wrap verwendet wird */
.lb-metric-val-wrap .lb-metric-val { margin-bottom: 0; }

/* ── Responsive Topbar ───────────────────────────────────────────────────── */

/* Desktop: volle Buttonleiste sichtbar, Burger versteckt */
.lb-topbar-desktop {
  display: flex; align-items: center; gap: 8px;
}
.lb-mobile-menu-btn {
  display: none;
  background: transparent; border: 1px solid var(--c-border2);
  border-radius: var(--r); color: var(--c-text); font-size: 18px;
  width: 36px; height: 36px; cursor: pointer; align-items: center;
  justify-content: center; flex-shrink: 0;
}
/* Mobile Dropdown — immer versteckt bis geöffnet */
.lb-topbar-actions {
  display: none;
}

@media (max-width: 768px) {
  /* Desktop-Leiste verstecken */
  .lb-topbar-desktop { display: none !important; }
  /* Burger zeigen */
  .lb-mobile-menu-btn { display: flex; }

  .lb-topbar { padding: 0 14px; }
  .lb-topbar-right { gap: 6px; }

  /* Dropdown-Menü auf Mobile */
  .lb-topbar-actions {
    position: absolute; top: 58px; right: 0; left: 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border2);
    padding: 12px 14px; gap: 8px;
    flex-direction: column; align-items: stretch;
    z-index: 99; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  .lb-topbar-actions.lb-mobile-open { display: flex; }
  .lb-topbar-actions .lb-btn { justify-content: center; width: 100%; }
  .lb-topbar-actions .lb-user-pill { justify-content: center; }
  .lb-topbar-actions .lb-user-name { display: inline !important; }

  /* Nav */
  .lb-nav { padding: 0 14px; }
  .lb-nav-btn { padding: 0 12px; font-size: 12px; }

  /* Content */
  #lautlicht-boards-root { --pad-page: 14px; }
  .lb-content { padding: var(--pad-page); }

  /* Metrics */
  .lb-metrics { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .lb-metric-val { font-size: 28px; }
  .lb-metric-fmts { gap: 3px; }
  .lb-metric-fmt-pill { font-size: 10px; padding: 1px 5px; }

  /* Tabelle */
  .lb-toolbar { flex-direction: column; align-items: stretch; }
  .lb-input-search { min-width: 0; }
  select.lb-input { min-width: 0; flex: 1; }
  .lb-table th, .lb-table td { padding: 8px 10px; font-size: 12px; }

  /* Modal */
  .lb-modal { padding: 20px 16px; border-radius: var(--r-lg); }
  .lb-modal-wide { width: 100% !important; }
  .lb-fixed-fields { grid-template-columns: 1fr 1fr; }
  .lb-form-grid { grid-template-columns: 1fr; }

  /* Kampagnen */
  .lb-kamp-item { padding: 14px; }
  .lb-result-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .lb-metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
  .lb-metric { padding: 12px; }
  .lb-metric-val { font-size: 24px; }
  .lb-logo-sub { display: none; }
  .lb-logo-sep { display: none; }
}

/* ── Modal Tabs ──────────────────────────────────────────────────────────── */
.lb-modal-wide { width: 620px; }

.lb-modal-tabs {
  display: flex; gap: 0; margin-bottom: 20px;
  border-bottom: 1px solid var(--c-border);
}
.lb-modal-tab {
  padding: 8px 16px; border: none; background: transparent;
  cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--c-muted); font-family: 'DM Sans', sans-serif;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.lb-modal-tab:hover  { color: var(--c-text); }
.lb-modal-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.lb-modal-tab-badge  {
  display: inline-block; background: var(--c-surface3);
  border-radius: 10px; padding: 1px 6px; font-size: 10px;
  color: var(--c-muted); margin-left: 4px; font-weight: 500;
}
.lb-modal-tab-content { display: none; }
.lb-modal-tab-content.active { display: block; }

/* ── Belegungshistorie Grid ──────────────────────────────────────────────── */
.lb-hist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.lb-hist-item {
  background: var(--c-surface2); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color 0.15s;
}
.lb-hist-item:hover { border-color: var(--c-border2); }
.lb-hist-foto {
  width: 100%; height: 110px; overflow: hidden;
  position: relative; cursor: pointer;
  background: var(--c-surface3);
}
.lb-hist-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.lb-hist-foto:hover img { transform: scale(1.04); }
.lb-hist-foto-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: 0; transition: opacity 0.15s;
}
.lb-hist-foto:hover .lb-hist-foto-overlay { opacity: 1; }
.lb-hist-foto-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--c-subtle); font-size: 13px; cursor: default;
}
.lb-hist-info { padding: 10px 12px; }
.lb-hist-kunde   { font-size: 13px; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-hist-kampagne { font-size: 11px; color: var(--c-accent); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-hist-datum    { font-size: 11px; color: var(--c-muted); font-family: 'DM Mono', monospace; }

@media (max-width: 480px) {
  .lb-hist-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lb-hist-foto { height: 90px; }
}

/* ── Sortierbare Tabellenspalten ─────────────────────────────────────────── */
.lb-th-sort {
  cursor: pointer; user-select: none;
  transition: color 0.15s;
}
.lb-th-sort:hover { color: var(--c-accent); }
.lb-sort-icon {
  font-size: 10px; opacity: 0.5; margin-left: 3px;
  transition: opacity 0.15s;
}
.lb-th-sort:hover .lb-sort-icon { opacity: 1; }

/* ── Historie Tabelle ────────────────────────────────────────────────────── */
.lb-hist-table-wrap {
  overflow-x: auto; border-radius: var(--r);
  border: 1px solid var(--c-border);
}
.lb-hist-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.lb-hist-table thead { background: var(--c-surface2); }
.lb-hist-table th {
  text-align: left; padding: 8px 12px;
  font-size: 11px; font-weight: 500;
  color: var(--c-muted); text-transform: uppercase;
  letter-spacing: 0.06em; white-space: nowrap;
  border-bottom: 1px solid var(--c-border);
}
.lb-hist-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}
.lb-hist-table tbody tr:last-child td { border-bottom: none; }
.lb-hist-table tbody tr { background: var(--c-bg); transition: background 0.1s; }
.lb-hist-table tbody tr:hover { background: var(--c-surface); }

.lb-hist-thumb {
  width: 60px; height: 40px; border-radius: 5px;
  overflow: hidden; background: var(--c-surface3);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity 0.15s;
}
.lb-hist-thumb:hover { opacity: 0.8; }
.lb-hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-hist-thumb-empty { color: var(--c-subtle); font-size: 18px; cursor: default; }

/* ── Kampagnen-Suche ─────────────────────────────────────────────────────── */
.lb-sync-btn-wrap {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-bottom: 16px;
}

@media (max-width: 600px) {
  .lb-sync-btn-wrap { flex-direction: column; align-items: stretch; }
  .lb-sync-btn-wrap .lb-input { width: 100%; }
}

/* ── Metric Format Pills — heller ────────────────────────────────────────── */
.lb-metric-fmt-label {
  font-size: 10px; font-family: 'DM Mono', monospace; margin-right: 2px;
  color: #F0F0EF; opacity: 0.7;
}
.lb-metric-fmt-pill strong {
  color: #F0F0EF !important; font-weight: 500; opacity: 0.75;
}
.lb-light .lb-metric-fmt-label,
.lb-light .lb-metric-fmt-pill strong {
  color: #888 !important; opacity: 1;
}

/* ── Defekt Badge (nutzt abgelaufen-Farbe) ───────────────────────────────── */