:root{
  --bg:#f4f6f8; --panel:#fff; --ink:#1f2733; --muted:#6b7688;
  --line:#e2e7ee; --brand:#0b5fff; --brand-d:#0847c4;
  --ok:#127a3d; --ok-bg:#e6f5ec; --err:#b3261e; --err-bg:#fbe9e8;
  --radius:10px; --shadow:0 1px 3px rgba(18,28,45,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem; margin:.2rem 0 1rem}
h2{font-size:1.15rem; margin:0 0 .8rem}
.muted{color:var(--muted)}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:.6rem 1.2rem; box-shadow:var(--shadow); position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; color:var(--ink); font-size:1.05rem}
.brand:hover{text-decoration:none}
.mainnav{display:flex; gap:.3rem; flex-wrap:wrap; flex:1}
.mainnav a{
  color:var(--muted); padding:.4rem .7rem; border-radius:8px; font-weight:500;
}
.mainnav a:hover{background:var(--bg); text-decoration:none; color:var(--ink)}
.mainnav a.active{background:var(--brand); color:#fff}
.userbox{display:flex; align-items:center; gap:.8rem; color:var(--muted); font-size:.9rem}
.userbox .logout{color:var(--err)}

/* Layout */
.content{max-width:1080px; margin:1.4rem auto; padding:0 1.2rem}
.foot{
  max-width:1080px; margin:2rem auto; padding:1rem 1.2rem; color:var(--muted);
  font-size:.85rem; display:flex; justify-content:space-between; border-top:1px solid var(--line);
}

/* Cards / KPIs */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.4rem}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.card-num{font-size:1.5rem; font-weight:700}
.card-lbl{color:var(--muted); font-size:.85rem; margin-top:.2rem}

/* Panels */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); margin-bottom:1.4rem}

/* Tables */
.tbl{width:100%; border-collapse:collapse}
.tbl th,.tbl td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line)}
.tbl th{font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.tbl tbody tr:hover{background:var(--bg)}

/* Forms */
.form fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.2rem; margin:0 0 1.2rem; background:var(--panel)}
.form legend{padding:0 .4rem; font-weight:600; color:var(--muted)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem}
label{display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; font-weight:500}
label.checkbox{flex-direction:row; align-items:center; gap:.5rem}
.inline{display:flex; gap:.5rem}
input,select,textarea{
  font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--ink); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand)}
.actions{display:flex; gap:.6rem; align-items:center; margin-top:.4rem}
button,.btn{
  font:inherit; font-weight:600; cursor:pointer; border:0; border-radius:8px;
  padding:.55rem 1.1rem; background:var(--brand); color:#fff;
}
button:hover,.btn:hover{background:var(--brand-d)}
.btn-secondary{background:var(--bg); color:var(--ink); border:1px solid var(--line); padding:.55rem 1.1rem; border-radius:8px}
.btn-secondary:hover{text-decoration:none; background:#e9edf3}

/* Flash */
.flash{padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem; font-weight:500}
.flash-success{background:var(--ok-bg); color:var(--ok)}
.flash-error{background:var(--err-bg); color:var(--err)}

/* Login */
.loginpage{display:flex; min-height:100vh; align-items:center; justify-content:center; background:var(--bg)}
.loginbox{
  background:var(--panel); padding:2rem; border-radius:var(--radius); box-shadow:0 6px 30px rgba(18,28,45,.12);
  width:100%; max-width:360px; display:flex; flex-direction:column; gap:1rem;
}
.loginbox h1{text-align:center; margin:0 0 .4rem}
.loginbox button{width:100%; padding:.7rem}

/* CRM-Komponenten */
.pagehead{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.pagehead h1{margin:0}
.searchbar{display:flex; gap:.5rem; margin-bottom:1.2rem; flex-wrap:wrap}
.searchbar input[type=search]{flex:1; min-width:200px}
.tag{display:inline-block; font-size:.72rem; font-weight:600; padding:.1rem .45rem; border-radius:999px;
  background:#eef2f8; color:var(--muted); vertical-align:middle; margin-left:.3rem; text-transform:uppercase; letter-spacing:.02em}
textarea{resize:vertical; min-height:2.4rem}
details > summary{cursor:pointer; font-weight:500; color:var(--brand); padding:.3rem 0}
details[open] > summary{margin-bottom:.4rem}

.cols{display:grid; grid-template-columns:1.6fr 1fr; gap:1.2rem; align-items:start}
.col-main, .col-side{display:flex; flex-direction:column; gap:1.2rem; min-width:0}

.link-danger{background:none; border:0; color:var(--err); cursor:pointer; padding:0 .2rem; font:inherit}
.link-danger:hover{text-decoration:underline}

.notelist{list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:.7rem}
.notelist li{border-left:3px solid var(--line); padding:.2rem .7rem}
.note-meta{font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; gap:.5rem}
.note-body{white-space:pre-wrap}

.filelist{list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.filelist li{display:flex; align-items:center; gap:.6rem; padding:.3rem 0; border-bottom:1px solid var(--line)}
.filelist li a{flex:1; word-break:break-all}

.hist-h{font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin:1rem 0 .3rem}
.hist-row{display:flex; justify-content:space-between; gap:.6rem; padding:.35rem 0; border-bottom:1px solid var(--line); font-size:.9rem}
.hist-row span:nth-child(2){flex:1; color:var(--muted)}
.sr{gap:0}
.tbl .r, td.r, th.r{text-align:right; white-space:nowrap}
.subnav{display:flex; gap:.5rem; flex-wrap:wrap}
.tbl tr.inactive{opacity:.5}
button.link-danger.btn-secondary{color:var(--err)}

/* Status-Badges */
.badge{display:inline-block; font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; vertical-align:middle}
.badge-entwurf{background:#eef2f8; color:#6b7688}
.badge-versendet{background:#e7f0ff; color:#0847c4}
.badge-angenommen,.badge-bezahlt{background:var(--ok-bg); color:var(--ok)}
.badge-abgelehnt,.badge-storniert{background:var(--err-bg); color:var(--err)}
.badge-offen{background:#fff4e5; color:#a15c00}
.badge-teilbezahlt{background:#fff9db; color:#8a6d00}

/* Positions-Editor */
.postbl{width:100%; border-collapse:collapse; min-width:720px}
.postbl th{font-size:.75rem; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); text-align:left; padding:.4rem .4rem; border-bottom:1px solid var(--line)}
.postbl td{padding:.25rem .3rem; border-bottom:1px solid var(--line); vertical-align:middle}
.postbl .numcol{width:5.5rem}
.postbl input,.postbl select{padding:.35rem .4rem}
.postbl .bez{width:100%}
.postbl .kindsel{width:100%; margin-bottom:.2rem; font-size:.75rem; color:var(--muted); border:0; background:transparent; padding:0}
.postbl .numcell input{text-align:right}
.postbl .linenet{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.postbl tr.is-heading .bez{font-weight:700}
.poshandle{color:var(--line); cursor:default; text-align:center}
.row-del{background:none;border:0;color:var(--err);font-size:1.1rem;cursor:pointer;line-height:1}

.sumbox{margin:1rem 0 0 auto; max-width:340px}
.sumrow{display:flex; justify-content:space-between; padding:.25rem 0; gap:1rem}
.sumrow.sum-total{border-top:2px solid var(--ink); margin-top:.3rem; padding-top:.5rem; font-weight:700; font-size:1.1rem}

/* Autocomplete */
.ac-box{position:absolute; z-index:100; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(18,28,45,.15); max-height:280px; overflow:auto}
.ac-item{padding:.45rem .6rem; cursor:pointer; border-bottom:1px solid var(--line); display:flex; flex-direction:column}
.ac-item:hover{background:var(--bg)}
.ac-item span{font-size:.78rem; color:var(--muted)}

/* Kalender-Legende */
.legend{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.legend-item{display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--muted)}
.legend-dot{width:.8rem; height:.8rem; border-radius:50%; display:inline-block}
#calendar{font-size:.9rem}
.fc .fc-button-primary{background:var(--brand); border-color:var(--brand)}
.fc .fc-button-primary:hover{background:var(--brand-d); border-color:var(--brand-d)}
.fc .fc-button-primary:not(:disabled).fc-button-active{background:var(--brand-d); border-color:var(--brand-d)}
.fc a{text-decoration:none}
.fc-event{cursor:pointer}
#monteurFilter{max-width:12rem}
.link-plain{background:none;border:0;cursor:pointer;font:inherit;color:var(--brand);padding:0}

@media (max-width:860px){
  .cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .userbox span{display:none}
  .foot{flex-direction:column; gap:.3rem}
}