:root{--bg:#F5F6FA;--panel:#FFFFFF;--primary:#1A1A1A;--accent:#2E75B6;--accent2:#4A9FD4;--success:#27AE60;--warning:#E67E22;--danger:#C0392B;--text:#1A1A2E;--muted:#6B7280;--alt:#F8FAFC;--rand:#D5D9E0;--label:240px;--input:280px;--blau-dunkel:#1E3A5F}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.versteckt{display:none!important}
/* Kopf und Navigation */
.kopf{background:var(--primary);color:#fff;display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;position:sticky;top:0;z-index:20}
.kopf .marke{font-weight:700;font-size:17px;white-space:nowrap}
.kopf .platz{flex:1}
.kopf-aktionen{display:contents}
.kopf-menue{display:none}
.nur-touch{display:none}
.feldgruppe{display:inline-flex;align-items:center;gap:12px}
.leiste-mehr,.filter-mehr{display:contents}
.nur-schmal{display:none}
.kopf button{background:transparent;border:1px solid #444;color:#fff;border-radius:6px;padding:5px 10px;cursor:pointer}
.kopf button:hover{background:#333}
.kopf .wer{color:#bbb;white-space:nowrap}
.modi{background:var(--panel);display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px;position:sticky;top:52px;z-index:19;border-bottom:1px solid var(--rand)}
.modus{background:#9CA3AF;color:#fff;text-decoration:none;border-radius:6px;padding:7px 18px;min-width:130px;text-align:center;white-space:nowrap}
.modus:hover{background:var(--primary)}
.modus.aktiv{background:var(--accent);font-weight:700}
.nav{background:#2A2A2A;display:flex;flex-wrap:wrap;gap:2px;padding:0 10px;position:sticky;top:102px;z-index:18}
.nav a{color:#ddd;text-decoration:none;padding:9px 12px;border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover{color:#fff}
.nav a.aktiv{color:#fff;border-bottom-color:var(--accent2);font-weight:600}
.inhalt{padding:14px 16px 60px;max-width:1700px;margin:0 auto}
/* Werkzeugleiste */
.leiste{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.leiste h1{font-size:20px;margin-right:auto}
.filter{background:var(--panel);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.filter .platz{flex:1}
.muted{color:var(--muted)}
.klein{font-size:12px}
/* Knöpfe */
.k{border:0;border-radius:6px;padding:6px 12px;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;min-height:28px}
.k:hover{filter:brightness(.92)}
.k:disabled{opacity:.5;cursor:default}
.k.gruen{background:var(--success)}.k.rot{background:var(--danger)}.k.orange{background:var(--warning)}.k.hell{background:var(--accent2)}.k.dunkel{background:var(--primary)}
.k.leer{background:transparent;color:var(--accent)}
.k.leer:hover{background:#EDF2F7}
.k.grau{background:transparent;color:var(--muted);border:1px solid var(--rand)}
.k.mini{padding:2px 8px;min-height:24px;font-size:13px}
.k.x{background:var(--danger);width:28px;height:28px;padding:0;min-height:0}
.k.ico{background:transparent;color:inherit;width:28px;height:28px;padding:0;min-height:0}
.k.ico:hover{background:#E5E7EB}
/* Tabellen */
.tabelle{background:var(--panel);border-radius:8px;overflow:auto}
table{border-collapse:collapse;width:100%}
th{position:sticky;top:0;background:#F0F1F5;font-weight:600;font-size:13px;padding:7px 8px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--rand);cursor:pointer;user-select:none;z-index:1}
td{padding:5px 8px;border-bottom:1px solid #EEF0F4;white-space:nowrap}
td.umbruch{white-space:normal}
tbody tr:nth-child(even){background:var(--alt)}
tbody tr:hover{background:#E8F1FB}
tbody tr.gewaehlt{background:#CFE3F7}
tbody tr{scroll-margin-top:36px}
@media (hover:hover){tbody tr:focus{outline:0;background:#CFE3F7}}
th.r,td.r{text-align:right}
th.m,td.m{text-align:center}
.tabelle.fest{max-height:calc(100vh - 210px)}
.tabelle.fest th{top:0}
.neg{color:var(--danger)}.pos{color:var(--success)}
tr.zeile-gewinn{background:#E2EFDA!important}tr.zeile-verlust{background:#FCE4EC!important}tr.zeile-be{background:#FFF9C4!important}
tr.zeile-ok{background:#E8F5E9!important}
/* Formular-Raster */
.abschnitt{background:var(--primary);color:#fff;border-radius:6px;padding:7px 12px;font-weight:700;margin:14px 0 6px}
.block{background:var(--panel);border-radius:8px;padding:8px 15px;margin-bottom:4px}
.zeile{display:flex;align-items:center;gap:6px;padding:4px 0;flex-wrap:wrap}
.zeile>label,.zeile>.lbl{width:var(--label);flex:none}
.frei>.zeile{padding-left:15px}
.feld{width:var(--input);max-width:100%;height:28px;border:2px solid #9AA1AC;border-radius:6px;background:#F9F9FA;padding:0 7px}
.feld:focus{outline:0;border-color:var(--accent)}
.feld.s{width:100px}.feld.xs{width:64px}.feld.m{width:180px}.feld.g{width:400px}
textarea.feld{height:auto;min-height:60px;padding:6px 7px;resize:vertical;border-width:0;background:#F4F5F7}
textarea.feld.voll{width:100%}
.hinweis{color:var(--muted);font-size:13px}
.qr{display:block;width:220px;height:220px;margin:8px 0;border-radius:4px}
.unter{padding:0 0 4px calc(var(--label) + 6px);font-size:13px}
.unter.blau{color:var(--accent)}.unter.ok{color:var(--success)}.unter.warn{color:var(--danger)}
.wert{font-weight:700;color:var(--success)}
.kalk{display:flex;justify-content:space-between;padding:2px 0}
.kalk.fett{font-weight:700}
.kalk.strich{border-top:1px solid var(--rand);margin-top:4px;padding-top:6px}
.check{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);margin:0;cursor:pointer}
.pos-zeile{display:flex;align-items:center;gap:6px;padding:3px 0;flex-wrap:wrap}
.griff{cursor:grab;color:var(--muted);width:18px;text-align:center;user-select:none;touch-action:none}
.pos-zeile.zieht,.task.zieht{opacity:.5}
.spalte{flex:none}
/* Durchsuchbares Dropdown */
.such{position:relative;display:inline-block;width:var(--input);max-width:100%}
.such.m{width:180px}.such.s{width:130px}.such.l{width:220px}
.such>button{width:100%;height:28px;border:0;border-radius:6px;background:#3B8ED0;color:#fff;text-align:left;padding:0 26px 0 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.such>button::after{content:"";position:absolute;right:10px;top:9px;width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.such.hell>button{background:#EEF0F4;color:var(--text)}
.such.hell>button::after{border-color:var(--text)}
.such-popup{position:fixed;z-index:1000;background:#fff;border:1px solid #bbb;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.2);padding:4px;display:flex;flex-direction:column}
.such-popup input{height:28px;border:1px solid #bbb;border-radius:4px;padding:0 6px;margin-bottom:4px;flex:none}
.such-popup ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.such-popup li{padding:4px 8px;cursor:pointer;border-radius:3px}
.such-popup li.an,.such-popup li:hover{background:#3B8ED0;color:#fff}
.segment{display:inline-flex;background:#9AA1AC;border-radius:6px;padding:2px}
.segment button{border:0;background:transparent;color:#fff;padding:3px 10px;border-radius:5px;cursor:pointer}
.segment button.an{background:#3B8ED0}
/* Dialoge */
.schleier{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;justify-content:center;align-items:flex-start;padding:24px 12px;overflow:auto}
.dialog{background:var(--bg);border-radius:12px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
.dialog>header{background:var(--primary);color:#fff;padding:12px 18px;font-weight:700;font-size:16px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center;flex:none}
.dialog>header button{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}
.dialog>.koerper{padding:6px 18px 12px;overflow:auto;flex:1}
.dialog>footer{padding:10px 18px;display:flex;justify-content:center;gap:10px;flex:none;border-top:1px solid var(--rand)}
.dialog>footer .k{padding:9px 30px;font-weight:700}
.w-s{max-width:460px}.w-m{max-width:620px}.w-l{max-width:720px}.w-xl{max-width:1000px}
/* Let's Manufacture */
.kunde-kopf{background:var(--panel);color:var(--blau-dunkel);border:1px solid #9CA3AF;border-radius:8px;display:flex;align-items:center;gap:10px;padding:8px 12px;margin-top:10px}
.auftrag-kopf{background:#E5E7EB;color:var(--blau-dunkel);border-radius:8px;display:flex;align-items:center;gap:10px;padding:6px 12px;margin-top:8px;flex-wrap:wrap}
.pfeil{background:transparent;border:0;color:inherit;font-weight:700;cursor:pointer;width:24px;font-size:14px}
.auftrag-kopf b,.kunde-kopf b{font-size:15px}
.platz{flex:1}
.zaehler{font-size:12px}
/* Blickführung: Kunde, Auftrag, Deadline, danach Status und Fortschritt; Aktionen treten zurück */
.kunde-kopf b{font-size:17px}
.auftrag-kopf .abg{font-size:14px;font-weight:600;color:var(--text)}
.auftrag-kopf .zaehler{color:#4B5563;font-size:13px}
.auftrag-kopf .such{width:170px}
.auftrag-kopf .such>button,.task .such>button{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px var(--rand)}
.auftrag-kopf .such>button::after,.task .such>button::after{border-color:var(--muted)}
.auftrag-kopf .k,.task .k,.task-neu .k,.mf-leiste .k.hell{background:transparent;color:#4B5563;box-shadow:inset 0 0 0 1px #9CA3AF}
.task .k.x{color:var(--danger);box-shadow:inset 0 0 0 1px #E5B4AE}
.titel-klein{font-weight:700;color:var(--muted);font-size:12px;margin:8px 0 2px 8px}
.task{background:var(--panel);border-radius:6px;display:flex;align-items:center;gap:8px;padding:5px 8px;margin:2px 8px}
.task.fertig{background:var(--alt)}
.task.fertig .t-titel{text-decoration:line-through}
.task .t-text{flex:1;min-width:0}
.task .t-bem{color:var(--muted);font-size:12px}
.task .t-pos{font-weight:700;font-size:13px}
.ruecklauf{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);margin-top:2px;flex-wrap:wrap}
.ruecklauf input{width:60px;height:24px;border:2px solid #9AA1AC;border-radius:6px;padding:0 5px;background:#F9F9FA}
.neu-kopf{background:#B91C1C;color:#fff;border-radius:8px;padding:8px 12px;font-weight:700;margin-top:6px}
.neu-zeile{background:#FEF2F2;border-radius:6px;display:flex;align-items:center;gap:8px;padding:6px 12px;margin:2px 8px}
.gruppe-kopf{background:var(--accent2);color:#fff;border-radius:8px;padding:8px 12px;font-weight:700;margin-top:10px}
.menue{position:fixed;background:#fff;border:1px solid #bbb;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:1000;padding:4px;min-width:180px}
.menue button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 10px;border-radius:4px;cursor:pointer}
.menue button:hover{background:#E8F1FB}
.menue hr{border:0;border-top:1px solid var(--rand);margin:4px 0}
/* Meldungen */
#meldungen{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:2000;max-width:420px}
.meldung{background:var(--primary);color:#fff;padding:9px 14px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.meldung.fehler{background:var(--danger)}.meldung.ok{background:var(--success)}
/* Anmeldung */
.anmeldung{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--primary);padding:16px}
.anmeldung form{background:#fff;border-radius:12px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.anmeldung h1{font-size:20px}
.anmeldung input{height:36px;border:2px solid #9AA1AC;border-radius:6px;padding:0 9px;width:100%}
.anmeldung .k{height:40px;font-weight:700}
.fehlertext{color:var(--danger);min-height:18px;font-size:13px}
.vorschau{display:flex;gap:8px;flex-wrap:wrap}
.vorschau figure{margin:0;position:relative;width:96px}
.vorschau img{width:96px;height:96px;object-fit:cover;border-radius:6px;background:#eee;display:block}
.vorschau figcaption{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vorschau .k.x{position:absolute;top:2px;right:2px;width:22px;height:22px;font-size:12px}
.datei-zeile{display:flex;align-items:center;gap:6px;padding:2px 0}
.kennzahl{font-size:28px;font-weight:700;color:var(--accent)}
.zwei{display:grid;grid-template-columns:minmax(320px,1fr) 2fr;gap:12px;align-items:start}
@media (max-width:900px){.zwei{grid-template-columns:1fr}}
@media (max-width:720px){
  :root{--label:100%;--input:100%}
  .zeile>label,.zeile>.lbl{width:100%}
  .unter{padding-left:0}
  .kopf .wer{display:none}
  .inhalt{padding:10px 8px 40px}
  .dialog>.koerper{padding:6px 10px 12px}
  .nav{position:static;overflow-x:auto;flex-wrap:nowrap}
  .tabelle.fest{max-height:none}
  .task{flex-wrap:wrap}
}
@media print{.kopf,.nav,.leiste .k,.filter{display:none}}
.logo-klein{max-height:80px;max-width:240px}
@media (hover:none),(pointer:coarse),(max-width:720px){
  .nur-maus{display:none!important}
  .nur-touch{display:revert}
  tbody tr{cursor:pointer}
}
@media (max-width:720px){
  /* Kopf: Name und Menüknopf, Aktionen klappen auf */
  .kopf{flex-wrap:wrap;height:auto;min-height:48px;padding:6px 12px;gap:6px}
  .kopf .marke{font-size:16px}
  .kopf-menue{display:block;width:40px;height:36px;padding:0!important;font-size:18px}
  .kopf-aktionen{display:none;width:100%;grid-template-columns:1fr 1fr;gap:6px;padding:4px 0 6px}
  .kopf.offen .kopf-aktionen{display:grid}
  .kopf-aktionen button{min-height:40px}
  .kopf,.modi{position:static}
  .modi{padding:6px 8px;flex-wrap:nowrap;overflow-x:auto;gap:4px}
  .modus{min-width:0;flex:1 0 auto;padding:8px;font-size:13px}
  .nav{padding:0 4px;scrollbar-width:none}
  /* Bedienelemente: gross genug für den Finger, 16px verhindert das Einzoomen auf dem iPhone */
  input,select,textarea,.such-popup input{font-size:16px}
  .feld,.such>button,.such-popup input,.anmeldung input{height:40px}
  .such>button::after{top:15px}
  .k{min-height:38px;padding:8px 12px}
  .k.mini{min-height:34px;padding:4px 10px}
  .k.x,.k.ico{width:38px;height:38px}
  input[type=checkbox]{width:22px;height:22px}
  .pfeil{width:36px;height:36px;flex:none}
  .segment button{padding:8px 12px}
  .ruecklauf input{height:38px;width:72px}
  .feld.m,.feld.g,.such.l,.such.m{width:100%;max-width:100%}
  .leiste{gap:6px}
  .leiste h1{flex:1 1 auto}
  .leiste .k.hell,.leiste .k.dunkel{min-height:34px;padding:5px 10px;font-size:13px}
  .filter{padding:8px;gap:8px}
  .filter>.feld{width:100%}
  .nur-schmal{display:revert}
  .filter-mehr{display:none;width:100%;flex-wrap:wrap;align-items:center;gap:8px}
  .filter.offen .filter-mehr{display:flex}
  .filter.offen .nur-schmal{background:var(--accent);color:#fff}
  .feldgruppe{width:100%}
  .leiste-mehr{display:flex;gap:6px;width:100%;overflow-x:auto;scrollbar-width:none}
  .leiste-mehr .k{flex:none}
  .feldgruppe .muted{width:72px;flex:none}
  .feldgruppe .such{flex:1;width:auto}
  .filter .platz{display:none}
  /* Tabellen als Karten */
  .tabelle.karten,.tabelle.karten table,.tabelle.karten tbody{display:block;overflow:visible}
  .tabelle.karten{background:transparent}
  .tabelle.karten thead{display:block;margin-bottom:6px}
  .tabelle.karten thead tr{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
  .tabelle.karten th{position:static;flex:none;background:#E5E7EB;border:0;border-radius:14px;padding:5px 10px;font-weight:500;font-size:12px;text-align:left}
  .tabelle.karten tbody tr{display:block;background:var(--panel);border-radius:8px;padding:9px 12px;margin-bottom:6px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .tabelle.karten tbody tr.gewaehlt{background:#CFE3F7;outline:2px solid var(--accent)}
  .tabelle.karten td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0;border:0;white-space:normal;text-align:right;overflow-wrap:anywhere;min-height:22px}
  .tabelle.karten td::before{content:attr(data-titel);color:var(--muted);font-size:12px;flex:none;max-width:45%;text-align:left}
  .tabelle.karten td:first-child{display:block;font-weight:700;font-size:15px;text-align:left;padding-bottom:4px}
  .tabelle.karten td:first-child::before{content:none}
  .tabelle.karten td.leer-wert,.tabelle.karten .nur-gross{display:none}
  /* Dialoge füllen den Bildschirm, kurze Rückfragen bleiben klein */
  .schleier{padding:0;align-items:stretch}
  .dialog{width:100%!important;max-width:100%;border-radius:0;max-height:100vh;max-height:100dvh;min-height:100vh;min-height:100dvh}
  .dialog>header{border-radius:0}
  .dialog>header button{width:40px;height:40px}
  .dialog.w-s{width:calc(100% - 24px)!important;margin:auto 12px;border-radius:12px;min-height:0;max-height:calc(100dvh - 24px)}
  .dialog.w-s>header{border-radius:12px 12px 0 0}
  .dialog>footer{flex-wrap:wrap;padding:8px 10px}
  .dialog>footer .k{flex:1 1 auto;padding:10px 14px}
  .dialog>footer:empty{display:none}
  /* Auswahllisten und Menüs */
  .such-popup{left:8px!important;top:8px!important;width:calc(100% - 16px)!important;max-height:60dvh!important}
  .such-popup li{padding:10px}
  .menue{left:8px!important;right:8px;top:auto!important;bottom:8px;max-height:70dvh;overflow:auto;padding:6px}
  .menue button{padding:12px;font-size:16px}
  #meldungen{left:12px;right:12px;bottom:12px;max-width:none}
  /* Zeilen in Formularen: Feld und Löschknopf nebeneinander, Trennlinie zwischen den Einträgen */
  .pos-zeile{padding:8px 0;border-bottom:1px solid var(--rand)}
  .pos-zeile>.feld:not(.s):not(.xs){flex:1 1 60%;width:auto;min-width:0}
  .pos-zeile>.k.x{margin-left:auto}
  .kalk{gap:12px}
  .kalk>span:last-child{flex:none;white-space:nowrap}
  /* Let's Manufacture */
  .auftrag-kopf .pfeil{order:-3}
  .auftrag-kopf b{order:-2;flex:1 1 calc(100% - 100px);min-width:0}
  .auftrag-kopf .nur-touch{order:-1}
  .auftrag-kopf .abg{flex:1 1 100%}
  .auftrag-kopf .such{flex:1 1 150px;width:auto;min-width:0}
  .auftrag-kopf .such>button{font-size:12px;height:34px;padding:0 22px 0 8px}
  .auftrag-kopf .such>button::after{top:12px;right:8px}
  .kunde-kopf{flex-wrap:wrap;padding:6px 12px}
  .task{margin:4px 0;padding:8px}
  .neu-zeile{margin:4px 0;flex-wrap:wrap}
  .task .t-text{flex:1 1 calc(100% - 70px);min-width:calc(100% - 70px)}
  .task .ruecklauf{flex:1 1 100%;margin:0}
  .lbl{width:100%!important}
}