:root {
  --bg: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 10px 35px rgba(0,0,0,.1);
  --radius: 16px;
  --brand: #111827;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.4; }

.container { width:min(1100px, 92vw); margin: 0 auto; }

.site-header { border-bottom: 1px solid var(--border); background: #fff; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.logo-dot { width:12px; height:12px; border-radius:50%; background:var(--brand); display:inline-block; }
.brand-name { font-size:16px; }

.hero { padding: 32px 0 14px 0; }
.hero h1 { font-size: clamp(22px, 3.2vw, 32px); margin:0 0 10px 0; }
.muted { color: var(--muted); }

.grid { display:grid; grid-template-columns: 1fr; gap: 18px; padding: 10px 0 40px 0; }
@media (min-width: 900px) { .grid { grid-template-columns: 1.05fr 1.15fr; } }

.card { border:1px solid var(--border); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); padding:18px; }
.card-title { margin:0 0 10px 0; font-size:18px; font-weight:800; }

.card-sub { margin-top:16px; padding-top:12px; border-top:1px dashed var(--border); }

.form-grid { display:grid; grid-template-columns:1fr; gap: 12px; }
@media (min-width: 720px){ .form-grid { grid-template-columns: repeat(3, 1fr); } }
.two-col { display:grid; grid-template-columns:1fr; gap: 10px; }
@media (min-width: 720px){ .two-col { grid-template-columns: 1fr 1fr; } }

.label { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; display:block; letter-spacing:.02em; }
.input, .select { width:100%; border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:14px; background:#fff; }
.hint { font-size:12px; color:var(--muted); }

.results { display:flex; flex-direction:column; gap:18px; }

.kpi-card .kpis { display:grid; grid-template-columns:1fr; gap: 14px; }
@media (min-width: 720px){ .kpi-card .kpis { grid-template-columns: 1fr 1fr; } }
.kpi { display:flex; flex-direction:column; gap:6px; }
.kpi-label { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.02em; }
.kpi-value { font-size:32px; font-weight:900; }
.kpi-sub { font-size:12px; }

.table-wrap { overflow:auto; }
.table { width:100%; border-collapse: collapse; font-size:14px; }
.table th, .table td { text-align:left; padding:10px 6px; border-bottom:1px solid var(--border); }

.list { margin:0; padding-left:18px; line-height:1.6; }

.note { background:#FFFBEB; border:1px solid #FDE68A; color:#92400E; border-radius:12px; padding:12px; font-size:13px; }

.site-footer { border-top:1px solid var(--border); background:#fff; }
.footer-inner { padding: 16px 0; }

/* Button & Actions */
.actions { margin-top: 12px; display:flex; align-items:center; gap:12px; }
.btn {
  appearance: none; border: none;
  background: #111827; color: #fff;
  padding: 10px 16px; border-radius: 12px;
  font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Hervorhebung "Leads / Woche" */
.kpi-week-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  background: #ecfdf5;           /* zartes Grün */
  color: #065f46;                /* dunkles Grün */
  border: 1px solid #a7f3d0;
}
.kpi-value strong { font-size: 34px; line-height: 1; display:inline-block; }