:root {
  --bg: #f6f7f9; --card: #fff; --fg: #1c2530; --muted: #5c6b7a;
  --line: #e3e8ee; --accent: #1466b8; --accent-fg: #fff;
  --chip: #eef3f9; --ok: #1a7f47; --warn: #b5651d; --open: #6b4bb5;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#151a20; --card:#1d242c; --fg:#e6ebf1; --muted:#9aa8b6;
          --line:#2b343d; --accent:#4a9de8; --chip:#243039; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
       background:var(--bg); color:var(--fg); }
header.topbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
       padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); }
header.topbar .brand { font-weight:700; font-size:17px; }
header.topbar nav { display:flex; gap:14px; flex-wrap:wrap; }
header.topbar nav a { color:var(--accent); text-decoration:none; font-weight:600; }
header.topbar .who { margin-left:auto; color:var(--muted); font-size:13px; }
main { max-width:none; margin:0; padding:16px 22px 60px; }   /* volle Seitenbreite (global) */
h1 { font-size:22px; margin:0 0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
       padding:18px; margin-bottom:18px; }
.kpi { font-size:38px; font-weight:700; color:var(--accent); }
form.filters { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
form.filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; }
form.filters input, form.filters select {
       padding:8px 10px; border:1px solid var(--line); border-radius:7px;
       background:var(--bg); color:var(--fg); font-size:14px; min-width:120px; }
.btn { display:inline-block; padding:9px 16px; border-radius:7px; border:0;
       background:var(--accent); color:var(--accent-fg); font-weight:600;
       cursor:pointer; text-decoration:none; font-size:14px; }
.btn.secondary { background:var(--chip); color:var(--fg); border:1px solid var(--line); }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); }
table { border-collapse:collapse; width:100%; font-size:13.5px; }
th, td { padding:8px 11px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
th { position:sticky; top:0; background:var(--card); font-size:12px; color:var(--muted);
     text-transform:uppercase; letter-spacing:.03em; }
tbody tr:hover { background:var(--chip); }
.chip { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px;
        font-weight:600; background:var(--chip); color:var(--fg); }
.st-open { color:var(--open); } .st-prod { color:var(--warn); } .st-done { color:var(--ok); }
.meta { color:var(--muted); font-size:13px; margin:6px 0 0; }
.count { color:var(--muted); font-size:13px; margin-bottom:10px; }
.mono { font-variant-numeric:tabular-nums; }
.btn.small { padding:5px 10px; font-size:12.5px; }
.status-updated { outline:2px solid var(--ok); }
dialog.modal { border:1px solid var(--line); border-radius:12px; padding:22px; width:min(440px,92vw);
  background:var(--card); color:var(--fg); box-shadow:0 12px 40px rgba(0,0,0,.28); }
dialog.modal::backdrop { background:rgba(0,0,0,.45); }
dialog.modal select, dialog.modal textarea { padding:8px 10px; border:1px solid var(--line);
  border-radius:7px; background:var(--bg); color:var(--fg); font-size:14px; margin-top:4px; }

/* ============================================================================
   MOBIL (Handy, <=640px) — wirkt NUR auf kleinen Screens, Desktop unveraendert.
   Ziele: kein iOS-Zoom (Felder >=16px), einspaltige Formular-Grids, groessere
   Touch-Ziele, kompaktere Topbar/Filter, keine horizontale Seiten-Scrollleiste.
   ========================================================================== */
@media (max-width: 640px) {
  main { padding: 12px 12px 48px; }
  h1 { font-size: 20px; }

  /* Topbar: Marke oben, Navigation umbrechend, Benutzer eigene Zeile */
  header.topbar { gap: 8px 12px; padding: 10px 14px; }
  header.topbar .brand { width: 100%; }
  header.topbar nav { gap: 10px 16px; width: 100%; }
  header.topbar nav a { display: inline-block; padding: 3px 0; }
  header.topbar .who { margin-left: 0; width: 100%; }

  /* iOS-Auto-Zoom verhindern: alle Formularfelder >= 16px */
  input, select, textarea { font-size: 16px !important; }

  /* Touch-Ziele */
  .btn { padding: 12px 16px; }
  .btn.small { padding: 8px 12px; }

  /* Detailseiten-Layouts (Auftrag/Artikel/Position) einspaltig.
     minmax(0,1fr) statt 1fr: sonst hat der Track min-width:auto (=min-content)
     und breite Tabellen mit festen Spalten blaehen die Seite auf, obwohl sie in
     .tablewrap sitzen. minmax(0,...) laesst den Track schrumpfen -> innerer
     .tablewrap-Scroll uebernimmt, keine horizontale Seiten-Scrollleiste. */
  .grid { grid-template-columns: minmax(0, 1fr) !important; }
  .fields { grid-template-columns: minmax(0, 1fr) !important; }
  .fields > * { grid-column: 1 / -1 !important; min-width: 0; }

  /* Filterzeilen: jedes Feld volle Breite statt enger Nebeneinander-Reihe */
  form.filters { gap: 10px; }
  form.filters label, form.filters input, form.filters select { width: 100%; min-width: 0; }

  /* Tabellen scrollen weiterhin horizontal in .tablewrap; etwas kompakter */
  table { font-size: 13px; }
  th, td { padding: 7px 9px; }

  /* Beleg-Aktionstabelle (Auftrag > Dokumente): je Beleg Label eigene Zeile,
     Buttons darunter umbrechend statt einer breiten Nowrap-Zeile. */
  table.docactions, table.docactions tbody { display: block; }
  table.docactions tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 0; border-top: 1px solid var(--line); }
  table.docactions td { display: inline-block; padding: 0 !important; border: 0; }
  table.docactions td:first-child { width: 100%; white-space: normal; }
}