:root{
  --accent:#D81E05; --accent-dark:#B01804; --dark:#1E1E1E; --grey:#666;
  --line:#e2e2e2; --bg:#f5f6f7; --card:#ffffff;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--dark); display:flex; flex-direction:column; height:100vh;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:3px solid var(--accent);
  padding:14px 22px; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.brand{font-size:20px; font-weight:700; letter-spacing:.3px;}
.brand-ep{background:var(--accent); color:#fff; padding:2px 8px; border-radius:5px; margin-right:6px;}
.topright{display:flex; align-items:center; gap:12px;}
.syncbtn{background:#eef2f7; border:1px solid #cfe0f5; color:#0b5394; padding:6px 12px; border-radius:8px; font-size:13px; cursor:pointer; font-weight:600;}
.syncbtn:hover{background:#e0eaf5;}
.syncbtn:disabled{opacity:.6; cursor:default;}
.syncbtn.has-due{background:#fde8e6; border-color:var(--accent); color:var(--accent);}
.verfueg{padding:6px 11px; border-radius:8px; font-size:13px; margin-bottom:10px; font-weight:600;}
.verfueg.vok{background:#e6f4ea; color:#1e7a34;}
.verfueg.vanf{background:#fff4e0; color:#8a5300;}
.marktinfo{background:#f0f6ff; color:#0b5394; padding:5px 10px; border-radius:8px; font-size:12.5px; margin-bottom:10px; font-weight:600;}
.finbox{background:#fbf3f1; border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin:10px 0;}
.fin-head{font-size:14px; margin-bottom:6px;}
.fin-ab{color:var(--accent); font-size:15px;}
.fin-terms{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:#444; margin-bottom:4px;}
.fin-hint{font-size:11px; color:#999;}
.mailitem{background:#fafafa; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:8px;}
.mailhead{font-size:14px;}
.mailmeta{font-size:12px; color:var(--grey); margin:2px 0 4px;}
.mailbody{font-size:12.5px; color:#555;}
.mailbtn2{margin-top:6px !important; padding:6px 12px !important; font-size:13px !important;}
.status{font-size:13px; color:var(--grey);}
.logout{font-size:12px; color:var(--accent); text-decoration:none; border:1px solid var(--accent); padding:4px 10px; border-radius:8px; font-weight:600;}
.logout:hover{background:var(--accent); color:#fff;}

/* Layout: Chat + Seitenleiste */
.workspace{flex:1; display:flex; min-height:0;}
.maincol{flex:1; display:flex; flex-direction:column; min-width:0;}
.sidebar{width:300px; flex-shrink:0; border-left:1px solid var(--line); background:#fff; overflow-y:auto; padding:14px 12px;}
.side-head{font-weight:700; font-size:15px; display:flex; justify-content:space-between; align-items:center;}
.side-shop{font-size:12px; color:var(--accent); text-decoration:none; border:1px solid var(--accent); padding:2px 8px; border-radius:6px;}
.side-shop:hover{background:var(--accent); color:#fff;}
.side-sub{font-size:11.5px; color:var(--grey); margin:3px 0 10px;}
.side-list{display:flex; flex-direction:column; gap:5px;}
.side-item{display:flex; flex-direction:column; gap:3px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--dark); font-size:13px; background:#fafafa;}
.side-item:hover{background:#f0f0f0; border-color:#ccc;}
.side-top{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.side-preise{font-size:11.5px; color:#777;}
.side-preise b{color:#1e7a34;}
.side-model{font-weight:600;}
.side-qty{font-size:11px; padding:1px 7px; border-radius:10px; font-weight:600; white-space:nowrap;}
.side-qty.vok{background:#e6f4ea; color:#1e7a34;}
.side-qty.vanf{background:#fff4e0; color:#8a5300;}
.side-empty{color:var(--grey); font-size:13px; padding:8px; line-height:1.5;}
@media(max-width:820px){ .sidebar{display:none;} }

/* ---- E-Mail-Einstellungen ---- */
.maillisthead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;padding:2px 4px;}
.linkbtn:hover{text-decoration:underline;}
.mailcfg{display:flex;flex-direction:column;gap:5px;}
.mailcfg label{font-size:12px;color:#555;margin-top:6px;font-weight:600;}
.mailcfg input[type=email],.mailcfg input[type=password],.mailcfg input:not([type]){
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;}
.mailcfg input:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.mc-row{display:flex;gap:10px;}
.mc-row>div{flex:1;display:flex;flex-direction:column;}
.mc-row>div:last-child{flex:0 0 80px;}
.mc-chk{display:flex;align-items:center;gap:8px;font-weight:600;margin-top:10px;}
.mc-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.mc-status{font-size:13px;}
.mc-status.ok{color:#1a7f37;font-weight:600;}
.mc-status.err{color:var(--accent);font-weight:600;}
.mc-trenner{border-top:2px solid var(--line);margin:16px 0 10px;}
.leasingbox{background:#faf9f7;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:13px;line-height:1.5;margin-top:4px;}
.warnfarbe{color:#b26a00;}
.okfarbe{color:#1a7f37;}
.mc-banner img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;}
.mc-banner input[type=file]{font-size:12px;}
.mailcfg textarea{padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.5;resize:vertical;}
.mailcfg textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}

/* ---- Vorbereiten: links Angebot | rechts Original-Anfrage ---- */
.msg.wide .bubble{max-width:100%;width:100%;}
.split{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;}
.split-l{min-width:0;}
.split-r{min-width:0;background:#fbfaf8;border:1px solid var(--line);border-radius:10px;padding:12px;
  position:sticky;top:0;}
.split-rhead{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--accent);margin-bottom:8px;
  text-transform:uppercase;}
.split-meta{font-size:12.5px;color:#444;background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;margin-bottom:8px;line-height:1.5;}
.split-body{font-size:12px;line-height:1.5;color:#333;white-space:pre-wrap;word-break:break-word;
  max-height:420px;overflow:auto;margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px;}
.prep{font-size:14px;}
.prep .prep-n{color:var(--accent);}

/* ---- Status-Badges (Anfragen / Angebote) ---- */
.ang-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  vertical-align:middle;white-space:nowrap;}
.b-erstellt{background:#fff3e0;color:#b26a00;border:1px solid #ffd699;}
.b-versendet{background:#e7f3ff;color:#0b5cad;border:1px solid #b6d9f7;}
.b-nachgefasst{background:#f3e8ff;color:#6b21a8;border:1px solid #ddc4f5;}
.b-gewonnen{background:#e6f6ea;color:#1a7f37;border:1px solid #a9dcb8;}
.b-verloren{background:#fdeaea;color:#b42318;border:1px solid #f6c5c1;}
.fg-spacer{flex:1;}
.mailitem.ist-bearbeitet{opacity:.72;}
.mailerledigt{font-size:12px;color:#0b5cad;background:#f3f9ff;border:1px solid #d6e9fb;
  border-radius:7px;padding:6px 9px;margin-top:6px;}
.mailerledigt a{color:var(--accent);}
.mailkunde{font-size:12.5px;color:#1a7f37;background:#f2fbf5;border:1px solid #cdeed8;
  border-radius:7px;padding:5px 9px;margin-top:5px;}
.mailkunde.warn{color:#b26a00;background:#fff8ec;border-color:#ffd699;}
a.btn{display:inline-block;text-decoration:none;}

/* ---- Shop-Anbindung ---- */
.woobox{display:flex;flex-direction:column;gap:6px;}
.woo-zugang label{font-size:12px;font-weight:600;color:#555;margin-top:6px;display:block;}
.woobox input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;
  font-family:inherit;width:100%;box-sizing:border-box;}
.woobox input:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.woobox table.pos{margin-top:6px;}

/* ---- Sende-Freigabe ---- */
.freigabe{display:flex;flex-direction:column;gap:8px;}
.fg-head{font-weight:700;font-size:15px;color:var(--accent);padding-bottom:6px;border-bottom:2px solid var(--accent);margin-bottom:4px;}
.fg-grid{display:grid;grid-template-columns:70px 1fr;gap:8px 10px;align-items:center;}
.fg-lbl{font-size:12px;font-weight:600;color:#555;}
.fg-lbl2{font-size:12px;font-weight:600;color:#555;margin-top:6px;}
.fg-von{font-size:14px;color:#333;background:var(--light);padding:8px 10px;border-radius:8px;}
.freigabe input,.freigabe textarea{padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:14px;font-family:inherit;width:100%;box-sizing:border-box;}
.freigabe textarea{resize:vertical;line-height:1.5;}
.freigabe input:focus,.freigabe textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.fg-anhang{background:#f6f8fa;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;margin-top:4px;}
.fg-anhang a{color:var(--accent);}
.fg-eigen{background:#fff8ec;border:1px solid #ffd699;border-radius:8px;padding:10px 12px;
  margin-top:10px;font-size:13px;color:#8a5300;}
.fg-eigen .hint{margin:4px 0 8px;}
.fg-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
.fg-status{font-size:13px;}
.fg-status.ok{color:#1a7f37;font-weight:700;}
.fg-status.err{color:var(--accent);font-weight:600;}

/* ---- Vorgaenge: Reiter Angebote | Auftraege | Bestellungen ---- */
.vg{display:flex;flex-direction:column;gap:10px;}
.vg-reiter{display:flex;gap:4px;border-bottom:2px solid var(--line);}
.vg-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:8px 14px;font-size:14px;font-weight:600;color:#666;cursor:pointer;border-radius:8px 8px 0 0;}
.vg-tab:hover{background:var(--light);color:var(--dark);}
.vg-tab.aktiv{color:var(--accent);border-bottom-color:var(--accent);background:#fff;}
.vg-tab .hint{background:none;padding:0;margin:0;font-size:11px;color:inherit;opacity:.7;}
.vg-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.vg-suche{flex:1;min-width:180px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;}
.vg-suche:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.vg-status{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;}
.vg-zahl{background:none;padding:0;margin:0;color:#666;font-size:12.5px;white-space:nowrap;}
.vg-archivchk{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#555;white-space:nowrap;cursor:pointer;}
.b-archiviert{background:#eceff1;color:#546e7a;border:1px solid #cfd8dc;}
.m-anh{display:flex;align-items:center;gap:6px;font-size:13px;color:#444;margin-top:4px;cursor:pointer;}
.m-anh .hint{background:none;padding:0;margin:0;}
.vg-scroll{overflow-x:auto;}
table.vg-tab-t{min-width:640px;}
table.vg-tab-t td{vertical-align:top;}
table.vg-tab-t tbody tr:hover{background:#fdf6f5;}
/* .hint ist sonst ein oranger Kasten - in Tabellenzellen nur grauer Beitext */
table.vg-tab-t .hint{background:none;padding:0;margin:0;color:#888;font-size:12px;}
.vg-sort{cursor:pointer;user-select:none;white-space:nowrap;}
.vg-sort:hover{background:var(--accent-dark);}
.vg-pfeil{margin-left:4px;font-size:10px;}
.vg-akt{white-space:nowrap;}
.vg-akt .linkbtn{font-size:15px;padding:2px 3px;text-decoration:none;}
.vg-zuord{margin-bottom:3px;}
.vg-zuord .hint{background:none;padding:0;margin:0;}
tr.vg-edit td{background:#fbf7f6;border-bottom:2px solid var(--accent);}
.vg-form{display:grid;grid-template-columns:120px 1fr 120px 1fr;gap:7px 10px;align-items:center;margin:4px 0 8px;}
.vg-form label{font-size:12px;font-weight:600;color:#555;}
.vg-form input,.vg-form select,.vg-form textarea{padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:13.5px;font-family:inherit;width:100%;}
.vg-form textarea{grid-column:2 / -1;resize:vertical;}
.vg-form input:focus,.vg-form select:focus,.vg-form textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}

/* ---- Handy-Optimierung ---- */
@media(max-width:640px){
  .vg-tab{padding:7px 9px;font-size:12.5px;}
  .vg-form{grid-template-columns:1fr;}
  .vg-form textarea{grid-column:1;}
  .vg-form input,.vg-form select,.vg-form textarea{font-size:16px;}
  .vg-suche{font-size:16px;}
  .topbar{padding:9px 11px; flex-wrap:wrap; gap:7px;}
  .brand{font-size:17px;}
  .topright{gap:6px; flex-wrap:wrap; width:100%; justify-content:flex-start;}
  .syncbtn{font-size:11.5px; padding:6px 8px;}
  .status{font-size:11px; width:100%; order:6; margin-top:2px;}
  .logout{font-size:11px; padding:3px 9px; margin-left:auto;}
  .chat{padding:12px 10px;}
  .bubble{max-width:95%; font-size:14px; padding:12px 13px; border-radius:12px;}
  .msg{margin:9px 0;}
  .composer{padding:9px 10px; gap:8px;}
  .composer textarea{font-size:16px; padding:11px 12px;}
  .composer button{padding:11px 16px; font-size:14px;}
  .vorschlag{font-size:11px;}
  .interp,.verkauf{font-size:13px;}
  table.pos th{padding:6px 5px; font-size:11.5px;}
  table.pos td{padding:6px 5px; font-size:12px;}
  table.sum td{padding:4px 6px; font-size:12.5px;}
  table.sum tr.brutto td{font-size:14px;}
  .actions{gap:7px;}
  .btn{padding:9px 12px; font-size:13px;}
  .mailbtn2{padding:8px 12px !important; font-size:13px !important;}
  .preisinput{width:100px; font-size:13px;}
  .kunde-grid{grid-template-columns:1fr;}
  .fin-terms{gap:8px; font-size:12px;}
  .fin-head{font-size:13px;}
  .corrbox input,.corrbox textarea{font-size:16px;}
  .mailcfg input{font-size:16px !important;}
  .mc-row{flex-direction:column;}
  .mc-row>div:last-child{flex:1;}
  .freigabe input,.freigabe textarea{font-size:16px !important;}
  .fg-grid{grid-template-columns:1fr;gap:4px;}
  .fg-lbl{margin-top:6px;}
  /* Split-Ansicht am Handy untereinander: Anfrage zuerst, dann Angebot */
  .split{grid-template-columns:1fr;gap:12px;}
  .split-r{position:static;order:-1;}
  .split-body{max-height:220px;}
  .marktbox,.finbox,.verfueg,.marktinfo{font-size:12.5px;}
}
/* Tabellen nie ueber den Rand: bei ganz schmalen Screens scrollbar */
@media(max-width:400px){
  table.pos{display:block; overflow-x:auto; white-space:nowrap;}
}
.status.ok{color:#2b8a3e;} .status.warn{color:var(--accent); font-weight:600;}

.chat{flex:1; overflow-y:auto; padding:24px 16px; max-width:900px; width:100%; margin:0 auto;}
.msg{display:flex; margin:12px 0;}
.msg.user{justify-content:flex-end;}
.bubble{
  max-width:82%; padding:14px 16px; border-radius:14px; line-height:1.5; font-size:14.5px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.msg.bot .bubble{background:var(--card); border:1px solid var(--line); border-top-left-radius:4px;}
.msg.user .bubble{background:var(--accent); color:#fff; border-top-right-radius:4px;}
.typing{color:var(--grey); font-style:italic;}

.vorschlag{font-size:12px; font-weight:700; letter-spacing:1px; color:var(--accent); margin-bottom:6px;}
.tag{font-size:11px; padding:1px 7px; border-radius:10px; margin-left:6px; font-weight:600; vertical-align:middle;}
.tag-hoch{background:#e6f4ea; color:#2b8a3e;} .tag-mittel{background:#fff4e0; color:#b26b00;} .tag-gering{background:#fde8e6; color:var(--accent);}
.interp{color:#333; margin-bottom:10px;}
.verkauf{font-style:italic; color:#444; background:#faf7f2; border-left:3px solid var(--accent); padding:8px 12px; border-radius:0 8px 8px 0; margin-bottom:10px; font-size:13.5px;}
.hint{background:#fff4e0; color:#8a5300; padding:7px 10px; border-radius:8px; font-size:13px; margin-bottom:10px;}

table.pos, table.sum{width:100%; border-collapse:collapse; margin:6px 0;}
table.pos th{background:var(--accent); color:#fff; text-align:left; padding:7px 10px; font-size:12.5px;}
table.pos td{padding:7px 10px; border-bottom:1px solid var(--line); font-size:13.5px;}
table.pos tbody tr:nth-child(even){background:#fafafa;}
td.r,th.r{text-align:right; white-space:nowrap;}
.incl{color:#2b8a3e; font-size:12.5px;}
table.sum{margin-top:10px;}
table.sum td{padding:4px 10px; font-size:13.5px;}
table.sum tr.brutto td{border-top:2px solid var(--accent); color:var(--accent); font-weight:700; font-size:15px; padding-top:8px;}

.actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.btn{border:none; padding:10px 16px; border-radius:9px; font-size:14px; cursor:pointer; font-weight:600;}
.btn.primary{background:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent-dark);}
.btn.ghost{background:#f0f0f0; color:#333;}
.btn.ghost:hover{background:#e6e6e6;}
.btn:disabled{opacity:.6; cursor:default;}

.corrbox{background:#fbfbfb; border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:10px;}
.corr-title{font-weight:600; margin-bottom:8px; font-size:14px;}
.corrbox input, .corrbox textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; margin-bottom:8px; font-family:inherit; resize:vertical;
}
.corrbox input:focus, .corrbox textarea:focus{outline:2px solid var(--accent);}
.warnbox{background:#fde8e6; border:1px solid #f4b6ad; color:#8a1a0a; padding:10px 12px; border-radius:8px;}
.learned{color:#2b8a3e; font-weight:600;}

/* Marktpreis-Recherche */
.marktbox{background:#f0f6ff; border:1px solid #cfe0f5; border-radius:10px; padding:12px 14px; margin-top:10px;}
.markt-title{font-weight:600; font-size:13.5px; color:#0b5394; margin-bottom:6px;}
.markt-text{font-size:13.5px; line-height:1.55; white-space:normal;}
.markt-text a{color:#0b5394; word-break:break-all;}

/* Einkaufspreis - nur intern */
.ek{color:#8a8a8a; font-size:12.5px; font-style:italic;}
th.ek{font-style:normal;}
table.sum tr.ekrow td{color:#8a8a8a; font-style:italic; border-bottom:1px dashed #e2e2e2;}
table.sum tr.provrow td{color:#1e7a34; font-weight:700; border-bottom:1px dashed #e2e2e2;}
.ekhint{margin-top:6px; font-size:11.5px; color:#999;}
.preisinput{width:110px; text-align:right; padding:4px 8px; border:1px solid var(--accent); border-radius:6px;
  font-size:13.5px; font-family:inherit; font-weight:600; color:var(--accent);}
.preisinput:focus{outline:2px solid var(--accent);}
.editnote{font-size:11px; color:var(--accent); margin-left:4px;}

/* Kundendaten-Block */
.kunde{background:#fbfbfb; border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0;}
.kunde .k-title{font-weight:600; font-size:13px; margin-bottom:8px; color:#333;}
.kunde-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.kunde input{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:13.5px; font-family:inherit;}
.kunde input:focus{outline:2px solid var(--accent);}
.kunde .full{grid-column:1 / -1;}

.composer{
  display:flex; gap:10px; padding:14px 16px; background:#fff; border-top:1px solid var(--line);
  max-width:900px; width:100%; margin:0 auto; align-items:flex-end;
}
.composer textarea{
  flex:1; padding:12px 14px; border:1px solid #ccc; border-radius:12px; font-size:15px;
  font-family:inherit; resize:none; max-height:160px; line-height:1.4;
}
.composer textarea:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.composer button{
  background:var(--accent); color:#fff; border:none; padding:12px 22px; border-radius:12px;
  font-size:15px; font-weight:600; cursor:pointer;
}
.composer button:hover{background:var(--accent-dark);}