/* ============================================================
   Wetterstation – Tablet-Daueranzeige
   Große Schrift, kein Scrollen, burn-in-schonend, Modi
   ============================================================ */

:root {
  --t-bg-0:#070b12;
  --t-bg-1:#0c1320;
  --t-txt:#eef4fc;
  --t-txt-2:#9fb0c8;
  --t-line:rgba(120,150,190,0.14);
  --t-card:rgba(22,32,49,0.55);
  --t-acc:#4ea1ff;
  --t-ok:#36d399;
  --t-warn:#fbbd23;
  --t-danger:#f87272;
  --t-hot:#ff8a5c;
  --t-cold:#5ec8ff;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--t-txt);
  background: radial-gradient(1600px 1000px at 70% -20%, #16263f 0%, var(--t-bg-1) 55%, var(--t-bg-0) 100%);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.tablet {
  height: 100vh; width: 100vw;
  display: grid;
  grid-template-rows: auto 1.4fr auto auto auto;
  gap: clamp(8px, 1.4vh, 22px);
  padding: clamp(12px, 2vh, 30px);
  transition: transform 2.5s ease, filter 1s ease, background 1s ease;
}

/* ---------- Kopfzeile ---------- */
.t-head { display: flex; align-items: center; justify-content: space-between; }
.t-head .t-datetime .t-time { font-size: clamp(34px, 6vw, 84px); font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; }
.t-head .t-datetime .t-date { font-size: clamp(14px, 1.8vw, 26px); color: var(--t-txt-2); }
.t-head .t-info { text-align: right; }
.t-status { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(14px, 1.7vw, 24px); font-weight: 700; }
.t-dot { width: clamp(12px,1.3vw,18px); height: clamp(12px,1.3vw,18px); border-radius: 50%; background: var(--t-txt-2); }
.t-dot.online { background: var(--t-ok); }
.t-dot.offline { background: var(--t-danger); }
.t-last { color: var(--t-txt-2); font-size: clamp(12px,1.4vw,20px); margin-top: 4px; }
.t-mode { color: var(--t-txt-2); font-size: clamp(11px,1.2vw,16px); margin-top: 2px; cursor: pointer; }
.t-exit { display: inline-block; color: var(--t-txt-2); font-size: clamp(11px,1.2vw,16px); margin-top: 4px; text-decoration: none; opacity: .65; }
.t-exit:hover { opacity: 1; color: var(--t-txt); }

/* ---------- Hauptbereich ---------- */
.t-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(10px,2vw,30px); align-items: center; }
.t-temp-block { display: flex; flex-direction: column; justify-content: center; }
.t-wxicon { font-size: clamp(48px, 9vw, 150px); line-height: 1; }
.t-temp { font-size: clamp(90px, 20vw, 340px); font-weight: 800; line-height: .85; letter-spacing: -4px; font-variant-numeric: tabular-nums; }
.t-temp .deg { font-size: .45em; font-weight: 600; color: var(--t-txt-2); vertical-align: super; }
.t-tendency { font-size: clamp(22px, 3.6vw, 56px); font-weight: 800; margin-top: clamp(4px,1vh,16px); }
.t-feels { font-size: clamp(16px, 2.2vw, 34px); color: var(--t-txt-2); margin-top: 4px; }

.t-side { display: grid; grid-template-rows: repeat(4, 1fr); gap: clamp(6px,1.2vh,16px); }
.t-side .row.astro .v { font-size: clamp(16px,2.2vw,34px); }
.t-side .row { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--t-line); padding-bottom: clamp(4px,1vh,12px); }
.t-side .row .k { font-size: clamp(15px,1.9vw,30px); color: var(--t-txt-2); }
.t-side .row .v { font-size: clamp(26px,3.6vw,60px); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Kennzahlen-Reihe ---------- */
.t-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,1.4vw,20px); }
.t-stat { background: var(--t-card); border: 1px solid var(--t-line); border-radius: 16px; padding: clamp(8px,1.4vh,18px) clamp(10px,1.2vw,20px); text-align: center; backdrop-filter: blur(8px); }
.t-stat .lbl { font-size: clamp(12px,1.4vw,22px); color: var(--t-txt-2); text-transform: uppercase; letter-spacing: .5px; }
.t-stat .val { font-size: clamp(26px,3.4vw,58px); font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.t-stat .val .u { font-size: .45em; color: var(--t-txt-2); font-weight: 600; }

/* ---------- Stundenvorschau ---------- */
.t-hourly { display: flex; gap: clamp(6px,1vw,16px); justify-content: space-between; }
.t-hourly .hh { flex: 1; text-align: center; background: var(--t-card); border: 1px solid var(--t-line); border-radius: 14px; padding: clamp(6px,1vh,14px) 4px; }
.t-hourly .hh .time { font-size: clamp(12px,1.4vw,22px); color: var(--t-txt-2); }
.t-hourly .hh .ic { font-size: clamp(20px,2.6vw,40px); }
.t-hourly .hh .tt { font-size: clamp(16px,2vw,32px); font-weight: 700; }
.t-hourly .hh .pp { font-size: clamp(10px,1.2vw,18px); color: var(--t-cold); }

/* ---------- Untere Reihe: Mini-Charts + Status ---------- */
.t-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,1.4vw,20px); align-items: stretch; }
.t-chart { background: var(--t-card); border: 1px solid var(--t-line); border-radius: 14px; padding: 8px 10px; position: relative; }
.t-chart .ct { font-size: clamp(11px,1.3vw,18px); color: var(--t-txt-2); }
.t-chart .cw { position: relative; height: clamp(70px, 12vh, 150px); }

.t-warn-ticker {
  grid-column: 1 / -1;
  min-height: clamp(26px,4vh,52px);
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(15px,2vw,30px); font-weight: 700;
  border-radius: 14px; padding: clamp(6px,1vh,14px) clamp(12px,1.5vw,22px);
  background: var(--t-card); border: 1px solid var(--t-line);
}
.t-warn-ticker.danger { background: rgba(248,114,114,.16); border-color: var(--t-danger); }
.t-warn-ticker.warn   { background: rgba(251,189,35,.14); border-color: var(--t-warn); }
.t-warn-ticker.ok     { color: var(--t-txt-2); font-weight: 600; }

/* ============================================================
   Modi
   ============================================================ */

/* Nachtmodus – stark gedimmt, burn-in-schonend */
body.mode-night .tablet { filter: brightness(0.42) saturate(0.85); }
body.mode-night { background: #02060c; }

/* Regenmodus – Akzent auf Regen */
body.mode-rain { background: radial-gradient(1600px 1000px at 70% -20%, #15314a 0%, #091522 60%, var(--t-bg-0) 100%); }
body.mode-rain .t-stat.rain { background: rgba(78,161,255,.18); border-color: rgba(78,161,255,.5); transform: scale(1.04); }

/* Windmodus – Akzent auf Wind */
body.mode-wind { background: radial-gradient(1600px 1000px at 70% -20%, #1d3a44 0%, #0a1620 60%, var(--t-bg-0) 100%); }
body.mode-wind .t-stat.wind, body.mode-wind .t-stat.gust { background: rgba(124,198,255,.16); border-color: rgba(124,198,255,.5); transform: scale(1.04); }

/* Minimalmodus – nur Temperatur, Tendenz, Uhr */
body.mode-minimal .t-side,
body.mode-minimal .t-stats,
body.mode-minimal .t-hourly,
body.mode-minimal .t-bottom { display: none; }
body.mode-minimal .tablet { grid-template-rows: auto 1fr; }
body.mode-minimal .t-temp { font-size: clamp(120px, 28vw, 460px); }

.t-moon { color: var(--t-txt-2); font-size: clamp(11px,1.3vw,18px); margin-top: 2px; }

/* Hell-Modus – für helle Räume tagsüber (manuell wählbar) */
body.mode-light {
  --t-txt:#14233a;
  --t-txt-2:#52647e;
  --t-line:rgba(40,70,110,0.18);
  --t-card:rgba(255,255,255,0.72);
  background: radial-gradient(1600px 1000px at 70% -20%, #d6e4f5 0%, #e9f0f8 55%, #dce6f1 100%);
}
body.mode-light .t-warn-ticker.ok { color: var(--t-txt-2); }

/* Hochformat */
@media (orientation: portrait) {
  .t-main { grid-template-columns: 1fr; }
  .t-side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .t-side .row { flex-direction: column; align-items: center; text-align: center; }
  .t-stats { grid-template-columns: repeat(2, 1fr); }
  .tablet { grid-template-rows: auto auto auto auto auto; }
}