:root {
  /* Layout: PC-Arbeitsfläche. Kopfleiste mit Logo und Reitern, darunter die Übersicht in zwei Spalten:
     links "Jetzt zu tun" nach Dringlichkeit, rechts Projekte und erwartete Lieferungen. Rot bleibt für Dringendes reserviert. */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F8FC;
  --ink: #121218;
  --muted: #5D6073;
  --line: #D3D6E6;
  --blue: #1010A8;
  --blue-ink: #FFFFFF;
  --blue-soft: #E5E5F7;
  --red: #E10C0C;
  --warn-bg: #FFF1BF; --warn-fg: #6B4D00; --warn-bar: #E9A800;
  --bad-bg: #FDE0DE; --bad-fg: #A00B0B; --bad-bar: #E10C0C;
  --ok-bg: #D8F1E1; --ok-fg: #14683B; --ok-bar: #1F9D57;
  --info-bg: #E5E5F7; --info-fg: #1A1A8A; --info-bar: #1010A8;
  --font-display: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
}
* { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  padding-block: 0 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 1440px; margin: 0 auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; }
a { color: var(--blue); }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
.muted { color: var(--muted); }

/* Kopf */
.top { display: flex; align-items: center; gap: 24px; padding: 14px 0 0; flex-wrap: wrap; }
.logo { background: #fff; border-radius: 8px; padding: 6px 0; display: flex; }
.logo img { height: 42px; width: auto; display: block; }
.top .grow { flex: 1; }
.me { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.me select { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.testbar { background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: 6px 12px; font-size: 13px; margin-top: 12px; }
nav.tabs { display: flex; gap: 4px; margin-top: 14px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 16px; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--muted); cursor: pointer; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.count { font-family: var(--font-mono); font-size: 12px; background: var(--blue-soft); color: var(--blue); border-radius: 10px; padding: 1px 8px; }
.count.red { background: var(--red); color: #fff; }

.btn { background: var(--blue); color: var(--blue-ink); border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(1.12); }
.btn:focus-visible, .tab:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); }
.btn.quiet { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.btn.red { background: var(--red); color: #fff; }
.btn.small { padding: 5px 11px; font-size: 13px; }
.btn.link { background: none; color: var(--blue); padding: 4px 6px; font-weight: 500; text-decoration: underline; }

main { padding-top: 22px; display: grid; gap: 22px; }
.sec-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sec-h h2 { font-size: 22px; font-weight: 600; }
.sec-h p { margin: 0; color: var(--muted); font-size: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }

/* Ablauf */
.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.step { position: relative; text-align: left; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--info-bar); border-radius: 10px; padding: 10px 14px 12px; cursor: pointer; }
.step:hover { border-color: var(--blue); }
.step:not(:last-child)::after { content: "›"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); width: 10px; text-align: center; color: var(--muted); font-size: 22px; line-height: 1; }
.step .k { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.step .n { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.step .u { font-size: 12.5px; color: var(--muted); }
.step.zero { border-top-color: var(--line); } .step.zero .n { color: var(--muted); }
.step.last { border-top-color: var(--ok-bar); }
.step .flag { display: block; margin-top: 4px; }
.inq { width: 100%; }
.inq td, .inq th { vertical-align: middle; }
/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; cursor: pointer; border-left-width: 6px; }
.kpi:hover { border-color: var(--blue); }
.kpi .n { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: 14px; margin-top: 6px; }
.kpi.bad { border-left-color: var(--bad-bar); } .kpi.bad .n { color: var(--bad-fg); }
.kpi.warn { border-left-color: var(--warn-bar); }
.kpi.info { border-left-color: var(--info-bar); }
.kpi.ok { border-left-color: var(--ok-bar); }

.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.stack { display: grid; gap: 22px; }

/* Pillen */
.pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 12px; padding: 2px 10px; white-space: nowrap; }
.pill.bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.info { background: var(--info-bg); color: var(--info-fg); }
.pill.neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* Aufgabenliste */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 16px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo .bar { border-radius: 0 3px 3px 0; }
.bar.bad { background: var(--bad-bar); } .bar.warn { background: var(--warn-bar); } .bar.info { background: var(--info-bar); } .bar.ok { background: var(--ok-bar); }
.todo .t { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.todo .m { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.todo .act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.todo .chase { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-top: 8px; font-size: 13.5px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Projekte */
.proj { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.proj:last-child { border-bottom: 0; }
.proj .h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.proj .nm { font-weight: 600; }
.segs { display: flex; gap: 3px; }
.segs i { flex: 1; height: 8px; border-radius: 2px; background: var(--line); }
.segs i.arrived { background: var(--ok-bar); } .segs i.ordered { background: var(--info-bar); }
.segs i.einkauf { background: repeating-linear-gradient(45deg, var(--info-bar) 0 3px, var(--surface) 3px 6px); border: 1px solid var(--info-bar); }
.segs i.requested { background: var(--surface); border: 1.5px solid var(--muted); }
.miss { font-size: 13px; color: var(--muted); display: grid; gap: 1px; }
.miss b.bad { color: var(--bad-fg); font-weight: 500; }

/* Listen und Bestellungen */
.order { padding: 16px 18px; display: grid; gap: 12px; }
.order + .order { border-top: 1px solid var(--line); }
.order .head { display: flex; gap: 10px 18px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.order .title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.order .meta { color: var(--muted); font-size: 13.5px; margin-top: 3px; display: flex; gap: 4px 16px; flex-wrap: wrap; }
.order .right { text-align: right; display: grid; gap: 6px; justify-items: end; }
.order .right .big { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.poslist { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.poslist .p { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--surface); }
.poslist .p + .p { border-top: 1px solid var(--line); }
.poslist .q { font-family: var(--font-mono); color: var(--muted); font-size: 13px; }
.poslist .art { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 6px; }
.empty { color: var(--muted); padding: 22px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
.group-h { font-family: var(--font-display); font-size: 18px; font-weight: 600; padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.group-h .btn, .group-h .pill { font-family: var(--font-body); font-size: 14px; }
.group-h .pill { font-size: 12px; }
.kw { padding: 8px 16px; background: var(--surface-2); font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.kw.bad { color: var(--bad-fg); background: var(--bad-bg); }
.tl { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; padding: 9px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.tl .d { font-family: var(--font-mono); font-size: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12.5px; padding: 10px 14px; border-bottom: 2px solid var(--line); }
td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.t { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.scroll { overflow-x: auto; }

.field { display: grid; gap: 4px; min-width: 0; }
.field label, .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) 70px 80px auto; gap: 8px; align-items: end; }
.choice { display: grid; gap: 8px; }
.choice label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; align-items: start; }
.choice label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.choice small { color: var(--muted); display: block; }
pre.mail { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; font-family: var(--font-mono); font-size: 12.5px; margin: 0; }
.note { font-size: 13.5px; color: var(--muted); margin: 0; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.hist .t { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-right: 8px; }

@media (max-width: 1100px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step::after { display: none !important; }
}
@media (max-width: 640px) {
  .todo li { grid-template-columns: 6px minmax(0, 1fr); }
  .todo .act { grid-column: 2; justify-content: flex-start; }
  .poslist .p { grid-template-columns: 70px minmax(0, 1fr); }
  .poslist .p .btn { grid-column: 2; justify-self: start; }
  .prow { grid-template-columns: 1fr 1fr; }
  .row2, .row3 { grid-template-columns: minmax(0, 1fr); }
  .tl { grid-template-columns: 70px minmax(0, 1fr); }
  .order .right { text-align: left; justify-items: start; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .kpi { transition: filter .12s, border-color .12s; } }
/* v6 */
.pn { font-family: var(--font-mono); font-weight: 600; font-size: 0.9em; background: var(--blue-soft); color: var(--blue); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.pn.stock { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.nr { font-family: var(--font-mono); font-weight: 600; font-size: 0.92em; }
.photos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ph { border: 1px solid var(--line); border-radius: 8px; padding: 0; background: var(--surface-2); cursor: zoom-in; overflow: hidden; width: 84px; height: 64px; }
.ph:hover { border-color: var(--blue); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bigph { width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.poslist .p.sel { grid-template-columns: 26px 90px minmax(0, 1fr) auto; }
.syncnote { font-size: 13px; color: var(--muted); }
.pill.hero { background: var(--ok-bg); color: var(--ok-fg); }
.chk { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: start; padding: 8px 12px; background: var(--surface); }
.chk + .chk { border-top: 1px solid var(--line); }
details summary { cursor: pointer; color: var(--blue); }

.mailed { display: grid; gap: 10px; } .mailed textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; font-family: var(--font-body); line-height: 1.5; resize: vertical; } .mailed input[readonly] { background: var(--surface-2); } .mailstate { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.tabs { overflow: visible !important; } .more { position: relative; margin-left: auto; } .menu { position: absolute; right: 0; top: 100%; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(10,10,60,.18); padding: 6px; min-width: 210px; display: grid; } .menu button { text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; } .menu button:hover { background: var(--blue-soft); color: var(--blue); }
.atts { display: flex; gap: 10px; flex-wrap: wrap; } .att { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 6px 8px; cursor: pointer; background: var(--surface); } .att:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); } .att img { width: 52px; height: 40px; object-fit: cover; border-radius: 4px; } .att small { display: block; } .pdfic { width: 52px; height: 40px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--bad-fg); }
.att input[type=checkbox] { width: auto !important; padding: 0 !important; flex: none; } .att { font-weight: 400; color: var(--ink); font-size: 14px; }

/* ---- echtes Programm ---- */
a.btn { text-decoration: none; display: inline-block; }
form.inline { display: inline; margin: 0; }
.top .me { margin-left: auto; }
.me form { display: inline; }
nav.tabs a.tab { text-decoration: none; }
.tab .count { margin-left: 2px; }
details.more > summary.tab { list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more { position: relative; margin-left: auto; }
details.more .menu a { text-decoration: none; padding: 10px 12px; border-radius: 8px; color: var(--ink); font-size: 15px; }
details.more .menu a:hover { background: var(--blue-soft); color: var(--blue); }
.flash { border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-weight: 500; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); } .flash.err { background: var(--bad-bg); color: var(--bad-fg); }
.testbar { margin-top: 12px; }
.mailprev { background: #fff; color: #121218; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; overflow-x: auto; }
.page { max-width: 980px; display: grid; gap: 18px; }
.formcard { padding: 20px 22px; display: grid; gap: 16px; }
.field input[type=checkbox], .field input[type=radio] { width: auto; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.poslist label.p { cursor: pointer; }
.poslist .p input[type=checkbox] { width: 18px; height: 18px; }
.ph img { cursor: zoom-in; }
.pill.uncertain { background: var(--bad-bg); color: var(--bad-fg); }
.warnbox { background: var(--warn-bg); color: var(--warn-fg); border-radius: 8px; padding: 12px 14px; }
.warnbox.bad { background: var(--bad-bg); color: var(--bad-fg); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.prow { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 80px 90px; }
.logo-login { display: flex; justify-content: center; margin-bottom: 8px; }
.login { max-width: 400px; margin: 70px auto; display: grid; gap: 16px; }
table.list td, table.list th { padding: 8px 10px; }
.tbl-actions form { display: inline; }

/* Plattform: Dashboard-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tile { display: block; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 10px; color: var(--ink); text-decoration: none; }
.tile:hover { background: var(--surface-2); }
.tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tile h3 { font-size: 20px; margin-bottom: 6px; color: var(--blue); }
.tile p { color: var(--muted); margin-bottom: 8px; }
.tile.soon { border-top-color: var(--line); }
.tile.soon h3 { color: var(--muted); }
.tile.admin { border-top-color: var(--muted); }
.modbox { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0; }