/* ============================================================================
   HH-Portal Redesign — AP Design 1 (Fundament + Komponenten)
   Reines UI-/UX-Reskin. KEINE Fachlogik. Wird als LETZTES Stylesheet geladen
   (vor </body>), damit Token- und Komponenten-Overrides per Quell-Reihenfolge
   greifen. Referenz: import-input/design_handoff_hh_portal/README.md
   Schrift: Geist / Geist Mono LOKAL gebündelt (public/vendor/fonts), Fallback
   system-ui / ui-monospace — keine Funktion hängt am externen Font-Load.
   Mono-Konvention: Kundennummern, Termine, KW, Zeiten, Mengen, Routen.
   ========================================================================== */

/* ── Geist (variabel, self-hosted) ───────────────────────────────────────── */
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/vendor/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/vendor/fonts/GeistMono-Variable.woff2') format('woff2');
}

/* ── Token-Fundament ─────────────────────────────────────────────────────────
   :root[data-variant] hat höhere Spezifität als [data-variant="C"] und schlägt
   damit die Basiswerte aus design-tokens.css zuverlässig — unabhängig von der
   Ladereihenfolge. */
:root[data-variant],
:root{
  /* Marken-Grün (neuer, kräftiger Anker #167a4d) — überschreibt die alten
     Salbeigrün-Anker, damit ALLE 37 Views automatisch umfärben. */
  --brand-green-50:#e8f2ec;
  --brand-green-100:#d3e7dc;
  --brand-green-200:#c6e0d1;
  --brand-green-300:#9cccb1;
  --brand-green-400:#4f9e77;
  --brand-green-500:#167a4d;
  --brand-green-600:#167a4d;   /* primary */
  --brand-green-700:#12683f;   /* hover   */
  --brand-green-800:#0f5c3a;   /* dunkelgrüner Text (Kundennummern) */
  --brand-green-900:#0c4a2f;

  /* Petrol-Aliase auf das ruhige Neutral/Grün umgelenkt (weiße Sidebar). */
  --brand-petrol-50:#eef0ec;
  --brand-petrol-100:#e4e7e2;
  --brand-petrol-200:#c6e0d1;
  --brand-petrol-300:#a3aca4;
  --brand-petrol-400:#8a938c;
  --brand-petrol-500:#5b655d;
  --brand-petrol-600:#167a4d;
  --brand-petrol-700:#eef0ec;
  --brand-petrol-800:#e4e7e2;
  --brand-petrol-900:#0f5c3a;

  /* Neutrale, leicht warme Grautöne (Spec) */
  --neutral-0:#ffffff;
  --neutral-25:#f9faf8;
  --neutral-50:#f6f8f5;
  --neutral-100:#f2f5f1;
  --neutral-200:#e4e7e2;
  --neutral-300:#cdd2cb;
  --neutral-400:#a3aca4;
  --neutral-500:#8a938c;
  --neutral-600:#5b655d;
  --neutral-700:#414b43;
  --neutral-800:#172019;
  --neutral-900:#0f1512;

  /* Textstufen (Spec) */
  --text-1:#172019;
  --text-2:#414b43;
  --text-3:#5b655d;
  --text-4:#8a938c;
  --text-5:#a3aca4;

  /* Semantische Basis */
  --app-bg:#eef0ec;
  --surface:#ffffff;
  --surface-2:#f9faf8;
  --surface-3:#f6f8f5;
  --border:#e4e7e2;
  --border-soft:#eef0ec;
  --text:#172019;
  --text-muted:#8a938c;
  --heading:#172019;

  /* Sidebar / Nav (jetzt WEISS) */
  --nav-bg:#ffffff;
  --nav-text:#414b43;
  --nav-active-bg:#e8f2ec;
  --nav-active-text:#0f5c3a;
  --nav-border:#e4e7e2;

  /* Primär / Akzent */
  --primary:#167a4d;
  --primary-hover:#12683f;
  --primary-text:#ffffff;
  --accent:#167a4d;
  --accent2:#12683f;

  /* Highlight / „heute" (grün statt Petrol) */
  --hl:#167a4d;
  --hl-strong:#12683f;
  --hl-bg:#f2faf5;

  /* Status (Spec) */
  --st-ok-fg:#167a4d;      --st-ok-bg:#e8f2ec;
  --st-geplant-fg:#2563a8; --st-geplant-bg:#e7effa;
  --st-faellig-fg:#b8730a; --st-faellig-bg:#fbf1e2;
  --st-alarm-fg:#c2401e;   --st-alarm-bg:#fbeae5;
  --st-neutral-fg:#5b655d; --st-neutral-bg:#f2f5f1;

  /* Tonnenarten — LOAD-BEARING, zentral (Spec §Tonnenart) */
  --bin-rest-bg:#3a3f3c;   --bin-rest-fg:#ffffff;
  --bin-bio-bg:#7a5230;    --bin-bio-fg:#ffffff;
  --bin-papier-bg:#2563a8; --bin-papier-fg:#ffffff;
  --bin-gelb-bg:#e0a800;   --bin-gelb-fg:#3a2f00;
  --bin-glas-bg:#2f8f6b;   --bin-glas-fg:#ffffff;

  /* Außenpflege / Pflegekalender */
  --pf-rasen:#167a4d; --pf-graufl:#2563a8; --pf-beet:#b8730a; --pf-hecke:#0f766e; --pf-fest:#7a4fb0;

  /* Alte Ampel-/Prioritäts-Aliase auf Spec-Töne (Bestandsklassen) */
  --hoch:#c2401e;   --hoch-bg:#fbeae5;
  --mittel:#b8730a; --mittel-bg:#fbf1e2;
  --niedrig:#5b655d;--niedrig-bg:#f2f5f1;
  --offen:#5b655d;  --in-arbeit:#2563a8; --erledigt:#167a4d;

  /* Radien / Schrift / Schatten */
  --radius:10px; --radius-lg:14px; --radius-sm:8px;
  --radius-xs:6px; --radius-md:10px; --radius-xl:16px; --radius-pill:999px;
  --font-sans:'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  --shadow-xs:0 1px 2px rgba(24,41,41,.05);
  --shadow-sm:0 1px 3px rgba(24,41,41,.07);
  --shadow-md:0 4px 10px rgba(24,41,41,.08);
  --shadow:0 4px 10px rgba(24,41,41,.08);
  --shadow-lg:0 10px 28px rgba(24,41,41,.12);
  --card-shadow:none;              /* Karten = Border-basiert, flach/ruhig */
  --shadow-btn:0 2px 5px rgba(22,122,77,.28);
  --shadow-focus:0 0 0 3px rgba(22,122,77,.12);
  --focus-ring:rgba(22,122,77,.12);
}

/* ── Globale Grundlagen ──────────────────────────────────────────────────── */
body{ font-family:var(--font-sans); background:var(--app-bg); color:var(--text); -webkit-font-smoothing:antialiased; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#cdd2cb; border-radius:6px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#b4bbb2; background-clip:content-box; }

/* Mono für Zahlen (Kundennr., Termine, KW, Zeiten, Mengen, Routen) */
.hh-mono,.mono,.num,.kdnr,.hh-kdnr{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ============================================================================
   SHELL — Sidebar
   ========================================================================== */
.mgmt-sidebar{
  width:248px; background:var(--nav-bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0; flex-shrink:0;
}
.mgmt-logo{
  height:60px; padding:0 20px; border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; gap:11px;
}
.mgmt-logo img{ width:32px; height:32px; border-radius:9px; box-shadow:var(--shadow-btn); }
.mgmt-logo .hh-logo-tile{
  width:32px; height:32px; border-radius:9px; background:var(--primary);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-btn); flex:none;
}
.mgmt-logo h1{ font-size:15px; font-weight:700; letter-spacing:-.2px; color:var(--text-1); }
.mgmt-logo small{ font-size:10.5px; font-weight:500; color:var(--text-4); letter-spacing:.2px; }

.mgmt-nav{ flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; }
.nav-group-title{
  font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:var(--text-5); padding:14px 10px 6px;
}
.nav-group-title:first-child{ padding-top:2px; }

.nav-btn{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px;
  background:transparent; color:var(--nav-text); font-size:13.5px; font-weight:500;
  letter-spacing:-.1px; transition:background .15s,color .15s; width:100%; text-align:left; margin-bottom:1px;
}
.nav-btn:hover{ background:#f2f5f1; color:var(--text-1); }
.nav-btn.active{ background:var(--nav-active-bg); color:var(--nav-active-text); font-weight:600; }
.nav-btn .nav-icon{
  font-size:15px; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#7d867e; flex:none;
}
.nav-btn.active .nav-icon{ color:var(--primary); }
.nav-btn .nav-icon svg{ width:20px; height:20px; }
.nav-btn > span:not(.nav-icon):not(.nav-badge){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.nav-badge{
  margin-left:auto; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  min-width:18px; text-align:center; padding:1px 6px; border-radius:20px;
  background:#d3e7dc; color:#0f5c3a;
}
.nav-badge.red,.nav-badge.badge-red{ background:#c2401e; color:#fff; }

.sidebar-footer{ padding:12px; border-top:1px solid var(--border-soft); }
.logout-btn{
  width:100%; padding:8px 10px; background:transparent; color:var(--text-3); border-radius:9px;
  font-size:13px; text-align:left; display:flex; align-items:center; gap:8px;
}
.logout-btn:hover{ color:var(--text-1); background:#f2f5f1; }
#app-version{ color:var(--text-5)!important; }

/* Nutzer-Fußzeile (optional, per Markup) */
.hh-user{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:#f6f8f5;
}
.hh-user-avatar{
  width:34px; height:34px; flex:none; border-radius:50%; background:#dce9e2; color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.hh-user-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-user-role{ font-size:11px; color:var(--text-4); }

/* Global-Search (Bestand) im neuen Look */
.mgmt-nav #global-search{ font-family:var(--font-sans); }

/* ============================================================================
   SHELL — Topbar
   ========================================================================== */
.mgmt-content{ flex:1; overflow-y:auto; min-height:100vh; background:var(--app-bg); display:flex; flex-direction:column; }
.hh-topbar{
  height:60px; flex:none; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 24px; position:sticky; top:0; z-index:50;
}
.hh-topbar-titles{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.hh-crumb{ font-size:11px; font-weight:500; color:var(--text-5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-screen-title{ font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-topbar-search{ position:relative; width:300px; max-width:34vw; }
.hh-topbar-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-5); }
.hh-topbar-search input{
  width:100%; height:38px; border:1px solid var(--border); border-radius:10px; padding:0 12px 0 36px;
  font-family:var(--font-sans); font-size:13px; background:var(--surface-2); color:var(--text-1); outline:none;
}
.hh-topbar-search input:focus{ border-color:var(--primary); background:#fff; box-shadow:var(--shadow-focus); }
.hh-icon-btn{
  height:38px; width:38px; flex:none; border:1px solid var(--border); border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; color:#4a534c;
}
.hh-icon-btn:hover{ background:#f6f8f5; }
.hh-icon-btn .hh-dot{
  position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%;
  background:#c2401e; border:2px solid #fff;
}

/* ============================================================================
   Seiten-Container (zentriert, Spec max-width)
   ========================================================================== */
.view{ padding:24px; }
.hh-page{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.hh-page.wide{ max-width:1520px; }
.hh-page.narrow{ max-width:820px; }

.view-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.view-title{ font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--text-1); }
.view-sub{ font-size:11px; color:var(--text-5); margin-top:2px; }

/* ============================================================================
   KARTEN
   ========================================================================== */
.hh-card,.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:none;
}
.hh-card.pad-lg{ padding:22px 24px; }
.hh-card.flush{ padding:0; overflow:hidden; }
.hh-card-title,.panel-title{
  font-size:15px; font-weight:700; letter-spacing:-.2px; color:var(--text-1);
  text-transform:none; margin-bottom:14px;
}
.hh-card-head{ display:flex; align-items:center; justify-content:space-between; gap:9px; margin-bottom:14px; }
.hh-card-head .hh-card-title{ margin-bottom:0; }
.hh-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--text-5); }

/* ── KPI-Karten ──────────────────────────────────────────────────────────── */
.hh-kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hh-kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 17px;
  display:flex; flex-direction:column; gap:10px;
}
.hh-kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.hh-kpi-label{ font-size:12.5px; font-weight:500; color:var(--text-4); }
.hh-kpi-icon{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; }
.hh-kpi-val{ display:flex; align-items:flex-end; gap:8px; }
.hh-kpi-num{ font-size:28px; font-weight:700; letter-spacing:-.6px; line-height:1; color:var(--text-1); }
.hh-kpi-delta{ font-size:12px; font-weight:600; padding-bottom:3px; }
.hh-kpi-delta.up{ color:#167a4d; } .hh-kpi-delta.down{ color:#c2401e; }
.hh-kpi-sub{ font-size:11.5px; color:var(--text-5); }

/* Bestands-Statskarten in den neuen Look ziehen */
.stats-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 17px; }
.stat-val{ font-size:26px; font-weight:700; letter-spacing:-.5px; color:var(--text-1); }
.stat-lbl{ font-size:12px; font-weight:500; color:var(--text-4); text-transform:none; letter-spacing:0; margin-top:4px; }

/* ============================================================================
   TABELLEN (hohe Datendichte bleibt möglich)
   ========================================================================== */
.hh-table-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow-x:auto; overflow-y:hidden; }
.hh-thead{
  display:grid; gap:14px; padding:12px 20px; background:var(--surface-2); border-bottom:1px solid var(--border-soft);
  font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--text-5);
}
.hh-trow{
  display:grid; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border-soft);
  align-items:center; cursor:default;
}
.hh-trow.click{ cursor:pointer; }
.hh-trow:hover{ background:var(--surface-2); }
.hh-trow:last-child{ border-bottom:none; }

/* Bestandstabellen sanft angleichen */
table.data-table,table.tbl,.view table{ border-collapse:collapse; width:100%; font-size:13px; }
.view table th{
  background:var(--surface-2); color:var(--text-5); font-size:11px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);
}
.view table td{ padding:11px 12px; border-bottom:1px solid var(--border-soft); color:var(--text-1); }
.view table tr:hover td{ background:var(--surface-2); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn-primary,.mgmt-btn,.hh-btn{
  padding:0 15px; height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--primary); color:#fff; border-radius:10px; font-family:var(--font-sans);
  font-size:13px; font-weight:600; box-shadow:var(--shadow-btn); transition:background .15s;
}
.btn-primary:hover,.mgmt-btn:hover,.hh-btn:hover{ background:var(--primary-hover); }
.mgmt-btn{ width:100%; height:44px; font-size:15px; }
.btn-ghost,.hh-btn-ghost,.btn-cancel{
  padding:0 14px; height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#fff; color:var(--text-2); border:1px solid var(--border); border-radius:10px;
  font-family:var(--font-sans); font-size:13px; font-weight:600; box-shadow:none;
}
.btn-ghost:hover,.hh-btn-ghost:hover,.btn-cancel:hover{ background:#f6f8f5; color:var(--text-1); border-color:var(--border); }
.btn-sm{ height:32px; padding:0 12px; border-radius:8px; font-size:12px; font-weight:600; }
.btn-danger,.hh-btn-danger{ background:#fbeae5; color:#c2401e; box-shadow:none; }
.btn-danger:hover,.hh-btn-danger:hover{ background:#f7ddd4; }

/* ============================================================================
   CHIPS / PILLS / BADGES
   ========================================================================== */
/* Tonnen-Chip (zentral) */
.bin-chip{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px;
  font-family:var(--font-mono); font-weight:700; font-size:11px; flex:none;
}
.bin-chip.lg{ width:34px; height:34px; font-size:13px; }
.bin-chip.badge{ width:38px; height:38px; border-radius:9px; font-size:14px; }
.bin-chip.rest{ background:var(--bin-rest-bg); color:var(--bin-rest-fg); }
.bin-chip.bio{ background:var(--bin-bio-bg); color:var(--bin-bio-fg); }
.bin-chip.papier{ background:var(--bin-papier-bg); color:var(--bin-papier-fg); }
.bin-chip.gelb,.bin-chip.wertstoff{ background:var(--bin-gelb-bg); color:var(--bin-gelb-fg); }
.bin-chip.glas{ background:var(--bin-glas-bg); color:var(--bin-glas-fg); }

/* Status-Pill */
.hh-pill,.status-chip{
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
  padding:4px 11px; border-radius:20px; white-space:nowrap; border:none; line-height:1.3;
}
.hh-pill.ok,.hh-pill.aktiv,.hh-pill.erledigt{ background:var(--st-ok-bg); color:var(--st-ok-fg); }
.hh-pill.geplant{ background:var(--st-geplant-bg); color:var(--st-geplant-fg); }
.hh-pill.faellig{ background:var(--st-faellig-bg); color:var(--st-faellig-fg); }
.hh-pill.ueberfaellig,.hh-pill.alarm,.hh-pill.dringend,.hh-pill.neu{ background:var(--st-alarm-bg); color:var(--st-alarm-fg); }
.hh-pill.offen,.hh-pill.neutral{ background:var(--st-neutral-bg); color:var(--st-neutral-fg); }

/* Bestands-Statuschips neutralisieren (alte Dark-Farben raus) */
.chip-offen{ background:var(--st-neutral-bg); color:var(--st-neutral-fg); border:none; }
.chip-erledigt{ background:var(--st-ok-bg); color:var(--st-ok-fg); border:none; }
.status-chip{ border:none; }

/* Prioritäts-/Signal-Punkt mit Alpha-Ring */
.hh-dot-sig{ width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.hh-dot-sig.ok{ background:#167a4d; box-shadow:0 0 0 4px #167a4d22; }
.hh-dot-sig.geplant{ background:#2563a8; box-shadow:0 0 0 4px #2563a822; }
.hh-dot-sig.faellig{ background:#b8730a; box-shadow:0 0 0 4px #b8730a22; }
.hh-dot-sig.alarm{ background:#c2401e; box-shadow:0 0 0 4px #c2401e22; }

/* Service-Chip (klein, eckig) */
.hh-svc{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; }
.hh-svc.reinigung{ background:#e7effa; color:#2563a8; }
.hh-svc.pflege{ background:#e8f2ec; color:#167a4d; }
.hh-svc.haus{ background:#f3eefb; color:#7a4fb0; }

/* Bestands-.badge-* auf helle Töne umstellen (waren teils dunkel) */
.badge{ padding:2px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.badge-auftrag{ background:#e7effa; color:#2563a8; }
.badge-angebot{ background:#fbf1e2; color:#b8730a; }
.badge-leckage,.badge-schaden{ background:#fbeae5; color:#c2401e; }
.badge-rasen,.badge-garten,.badge-gesamtpflege{ background:#e8f2ec; color:#167a4d; }
.badge-reinigung{ background:#e7effa; color:#2563a8; }
.badge-winterdienst{ background:#f2f5f1; color:#5b655d; }

/* HH-Anzeigeregeln: Kundennummer groß & eindeutig, Auftrag/Quelle klein */
.hh-kdnr-lg{ font-family:var(--font-mono); font-size:34px; font-weight:700; letter-spacing:-1px; color:#0f5c3a; line-height:1; }
.hh-kdnr{ font-family:var(--font-mono); font-weight:600; color:#0f5c3a; }
.hh-kdnr.offen{ color:var(--text-4); font-style:normal; }
.hh-ref-small{ font-size:11px; color:var(--text-4); font-weight:500; }

/* ============================================================================
   FORMULARE
   ========================================================================== */
.view input[type=text],.view input[type=search],.view input[type=email],
.view input[type=tel],.view input[type=number],.view input[type=date],
.view input[type=password],.view select,.view textarea,.hh-input{
  font-family:var(--font-sans); font-size:13.5px; color:var(--text-1);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:0 13px;
  min-height:42px; outline:none; transition:border-color .15s,box-shadow .15s,background .15s;
}
.view textarea,.hh-input.textarea{ padding:10px 13px; min-height:80px; line-height:1.5; }
.view input:focus,.view select:focus,.view textarea:focus,.hh-input:focus{
  border-color:var(--primary); background:#fff; box-shadow:var(--shadow-focus);
}
.hh-label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }

/* ============================================================================
   Segmented Toggle / Filter-Pills
   ========================================================================== */
.hh-seg{ display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:11px; padding:3px; gap:2px; }
.hh-seg button{ height:30px; padding:0 14px; border:none; border-radius:8px; font-family:var(--font-sans);
  font-size:12.5px; font-weight:600; cursor:pointer; background:transparent; color:var(--text-3); }
.hh-seg button.active{ background:var(--primary); color:#fff; }
.hh-filter-pill{
  height:34px; padding:0 15px; border-radius:9px; font-family:var(--font-sans); font-size:12.5px; font-weight:600;
  cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--text-2);
}
.hh-filter-pill:hover{ border-color:#c3cabf; }
.hh-filter-pill.active{ border-color:var(--primary); background:var(--primary); color:#fff; }

/* ============================================================================
   Login / PIN im neuen Look
   ========================================================================== */
#screen-login{ background:linear-gradient(135deg,#e8f2ec 0%,#f9faf8 55%,#eef0ec 100%); }
.login-logo h1{ color:var(--primary); }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.login-card h2{ color:var(--text-4); }
.emp-btn{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.emp-btn:hover{ border-color:var(--primary); }
.pin-box{ background:var(--surface); border:1px solid var(--border); border-radius:16px; }

/* ============================================================================
   Utility
   ========================================================================== */
.hh-row{ display:flex; align-items:center; gap:10px; }
.hh-grow{ flex:1; min-width:0; }
.hh-muted{ color:var(--text-4); }
.hh-addr{ font-size:12px; color:var(--text-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hh-check{
  width:22px; height:22px; flex:none; border-radius:7px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid #cdd2cb; background:#fff; cursor:pointer;
}
.hh-check.done{ border-color:var(--primary); background:var(--primary); }

/* ============================================================================
   Angleichung an REAL genutzte Bestandsklassen (aus den render*-Funktionen)
   ========================================================================== */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:none; }
.stat-label{ font-size:12px; font-weight:500; color:var(--text-4); text-transform:none; letter-spacing:0; }
.stat-card .stat-label{ margin-bottom:2px; }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 17px; }
.chart-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.chart-title{ font-size:15px; font-weight:700; letter-spacing:-.2px; color:var(--text-1); text-transform:none; margin-bottom:12px; }
.dashboard-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; }
/* Dashboard-Prioritätenzeilen (Bestand .urgent-item) im Spec-Look */
.urgent-item{ display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--border-soft); }
.urgent-item:last-child{ border-bottom:none; }
/* Chart-Card-Titel behalten Emoji, aber ruhiger Rahmen; Kanban/Board */
.dp-card{ border-radius:11px!important; }
.dp-chip{ border-radius:20px; }
/* Tonnen-/Abfall-Punkte: falls per data-tonne markiert, zentrale Farben anbieten */
[data-bin=rest]{ --_c:var(--bin-rest-bg); } [data-bin=bio]{ --_c:var(--bin-bio-bg); }
[data-bin=papier]{ --_c:var(--bin-papier-bg); } [data-bin=gelb]{ --_c:var(--bin-gelb-bg); }
[data-bin=glas]{ --_c:var(--bin-glas-bg); }

/* Mobile: Sidebar kollabiert (Bestandsverhalten erhalten) */
@media (max-width:860px){
  .mgmt-sidebar{ width:56px; }
  .mgmt-sidebar .nav-btn > span:not(.nav-icon),
  .mgmt-sidebar .nav-badge,.mgmt-logo h1,.mgmt-logo small,
  .nav-group-title,.logout-btn span,.hh-user-name,.hh-user-role,.hh-user svg,#app-version{ display:none; }
  .nav-btn{ justify-content:center; }
  .hh-topbar-search{ width:auto; flex:1; }
}