/* Demo-Verwaltung — Optik übernommen von der Seventy 77 / LPN-Verwaltung (helles Warm-Weiß) */
:root{
  --bg:#faf6ef; --bg-elev:#fbf7ef; --card:#ffffff; --border:#e8e0d0; --border-2:#d8cfba;
  --text:#1a1108; --ink:#1a1108; --muted:#6f6960; --soft:#a09a90;
  --side:#ffffff; --side-ink:#6f6960;
  --accent:#d4282c;      /* Dartboard-Rot */
  --accent-dark:#8b1a1d;
  --accent-2:#1e7d3f;    /* Grün */
  --gold:#c89a1f;
  --red-bg:#fbe1e1; --green-bg:#d8eddd; --gold-bg:#faf0d1; --blue-bg:#d6e3ef; --warn-bg:#f8e7c4;
  --blue:#2e5e8a; --warn:#c47e1e;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(40,25,10,.04);
  --shadow:0 4px 14px rgba(40,25,10,.06), 0 1px 3px rgba(40,25,10,.04);
  --shadow-lg:0 12px 32px rgba(40,25,10,.10), 0 4px 8px rgba(40,25,10,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.layout{display:grid; grid-template-columns:250px 1fr; min-height:100vh}

/* Sidebar */
.sidebar{
  background:var(--side); color:var(--side-ink); display:flex; flex-direction:column;
  padding:1.1rem .7rem; gap:.3rem; position:sticky; top:0; height:100vh; overflow-y:auto;
  border-right:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:.65rem; padding:.2rem .4rem 1.2rem}
.brand-mark{
  background:var(--accent); color:#fff; font-weight:800; border-radius:10px;
  width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto;
  letter-spacing:.02em; box-shadow:0 4px 14px rgba(212,40,44,.28);
}
.brand-txt{display:flex; flex-direction:column; font-weight:800; color:var(--text); line-height:1.15; letter-spacing:.02em}
.brand-txt em{
  font-style:normal; font-weight:700; font-size:.62rem; color:var(--gold);
  letter-spacing:.18em; text-transform:uppercase; margin-top:2px;
}
.nav-sec{margin-bottom:.6rem}
.nav-sec-label{
  font-size:.64rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--soft); padding:.6rem .55rem .3rem; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:.55rem; padding:.55rem .6rem;
  border-radius:10px; color:var(--side-ink); text-decoration:none; font-size:.88rem;
  font-weight:600; position:relative; transition:background .15s,color .15s;
}
.nav-item:hover{background:var(--bg-soft,#f3ede2); color:var(--text)}
.nav-item.active{background:var(--text); color:#fff}
.nav-item.active::before{
  content:''; position:absolute; left:-.7rem; top:22%; bottom:22%;
  width:4px; border-radius:0 4px 4px 0; background:var(--accent);
}
.nav-lbl{flex:1 1 auto; min-width:0; word-break:break-word}
.nav-badge{
  font-size:.6rem; background:var(--red-bg); color:var(--accent-dark);
  padding:.08rem .4rem; border-radius:.6rem; flex:0 0 auto; font-weight:700;
}
.nav-item.active .nav-badge{background:var(--gold); color:var(--text)}
.side-foot{margin-top:auto; font-size:.66rem; color:var(--soft); padding:.9rem .55rem 0; letter-spacing:.02em}

/* Main */
.main{padding:1.6rem 1.7rem 3rem; min-width:0}
.page-head{margin-bottom:1.3rem}
.page-head h1{
  margin:0 0 .35rem; font-size:1.55rem; font-weight:800; letter-spacing:-.01em; color:var(--text);
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
}
.page-sub{margin:0; color:var(--muted); font-size:.9rem; max-width:72ch; line-height:1.55}
.muted{color:var(--muted); font-weight:400; font-size:.85rem}

/* KPIs */
.kpi-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem; margin-bottom:1.5rem}
.kpi{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.kpi-val{font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--text)}
.kpi-lbl{font-size:.82rem; font-weight:700; margin-top:.15rem; color:var(--text)}
.kpi-hint{font-size:.72rem; color:var(--muted); margin-top:.1rem}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem 1.3rem; margin-bottom:1.3rem; box-shadow:var(--shadow);
}
.card h2{margin:0 0 .8rem; font-size:1.12rem; font-weight:700; color:var(--text)}

/* Baustein grid */
.baustein-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem}
.bcard{
  border:1px solid var(--border); border-radius:12px; padding:1rem 1.05rem; text-decoration:none;
  color:inherit; background:var(--card); display:flex; flex-direction:column; gap:.4rem;
  transition:border-color .18s,transform .18s,box-shadow .18s; position:relative; box-shadow:var(--shadow-sm);
}
.bcard:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.bcard-top{display:flex; justify-content:flex-end; align-items:center; min-height:1.2rem}
.bcard-status{font-size:.64rem; padding:.14rem .55rem; border-radius:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.bcard-status.live{background:var(--green-bg); color:var(--accent-2)}
.bcard-status.bald{background:var(--bg-soft,#f3ede2); color:var(--muted); border:1px solid var(--border)}
.bcard-name{font-weight:700; font-size:1rem; color:var(--text)}
.bcard-sum{font-size:.79rem; color:var(--muted); line-height:1.45}

/* Filters */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem}
.chip{
  border:1px solid var(--border); background:var(--card); border-radius:.6rem; padding:.42rem .8rem;
  font-size:.82rem; text-decoration:none; color:var(--text); font-weight:600; transition:all .15s;
}
.chip:hover{border-color:var(--border-2)}
.chip b{margin-left:.35rem; color:var(--muted); font-weight:700}
.chip.on{background:var(--text); color:#fff; border-color:var(--text)}
.chip.on b{color:rgba(255,255,255,.75)}

/* Table */
.table-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:.86rem; min-width:0}
.tbl th{text-align:left; color:var(--muted); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; padding:.5rem .55rem; border-bottom:1px solid var(--border); font-weight:700}
.tbl td{padding:.62rem .55rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text)}
.tbl tbody tr:last-child td{border-bottom:none}
.row-actions{display:flex; gap:.35rem}
.row-actions form{margin:0}
.mini{
  border:1px solid var(--border); background:var(--card); border-radius:.45rem; cursor:pointer;
  width:30px; height:30px; font-size:.9rem; line-height:1; color:var(--text); transition:all .15s;
  display:inline-flex; align-items:center; justify-content:center;
}
.mini:hover{border-color:var(--border-2)}
.mini.ok{color:var(--accent-2); border-color:var(--green-bg)}
.mini.ok:hover{background:var(--green-bg)}
.mini.no{color:var(--accent); border-color:var(--red-bg)}
.mini.no:hover{background:var(--red-bg)}
.empty{text-align:center; color:var(--muted); padding:1.4rem}

/* Status pills */
.st{font-size:.7rem; padding:.18rem .6rem; border-radius:999px; font-weight:700; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.35rem}
.st::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.st-aktiv,.st-gewonnen,.st-ok,.st-live,.st-bezahlt,.st-positiv,.st-versendet,
.st-beantwortet,.st-eingeloest,.st-bestaetigt{
  background:var(--green-bg); color:var(--accent-2)}
.st-neu,.st-offen,.st-geplant,.st-entwurf,.st-neutral,.st-lead,.st-onboarding{
  background:var(--gold-bg); color:#a07515}
.st-angebot,.st-kontaktiert,.st-weitergeleitet{
  background:var(--blue-bg); color:var(--blue)}
.st-storniert,.st-abgesagt,.st-negativ,.st-warnung,.st-fehler{
  background:var(--red-bg); color:var(--accent-dark)}

/* Config table */
.cfg-tbl{width:100%; border-collapse:collapse; font-size:.85rem}
.cfg-tbl td{padding:.55rem .55rem; border-bottom:1px solid var(--border)}
.cfg-tbl tr:last-child td{border-bottom:none}
.cfg-l{font-weight:600; width:40%; color:var(--text)}
.cfg-t{color:var(--muted); font-size:.78rem; width:26%}
.cfg-v{color:var(--text)}
.prep .cfg-tbl{margin-top:.6rem}

/* Topbar + Profil-Umschalter */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:.6rem .9rem; margin-bottom:1.3rem; box-shadow:var(--shadow);
}
.tb-profile{display:flex; align-items:center; gap:.5rem; min-width:0; flex-wrap:wrap}
.tb-lbl{font-size:.8rem; color:var(--muted); font-weight:600}
.tb-badge{background:var(--gold-bg); color:#a07515; font-size:.66rem; font-weight:700;
  padding:.14rem .55rem; border-radius:999px; text-transform:uppercase; letter-spacing:.05em}
.tb-manage{font-size:.82rem; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap}
.tb-manage:hover{color:var(--accent-dark)}

/* Inputs & selects */
.tb-select,.pf-name input,.profil-form input[type=text]{
  border:1px solid var(--border-2); border-radius:.55rem; padding:.45rem .65rem;
  font-size:.85rem; background:var(--card); color:var(--text); max-width:100%;
  font-family:inherit;
}
.tb-select:focus,.pf-name input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--red-bg)}

.note{background:var(--blue-bg); border:1px solid var(--border); color:var(--blue);
  border-radius:.6rem; padding:.65rem .9rem; font-size:.85rem; margin-bottom:1.1rem; line-height:1.5}

/* Buttons */
.mini-btn{border:1px solid var(--border-2); background:var(--card); border-radius:.45rem;
  padding:.34rem .7rem; font-size:.78rem; text-decoration:none; color:var(--text); font-weight:600; transition:all .15s;
  display:inline-flex; align-items:center; gap:.3rem}
.mini-btn:hover{background:var(--bg-soft,#f3ede2); border-color:var(--border-2)}
.btn-primary{background:var(--text); color:#fff; border:1px solid var(--text); border-radius:.55rem;
  padding:.62rem 1.3rem; font-size:.9rem; font-weight:700; cursor:pointer; margin-top:1rem; transition:all .18s}
.btn-primary:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-1px)}

/* Profil-Formular */
.profil-form .pf-name{display:flex; flex-direction:column; gap:.35rem; max-width:360px; margin-bottom:1rem}
.profil-form .pf-name span{font-size:.82rem; font-weight:600; color:var(--text)}
.pf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.55rem}
.pf-item{display:flex; align-items:center; gap:.55rem; border:1px solid var(--border);
  border-radius:.55rem; padding:.55rem .65rem; cursor:pointer; background:var(--card);
  font-size:.86rem; transition:border-color .15s; color:var(--text)}
.pf-item:hover{border-color:var(--gold)}
.pf-item input{width:16px; height:16px; flex:0 0 auto; accent-color:var(--accent)}
.pf-lbl{min-width:0; word-break:break-word}
.row-actions .mini-btn{margin-right:.3rem}

/* Mobile */
.nav-toggle{
  display:none; position:fixed; top:.7rem; left:.7rem; z-index:30;
  background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:.5rem;
  width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.nav-toggle svg{display:block}
@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .nav-toggle{display:flex}
  .sidebar{
    position:fixed; z-index:25; width:260px; height:100vh; left:0; top:0;
    transform:translateX(-105%); transition:transform .2s; box-shadow:var(--shadow-lg);
  }
  body.nav-open .sidebar{transform:translateX(0)}
  .main{padding:4rem 1rem 3rem}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block; width:100%}
  .tbl tr{border:1px solid var(--border); border-radius:.6rem; margin-bottom:.6rem; padding:.4rem .6rem; background:var(--card)}
  .tbl td{border:none; padding:.35rem .2rem; display:flex; justify-content:space-between; gap:1rem}
  .tbl td::before{content:attr(data-l); color:var(--muted); font-size:.72rem; font-weight:600}
  .tbl td.row-actions{justify-content:flex-end}
  .tbl td.row-actions::before{content:""}
  .topbar{flex-wrap:wrap; gap:.5rem}
}