/* === Variablen === */
:root {
  --clr-card: rgba(255,255,255,0.67);
  --clr-luxshadow: 0 12px 42px 4px #8fe7fe1e;
  --clr-arrow: #5acef9;
  --clr-arrow-inactive: #dbe7f5;
}

/* === Basis und Body === */
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(120deg, #eefaff 0%, #dde1f7 62%, #ecfbfa 100%);
  color: #233e4e;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  box-sizing: border-box;
}
img, video {
  max-width: 100%;
  height: auto;
}

/* === Header / Titel === */
header {
  text-align: center;
  padding: 34px 0 5px;
}
h1 {
  font-family:'Montserrat',sans-serif;
  font-size:2.13rem;
  font-weight:900;
  margin-bottom:7px;
  letter-spacing:.07em;
  background: linear-gradient(91deg, #289ecf 7%, #2bd2be 55%, #e5c384 95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 #fff6);
}
.subtitle {
  color:#549199;
  font-size:1.17em;
  font-weight:500;
  letter-spacing:.01em;
  margin-bottom: 1.09em;
}

/* === Dashboard & Cards === */
.dashboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 980px;
  background: var(--clr-card);
  border-radius: 36px;
  box-shadow: var(--clr-luxshadow);
  padding: 2em 2em 2.5em 2em;
  margin-bottom: 36px;
  margin-top: 1.3em;
}
.flex-row {
  display: flex;
  gap: 60px;
  margin-bottom: 26px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}
.stat-card {
  background: linear-gradient(120deg,#ecf5f6 70%, #f2e0fb90 100%);
  box-shadow: 0 2px 19px #b8eef7b0;
  border-radius: 25px;
  min-width: 230px;
  max-width: 340px;
  text-align: center;
  padding:35px 0 24px 0;
  flex: 1 1 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #e6ecf6;
  margin:0 12px;
  animation: cardsIn .55s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes cardsIn {
  from { transform:scale(0.88) translateY(22px); opacity:0.33;}
  to   { transform:scale(1) translateY(0); opacity:1;}
}
.stat-card .icon { font-size:2.58em; margin-bottom:7px;}
.stat-card .desc {font-size:1.23em; color:#1eceb6; margin-bottom:6px;font-weight:600;}
.stat-card .bigval {
  font-family:'Montserrat',sans-serif;
  font-size:1.52em;
  font-weight:900;
  margin-bottom:0;
  margin-top:7px;
  color:#224775;
  letter-spacing:.09em;
  background: linear-gradient(81deg, #46e4b6 16%, #E3B66B 86%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-card .tiny {font-size: 1.03em; color:#7890a1;margin-top:11px;font-weight: 400;}


/* === Select/Timeline/Chart Block === */
.select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  margin: auto;
  width: 100%;
  background: rgba(255,255,255,0.46);
  border-radius: 24px;
  padding: 12px 14px 14px 14px;
  margin-bottom: 22px;
  box-shadow: 0 2px 14px #beecfb46;
  max-width: 600px;
}
.tag-select {
  min-width:170px;
  font-size:1.14em;
  padding:10px 22px;
  border-radius:13px;
  background:#e5f7f7;
  box-shadow:0 1px 11px #eaf8fd23;
  font-weight:600;
  color:#279fa1;
  border:1.9px solid #aaf2ed;
  appearance:none;
  text-align:center;
}
.timeline-arrow {
  width:38px; height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.7em;
  cursor:pointer;
  user-select: none;
  color: var(--clr-arrow);
  transition: color .15s;
}
.timeline-arrow.inactive {
  color: var(--clr-arrow-inactive);
  cursor:not-allowed;
  opacity:0.5;
}

.timeline-box {
  background:rgba(249,253,252,0.78);
  border-radius:20px;
  box-shadow:0 2px 12px #b6f4f688;
  margin: 1em 0 .9em 0;
  padding:.9em 2em;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:900px;
  min-height:90px;
  overflow-x: auto;
  scrollbar-width:thin;
  overflow-y: hidden;
  height: 124px;
  position: relative;
}
.timeline-content {
  display: flex;
  align-items: center;
  gap: 1.5em;
  justify-content:center;
  flex:1;
}
.time-bullet {
  min-width:52px; width:60px;
  text-align:center;
  position:relative;
  cursor:pointer;
  display: flex;
  flex-direction:column;
  align-items:center;
}
.time-bullet-circle {
  width:19px; height:19px; border-radius:50%;
  background:linear-gradient(130deg,#70e5ce 60%,#edda97 170%);
  border:2.5px solid #def1ff;
  display:inline-block;
  box-shadow:0 1px 5px #cdf7cc77;
  margin-bottom:6px;
  transition:.16s;
}
.time-bullet.active .time-bullet-circle {
  border:2.5px solid #e3b66a;
  background:linear-gradient(130deg,#f7d27b 60%,#43e3e2 170%);
  box-shadow:0 4px 12px #ffe69166;
}
.time-bullet-value { font-size:1.19em; font-weight:700; color:#1e7696; margin-bottom: -1px; }
.time-bullet-time {font-size:1.07em;color:#8391a3;}
.time-bullet.selected .time-bullet-circle {
  border:2.5px solid #79f5ab;
  background:linear-gradient(130deg,#a5ffef 60%,#fffaa9 170%);
}
.chart-block {
  background:rgba(243,255,250,0.87);
  border-radius:18px;
  margin:18px 0 0 0;
  padding:1.25em .25em .89em .25em;
  box-shadow:0 2px 13px #c7fadd29;
  width:100%;
  max-width:820px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
canvas {
  width:100% !important;
  max-width:700px!important;
  max-height:205px!important;
}
.chart-legend .legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.dot-temp { background: #eeb05f; }
.dot-hum { background: #26c9a5; }


/* === Medien-Queries für alle Devices === */

/* Sehr kleines Handy (unter 420px) */
@media (max-width: 420px) {
  html, body {
    font-size: 13px;
    padding: 0;
    min-width: 100vw;
    width: 100vw;
  }
  header { padding: 11px 0 2px;}
  h1 { font-size: 1.3rem; }
  .dashboard { padding: 0.7em 0.2em 1em 0.2em; margin-top:0.7em; margin-bottom:14px; border-radius:17px; }
  .flex-row { flex-direction: column; gap: 13px; margin-bottom:9px;}
  .stat-card { min-width: 95vw; max-width: 99vw; padding: 18px 5px 14px 5px; margin: 0;}
  .select-row { flex-direction: column; gap:7px; padding:4px 6px 7px 6px; font-size:0.96em; max-width:99vw;}
  .timeline-box { max-width: 99vw; min-width:94vw; height:auto; min-height:42px; font-size:0.92em; padding:.4em .2em;}
  .chart-block { max-width:99vw; padding: .5em .1em .39em .1em; border-radius:8px; }
  canvas { max-width:99vw !important; max-height:120px !important;}
}

/* Handy */
@media (min-width: 421px) and (max-width: 600px) {
  html, body {
    font-size: 14px;
    padding: 0;
    min-width: 100vw;
    width: 100vw;
  }
  header { padding: 22px 0 5px;}
  h1 { font-size: 1.5rem; }
  .dashboard  { padding: 1em 0.5em 1.7em 0.5em; margin-top:0.9em; margin-bottom:18px; border-radius:22px;}
  .flex-row { flex-direction: column; gap: 17px; margin-bottom:14px;}
  .stat-card { min-width: 97vw; max-width: 99vw; padding:22px 7px 18px 7px; margin: 0;}
  .select-row { flex-direction: column; gap:11px; padding:8px 8px 10px 8px; font-size:1em; max-width:99vw;}
  .timeline-box { max-width:99vw; min-width:95vw; height:auto; min-height:58px; font-size:0.95em; padding:0.6em 0.2em;}
  .chart-block { max-width:99vw; padding:0.7em 0.3em 0.58em 0.3em; border-radius:12px;}
  canvas { max-width:99vw!important; max-height:160px!important;}
}

/* Tablet Hochformat */
@media (min-width: 601px) and (max-width: 900px) {
  html, body { font-size: 15px; }
  .dashboard, .chart-block, .timeline-box { max-width: 95vw; }
  .flex-row { gap: 24px; }
  .stat-card { min-width:190px; max-width: 280px; padding:28px 10px 16px 10px;}
}
/* Tablet Querformat & kleine Laptops */
@media (min-width: 901px) and (max-width: 1200px) {
  html, body { font-size: 15.5px; }
  .dashboard, .chart-block, .timeline-box { max-width: 90vw; }
  .flex-row { gap: 39px; }
  .stat-card { min-width:210px; max-width:300px; padding:32px 10px 19px 10px;}
}
/* Normale Desktop/Laptop */
@media (min-width: 1201px) {
  html, body { font-size: 16px; }
  .dashboard, .chart-block, .timeline-box { max-width: 980px; }
  .flex-row { gap: 60px; }
}
/* Ultra-Wide Screens */
@media (min-width: 1601px) {
  html, body { font-size: 17px; }
  .dashboard, .chart-block, .timeline-box { max-width: 1200px; }
}