/* Meier Hoch-/Tiefbau Designsystem – Tokens und Komponenten */
:root, [data-theme="light"] {
  --paper: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --line: #d7dde4;
  --line-strong: #b9c2cc;
  --line-input: #7c8794;
  --ink: #1b2431;
  --muted: #5b6674;
  --meier-blau: #01498a;
  --on-meier-blau: #ffffff;
  --meier-blau-soft: #e0edf9;
  --meier-blau-print: #01498a;
  --good: #276b43;
  --good-soft: #e1f0e6;
  --warn: #8a6008;
  --warn-soft: #f6e9d2;
  --danger: #a52f2f;
  --danger-soft: #f5dede;
  --shadow-card: 0 1px 2px rgba(27,36,49,.06), 0 8px 24px -12px rgba(27,36,49,.18);
}
[data-theme="dark"] {
  --paper: #131922;
  --surface: #1b2430;
  --surface-2: #202b38;
  --line: #2c3846;
  --line-strong: #3c4a5a;
  --line-input: #6a7a8d;
  --ink: #eef1f4;
  --muted: #9fabba;
  --meier-blau: #6faee6;
  --on-meier-blau: #0b1e30;
  --meier-blau-soft: #183652;
  --meier-blau-print: #01498a;
  --good: #57b781;
  --good-soft: #173425;
  --warn: #dba845;
  --warn-soft: #3a2c10;
  --danger: #e08080;
  --danger-soft: #3a1f1f;
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --content-max: 1180px;
  --sidebar-width: 240px;
  --font-doc: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-label: "Barlow Semi Condensed", Arial, sans-serif;
}

/* Meier Hoch-/Tiefbau – gemeinsame Komponenten. Präfix mh- . Werte nur über Tokens. */

.mh-app, .mh-app *{ box-sizing:border-box; }
body.mh-app, .mh-app{ background:var(--paper); color:var(--ink); font-family:var(--font-doc); font-size:15px; line-height:1.5; margin:0; }
.mh-app a{ color:var(--meier-blau); }
.mh-num{ font-variant-numeric:tabular-nums; }
.mh-eyebrow{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:12px; color:var(--muted); }
.mh-page{ max-width:var(--content-max); margin:0 auto; padding:0 var(--space-5) var(--space-8); }
@media (max-width:640px){ .mh-page{ padding-inline:var(--space-4); } }

/* ---------- AppBar ---------- */
.mh-appbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  padding:var(--space-3) var(--space-5); background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-card); }
.mh-app .mh-brand, .mh-brand{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--ink); }
.mh-logo-plate{ display:inline-flex; align-items:center; justify-content:center; background:#ffffff; border-radius:var(--radius-md);
  padding:4px 8px; flex:none; box-shadow:0 0 0 1px var(--line); }
.mh-logo-plate img{ display:block; height:26px; width:auto; }
.mh-brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.mh-brand-text strong{ font-size:15px; letter-spacing:.01em; white-space:nowrap; }
.mh-brand-text span{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.mh-appbar-nav{ display:flex; gap:2px; flex-wrap:wrap; }
.mh-appbar-nav a{ padding:7px 11px; border-radius:var(--radius-md); font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; }
.mh-appbar-nav a:hover{ color:var(--ink); background:var(--surface-2); }
.mh-appbar-nav a[aria-current="page"]{ color:var(--meier-blau); background:var(--meier-blau-soft); }
.mh-spacer{ flex:1 1 auto; }

/* ---------- Button ---------- */
.mh-btn{ appearance:none; border:1px solid var(--line-input); background:var(--surface); color:var(--ink);
  padding:8px 13px; border-radius:var(--radius-md); font:600 13.5px/1.2 var(--font-doc); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.mh-btn:hover{ border-color:var(--meier-blau); }
.mh-btn:focus-visible, .mh-input:focus-visible, .mh-appbar-nav a:focus-visible{ outline:2px solid var(--meier-blau); outline-offset:2px; }
.mh-btn-primary{ background:var(--meier-blau); color:var(--on-meier-blau); border-color:var(--meier-blau); }
.mh-btn-primary:hover{ filter:brightness(1.12); }
.mh-btn-ghost{ background:transparent; border-color:transparent; color:var(--muted); }
.mh-btn-ghost:hover{ color:var(--ink); border-color:var(--line-input); background:var(--surface-2); }
.mh-btn-danger{ color:var(--danger); border-color:var(--danger); background:transparent; }
.mh-btn-danger:hover{ background:var(--danger-soft); }
.mh-btn-sm{ padding:5px 9px; font-size:12.5px; border-radius:var(--radius-sm); }
.mh-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.mh-btn-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }

/* ---------- Field ---------- */
.mh-field label, .mh-label{ display:block; font-family:var(--font-label); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  font-weight:600; color:var(--muted); margin-bottom:4px; }
.mh-input{ width:100%; border:1px solid var(--line-input); border-radius:var(--radius-md); padding:8px 10px;
  font:14px/1.4 var(--font-doc); background:var(--surface); color:var(--ink); }
.mh-input:focus{ outline:2px solid var(--meier-blau); outline-offset:0; border-color:var(--meier-blau); }
textarea.mh-input{ resize:vertical; min-height:64px; line-height:1.5; }
.mh-hint{ font-size:12px; color:var(--muted); margin-top:4px; }
.mh-field.is-error .mh-input{ border-color:var(--danger); }
.mh-field.is-error .mh-hint{ color:var(--danger); }
.mh-field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-3); }
.mh-check{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink); cursor:pointer; }
.mh-check input{ accent-color:var(--meier-blau); width:15px; height:15px; }

/* ---------- Card ---------- */
.mh-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-card); }
.mh-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.mh-card-head h2, .mh-card-head h3{ margin:0; font-size:19px; line-height:1.35; }
.mh-card-meta{ color:var(--muted); font-size:12.5px; display:flex; flex-direction:column; gap:2px; }
.mh-card.is-link{ cursor:pointer; }
.mh-card.is-link:hover{ border-color:var(--meier-blau); }
.mh-card-new{ border:1.5px dashed var(--line-input); border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; padding:var(--space-4); min-height:140px; background:var(--surface-2); color:var(--muted); cursor:pointer; font:600 13.5px var(--font-doc); }
.mh-card-new:hover{ border-color:var(--meier-blau); color:var(--meier-blau); }
.mh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--space-3); }

/* ---------- Stat ---------- */
.mh-stats{ display:flex; gap:var(--space-6); flex-wrap:wrap; }
.mh-stat b{ display:block; font-size:22px; line-height:26px; font-variant-numeric:tabular-nums; }
.mh-stat span{ font-size:12px; color:var(--muted); }

/* ---------- Badge ---------- */
.mh-badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-label); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); background:var(--surface-2); color:var(--muted); white-space:nowrap; }
.mh-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.mh-badge-info{ background:var(--meier-blau-soft); color:var(--meier-blau); }
.mh-badge-good{ background:var(--good-soft); color:var(--good); }
.mh-badge-warn{ background:var(--warn-soft); color:var(--warn); }
.mh-badge-danger{ background:var(--danger-soft); color:var(--danger); }

/* ---------- Table ---------- */
.mh-table-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); }
.mh-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.mh-table th{ text-align:left; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:var(--muted);
  font-weight:700; padding:10px 12px; border-bottom:2px solid var(--line-strong); background:var(--surface-2); white-space:nowrap; }
.mh-table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.mh-table tr:last-child td{ border-bottom:none; }
.mh-table tbody tr:hover{ background:var(--surface-2); }
.mh-table tr.is-selected{ background:var(--meier-blau-soft); }
.mh-table tr.is-group td{ background:var(--surface-2); font-weight:700; }
.mh-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mh-table td .mh-input{ border-color:transparent; background:transparent; padding:5px 6px; border-radius:var(--radius-sm); font-size:13.5px; }
.mh-table td .mh-input:hover{ border-color:var(--line-input); }
.mh-table td .mh-input:focus{ border-color:var(--meier-blau); background:var(--surface); }
.mh-table tfoot td{ border-top:2px solid var(--line-strong); font-weight:700; background:var(--surface-2); }

/* ---------- Notice ---------- */
.mh-notice{ display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:var(--radius-md); font-size:13.5px;
  background:var(--meier-blau-soft); color:var(--ink); border:1px solid var(--line); }
.mh-notice strong{ color:var(--meier-blau); }
.mh-notice-warn{ background:var(--warn-soft); } .mh-notice-warn strong{ color:var(--warn); }
.mh-notice-danger{ background:var(--danger-soft); } .mh-notice-danger strong{ color:var(--danger); }
.mh-notice-good{ background:var(--good-soft); } .mh-notice-good strong{ color:var(--good); }

/* ---------- Dialog ---------- */
.mh-dialog-backdrop{ position:fixed; inset:0; background:rgba(19,25,34,.45); display:flex; align-items:center; justify-content:center; padding:var(--space-4); z-index:100; }
.mh-dialog{ background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  width:min(440px,100%); padding:var(--space-5); }
.mh-dialog h2{ margin:0 0 6px; font-size:19px; line-height:1.35; }
.mh-dialog p{ margin:0; color:var(--muted); font-size:14px; }
.mh-dialog-actions{ display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-5); flex-wrap:wrap; }

/* ---------- Menu ---------- */
.mh-menu{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:6px; min-width:220px; }
.mh-menu button{ width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:var(--radius-md); font:13.5px var(--font-doc);
  color:var(--ink); cursor:pointer; display:flex; gap:8px; align-items:center; }
.mh-menu button:hover{ background:var(--surface-2); }
.mh-menu button.is-danger{ color:var(--danger); }
.mh-menu hr{ border:none; border-top:1px solid var(--line); margin:5px 2px; }

/* ---------- Section heading ---------- */
.mh-section-head{ display:flex; align-items:baseline; gap:10px; margin:0 0 var(--space-3); }
.mh-section-head .num{ font-family:var(--font-label); font-weight:700; color:var(--meier-blau); font-size:14px; }
.mh-section-head h2{ margin:0; font-size:18px; }
.mh-page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap; margin:var(--space-6) 0; }
.mh-page-head h1{ margin:2px 0 0; font-size:26px; line-height:32px; }
.mh-page-head p{ margin:6px 0 0; color:var(--muted); font-size:14px; max-width:60ch; }

/* ---------- Empty ---------- */
.mh-empty{ padding:40px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line-input); border-radius:var(--radius-lg); font-size:14px; }