:root{
  --bg:#f5f7fb; --card:#ffffff; --text:#212529; --muted:#6c757d;
  --border:#e6e9f2; --primary:#2f76ff; --shadow:0 12px 30px rgba(0,0,0,.08);
}
html[data-theme="dark"]{
  --bg:#0f1115; --card:#12151c; --text:#e9ecef; --muted:#aab2c0;
  --border:#2a2f3a; --primary:#7aa2ff; --shadow:0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:24px auto;padding:0 16px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in srgb, var(--bg) 70%, transparent);
}
.brand{font-weight:700}
.tabs a{padding:8px 12px;border-radius:8px}
.tabs a[data-active]{background:color-mix(in srgb, var(--primary) 12%, transparent);color:var(--primary)}

/* Controls */
.actions{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.btn{
  padding:8px 12px;border:1px solid var(--border);background:var(--card);border-radius:10px;
  box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn.dark{background:#212529;color:#fff;border-color:transparent}
.input{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text)}

/* Cards & grids */
.cards{
  /* ⚠ Haupt-Fix: erzwingt responsive Grid mit fester Spaltenbreite */
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px; width:100%; align-items:stretch; margin-bottom:16px;
}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px;
  display:block; min-width:0; /* verhindert Schrumpfen/Überlauf */
}
.card-title{font-weight:600;margin-bottom:10px;color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between}
.row.gap{gap:10px}
.big{font-size:32px;font-weight:700;letter-spacing:.5px;line-height:1.15;word-break:break-word}
.mono{font-family:ui-monospace,Consolas,Menlo,monospace;white-space:pre-wrap}

.grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;
}

/* Tabellen */
.table-wrap{position:relative}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
thead th{font-weight:600;color:var(--muted);text-align:left;padding:10px;border-bottom:1px solid var(--border)}
tbody td{padding:10px;border-bottom:1px solid var(--border)}
th.sortable{cursor:pointer}
.empty{padding:20px;color:var(--muted)}

/* Canvas zuverlässig vollbreit */
canvas{display:block;width:100% !important;height:auto}

/* Spinner & Toast */
.spinner{position:fixed;inset:0;display:grid;place-content:center;background:rgba(0,0,0,.06)}
.spinner.hidden{display:none}
.loader{width:44px;height:44px;border:4px solid color-mix(in srgb, var(--primary) 30%, transparent);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;right:16px;bottom:16px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);padding:10px 12px;border-radius:10px}
.toast.hidden{display:none}

/* Dark switch */
.switch{position:relative;display:inline-block;width:44px;height:24px;margin-right:6px}
.switch input{display:none}
.slider{position:absolute;cursor:pointer;inset:0;background:#cfd3dc;border-radius:999px;transition:.2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--primary)}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* Responsiv kleiner: Charts untereinander */
@media (max-width: 920px){
  .grid-2{grid-template-columns:1fr}
  .big{font-size:26px}
}

/* Eine Zeile: Hauptzahlen links, Eurozahlen rechts */
.numbers-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:clamp(12px, 4vw, 48px);
  white-space:nowrap;
  font-variant-numeric: tabular-nums; /* gleichbreite Ziffern */
}

/* gleiche Größe/Gewicht wie KPI-Zahlen (Datum/Quelle) */
.numbers-line.big{
  font-size: var(--kpi-size, 1.75rem); /* fallback, falls --kpi-size nicht existiert */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
}

/* Feinschliff */
.numbers-line .main,
.numbers-line .euro{
  opacity: 1;                 /* klar wie KPI */
  letter-spacing: .02em;
}

/* fixe Kartenhöhen für ruhige Layouts (Tooltips stretchen dann nichts) */
.h360 { height: 360px; }
.h420 { height: 420px; }
.h480 { height: 480px; }

/* Spalten-Container für Hot/Cold */
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.cols .mono { margin-top: 6px; }

/* Canvas global */
canvas {
  display:block;
  width:100% !important;
  height:auto;
}

/* Donut-Charts fix rund */
.chart-donut {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  min-height:280px;
}

.chart-donut canvas {
  width: 240px !important;
  height: 240px !important;
  aspect-ratio: 1 / 1;
  margin:auto;
}

.container > section + section {
  margin-top: 24px !important;
}

.card.chart-card { 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
}

.card.chart-card .chart-body {
  position: relative;
  flex: 1 1 auto;   /* nimmt den verbleibenden Platz */
  min-height: 0;    /* wichtig für Flexbox/Safari */
}

.card.chart-card .chart-body canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;  /* füllt nur die chart-body, nicht die ganze Karte */
}

.balance-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 2rem !important;
  font-weight: 800;
  text-align: center;
}

/* Nur die ersten drei KPI-Boxen */
.cards .card.kpi:nth-child(1),
.cards .card.kpi:nth-child(2),
.cards .card.kpi:nth-child(3) {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* verteilt Inhalt vertikal */
  padding: 20px 14px;             /* etwas mehr vertikaler Abstand */
}

.lastdraw {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.lastdraw .line {
  display: flex;
  gap: 10px;
  justify-content: left;
}

.lastdraw .chip {
  padding: 8px 14px;
  font-size: 18px;
  font-weight: 900;
  border-radius: 999px;
  border: 2px solid var(--border);
}

.lastdraw .chip--main {
  background: var(--primary);
  color: #fff;
}

.lastdraw .chip--euro {
  background: #ffcc00;
  color: #222;
  border-color: #e7b700;
}

/* Hauptzahlen (10 Spalten) */
.heatmap {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 6px !important;
  align-content: start !important;
  height: 100% !important;
}

/* Eurozahlen */
.heatmap--euro {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;  /* oder repeat(4, 1fr) für größere Kästchen */
  gap: 12px !important;
  align-content: start !important;
  height: 100% !important;
  padding: 0 10px !important;
}

.heat-cell {
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor: default;
  user-select: none;
}

.heat-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  filter: brightness(1.05);
}

/* Karten in 2er-Grids nicht auf gleiche Höhe stretchen */
.grid-2 { 
  align-items: start; 
}

/* falls doch irgendwo Höhe vererbt wird, nimm sie hier raus */
.grid-2 > .card { 
  height: auto; 
}

/* Heatmap-Row: beide Karten gleich hoch, Inhalt bis unten füllen */
.heatmaps { align-items: stretch; }
.heatmaps > .card {
  display: flex;
  flex-direction: column;
}
.heatmaps > .card .heatmap {
  flex: 1 1 auto;   /* füllt die Karte vertikal */
}

/* Basis-Grid */
.heatmap {
  --gap: 10px;
  gap: var(--gap);
  display: grid;
}

/* Hauptzahlen: 10 Spalten (5 Reihen) */
.heatmap--main { grid-template-columns: repeat(10, minmax(0, 1fr)); }

/* Eurozahlen: auf 4 Spalten umstellen -> größere Kacheln (3 Reihen) */
.heatmap--euro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Euro-Kacheln optisch etwas größer/kräftiger */
.heatmap--euro .heat-cell {
  font-size: 16px;       /* größerer Text */
  border-radius: 12px;   /* etwas weichere Ecken */
  color: #000; 
}

/* Optional: auf schmalen Screens wieder 6 Spalten, damit es nicht zu groß wird */
@media (max-width: 900px){
  .heatmap--euro { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Hot / Cold: zwei große Zahlen, sauber ausgerichtet */
.numbers-line.big.mono{
  display:flex;
  justify-content:space-between;   /* Platz nutzen */
  align-items:flex-end;
  gap:16px;
}
.numbers-line.big.mono span{
  font-size:34px;
  font-weight:800;
  line-height:1;
  letter-spacing:.3px;
  min-width:2.8ch;                 /* gleiche Breite für 2-stellige Zahlen */
  text-align:center;
  font-variant-numeric:tabular-nums;
}
/* kleine, dezente Labels (optional) */
.numbers-line.big.mono span:first-child::before{
  content:'Hot';
  display:block; font-size:11px; opacity:.6; margin-bottom:4px;
}
.numbers-line.big.mono span:last-child::before{
  content:'Cold';
  display:block; font-size:11px; opacity:.6; margin-bottom:4px;
}

/* Balance: vier Prozentwerte in einer Zeile; responsive 2×2 bei wenig Platz */
.balance-box{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px; margin-top:2px;
}
.balance-box > div{
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  padding:6px 0;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04); /* dezent, nicht dominant */
}
@media (max-width: 1100px){
  .balance-box{ grid-template-columns:repeat(2,1fr); }
}

/* KPI: Balance – 2×2 mit Labels in den Zellen */
.card.kpi .balance-box{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-auto-rows:auto;
  gap:8px 12px;
}

.card.kpi .balance-box > div{
  position:relative;
  padding-top:16px;                /* Platz für Label */
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  font-size:clamp(18px, 4.2vw, 28px);
  line-height:1.1;
  text-align:center;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 85%, transparent);
}

/* Labels über den vier Werten (ohne zusätzliches HTML) */
#kpiOdd::before  { content:"Ungerade"; }
#kpiEven::before { content:"Gerade"; }
#kpiLow::before  { content:"Low"; }
#kpiHigh::before { content:"High"; }

.card.kpi .balance-box > div::before{
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.02em;
}