:root{
  --bg:#0b0f19; --card:#0f1626; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#bfa94c; --border:rgba(255,255,255,.08);
  --radius:16px; --radius-sm:12px; --shadow:0 18px 40px rgba(0,0,0,.28);
}

html[data-theme="light"]{
  --bg:#f6f7fb; --card:#ffffff; --text:#0b1220; --muted:#4b5563;
  --accent:#bfa94c; --border:rgba(0,0,0,.08); --shadow:0 18px 40px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1200px; margin-inline:auto; padding:0 16px}
.mt{margin-top:42px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid var(--border); backdrop-filter:saturate(120%) blur(6px);
}
@supports (background:color-mix(in oklab, white, black)){
  .site-header{ background:color-mix(in oklab, var(--bg) 92%, transparent) }
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; flex-wrap:wrap;
}
.brand{display:flex; gap:12px; align-items:center; min-width:0}
.logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:#0b0f19; font-weight:800; background:var(--accent);
  box-shadow:0 8px 20px rgba(191,169,76,.35); flex:0 0 auto;
}
.brand-text{min-width:0}
.brand-text .title{font-weight:800; line-height:1.05}
.brand-text .sub{font-size:.9rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.header-actions{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:12px; padding:10px 14px;
  background:var(--accent); color:#0b0f19; font-weight:800; cursor:pointer;
  line-height:1; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  text-decoration:none;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(191,169,76,.22) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn.ghost{
  background:transparent; color:var(--text); border:1px solid var(--border); font-weight:600;
}
.btn.ghost:hover{ background:color-mix(in oklab, var(--card) 92%, transparent) }
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset:2px;
}
.hidden{display:none !important}

/* Hero / Intro */
.hero{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
}
.h1{margin:0 0 6px 0; font-size:clamp(1.4rem, 1.1rem + 1.2vw, 2rem)}
.lead{color:var(--muted); margin:6px 0 10px}
.quick-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.muted{color:var(--muted)}

/* Grids */
.grid{display:grid; gap:16px}

/* Fluid KPIs & Cards – füllt Zeilen automatisch, bleibt sauber mobil */
.kpi-grid{
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
}
.card-grid{
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

@media (max-width:960px){
  .container{padding:0 14px}
}
@media (max-width:640px){
  .mt{margin-top:32px}
  .header-actions{gap:8px}
  .btn{padding:10px 12px; border-radius:10px}
  .quick-actions .btn{flex:1 1 auto}
}
@media (max-width:380px){
  .quick-actions{flex-direction:column; align-items:stretch}
  .quick-actions .btn{width:100%}
}

/* KPI / Cards */
.kpi, .card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.kpi .label{color:var(--muted); font-weight:600}
.kpi .value{font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2rem); font-weight:800; margin-top:6px}

.card .header{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.card .title{font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card .pid{color:var(--muted); font-size:.85rem; white-space:nowrap}
.card .small{font-size:.88rem; color:var(--muted); text-decoration:none}
.card .small:hover{ text-decoration:underline }

/* Metrics in Card */
.metrics{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:10px; margin-top:12px;
}
.metric{
  background:transparent; border:1px dashed var(--border); border-radius:var(--radius-sm); padding:12px;
}
.m-label{color:var(--muted); font-weight:600}
.m-value{font-size:clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight:800; margin-top:4px}

/* Sparkline Platzhalter/Canvas */
.spark{
  width:100%; height:46px; display:block; margin-top:10px;
  image-rendering:auto; /* glättet Linien auf manchen Geräten */
}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:40px}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; flex-wrap:wrap;
}

/* Accessiblity niceties */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:var(--accent); color:#0b0f19; border-radius:10px; z-index:999}

/* Custom scrollbars (unterstützende Browser) */
*::-webkit-scrollbar{height:12px;width:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--text) 15%, transparent); border-radius:12px; border:3px solid transparent; background-clip:content-box}
*{scrollbar-color: color-mix(in oklab, var(--text) 20%, transparent) transparent; scrollbar-width:thin}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}