/* =========================================================================
   WaWi MJ - Oberflaeche
   Aufbau: feste Navi-Leiste links (Eventworx-Stil), Vollbreite-Arbeitsflaeche.
   Corporate Design "maximal" ist monochrom (Logohandbuch 1.0):
     schwarz #000000 · grau #4D4D4D · weiss #FFFFFF - kein Akzentton.
   Die Marke laeuft ueber --brand / --brand-strong (hell + dunkel). Farbig
   bleiben nur die funktionalen Status (--ok / --warn / --crit) fuer Chips.
   Hausschrift: Helvetica / Neue Haas Grotesk (frei: Arimo / Liberation Sans).
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* --- Marke: monochrom (Logohandbuch "maximal") --- */
  --brand:        #000000;
  --brand-strong: #2e2e2e;   /* Hover-Schattierung */
  --brand-ink:    #ffffff;

  /* --- Navi-Leiste (Marken-Schwarz) --- */
  --rail-w:        216px;
  --rail-bg:       #17181c;
  --rail-bg-2:     #24262c;
  --rail-ink:      #c7cad0;
  --rail-ink-dim:  #7f838c;
  --rail-active:   #ffffff;
  --rail-accent:   #ffffff;   /* aktiver Balken (auf dunkler Leiste sichtbar) */
  --rail-border:   #2a2c33;

  /* --- Flaechen / Text --- */
  --ground:        #f4f5f7;
  --surface:       #ffffff;
  --surface-2:     #eef0f3;
  --surface-3:     #e5e8ec;
  --ink:           #1a1f27;
  --ink-soft:      #3d4551;
  --muted:         #727b88;
  --border:        #e3e6ea;
  --border-strong: #ccd1d9;

  /* --- Semantik (unabhaengig von der Marke) --- */
  --ok:    #1f8a44;  --ok-bg:   #e6f3ea;
  --warn:  #b3690a;  --warn-bg: #f8eddc;
  --crit:  #c0392b;  --crit-bg: #f7e5e3;
  --info:  #2f6f9e;  --info-bg: #e5eef5;

  --radius:   10px;
  --radius-lg: 14px;
  --shadow:   0 1px 2px rgba(20, 24, 31, .06), 0 2px 8px rgba(20, 24, 31, .05);
  --font: "Helvetica Neue", Helvetica, "Neue Haas Grotesk Text Pro", Arimo,
          "Liberation Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:        #f2f3f5;
    --brand-strong: #d5d7db;
    --brand-ink:    #15171b;

    --rail-bg:      #121317;
    --rail-bg-2:    #1e2026;
    --rail-ink:     #c2c6cd;
    --rail-ink-dim: #767a83;
    --rail-active:  #ffffff;
    --rail-accent:  #ffffff;
    --rail-border:  #24262d;

    --ground:        #12151a;
    --surface:       #191d24;
    --surface-2:     #222732;
    --surface-3:     #2b313d;
    --ink:           #e8eaee;
    --ink-soft:      #c3c9d3;
    --muted:         #8b929e;
    --border:        #272d37;
    --border-strong: #3a414e;

    --ok:   #4cc46a;  --ok-bg:   #16271b;
    --warn: #eaa64c;  --warn-bg: #2c2110;
    --crit: #f26b5e;  --crit-bg: #2f1a18;
    --info: #6fb1de;  --info-bg: #16242f;

    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .3);
  }
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 14.5px/1.55 var(--font);
  background: var(--ground);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Monochrom: Inhalts-Links brauchen die Unterstreichung als Affordance.
   Ausgenommen: Navigations-Baum und Tab-Leisten (dort traegt der Kontext). */
main a:not(.btn) { text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
main a:not(.btn):hover { text-decoration-color: currentColor; }
main .wg-tree a, main .subnav a, main .artikel-pick { text-decoration: none; }

h1, h2, h3 { color: var(--ink); line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.4rem;  margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.08rem; margin: 1.8rem 0 .7rem; }
h3 { font-size: .95rem;  margin: 1.2rem 0 .5rem; }

.muted { color: var(--muted); }
.right { text-align: right; }
.num   { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* =========================================================================
   Shell
   ========================================================================= */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem .6rem 1rem;
}

.rail__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: .35rem .55rem 1rem;
}
.rail__logo { width: 132px; height: auto; display: block; }
.rail__app {
  font-size: .68rem; color: var(--rail-ink-dim);
  letter-spacing: .16em; text-transform: uppercase;
}

.rail__cap {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--rail-ink-dim);
  padding: .9rem .7rem .25rem;
}

.rail a.nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  color: var(--rail-ink);
  font-size: .9rem;
  font-weight: 500;
  border-left: 2px solid transparent;
}
.rail a.nav:hover { background: var(--rail-bg-2); color: #fff; text-decoration: none; }
.rail a.nav.is-active {
  background: var(--rail-bg-2);
  color: var(--rail-active);
  border-left-color: var(--rail-accent);
}
.rail a.nav .ic {
  width: 1.15rem; text-align: center; font-size: 1rem; flex: none;
  opacity: .85;
}

.rail__foot {
  margin-top: auto;
  padding: .8rem .7rem .2rem;
  border-top: 1px solid var(--rail-border);
  font-size: .82rem;
  color: var(--rail-ink-dim);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.rail__foot .who { color: var(--rail-ink); font-weight: 600; }
.rail__foot a { color: var(--rail-ink-dim); }
.rail__foot a:hover { color: #fff; }
.rail__logout { margin: 0; }
.rail__logout button {
  font: inherit; color: var(--rail-ink-dim); background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
}
.rail__logout button:hover { color: #fff; text-decoration: underline; }

.workspace { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 50px;
  padding: .4rem 1.6rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
  color: var(--muted);
}
.topbar .crumb { color: var(--muted); }
.topbar .crumb a { color: var(--muted); }
.topbar .crumb a:hover { color: var(--brand); }
.topbar .crumb b { color: var(--ink); font-weight: 600; }
.topbar .spacer { flex: 1; }

main {
  flex: 1;
  width: 100%;
  max-width: 1500px;
  padding: 1.5rem 1.6rem 4rem;
}

/* Nur-Login-Ansicht (nicht angemeldet): keine Leiste, zentriert */
.plain {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.plain .loginbox {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem;
}
.plain .loginbox__logo { width: 150px; height: auto; display: block; margin-bottom: .5rem; }
.plain .loginbox .appname {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.3rem;
}

/* Kopfleisten-Knoepfe (Menue nur am Handy, Scannen immer) */
.topbar__menu, .topbar__scan {
  font: inherit; color: var(--ink); background: none; border: 1px solid var(--border-strong);
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; min-height: 34px;
}
.topbar__menu { display: none; padding: .3rem .45rem; }
.topbar svg, .tabbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.topbar__scan:hover, .topbar__menu:hover { border-color: var(--ink); }
.tabbar, .rail-backdrop { display: none; }

/* ---------- Handy / Tablet hochkant ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  /* Navi-Leiste wird zur Schublade von links */
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(300px, 86vw); height: 100%;
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.4);
    padding-top: calc(.9rem + env(safe-area-inset-top)); padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  body.nav-offen .rail { transform: none; }
  .rail a.nav { padding: .7rem .7rem; font-size: 1rem; }
  .rail-backdrop { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(10,12,15,.45); }
  .rail-backdrop[hidden] { display: none; }
  body.nav-offen { overflow: hidden; }

  .topbar {
    position: sticky; top: 0; z-index: 40; padding: .4rem .7rem; padding-top: calc(.4rem + env(safe-area-inset-top));
    min-height: 52px; gap: .5rem;
  }
  .topbar__menu { display: inline-flex; }
  .topbar .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-size: .9rem; }
  .topbar .spacer { display: none; }
  .topbar__scan span { display: none; }
  main { padding: 1rem .9rem calc(84px + env(safe-area-inset-bottom)); }

  /* untere Leiste */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 18px rgba(0,0,0,.06);
  }
  .tabbar__a {
    font: inherit; background: none; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .3rem 0;
    color: var(--muted); font-size: .68rem; text-decoration: none !important; border-radius: 8px;
  }
  .tabbar__a.is-active { color: var(--ink); font-weight: 700; }
  .tabbar__a svg { width: 22px; height: 22px; }
  .tabbar__scan {
    font: inherit; cursor: pointer; justify-self: center; display: flex; flex-direction: column; align-items: center;
    gap: 1px; width: 64px; height: 64px; margin-top: -26px; border-radius: 50%; justify-content: center;
    background: var(--brand); color: var(--brand-ink); border: 4px solid var(--surface);
    box-shadow: 0 4px 14px rgba(0,0,0,.28); font-size: .6rem; font-weight: 700;
  }
  .tabbar__scan svg { width: 26px; height: 26px; }

  /* Seitenkopf: Knoepfe umbrechen, Kennzahlen kompakt */
  .page-head { gap: .7rem; }
  .page-head__actions { width: 100%; }
  h1 { font-size: 1.25rem; }
  .btn { min-height: 38px; }
  input, select, textarea { font-size: 16px; }  /* iOS zoomt sonst beim Antippen */
}

/* =========================================================================
   Bausteine
   ========================================================================= */

.page-head {
  display: flex;
  align-items: flex-start;
  gap: .8rem 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.page-head__main { min-width: 0; flex: 1 1 22rem; }
.page-head__main h1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  overflow-wrap: anywhere;
}
.page-head__sub { margin-top: .35rem; color: var(--muted); font-size: .9rem; }
.page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }

.meta-line { color: var(--muted); font-size: .9rem; }
.meta-line .sep { margin: 0 .5rem; opacity: .5; }

/* Panel = abgesetzter Inhaltsblock mit optionalem Kopf */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.panel__head h2, .panel__head h3 { margin: 0; }
.panel__head .spacer { flex: 1; }
.panel__body { padding: 1.1rem; }
.panel__body.flush { padding: 0; }

/* Karten-Raster (Kennzahlen) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.kpi .n { font-size: 1.9rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: .84rem; margin-top: .1rem; }
.kpi--link {
  display: block; cursor: pointer;
  transition: border-color .1s, transform .1s;
}
main a.kpi--link, main a.kpi--link:hover { text-decoration: none; }
.kpi--link:hover { border-color: var(--brand); }
.kpi--link:active { transform: translateY(1px); }

/* Definitionsliste (Key/Value) */
.deflist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.4rem;
  font-size: .92rem;
}
.deflist dt { color: var(--muted); }
.deflist dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .deflist { grid-template-columns: 1fr; gap: .1rem 0; }
  .deflist dd { margin-bottom: .6rem; } }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .46rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font: 500 .87rem/1.2 var(--font);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, var(--border-strong)); }
.btn-danger:hover { border-color: var(--crit); background: var(--crit-bg); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.btn-row form { display: inline; margin: 0; }

.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }

/* =========================================================================
   Status-Chips
   ========================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip::before {
  content: "";
  width: .42rem; height: .42rem; border-radius: 999px;
  background: currentColor;
}
.chip-entwurf, .chip-abgelehnt, .chip-storniert {
  background: var(--surface-2); color: var(--muted);
}
.chip-gesendet, .chip-versendet, .chip-angebot, .chip-anfrage {
  background: var(--warn-bg); color: var(--warn);
}
.chip-beauftragt, .chip-bezahlt, .chip-bestaetigt {
  background: var(--ok-bg); color: var(--ok);
}
.chip-abgeschlossen { background: var(--info-bg); color: var(--info); }

/* =========================================================================
   Tabellen  (.simple bleibt als Alias erhalten)
   ========================================================================= */

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table.simple, table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
table.simple th, table.data th {
  text-align: left;
  padding: .55rem .7rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.simple td, table.data td {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.simple tbody tr:hover td, table.data tbody tr:hover td { background: var(--surface-2); }
table.simple tbody tr:last-child td { border-bottom: 0; }
table.simple tr.dispo-trenner td {
  background: var(--surface-2); color: var(--muted); font-weight: 700;
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .35rem .7rem;
}
table.simple tr.dispo-trenner:hover td { background: var(--surface-2); }

.th-sort {
  display: inline-flex; align-items: center; gap: .3rem;
  color: inherit; text-decoration: none; cursor: pointer;
}
.th-sort:hover { color: var(--ink); }
.th-sort.is-aktiv { color: var(--ink); }
.th-sort__ic { font-size: .75em; opacity: .55; }
.th-sort:hover .th-sort__ic, .th-sort.is-aktiv .th-sort__ic { opacity: 1; }

/* Key/Value-Variante (linke Spalte als Label) */
table.kv th { position: static; background: transparent; border-bottom: 1px solid var(--border);
  width: 12rem; color: var(--muted); font-weight: 500; }
table.kv td { border-bottom: 1px solid var(--border); }

.summ-table { width: auto; min-width: 16rem; margin-left: auto; }
.summ-table th { position: static; background: transparent; }
.summ-table tr:last-child th, .summ-table tr:last-child td {
  border-top: 1px solid var(--border-strong); font-weight: 700; color: var(--ink);
}

/* =========================================================================
   Formulare
   ========================================================================= */

form .field { margin-bottom: 1rem; }
form label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
form input, form select, form textarea {
  width: 100%;
  padding: .45rem .55rem;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  font: inherit;
  font-size: .92rem;
  background: var(--surface);
  color: var(--ink);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
form input[type="checkbox"], form input[type="radio"] { width: auto; }
/* Eingabefelder ausserhalb von <form> (Angebots-Editor, Scan-Seiten ...) gleich aussehen lassen */
main input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),
main select, main textarea {
  padding: .4rem .5rem; border: 1px solid var(--border-strong); border-radius: 7px;
  font: inherit; font-size: .92rem; background: var(--surface); color: var(--ink);
}
.field { margin-bottom: .9rem; }
.field > label { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .25rem; }
.form-grid .field input:not([type=checkbox]):not([type=radio]), .form-grid .field select { width: 100%; }
.helptext { display: block; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.errorlist { list-style: none; padding: 0; margin: .25rem 0; color: var(--crit); font-size: .82rem; }

.form-narrow { max-width: 40rem; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1.1rem;
}

/* =========================================================================
   Meldungen
   ========================================================================= */

.messages { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: .45rem; }
.messages li {
  padding: .6rem .9rem;
  border-radius: 8px;
  font-size: .9rem;
  border: 1px solid transparent;
}
.messages .success { background: var(--ok-bg);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.messages .error,
.messages .warning { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.messages .info    { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* Leerzustand */
.empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* =========================================================================
   Angebots-Editor: Seitenspalte + Positionsraster
   ========================================================================= */

.layout-sidebar { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 980px) { .layout-sidebar { grid-template-columns: 1fr; } }

.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.sidebar h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 1.2rem 0 .45rem;
}
.sidebar h3:first-child { margin-top: 0; }

.wg-tree, .wg-tree ul { list-style: none; margin: 0; padding-left: .9rem; font-size: .86rem; }
.wg-tree { padding-left: 0; }
.wg-tree li { margin: .12rem 0; }
.wg-tree a { color: var(--ink-soft); }
.wg-tree a:hover { color: var(--brand); }
.wg-row { display: flex; align-items: center; gap: .3rem; }
.wg-caret {
  flex: none; width: 1rem; padding: 0; border: 0; background: transparent;
  color: var(--muted); font-size: .68rem; cursor: pointer; text-align: center;
  border-radius: 4px; line-height: 1.5;
}
.wg-caret:hover { color: var(--ink); background: var(--surface-2); }
.wg-caret--leer { cursor: default; }
.wg-caret--leer:hover { background: transparent; }
.wg-link.is-aktiv { color: var(--ink); font-weight: 700; }

#artikel-ergebnisse { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }
.artikel-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; text-align: left; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--ground); cursor: pointer; font: inherit;
}
.artikel-pick:hover { border-color: var(--brand); }
.artikel-pick .ap-name { font-size: .87rem; color: var(--ink); font-weight: 600; }
.artikel-pick .ap-meta { font-size: .76rem; color: var(--muted); }

.formset-table { font-size: .86rem; }
.formset-table th { padding: .4rem .45rem; position: static; }
.formset-table td { padding: .3rem .35rem; }
.formset-table input, .formset-table select { min-width: 5.5rem; padding: .32rem .4rem; }
.formset-table input[type="checkbox"] { min-width: 0; }

.summenzeile { font-weight: 700; color: var(--ink); }

/* Angebots-Editor: Kapitel-Verwaltung + gruppierte Positionstabelle */
.kaprow {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.kaprow:last-child { border-bottom: 0; }
.kap-move { display: flex; gap: .2rem; }
.kap-move form, .kaprow form { display: inline; margin: 0; }
details.kap-add > summary { list-style: none; }
details.kap-add > summary::-webkit-details-marker { display: none; }

#material-tabelle tbody.kap-group { border-top: 2px solid var(--border-strong); }
#material-tabelle .kap-head td {
  background: var(--surface-2); font-size: .9rem; padding: .45rem .5rem;
}
#material-tabelle .kap-head strong { color: var(--ink); }
#material-tabelle .kap-head .btn { margin-left: .6rem; }
#material-tabelle .kap-sub td {
  border-top: 1px solid var(--border-strong);
  border-bottom: 0; color: var(--muted); padding: .4rem .5rem;
}
#material-tabelle tbody.pool .kap-head td { background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); }

/* Kleines Dropdown fuer die PDF-Export-Varianten */
.pdf-menu { position: relative; }
.pdf-menu > summary { list-style: none; cursor: pointer; }
.pdf-menu > summary::-webkit-details-marker { display: none; }
.pdf-menu__list {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 15rem; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow); padding: .3rem; display: flex; flex-direction: column;
}
.pdf-menu__list a {
  padding: .45rem .6rem; border-radius: 7px; color: var(--ink); text-decoration: none;
  font-size: .86rem;
}
.pdf-menu__list a:hover { background: var(--surface-2); }

/* =========================================================================
   Angebots-Bausteine-Editor
   ========================================================================= */

.editor { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }

.editor__katalog { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; margin: 0; }
.editor__katalog h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 1.1rem 0 .4rem;
}
.editor__katalog input[type="search"] { margin-bottom: .4rem; }
.kat-hint { font-size: .76rem; margin-bottom: .6rem; }

.kat-baum, .kat-baum ul { list-style: none; margin: 0; padding: 0; }
.kat-baum ul { padding-left: .8rem; }
.kat-knoten__kopf {
  display: flex; align-items: center; gap: .35rem; padding: .18rem .2rem;
  cursor: pointer; border-radius: 6px; font-size: .88rem;
}
.kat-knoten__kopf:hover { background: var(--surface-2); }
.kat-caret { width: .8rem; color: var(--muted); font-size: .7rem; }
.kat-liste { list-style: none; margin: 0; padding: 0; }
.kat-artikel { padding-left: 1.4rem; }
.kat-artikel-zeile {
  display: flex; align-items: baseline; gap: .5rem; justify-content: space-between;
  padding: .28rem .4rem; border-radius: 6px; cursor: grab; font-size: .84rem;
  border: 1px solid transparent;
}
.kat-artikel-zeile:hover { background: var(--surface-2); border-color: var(--border); }
.kat-artikel-zeile:active { cursor: grabbing; }
.kaz-name { color: var(--ink); flex: 1; min-width: 0; }
.kaz-menge { color: var(--muted); font-size: .74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kaz-menge.kaz-knapp { color: var(--crit); font-weight: 700; }
#kat-treffer { border: 1px solid var(--border); border-radius: 8px; padding: .3rem; margin-bottom: .6rem; }

.bau-liste { display: flex; flex-direction: column; gap: .9rem; }
.bau-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--ground); }
.bau-block__kopf {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.bau-kap-name {
  flex: 1; max-width: 24rem; font-weight: 700; color: var(--ink);
  border: 1px solid transparent; background: transparent; padding: .2rem .3rem; border-radius: 6px;
}
.bau-kap-name:hover, .bau-kap-name:focus { border-color: var(--border-strong); background: var(--surface); }
.bau-block__summe { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bau-block__body { padding: .6rem; display: flex; flex-direction: column; gap: .5rem; min-height: 2.4rem; }
.bau-block__direkt { display: flex; flex-direction: column; gap: .5rem; }
.bau-zeile-add { margin: 0 .7rem .6rem; }

.bau-block--sub { border-color: var(--border-strong); background: var(--surface); }
.bau-block--sub > .bau-block__kopf {
  background: transparent; border-bottom: 1px dashed var(--border-strong);
}
.bau-block--sub .bau-kap-name { font-size: .92rem; }

.bau-dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: 8px;
  text-align: center; color: var(--muted); font-size: .8rem; padding: .5rem;
}

.bau-card {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: .5rem .6rem;
}
.bau-card.is-drag { opacity: .4; }
.bau-card.is-ueberbucht { flex-wrap: wrap; border-color: var(--crit); background: var(--crit-bg); }
.bau-card.is-sub { flex-wrap: wrap; border-left: 3px solid var(--brand-strong); }
.bau-chip {
  display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: .1rem .4rem; border: 1px solid currentColor;
  border-radius: 4px; margin-bottom: .25rem;
}
.bau-chip--sub { color: var(--brand-strong); }
.bau-zumiet {
  flex: 0 0 100%; order: 5; margin-top: .4rem; padding: .5rem .6rem;
  border: 1px solid var(--crit); border-radius: 6px; background: var(--surface);
}
.bau-zumiet__warn { color: var(--crit); font-weight: 700; font-size: .8rem; }
.bau-zumiet__row { display: flex; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
.bau-zumiet__lief { flex: 1 1 10rem; min-width: 0; padding: .3rem .35rem; font-size: .85rem; }
.bau-card--kommentar { background: var(--warn-bg); }
.bau-card--umbruch { background: var(--surface-2); color: var(--muted); font-style: italic; }
.bau-griff { cursor: grab; color: var(--muted); user-select: none; padding-top: .1rem; }
.bau-card__label { flex: 1; }
.bau-komment { flex: 1; }
.bau-card__haupt { flex: 1; min-width: 0; }
.bau-card__name { font-weight: 600; color: var(--ink); }
.bau-card__name-inp { width: 100%; }
.bau-card__felder { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-top: .4rem; }
.bau-feld { display: flex; flex-direction: column; gap: .1rem; font-size: .7rem; color: var(--muted); }
.bau-feld input, .bau-feld select { width: 6.2rem; padding: .25rem .35rem; font-size: .82rem; }
.bau-feld input[type="date"] { width: 8.4rem; }
.bau-card__werte {
  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  min-width: 6rem; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.bcw-gesamt { font-weight: 700; color: var(--ink); }
.bcw-ze, .bcw-faktor { color: var(--muted); font-size: .72rem; }
.bau-del {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .2rem;
}
.bau-del:hover { color: var(--crit); }
.drop-mark { height: 0; border-top: 2px solid var(--brand); margin: -1px 0; }

.pers-zeile {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  padding: .4rem 0; border-bottom: 1px solid var(--border);
}
.pers-zeile select { min-width: 10rem; }
.pers-zeile input { width: 8rem; }
.pers-zeile input[type="datetime-local"] { width: 12rem; }
.pers-gesamt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Lager: Lieferschein-Scan */
.scan-eingabe #barcode { max-width: 22rem; }
#pos-tabelle tr.pos-ok td { background: var(--ok-bg); }
.geraet-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem; margin: .1rem .15rem; border-radius: 999px;
  background: var(--surface-2); font-size: .8rem; font-variant-numeric: tabular-nums;
}
.geraet-weg {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 0;
}
.geraet-weg:hover { color: var(--crit); }
.menge-stepper { display: inline-flex; align-items: center; gap: .25rem; }
.menge-stepper input { width: 3.5rem; text-align: center; }
.menge-stepper > button[data-delta] {
  width: 1.8rem; height: 1.8rem; border: 1px solid var(--border-strong);
  background: var(--surface); border-radius: 6px; cursor: pointer; font-size: 1rem;
}

.subnav {
  display: flex; gap: .3rem; border-bottom: 1px solid var(--border);
  margin: 0 0 1.1rem;
}
.subnav a {
  padding: .5rem .9rem; font-size: .9rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* =========================================================================
   Handy-Feinschliff (am Ende, damit es die Grundregeln sicher ueberschreibt)
   ========================================================================= */
.sidebar__klapp { display: none; }
@media (max-width: 900px) {
  .page-head { gap: .7rem; }
  .page-head__actions { width: 100%; }
  .btn { min-height: 38px; }
  input, select, textarea { font-size: 16px !important; }   /* iOS zoomt sonst beim Antippen */
  input, select, textarea { max-width: 100%; min-width: 0; }
  html { scroll-padding-top: 64px; scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid > *, .field { min-width: 0; }
  .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { width: 100%; }
  .panel__body { padding-left: .9rem; padding-right: .9rem; }

  /* Seitenleisten (Warengruppen-Baum) einklappbar */
  aside.sidebar > h3 { display: none; }
  .sidebar__klapp {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem;
    font: inherit; font-weight: 600; color: var(--ink); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: 8px; padding: .55rem .8rem; cursor: pointer; text-align: left;
  }
  .sidebar__klapp b { font-weight: 700; }
  aside.sidebar.ist-zu > :not(.sidebar__klapp) { display: none; }
  aside.sidebar[data-klappbar] { padding: 0; background: none; border: 0; box-shadow: none; }
  aside.sidebar[data-klappbar]:not(.ist-zu) .sidebar__klapp { margin-bottom: .5rem; }
  aside.sidebar[data-klappbar]:not(.ist-zu) .sidebar__klapp i { transform: rotate(180deg); }
}

/* Tabellen am Handy als Karten (mobil.js setzt .karten + data-label) */
@media (max-width: 700px) {
  .table-wrap:has(> table.karten) { overflow: visible; }
  table.karten, table.karten > tbody, table.karten > tfoot, table.karten tr, table.karten td { display: block; width: 100%; }
  table.karten { border: 0; background: none; box-shadow: none; }
  table.karten > thead { display: none; }
  table.karten > tbody > tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    margin: 0 0 .55rem; padding: .55rem .8rem; box-shadow: var(--shadow);
  }
  .panel__body.flush > table.karten, .panel__body.flush > .table-wrap > table.karten,
  .panel > table.karten, .panel > .table-wrap > table.karten { padding: .6rem .6rem .1rem; }
  table.karten > tbody > tr:hover > td { background: none; }
  table.karten td {
    border: 0 !important; padding: .16rem 0 !important; display: block; text-align: right;
    min-height: 0; overflow-wrap: break-word;
  }
  table.karten td::after { content: ""; display: table; clear: both; }
  table.karten td::before {
    content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 400;
    text-align: left; float: left; max-width: 45%; margin-right: .8rem; padding-top: .1rem;
  }
  table.karten td[data-label=""]::before { display: none; }
  table.karten td.ist-leer { display: none; }
  /* erste Zelle = Titel der Karte */
  table.karten td:first-child { text-align: left; font-size: 1rem; font-weight: 600; color: var(--ink); padding-bottom: .3rem !important; }
  table.karten td:first-child::before { display: none; }
  table.karten td.num { font-variant-numeric: tabular-nums; }
  table.karten tr.karte-voll td { text-align: left; }
  table.karten > tfoot > tr { padding: .5rem .8rem; border-radius: 10px; background: var(--surface-2); }
  table.karten > tfoot td { display: inline; width: auto; }
  table.karten td .btn, table.karten td form { margin: .1rem 0; }
}

/* =========================================================================
   Scanner-Overlay (static/js/scanner.js)
   ========================================================================= */
body.scan-offen { overflow: hidden; }
.wsc {
  position: fixed; inset: 0; z-index: 90; background: #0b0c0f; color: #f2f4f6;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wsc[hidden] { display: none; }
.wsc__kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; }
.wsc__titel { flex: 1; font-weight: 700; font-size: 1rem; min-width: 0; }
.wsc__zu { font: inherit; font-size: 1.8rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 .3rem; }
.wsc__bild { position: relative; flex: 1 1 auto; min-height: 220px; max-height: 58vh; background: #000; overflow: hidden; }
.wsc__reader { position: absolute; inset: 0; }
.wsc__reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
.wsc__reader #qr-shaded-region { border-color: rgba(0,0,0,.45) !important; }
.wsc__rahmen { display: none; }
.wsc__keinecam { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; color: #c9cdd4; font-size: .95rem; }
.wsc__meldung { min-height: 3rem; padding: .7rem .9rem; font-size: 1.02rem; font-weight: 600; }
.wsc__meldung.is-ok { background: #13361f; color: #7ee59b; }
.wsc__meldung.is-warn { background: #3a2a0d; color: #ffc768; }
.wsc__meldung.is-err { background: #3d1613; color: #ff9b91; }
.wsc__meldung .btn { margin-top: .4rem; }
.wsc__unten { padding: .7rem .9rem 1rem; display: grid; gap: .6rem; overflow-y: auto; flex: 0 1 auto; }
.wsc__hand { display: flex; gap: .5rem; }
.wsc__hand input { flex: 1; min-width: 0; font-size: 16px; padding: .6rem .7rem; border-radius: 8px; border: 1px solid #3a3e46; background: #17191e; color: #fff; }
.wsc__knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.wsc__knoepfe .btn { background: #1c1f25; color: #fff; border-color: #3a3e46; }
.wsc__knoepfe .btn.btn-primary { background: #fff; color: #000; }
.wsc__log { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .88rem; max-height: 30vh; overflow-y: auto; }
.wsc__log li { padding: .3rem .5rem; border-radius: 6px; background: #17191e; border-left: 3px solid #4cc46a; }
.wsc__log li.is-err { border-left-color: #f26b5e; }
.wsc__log li.is-warn { border-left-color: #eaa64c; }
@media (min-width: 901px) {
  .wsc { inset: 5vh auto auto 50%; transform: translateX(-50%); width: 460px; max-height: 90vh; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .wsc__bild { max-height: 340px; }
}

/* =========================================================================
   Geraete-Steckbrief + Inventur
   ========================================================================= */
.steck-kopf { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
.steck-status { font-weight: 700; }
.steck-status--verfuegbar { background: var(--ok-bg); color: var(--ok); }
.steck-status--vermietet { background: var(--info-bg); color: var(--info); }
.steck-status--werkstatt { background: var(--warn-bg); color: var(--warn); }
.steck-status--gesperrt, .steck-status--ausgemustert { background: var(--crit-bg); color: var(--crit); }
.steck-barcode { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink); }
.steck-hinweis { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: .8rem; }
.steck-status-form { display: grid; gap: .6rem; }
.steck-notiz { display: grid; gap: .25rem; }
.steck-notiz textarea { width: 100%; }
.steck-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.steck-lager { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.steck-lager label { display: grid; gap: .2rem; flex: 1 1 10rem; }
.steck-bemerkung { margin-top: .8rem; padding: .6rem .8rem; background: var(--surface-2); border-radius: 8px; font-size: .88rem; }
@media (max-width: 900px) { .steck-knoepfe .btn { flex: 1 1 40%; } }

.inv-wahl { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.inv-wahl label { display: grid; gap: .2rem; flex: 1 1 14rem; }
.inv-scan { width: 100%; font-size: 1.05rem; padding: .9rem; margin: .4rem 0 .8rem; }
.inv-zahlen { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.inv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.inv-liste li { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.inv-liste li .inv-ic { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; background: var(--surface-2); color: var(--muted); }
.inv-liste li.is-da .inv-ic { background: var(--ok-bg); color: var(--ok); }
.inv-liste li.is-neu .inv-ic { background: var(--info-bg); color: var(--info); }
.inv-liste li.is-warn .inv-ic { background: var(--warn-bg); color: var(--warn); }
.inv-liste li .inv-txt { min-width: 0; flex: 1; }
.inv-liste li .inv-txt small { display: block; color: var(--muted); }

.ls-kamera { display: none; }
@media (max-width: 900px) { .ls-kamera { display: flex; width: 100%; justify-content: center; font-size: 1.05rem; padding: .8rem; margin-bottom: .8rem; } }

/* Kennzahlen-Leiste (Inventur u. a.) */
.inv-zahlen .rk-stat { display: grid; gap: .1rem; }
.inv-zahlen .rk-stat .l { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.inv-zahlen .rk-stat .n { font-size: 1.25rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Startseite: Schnellzugriff (vor allem am Handy) */
.schnell { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin: 1.2rem 0 .4rem; }
.schnell__k {
  font: inherit; text-align: left; cursor: pointer; display: grid; gap: .15rem; padding: .8rem .9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--ink-soft); text-decoration: none !important;
}
.schnell__k b { color: var(--ink); font-size: .98rem; }
.schnell__k span { font-size: .8rem; color: var(--muted); }
.schnell__k:hover { border-color: var(--brand); }
.schnell__k--haupt { background: var(--brand); border-color: var(--brand); }
.schnell__k--haupt b, .schnell__k--haupt span { color: var(--brand-ink); }
@media (max-width: 700px) {
  .schnell { grid-template-columns: 1fr 1fr; }
  .schnell__k--haupt { grid-column: 1 / -1; padding: 1rem; }
  .grid:has(> .kpi) { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .8rem .9rem; }
  .kpi .n { font-size: 1.5rem; }
}

/* Angebots-Editor am Handy: Katalog als Blatt, Antippen statt Ziehen */
.kaz-plus {
  font: inherit; font-weight: 700; line-height: 1; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); border-radius: 6px; width: 1.7rem; height: 1.7rem; flex: none; cursor: pointer; margin-left: .3rem;
}
.kaz-plus:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.kat-blatt-kopf, .kat-auf, .bau-mobil { display: none; }
.kat-meldung { position: sticky; top: 0; z-index: 2; margin: 0 .8rem; padding: .45rem .6rem; border-radius: 8px; background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: .85rem; }
.kat-meldung[hidden] { display: none; }
@media (max-width: 1000px) {
  .editor__katalog { display: none; }
  body.kat-offen { overflow: hidden; }
  body.kat-offen .editor__katalog {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 70; max-height: none; border-radius: 0;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overflow: hidden;
  }
  body.kat-offen .editor__katalog .panel__body { overflow-y: auto; flex: 1; }
  .kat-blatt-kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
  .kat-blatt-ziel { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
  .kat-blatt-ziel select { flex: 1; min-width: 0; }
  .kat-auf { display: flex; width: 100%; justify-content: center; margin-bottom: .7rem; }
  .kaz-plus { width: 2.2rem; height: 2.2rem; font-size: 1.15rem; }
  .kat-artikel-zeile { align-items: center; padding: .45rem .3rem; }
  .bau-griff { display: none; }
  .bau-mobil { display: flex; gap: .3rem; }
  .bau-card { flex-wrap: wrap; }
  .bau-card__haupt { flex: 1 1 calc(100% - 2rem); }
  .bau-zumiet { min-width: 0; }
  .bau-zumiet__lief { flex: 1 1 100%; }
  .bau-mobil--zeile { flex: 0 0 100%; order: 9; align-items: center; margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--border); }
  .bau-mobil__kap { flex: 1; min-width: 0; font-size: 14px !important; padding: .25rem; }
  .bau-card__werte { flex-direction: row; flex-wrap: wrap; gap: .2rem .6rem; min-width: 0; align-items: baseline; }
  .bau-feld input, .bau-feld select { width: 5.4rem; }
  .bau-block__kopf { flex-wrap: wrap; }
  .bau-kap-name { flex: 1 1 10rem; min-width: 0; }
  .bau-dropzone { display: none; }
  .pers-zeile select, .pers-zeile input { min-width: 0; width: 100%; }
}
@media (max-width: 900px) {
  body.ist-dirty #editor-speichern {
    position: fixed; right: 1rem; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 46;
    box-shadow: 0 6px 18px rgba(0,0,0,.3); padding: .7rem 1.2rem; font-size: 1rem;
  }
}

.editor > *, .editor__bau, .editor__bau > .panel { min-width: 0; }
@media (max-width: 700px) {
  /* Formular-Zeilen (Adressen, Kommunikation ...): Label ueber dem Feld */
  table.karten.formset-table td { text-align: left; }
  table.karten.formset-table td::before { float: none; display: block; max-width: none; margin: .3rem 0 .15rem; }
  table.karten.formset-table td:first-child::before { display: block; }
  table.karten.formset-table td:first-child { font-size: inherit; font-weight: 400; padding-bottom: .16rem !important; }
  table.karten.formset-table td input:not([type=checkbox]), table.karten.formset-table td select, table.karten.formset-table td textarea { width: 100%; }
}

/* ======================================================================
   Kalkulation (Plan/Ist je Projekt, Gesamtkalkulation, Kosten erfassen)
   ====================================================================== */
.kalk-pos { color: var(--ok); }
.kalk-neg { color: var(--crit); }
.kalk-knapp { color: var(--warn); }
.kalk-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1rem; }
.kalk-kpis .kpi .l { margin: 0 0 .15rem; }
.kalk-ist { font-size: .86rem; color: var(--muted); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.kalk-ist b { color: var(--ink); font-weight: 600; }
.kalk-ist b.kalk-pos { color: var(--ok); } .kalk-ist b.kalk-neg { color: var(--crit); } .kalk-ist b.kalk-knapp { color: var(--warn); }
.kalk-ergebnis { border-color: var(--brand); }
.kalk-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.kalk-wahl a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid var(--border-strong, var(--border));
  border-radius: 999px; font-size: .86rem; text-decoration: none; color: var(--ink); background: var(--surface); }
.kalk-wahl a.is-aktiv { background: var(--brand); color: var(--brand-ink, #fff); border-color: var(--brand); }
.kalk-wahl a .chip { font-size: .7rem; }
.kalk-hinweis { background: var(--warn-bg); color: var(--warn); padding: .55rem .8rem; border-radius: 8px; font-size: .9rem; }
.kalk-tab td.num, .kalk-tab th.num, .kalk-zeilen td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalk-tab tbody th { text-align: left; font-weight: 600; }
.kalk-einr { padding-left: 1.4rem !important; color: var(--ink-2, var(--ink)); }
.kalk-summe th, .kalk-summe td { border-top: 2px solid var(--border-strong, var(--border)); font-weight: 700; }
.kalk-zeile-erloes th, .kalk-zeile-erloes td { font-weight: 700; }
.kalk-fuss { font-size: .85rem; }
.kalk-gruppe { border-top: 1px solid var(--border); }
.kalk-gruppe > summary { display: flex; align-items: baseline; gap: .7rem; padding: .7rem 1rem; cursor: pointer; list-style: none; }
.kalk-gruppe > summary::-webkit-details-marker { display: none; }
.kalk-gruppe > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.kalk-gruppe[open] > summary::before { transform: rotate(90deg); }
.kalk-gruppe > summary span:first-of-type { font-weight: 600; }
.kalk-gruppe > summary b { margin-left: auto; font-variant-numeric: tabular-nums; }
.kalk-anz { font-size: .8rem; }
.kalk-fehlt td { background: var(--warn-bg); }
.kalk-warn { color: var(--warn); font-size: .8rem; }
.kalk-auto { display: inline-block; font-size: .68rem; padding: 0 .35rem; border-radius: 4px; background: var(--surface-2); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.kalk-basis { font-size: .74rem; padding: .1rem .45rem; border-radius: 4px; background: var(--surface-2); white-space: nowrap; }
.kalk-basis--ist { background: var(--info-bg); color: var(--info); }
form.inline { display: inline; margin: 0; }
.kalk-filter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.kalk-filter select { width: auto; }
.kalk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kalk-zwei > .panel { margin-bottom: 0; }
label.check { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }
label.check input { width: auto; margin: 0; }
/* Kurzfassung auf der Projektseite */
.kalk-kurz { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; padding: .8rem 1rem; margin: 0 0 1rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); }
main a.kalk-kurz, main a.kalk-kurz:hover { text-decoration: none; }
.kalk-kurz:hover { border-color: var(--brand); }
.kalk-kurz > span { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.kalk-kurz small { color: var(--muted); font-size: .76rem; }
.kalk-kurz b { font-size: 1.05rem; }
.kalk-kurz__mehr { margin-left: auto; color: var(--muted); font-size: .86rem; }
/* Kosten-Formular */
.kosten-art { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.kosten-art__opt { position: relative; display: block; cursor: pointer; }
.kosten-art__opt input { position: absolute; opacity: 0; pointer-events: none; }
.kosten-art__opt span { display: block; text-align: center; padding: .6rem; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; font-weight: 600; }
.kosten-art__opt input:checked + span { background: var(--brand); color: var(--brand-ink, #fff); border-color: var(--brand); }
.kosten-art__opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.kosten-fahrt { background: var(--surface-2); border-radius: 8px; padding: .7rem .8rem .3rem; margin-bottom: .8rem; }
.kosten-fahrt[hidden] { display: none; }
.kosten-brutto { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-top: -.2rem; }
.kosten-brutto select { width: auto; }
.kosten-beleg { position: relative; }
.kosten-beleg input[type=file] { position: absolute; left: 0; top: 0; width: 1px !important; min-width: 0 !important;
  height: 1px; padding: 0 !important; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.kosten-foto { display: inline-flex; margin: .2rem 0 .3rem; }
.kosten-beleg .clearable-file-input, .kosten-beleg > a { font-size: .85rem; }
@media (max-width: 900px) {
  .kalk-zwei { grid-template-columns: 1fr; gap: 0; }
  .kalk-zwei > .panel { margin-bottom: 1rem; }
  .kalk-kurz__mehr { margin-left: 0; width: 100%; }
  .kosten-foto { width: 100%; justify-content: center; padding: .8rem; font-size: 1rem; }
}
/* Datum + Uhrzeit nebeneinander (Projekt, Angebots-Zeitraeume) */
.datum-zeit { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .4rem; }
.datum-zeit input { min-width: 0; }

/* Amortisation je Artikel */
.amort-balken { position: relative; height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; min-width: 90px; }
.amort-balken span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.amort-balken__gebucht { background: var(--muted); opacity: .35; }
.amort-balken__ist { background: var(--warn); }
.amort-balken__ist.is-voll { background: var(--ok); }
.amort-zelle { min-width: 140px; }
.amort-zelle .amort-balken { display: inline-block; width: calc(100% - 4.5rem); vertical-align: middle; }
.amort-pz { display: inline-block; width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; }
tr.amort-drueber td { color: var(--ok); }