/* System-Font, cleaner Look – ohne weiße Cards */
:root { --txt:#0b0b0b; --sub:#4b5563; --ios-blue:#0A84FF; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.45 -apple-system, BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
       Segoe UI, Roboto, Helvetica, Arial, system-ui, sans-serif;
  color:var(--txt);
  /* dezenter Hintergrund ohne weiße Flächen */
  background: radial-gradient(1200px 600px at 20% -10%, #f6f8fb, #e9edf5) fixed;
}
.page{max-width:700px;margin:32px auto;padding:0 16px;text-align:center}

/* einspaltig, zentriert; Cards transparent */
.shc-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.shc-card{background:transparent;border:0;padding:0;box-shadow:none}
.shc-title{margin:0 0 4px;font-weight:700;font-size:24px;letter-spacing:.1px}
.shc-title.sm{font-size:18px}
.shc-sub{margin:0 0 14px;color:var(--sub)}

.shc-btn{
  margin-top:14px;display:inline-block;border:0;background:var(--ios-blue);
  color:#fff;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700;
  box-shadow:0 8px 16px rgba(10,132,255,.25);
}
.shc-btn[disabled]{opacity:.7;cursor:not-allowed}

/* Rechtstext ganz unten, dezenter */
.shc-legal{max-width:720px;margin:18px auto 8px;font-size:12px;color:#6b7280}

/* Stats untereinander sauber */
.shc-stats{display:flex;gap:28px;justify-content:center;margin:10px 0}
.shc-stat-val{font-weight:800;font-size:22px}
.shc-stat-label{font-size:12px;color:#6b7280}
.shc-chart{width:100%;height:160px}
.shc-chart canvas{width:100%;height:100%;display:block}

/* Radial Control */
.radial-wrap{
  position:relative;
  width:100%;
  max-width:360px;
  aspect-ratio:1/1;
  margin: 8px auto 0;
  touch-action:none;
}
#radialCanvas{ width:100%; height:100%; display:block; }
.radial-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
/* Größe wird dynamisch in JS gesetzt – hier nur Basis */
#percentVal{ font-weight:900; letter-spacing:.2px; line-height:1; }