:root{
 --accent:#00ff88;
 --primary:#ff4d4d;
 --glass:rgba(20,20,20,.88);
 --text:#e9fbff;               /* etwas heller Text */
 --radius:16px;
}

body{
 margin:0;
 font-family:'Segoe UI',Arial,sans-serif;
 background:url("boxen/background.jpg") center/cover fixed no-repeat;
 color:var(--text);
}

body::before{
 content:"";
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.55);
 z-index:-1;
}

.dashboard-container{
 max-width:1400px;
 margin:auto;
 padding:2rem 1rem;
}

.dashboard-header{
 text-align:center;
 margin-bottom:2.5rem;
}

.dashboard-header h1{
 color:var(--accent);
 text-shadow:0 0 30px rgba(0,255,136,.8);
}

/* ================= KPI ================= */
.dashboard-kpis{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:1.5rem;
 margin-bottom:3rem;
}

.kpi{
 background:var(--glass);
 border-radius:var(--radius);
 padding:1.6rem;
 text-align:center;
 box-shadow:0 0 30px rgba(0,255,136,.25);
}

.kpi.glow{
 box-shadow:0 0 45px rgba(0,255,136,.7);
}

.kpi i{
 font-size:2.4rem;
 color:var(--accent);
}

.kpi span{
 display:block;
 font-size:2.2rem;
 font-weight:900;
 margin-top:.4rem;
 color:#ffffff;
}

/* ================= SOURCE / CARDS ================= */
.source-dashboard{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:1.5rem;
}

.source-card{
 background:var(--glass);
 padding:1.5rem;
 border-radius:var(--radius);
 box-shadow:0 0 25px rgba(0,0,0,.6);
}

.source-card h3{
 margin:0 0 .5rem;
 color:var(--accent);
}

.progress{
 background:#111;
 border-radius:10px;
 overflow:hidden;
 height:14px;
 margin:.8rem 0;
}

.progress span{
 display:block;
 height:100%;
 background:linear-gradient(90deg,var(--primary),var(--accent));
 box-shadow:0 0 18px rgba(0,255,136,.7);
}

/* Quellenfarben */
.radiode .progress span{background:#6dff9c}
.airable .progress span{background:#8fb2ff}
.vtuner .progress span{background:#8ff0ff}
.tunein .progress span{background:#b3c6ff}
.stationsseite .progress span{background:#ffd9a3}
.alexa .progress span{background:#d2a9ff}
.unbekannt .progress span{background:#ffb0c1}

/* ================= HEATMAP ================= */
.heatmap{
 display:flex;
 flex-direction:column;
 gap:.5rem;
 margin-top:1.5rem;
 padding:1rem;
 background:rgba(0,0,0,.35);      /* extra Kontrast */
 border-radius:var(--radius);
 box-shadow:0 0 25px rgba(0,255,136,.25);
}

.heat-row{
 display:grid;
 grid-template-columns:70px repeat(24,1fr);
 gap:6px;
 align-items:center;
}

/* Tages-Label links */
.heat-label{
 font-size:.9rem;
 font-weight:700;
 color:#ffffff;                  /* deutlich heller */
 text-shadow:0 0 8px rgba(0,255,136,.7);
}

/* Zellen */
.heat-cell{
 height:26px;                    /* größer */
 background:linear-gradient(
   135deg,
   rgba(255,77,77,.85),
   rgba(0,255,136,.9)
 );
 border-radius:6px;
 box-shadow:
   0 0 10px rgba(0,255,136,.6),
   inset 0 0 6px rgba(255,255,255,.25);
 opacity:.35;                    /* Basis heller als vorher */
 transition:.2s ease;
 cursor:help;
}

/* Hover */
.heat-cell:hover{
 opacity:1;
 transform:scale(1.25);
 box-shadow:
   0 0 25px rgba(0,255,136,1),
   inset 0 0 10px rgba(255,255,255,.5);
 z-index:5;
}

/* ================= SECTION TITEL ================= */
section h2{
 margin:3rem 0 1.2rem;
 color:#b8ffe0;                  /* heller als accent */
 text-shadow:0 0 18px rgba(0,255,136,.9);
}

/* ================= MOBILE ================= */
@media(max-width:900px){
 .heat-row{
   grid-template-columns:55px repeat(24,1fr);
 }
 .heat-cell{
   height:22px;
 }
}