body {
    background: radial-gradient(ellipse at 40% 20%, #223346 60%, #1d232a 100%);
    color: #c8f3ff;
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
}
.dashboard-frame {
    margin: 2.5rem auto 2rem auto;
    background: #232a33;
    max-width: 700px;
    border-radius: 1.4rem;
    box-shadow: 0 0 30px #19ecfa27, 0 1px 0 #222;
    padding: 2rem 2rem 1.5rem 2rem;
}
.station-dropdown {
    width: 100%;
    margin-bottom: 1.2rem;
    padding: .6rem 1rem;
    border-radius: .9rem;
    font-size: 1.3rem;
    background: #1c2733;
    color: #4defff;
    border: 1.7px solid #43e6ff;
    font-weight: bold;
    outline: none;
    box-shadow: 0 0 10px #1221363a;
}
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1b232c;
    border-radius: 1.2rem;
    box-shadow: 0 0 16px #18ebff1a, 0 2px 1px #191f23;
    margin: 0 auto 1.2rem auto;
    max-width: 370px;
    padding: 1.2rem 0 .9rem 0;
    border: 2.5px solid #23eaff28;
}
.compact-card { max-width: 350px; padding: 1rem 0 .7rem 0; }
.stat-title {
    color: #59eaff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.stat-value {
    color: #fff;
    font-size: 3.4rem;
    font-weight: bold;
    text-shadow: 0 0 18px #34fff9a3, 0 2px 1px #223;
    margin-bottom: .5rem;
}
.stat-sub {
    color: #c8f3ff;
    font-size: 1.1rem;
    opacity: 0.8;
}
.rangeform { margin-bottom: 1.2rem;}
.range-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
}
.range-btns {
    display: flex;
    gap: .5rem;
}
.range-btns label {
    display: flex;
    align-items: center;
    border-radius: .7rem;
    padding: .34rem 1.18rem .33rem 1.18rem;
    background: #19253a;
    font-size: 1.25rem;
    color: #70eaff;
    font-weight: bold;
    border: 2px solid #22b1fd33;
    cursor: pointer;
    margin-right: .2rem;
    box-shadow: 0 0 8px #15e7ff27;
    transition: background .15s, color .15s, border .12s;
}
.range-btns input[type="radio"] { display: none; }
.range-btns label:has(input[type="radio"]:checked) {
    background: #21c9f6;
    color: #000;
    border: 2px solid #66edfd;
}
.customrange-label {
    display: flex;
    align-items: center;
    gap: .36rem;
    font-size: 1.09rem;
    color: #aaf7fd;
}
.calinput {
    background: #191f28;
    color: #67eaff;
    border: 2px solid #22eaff50;
    border-radius: .7rem;
    padding: .39rem .8rem;
    font-size: 1.07rem;
    margin: 0 .18rem;
    width: 168px;
    box-shadow: 0 1px 8px #11eaff2b;
}
.btn-apply {
    background: #35e2fe;
    color: #222;
    font-weight: bold;
    font-size: 1.15rem;
    border: none;
    border-radius: .7rem;
    padding: .38rem 1.29rem .4rem 1.29rem;
    margin-left: .8rem;
    cursor: pointer;
    box-shadow: 0 0 8px #10d5ff44;
    transition: background .14s, color .13s;
}
.btn-apply:hover { background: #17b0e6; color: #fff; }
.chartwrap {
    margin: 0 auto 1.4rem auto;
    border-radius: 1.15rem;
    background: #1d2330;
    box-shadow: 0 0 16px #18e9ff15;
    padding: 1.3rem 1.2rem .6rem 1.1rem;
    border: 2px solid #21e3ff19;
    max-width: 98%;
    min-width: 340px;
}
footer {
    text-align: center;
    font-size: 1.19rem;
    color: #93eaf8;
    margin-top: 1.8rem;
    margin-bottom: .3rem;
    font-weight: 500;
    text-shadow: 0 2px 1px #11232c;
}
footer b { color: #2eedff; letter-spacing: 1px;}
/* --- Flatpickr Anpassung --- */
.flatpickr-calendar, .flatpickr-months {
    background: #19222c;
    color: #52e3ff;
    border-radius: 1.2rem;
    font-size: 1.04rem;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #22c9ff;
    color: #fff;
}
.flatpickr-day.today { border-color: #55eaff;}
.flatpickr-time input { background: #222c33; color: #3deaff;}
/* -- Responsive -- */
@media (max-width: 700px){
    .dashboard-frame {padding:1.1rem 0.1rem;}
    .chartwrap {padding:0.7rem 0.2rem 0.2rem 0.2rem;}
    .range-row, .customrange-label { flex-direction:column; align-items:flex-start; gap:0.25rem;}
    .stat-card, .compact-card {max-width: 100%;}
}