:root{
  --bg:#F6F8FB; --card:#FFF; --ink:#17212E; --muted:#5B6B7C;
  --primary:#223854; --accent:#6B8AA6; --gold:#F5B400; --ring:#DFE7F1;
  --radius:18px; --shadow:0 10px 30px rgba(17,28,45,.08);
  --gap:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}

/* Header */
.site-header{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center;
  max-width:min(1800px,96vw); margin:24px auto 10px; padding:0 8px;
}
.logo{width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,#C9D6E4,#9FB2C9);box-shadow:var(--shadow);position:relative}
.logo:before{content:"";position:absolute;inset:12px;border-radius:20px;background:linear-gradient(145deg,#7E8FA5,#6B7C92)}
.brand h1{margin:0;font-size:clamp(22px,3vw,34px);font-weight:700}
.tagline{margin:4px 0 0;color:var(--muted);font-size:14px}
.donations-word{background:linear-gradient(90deg,var(--accent),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--ring);border-radius:12px;background:#fff;color:var(--primary);cursor:pointer;box-shadow:var(--shadow)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.small{padding:6px 10px;font-size:12px}

/* KPIs (oben, 1 Zeile) */
.kpis-top{
  max-width:min(1800px,96vw); margin:0 auto var(--gap); padding:0 8px;
  display:grid; grid-template-columns:repeat(7, minmax(160px,1fr)); gap:var(--gap);
}
.kpi{background:var(--card);border-radius:var(--radius);border:1px solid var(--ring);box-shadow:var(--shadow);padding:18px}
.kpi strong{display:block;font-size:26px}
.kpi span{color:var(--muted);font-size:13px}
.kpi.kpi-sum{
  background: linear-gradient(90deg, var(--accent), var(--gold));
  color:#fff;
  border-color: transparent;
}
.kpi.kpi-sum span{ color: rgba(255,255,255,.85) }
.kpi.kpi-sum strong{ color:#fff }

/* 3-Spalten-Grid: Filter | Content | Einzelnachweise (≤20%) */
.layout3{
  max-width:min(1800px,96vw);
  margin:0 auto 60px; padding:0 8px;
  display:grid; gap:var(--gap); align-items:start;
  grid-template-columns:minmax(150px,12%) minmax(0,1fr) minmax(500px,20%);
}
.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--ring);box-shadow:var(--shadow);padding:18px}

/* Filter links */
.filters h3{margin:0 0 10px;font-size:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label{font-size:12px;color:var(--muted)}
select,input{padding:10px 12px;border-radius:12px;border:1px solid var(--ring);background:#fff}

/* Content/Charts – einheitlicher Abstand NUR über gap */
.content{display:grid; grid-template-columns:1fr; gap:var(--gap)}
.chart-card h3{margin:0 0 10px;font-size:16px}
.chart-card{padding:18px}
.chart-card canvas{width:100%;height:300px;display:block}

/* Einzelnachweise rechts (sticky, ≤20%) */
.sources{position:sticky;top:16px;height:calc(100vh - 32px);overflow:auto}
.side-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.tablewrap{overflow:auto;border:1px solid var(--ring);border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #EDF2F7;font-size:14px;text-align:left}
thead th{background:#F7F9FC;position:sticky;top:0;z-index:1}
td a{color:var(--primary)}
.nowrap{white-space:nowrap}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center}
.modal.show{display:flex}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.dialog{position:relative;width:min(820px,92vw);max-height:80vh;overflow:auto}
.close{position:absolute;top:8px;right:8px;border:1px solid var(--ring);border-radius:8px;background:#fff;padding:6px 10px;cursor:pointer}

/* Responsive */
@media (max-width:1260px){
  .kpis-top{grid-template-columns:repeat(4, minmax(160px,1fr))}
}
@media (max-width:920px){
  .layout3{grid-template-columns:1fr}
  .sources{position:relative;height:auto}
  .kpis-top{grid-template-columns:repeat(2, minmax(160px,1fr))}
}