@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('/fonts/quicksand-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/quicksand-500.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  font-family: 'Quicksand', 'Century Gothic', system-ui, sans-serif;
  font-weight: 300;
  background: #222;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Grid: randlos, füllt den Viewport ---------- */
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
  gap: 0;
}
/* Handy: untereinander */
@media (max-width: 600px) {
  #grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(220px, 1fr));
    height: auto;
    min-height: 100vh;
  }
}

/* ---------- Kachel ---------- */
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px; cursor: pointer; color: #fff;
  transition: filter .12s ease;
  overflow: hidden;
}
.tile:hover { filter: brightness(1.06); }
.tile-icon { width: 34px; height: 34px; margin-bottom: 14px; stroke: #fff; stroke-width: 1.6; fill: none; opacity: .95; }
.tile-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); font-weight: 500; }
.tile-value {
  font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 300; line-height: 1.05;
  margin: 6px 0 4px; font-variant-numeric: tabular-nums;
}
.tile-unit { font-size: .32em; color: rgba(255,255,255,.7); margin-left: .12em; vertical-align: super; }
.tile-foot { font-size: .74rem; color: rgba(255,255,255,.6); }
.tile.stale .tile-value { opacity: .5; }
.tile.stale .tile-foot { color: rgba(255,255,255,.75); }

/* Gruppierte Kachel: mehrere Werte untereinander */
.g-metrics { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin: 12px 0 8px; }
.g-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.g-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.75); }
.g-val { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-row.primary .g-lbl { color: rgba(255,255,255,.9); }
.g-row.primary .g-val { font-size: clamp(2.4rem, 5.5vw, 4rem); }
.g-unit { font-size: .42em; color: rgba(255,255,255,.7); margin-left: .15em; }
.tile.stale .g-val { opacity: .5; }

/* Lüfter-Kachel */
.fan-list { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 340px; margin-top: 12px; }
.fan-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fan-name { font-size: .85rem; }
.fan-name b { font-weight: 500; opacity: .85; margin-left: 4px; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; overflow: hidden; }
.seg button { font-family: inherit; font-size: .75rem; padding: 5px 9px; background: transparent; color: #fff; border: 0; border-right: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.active { background: #fff; color: #222; }

/* Uhr-Kachel */
.clock-time { font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock-colon.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.clock-date { font-size: .82rem; color: rgba(255,255,255,.7); margin-top: 6px; }

/* Steuer-Kachel (Lüfter): Buttons */
.tile-ctrl { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
.tile-ctrl button {
  font-family: inherit; font-size: .8rem; padding: 5px 11px; border: 1px solid rgba(255,255,255,.5);
  background: transparent; color: #fff; cursor: pointer; border-radius: 4px;
}
.tile-ctrl button.active { background: #fff; color: #222; border-color: #fff; }

/* ---------- Modal ---------- */
.hidden { display: none !important; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal-card {
  background: #fff; color: #1f2a37; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%; max-width: 680px; padding: 22px 24px; font-weight: 500;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head strong { font-size: 1.15rem; }
.modal-x { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #8b95a1; }
.modal-sub { color: #7b8794; font-size: .85rem; margin: 4px 0 16px; }

.pills { display: inline-flex; gap: 6px; background: #f1f4f8; padding: 4px; border-radius: 10px; }
.pills button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: .85rem; color: #5b6673; }
.pills button.active { background: #2a3441; color: #fff; }

.pos-dot { width: 16px; height: 16px; border-radius: 50%; background: #e8302f; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(232,48,47,.30); }

.graph-wrap { margin: 18px 0; height: 240px; }
.graph-wrap svg { width: 100%; height: 100%; display: block; }

.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.metric-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.metric-btns button {
  border: 1px solid #d4dbe3; background: #fff; color: #5b6673; padding: 5px 11px;
  border-radius: 7px; cursor: pointer; font-family: inherit; font-size: .8rem;
}
.metric-btns button.active { background: #2a3441; color: #fff; border-color: #2a3441; }
.btn-blue { border: 0; background: #2f6df6; color: #fff; padding: 8px 18px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .9rem; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}