/* CRM Simon Obi — schlankes, mobiles Design */
:root {
  --bg: #f4f5f7; --karte: #fff; --text: #1c2430; --muted: #6b7684;
  --akzent: #145af0; --akzent-d: #0e46bd; --rand: #e3e6ea;
  --gruen: #157347; --rot: #c22f2f; --orange: #b97108; --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0 0 14px; }
h2 { font-size: 1rem; margin: 0 0 10px; }
main { max-width: 1180px; margin: 0 auto; padding: 18px 14px 90px; }
.muted { color: var(--muted); } .small { font-size: .82rem; }
.gruen { color: var(--gruen); } .rot { color: var(--rot); } .orange { color: var(--orange); }
.gross { font-size: 1.7rem; font-weight: 700; margin: 4px 0; }

/* Kopfleiste */
.topbar { display: flex; align-items: center; gap: 18px; background: #101725; color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 20; }
.topbar.partner { background: #14343b; }
.brand { color: #fff; font-weight: 700; white-space: nowrap; }
.mainnav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.mainnav a { color: #c6cddb; padding: 6px 10px; border-radius: 7px; white-space: nowrap; }
.mainnav a.active, .mainnav a:hover { background: #24304a; color: #fff; text-decoration: none; }
.mainnav .nico { display: none; }
.logout { color: #93a0b6; font-size: .85rem; }

/* Mobile Tab-Leiste */
.tabbar { display: none; }
@media (max-width: 760px) {
  .mainnav { display: none; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #101725; z-index: 30;
    justify-content: space-around; padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { color: #c6cddb; display: flex; flex-direction: column; align-items: center; font-size: .62rem; gap: 1px; padding: 3px 6px; border-radius: 8px; }
  .tabbar a.active { color: #fff; background: #24304a; }
  .tabbar .nico { font-size: 1.15rem; display: block; }
}

/* Kacheln & Karten */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kachel, .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.kachel { margin-bottom: 0; }
.kachel h2 a { color: inherit; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 5px 0; border-bottom: 1px solid var(--rand); }
.liste li:last-child { border-bottom: none; }
.warnliste li { color: var(--orange); }

/* Diagramm & KPI */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 50px; margin-top: 6px; }
.balken { flex: 1; background: var(--akzent); border-radius: 2px 2px 0 0; min-width: 6px; opacity: .85; }
.progress { background: var(--rand); border-radius: 99px; height: 10px; overflow: hidden; }
.progress div { background: var(--akzent); height: 100%; }
.progress div.warn { background: var(--orange); }
.kpizeile { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kpi { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 16px; min-width: 130px; }
.kpi span { display: block; font-size: .78rem; color: var(--muted); }
.kpi strong { font-size: 1.15rem; }
.kpirot strong { color: var(--rot); }

/* Tabellen */
.tabellenwrap { overflow-x: auto; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); }
table.tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabelle th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--rand); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle .r, th.r { text-align: right; }
.zeile-rot td { background: #fdf1f1; }
.aktionen { white-space: nowrap; }

/* Badges & Pills */
.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .74rem; font-weight: 600; background: #e8ebf0; }
.b-neu { background: #e3edff; color: #1d4ed8; }
.b-kontaktiert { background: #fdf3d7; color: #92600a; }
.b-im_gespraech { background: #ffe9d1; color: #b45309; }
.b-angebot { background: #ede4ff; color: #6d28d9; }
.b-kunde, .b-aktiv, .b-bezahlt, .b-live, .b-angenommen { background: #dcf3e5; color: #157347; }
.b-absage, .b-storniert, .b-abgelehnt, .b-beendet { background: #f3d9d9; color: #a12727; }
.b-gekuendigt, .b-abgelaufen, .b-offen, .b-faellig { background: #fde8cf; color: #b45309; }
.b-entwurf, .b-pausiert, .b-angefallen { background: #e8ebf0; color: #4b5563; }
.pill { display: inline-block; background: #eef1f5; border-radius: 99px; padding: 2px 9px; font-size: .78rem; margin: 1px 0; }

/* Formulare */
.formular label { display: block; margin-bottom: 10px; font-size: .85rem; color: var(--muted); }
.formular input, .formular select, .formular textarea {
  width: 100%; padding: 9px 10px; border: 1px solid #cdd3da; border-radius: 8px; font: inherit; color: var(--text); background: #fff; margin-top: 3px;
}
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.zeile input, .zeile select { width: auto; }
.inlinecheck { display: flex !important; align-items: center; gap: 8px; }
.inlinecheck input { width: auto !important; margin: 0 !important; }
button, .btn { background: var(--akzent); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; display: inline-block; }
button:hover, .btn:hover { background: var(--akzent-d); text-decoration: none; color: #fff; }
button:disabled { background: #a9b4c4; cursor: not-allowed; }
button.sekundaer, .btn.sekundaer { background: #e8ebf0; color: var(--text); }
button.sekundaer:hover, .btn.sekundaer:hover { background: #d8dde4; }
button.gefahr { background: var(--rot); }
button.klein, .btn.klein { padding: 4px 10px; font-size: .8rem; }
.aktivfilter { outline: 2px solid var(--akzent); }
button.check { background: none; color: var(--text); padding: 0 4px; font-size: 1rem; }
.inline { display: inline; }
.versteckt { display: none; }
.aktionzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.filterform { display: flex; gap: 8px; flex-wrap: wrap; }
.filterform input, .filterform select { padding: 8px 10px; border: 1px solid #cdd3da; border-radius: 8px; font: inherit; }
.inlineh { margin: 0; }

/* Tabs, Flash, Spalten */
.tabzeile { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; }
.tab { padding: 7px 14px; border-radius: 8px 8px 0 0; background: #e8ebf0; color: var(--text); white-space: nowrap; }
.tab.aktiv { background: var(--karte); border: 1px solid var(--rand); border-bottom-color: var(--karte); font-weight: 600; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: #dcf3e5; color: #115c38; }
.flash.err { background: #f9dddd; color: #8f1f1f; }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }

/* Zeitachse */
.zeiteintrag { border-left: 3px solid var(--rand); padding: 4px 0 4px 12px; margin-bottom: 10px; }
.zeiteintrag.email { border-left-color: var(--akzent); }
.zeitkopf { font-size: .76rem; color: var(--muted); }
.zeiteintrag p { margin: 2px 0 0; }

/* Login */
.loginbody { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.loginbox { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 30px; width: 340px; }
.loginbox h1 { text-align: center; }
.loginbox label { display: block; margin-bottom: 12px; font-size: .85rem; color: var(--muted); }
.loginbox input { width: 100%; padding: 10px; border: 1px solid #cdd3da; border-radius: 8px; font: inherit; margin-top: 4px; }
.loginbox button { width: 100%; margin-top: 6px; }
.token { word-break: break-all; background: #eef1f5; padding: 6px 10px; border-radius: 6px; display: inline-block; }
.wa { background: #1faa53; }
table.positionen input { width: 100%; }

/* Reports (Perfekt-Update v2) */
.chartwrap { overflow-x: auto; }
.chart-svg { width: 100%; max-width: 860px; height: auto; display: block; }
.chart-svg.donut { max-width: 220px; margin: 0 auto; }
.legende { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; font-size: .82rem; color: var(--muted); }
.legende .punkt { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
table.kohorten td { text-align: center; font-size: .78rem; padding: 6px 6px; }
.zweifaktor-codes { columns: 2; font-family: ui-monospace, monospace; }