:root{
  --accent:#4E9A93; --accent-dark:#3B7B75; --dark:#1E1E1E; --grey:#666;
  --line:#e2e2e2; --bg:#f4f6f6; --card:#ffffff; --ok:#2b8a3e;
}
*{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:12px 22px; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.brand{font-size:19px; font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:9px;}
.brand-mark{
  background:var(--accent); color:#fff; padding:4px 11px; border-radius:7px; font-weight:800;
  letter-spacing:.3px;
}
.brand-sub{color:var(--grey); font-weight:500; font-size:15px;}
.topright{display:flex; align-items:center; gap:16px;}
.pl-label{font-size:12.5px; color:var(--grey); display:flex; align-items:center; gap:6px;}
.pl-select{font-size:13px; padding:5px 8px; border:1px solid #cddedb; border-radius:8px;
  background:#fff; color:var(--dark); font-family:inherit; cursor:pointer; max-width:220px;}
.pl-select:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.status{font-size:13px; color:var(--grey);}
.status.ok{color:var(--ok);} .status.warn{color:#b4451f; font-weight:600;}
.pl-badge{display:inline-block; font-size:11px; font-weight:600; color:#fff; background:var(--accent-dark);
  padding:1px 8px; border-radius:10px; margin-left:6px; letter-spacing:0;}
.pl-badge.lang{background:#b26b00;}

.chat{flex:1; overflow-y:auto; padding:22px 16px; max-width:920px; width:100%; margin:0 auto;}
.msg{display:flex; margin:12px 0;}
.msg.user{justify-content:flex-end;}
.bubble{
  max-width:84%; 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-dark); 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:#e3f2ef; color:var(--accent-dark);} .tag-mittel{background:#fff4e0; color:#b26b00;} .tag-gering{background:#fde8e6; color:#b4451f;}
.interp{color:#333; margin-bottom:6px;}
.geraet-kopf{font-weight:700; font-size:15px; margin:2px 0 8px;}
.geraet-kopf small{font-weight:500; color:var(--grey); font-size:12.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:2px 0; table-layout:fixed;}
table.pos th{background:var(--accent); color:#fff; text-align:left; padding:6px 9px; font-size:12px;}
table.pos th.r{text-align:right;}
table.pos td{padding:5px 9px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top;}
table.pos td:first-child{overflow-wrap:anywhere;}
td.r,th.r{text-align:right; white-space:nowrap;}
tr.pausch td{color:#333; font-weight:600;}

.thead-row table.pos{margin-bottom:0;}
.item{margin:10px 0 4px;}
.item .geraet-kopf{font-size:14px; margin:2px 0 2px;}
.item .geraet-kopf small{font-weight:500; color:var(--grey); font-size:12px;}
.specs{color:var(--grey); font-style:italic; font-size:12.5px; margin:0 0 3px;}
.auf-anfrage{color:#b4451f !important; font-style:italic;}
.op-title{font-weight:600; font-size:12.5px; color:var(--accent-dark); margin:12px 0 2px;}
.pinput{width:82px; padding:4px 7px; border:1px solid var(--accent); border-radius:6px;
  font-size:13px; text-align:right; font-family:inherit;}
.pinput:focus{outline:2px solid var(--accent);}
.pinput.wide{width:105px; text-align:left;}
.steuer{display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center;}
.steuer .pl-select{max-width:190px;}
tr.nachlass td{color:var(--accent-dark); font-weight:700;}
.betrag{white-space:nowrap;}

/* Interner Wettbewerbsvergleich – bewusst auffällig, damit klar: NICHT für Kunden */
.wb-box{margin:6px 0 2px; padding:8px 10px; border:1px dashed #d1a24a; border-radius:9px;
  background:repeating-linear-gradient(45deg,#fff8ec,#fff8ec 10px,#fdf3df 10px,#fdf3df 20px);}
.wb-title{font-size:11px; font-weight:700; color:#8a5a00; letter-spacing:.3px; margin-bottom:5px; text-transform:uppercase;}
.wb-row{display:flex; align-items:center; gap:8px; font-size:12.5px; padding:2px 0; border-top:1px solid #f0e2c2;}
.wb-row:first-of-type{border-top:none;}
.wb-name{font-weight:600; min-width:120px;}
.wb-geraet{color:var(--grey); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wb-preis{font-variant-numeric:tabular-nums; min-width:80px; text-align:right;}
.wb-delta{min-width:130px; text-align:right; font-weight:700;}
.wb-delta.wb-gut{color:#2b8a3e;}
.wb-delta.wb-schlecht{color:#c0392b;}
table.sum{margin-top:10px;}
table.sum td{padding:4px 9px; font-size:13.5px;}
table.sum tr.brutto td{border-top:2px solid var(--accent); color:var(--accent-dark); font-weight:700; font-size:15px; padding-top:8px;}
.mwsthint{color:var(--grey); font-size:12px; margin-top:2px;}

.pausch-box{margin:12px 0 4px; padding:11px 13px; background:#f3f8f7; border:1px solid #d9e8e6; border-radius:10px;}
.pausch-box .pt{font-weight:600; font-size:13px; margin-bottom:8px; color:var(--accent-dark);}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 11px; border-radius:20px;
  border:1px solid #cddedb; background:#fff; cursor:pointer; user-select:none;}
.chip input{accent-color:var(--accent); margin:0;}
.chip.on{background:var(--accent); color:#fff; border-color:var(--accent);}

.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:#eef0f0; color:#333;}
.btn.ghost:hover{background:#e2e5e5;}
.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:var(--ok); font-weight:600;}

.composer{
  display:flex; gap:10px; padding:14px 16px; background:#fff; border-top:1px solid var(--line);
  max-width:920px; 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);}

/* ---------- Benutzer-Bereich oben ---------- */
.userbox{display:flex; align-items:center; gap:10px; padding-left:12px; border-left:1px solid var(--line); margin-left:4px;}
.user-name{font-size:13px; font-weight:600; color:var(--accent-dark);}
.user-link{font-size:12.5px; color:var(--grey); text-decoration:none;}
.user-link:hover{color:var(--accent-dark); text-decoration:underline;}

/* ---------- Login / Setup ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg);}
.auth-card{background:#fff; width:100%; max-width:380px; margin:20px; padding:30px 28px;
  border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.09); border-top:4px solid var(--accent);}
.auth-brand{margin-bottom:14px;}
.auth-title{font-size:20px; margin:0 0 4px;}
.auth-sub{color:var(--grey); font-size:13.5px; margin:0 0 18px;}
.auth-label{display:block; font-size:12.5px; font-weight:600; color:#444; margin:10px 0 4px;}
.auth-input{width:100%; padding:11px 13px; border:1px solid #ccc; border-radius:10px; font-size:15px; font-family:inherit;}
.auth-input:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.auth-btn{width:100%; margin-top:18px; background:var(--accent); color:#fff; border:none;
  padding:12px 16px; border-radius:11px; font-size:15px; font-weight:600; cursor:pointer;}
.auth-btn:hover{background:var(--accent-dark);}
.auth-btn.slim{width:auto; margin-top:0; padding:10px 18px;}
.auth-error{background:#fde8e6; border:1px solid #f4b6ad; color:#8a1a0a; padding:9px 12px; border-radius:9px; font-size:13.5px; margin-bottom:12px;}
.auth-foot{margin-top:18px; text-align:center; color:#aaa; font-size:11.5px;}

/* ---------- Admin ---------- */
.admin-wrap{max-width:960px; margin:22px auto; padding:0 16px; width:100%;}
.admin-panel{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:18px;}
.admin-panel h2{font-size:16px; margin:0 0 12px;}
.admin-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.admin-form .auth-input{width:auto; flex:1; min-width:150px;}
.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.admin-table th{text-align:left; color:var(--grey); font-weight:600; padding:7px 8px; border-bottom:2px solid var(--line);}
.admin-table td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
.admin-table td.muted{color:#999; font-size:12px;}
.admin-actions{display:flex; gap:6px; flex-wrap:wrap;}
.admin-actions form{margin:0;}
.mini{border:1px solid #cddedb; background:#fff; color:#333; padding:4px 9px; border-radius:7px; font-size:12px; cursor:pointer;}
.mini:hover{background:#f0f5f4;}
.mini.danger{border-color:#f0b8b0; color:#b4451f;}
.mini.danger:hover{background:#fdeeeb;}
.pill{font-size:11px; font-weight:600; padding:1px 8px; border-radius:10px;}
.pill.on{background:#e3f2ef; color:var(--accent-dark);}
.pill.off{background:#fde8e6; color:#b4451f;}
.admin-ok{background:#e3f2ef; color:var(--accent-dark); border:1px solid #bfe0da; padding:9px 12px; border-radius:9px; margin-bottom:14px;}
.admin-err{background:#fde8e6; color:#8a1a0a; border:1px solid #f4b6ad; padding:9px 12px; border-radius:9px; margin-bottom:14px;}
form.inline{margin:0;}
.badge-count{background:#c0392b; color:#fff; border-radius:10px; padding:0 6px; font-size:11px; font-weight:700;}

/* ---------- Registrierung breit ---------- */
.auth-card.wide{max-width:620px;}
.auth-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 14px;}
@media(max-width:520px){ .auth-grid{grid-template-columns:1fr;} }

/* ---------- Kundenportal ---------- */
.tabs{display:flex; gap:4px; background:#fff; border-bottom:1px solid var(--line); padding:0 16px; max-width:920px; margin:0 auto; width:100%;}
.tab{border:none; background:none; padding:13px 18px; font-size:14.5px; font-weight:600; color:var(--grey); cursor:pointer; border-bottom:3px solid transparent; font-family:inherit;}
.tab.active{color:var(--accent-dark); border-bottom-color:var(--accent);}
.portal-main{max-width:920px; margin:0 auto; width:100%; padding:20px 16px;}
.portal-intro{background:#f3f8f7; border:1px solid #d9e8e6; border-radius:12px; padding:14px 16px; font-size:14.5px; line-height:1.5;}
.portal-example{color:var(--grey); font-size:13px; margin-top:8px;}
.portal-form{display:flex; gap:10px; margin:16px 0; align-items:flex-end;}
.portal-form textarea{flex:1; padding:12px 14px; border:1px solid #ccc; border-radius:12px; font-size:15px; font-family:inherit; resize:vertical; min-height:52px;}
.portal-form textarea:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.portal-h2{font-size:17px; margin:4px 0 14px;}
.portal-angebot-kopf{font-size:12px; font-weight:700; letter-spacing:1px; color:var(--accent-dark); margin-bottom:6px; text-transform:uppercase;}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:14px;}
.muted{color:#999; font-size:13px;}

/* ---------- Vorgänge ---------- */
.vorgang{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px;}
.vg-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;}
.vg-nr{font-weight:700; color:var(--dark);}
.vg-titel{font-size:13.5px; color:#333; margin-bottom:6px;}
.vg-foot{display:flex; justify-content:space-between; align-items:center;}
.vg-status{font-size:11px; font-weight:700; padding:2px 10px; border-radius:11px;}
.st-grau{background:#eceff0; color:#555;} .st-blau{background:#e1effa; color:#1c6ea4;}
.st-gelb{background:#fff4e0; color:#b26b00;} .st-gruen{background:#e3f2ef; color:var(--accent-dark);}
.st-rot{background:#fde8e6; color:#c0392b;}

/* Horizontal scrollbare Tabellen-Container (Handy) */
.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ---------- Posteingang ---------- */
.mb-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.mb-item{display:flex; align-items:center; gap:8px; background:#f7faf9; border:1px solid #dce8e6; border-radius:9px; padding:5px 8px 5px 11px; font-size:13px;}
.mb-actions{display:flex; gap:4px;}
.mb-actions form{margin:0;}
.inq{border:1px solid var(--line); border-radius:11px; padding:11px 13px; margin-bottom:9px; cursor:pointer; transition:border-color .1s;}
.inq:hover{border-color:var(--accent);}
.inq-top{display:flex; justify-content:space-between; align-items:center;}
.inq-von{font-weight:700; font-size:14px;}
.inq-betreff{font-size:13.5px; margin:3px 0 2px;}
.inq-sub{margin-bottom:3px;}
.inq-foot{font-size:11.5px;}
.detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.detail-betreff{font-weight:700; font-size:15px; margin:8px 0;}
.mailbody{white-space:pre-wrap; word-wrap:break-word; background:#fafafa; border:1px solid var(--line); border-radius:9px; padding:11px 13px; font-size:13px; font-family:inherit; max-height:280px; overflow:auto; margin:0 0 6px;}

/* ============================================================
   MOBIL / HANDY  (<= 680px)
   ============================================================ */
@media (max-width:680px){
  /* Kopfleiste umbrechen statt überlaufen */
  .topbar{flex-wrap:wrap; gap:8px 12px; padding:10px 12px;}
  .brand{font-size:16px;}
  .brand-sub{font-size:13px;}
  .topright{width:100%; flex-wrap:wrap; gap:8px 12px; justify-content:flex-start;}
  .pl-label{font-size:12px; gap:4px;}
  .pl-select{max-width:none; flex:1 1 140px; min-width:120px;}
  .status{font-size:12px;}
  .userbox{width:100%; border-left:none; padding-left:0; margin-left:0; gap:14px;}

  /* Chat */
  .chat{padding:14px 10px;}
  .bubble{max-width:100%; font-size:14px;}
  .composer{padding:10px; gap:8px;}
  .composer textarea{font-size:16px;}          /* 16px = kein Auto-Zoom auf iOS */
  .composer button{padding:12px 16px;}

  /* Karten + Positionstabellen scrollbar */
  .card, .admin-panel{padding:13px 12px;}
  .tscroll table.pos{min-width:520px;}
  table.pos td, table.pos th{font-size:12px; padding:5px 6px;}
  table.sum td{font-size:13px; padding:4px 6px;}
  .geraet-kopf{font-size:14px;}

  /* Admin-/Kunden-Tabellen scrollbar */
  .admin-wrap{padding:0 10px; margin:16px auto;}
  .admin-panel h2{font-size:15px;}
  .admin-table{min-width:560px; font-size:12.5px;}
  .admin-form{gap:6px;}
  .admin-form .auth-input{min-width:120px;}

  /* Login / Registrierung / Setup */
  .auth-card{margin:12px; padding:22px 18px;}
  .auth-input{font-size:16px;}
  .auth-grid{grid-template-columns:1fr;}

  /* Kundenportal */
  .portal-main{padding:14px 10px;}
  .portal-form{flex-direction:column; align-items:stretch;}
  .portal-form textarea{font-size:16px;}
  .portal-form .auth-btn.slim{width:100%;}
  .tabs{padding:0 6px;}
  .tab{padding:11px 12px; font-size:13.5px;}
  .actions{gap:8px;}
  .actions .auth-btn.slim, .actions .btn{width:100%;}
  .vg-titel{font-size:13px;}
}