html,body{margin:0;padding:0;background:#03060b;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.box{width:100vw;height:100vh;background:linear-gradient(180deg,#06121f,#04070d);border-top:3px solid #29b7ff;border-bottom:3px solid #29b7ff;box-sizing:border-box;padding:6px}
.head{height:28px;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;border-bottom:1px solid #1ea7ff}
.head b{font-size:19px;color:#f4fbff;letter-spacing:.5px}
.head span{font-size:12px;color:#72cfff}
.head strong{font-size:14px;color:#00ff66}

.warns{height:104px;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:5px}
.w{border:1px solid #2b5f86;background:#101923;border-radius:6px;text-align:center;padding:5px;box-sizing:border-box;overflow:hidden}
.w span{display:block;font-size:12px;font-weight:900;color:#eaf7ff}
.w b{display:block;font-size:18px;line-height:22px;color:#fff;margin-top:2px}
.w em{display:block;font-style:normal;font-size:13px;line-height:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.w small{display:block;font-size:11px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}

.lvl0{border-color:#1d9b4c;background:linear-gradient(180deg,#0d2a19,#09130d)}
.lvl1{border-color:#ffe600;background:linear-gradient(180deg,#403b08,#151404)}
.lvl2{border-color:#ff961a;background:linear-gradient(180deg,#4a2705,#160d04)}
.lvl3{border-color:#ff3030;background:linear-gradient(180deg,#4b0707,#170303)}
.lvl4{border-color:#bc6cff;background:linear-gradient(180deg,#2f1246,#100617)}
.lvl0 b{color:#4dff84}.lvl1 b{color:#ffe600}.lvl2 b{color:#ffae38}.lvl3 b{color:#ff4b4b}.lvl4 b{color:#d494ff}

.main{display:flex;height:calc(100vh - 150px);gap:6px;margin-top:6px}
.temp{width:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #2b8fc9;border-radius:7px;background:radial-gradient(circle at center,#102337,#07111b)}
.temp span{font-size:70px;font-weight:900;line-height:66px}
.temp em{font-size:28px;font-style:normal;font-weight:900}
.temp small{font-size:14px;color:#8fd1ff;margin-top:2px}
.temp small b{color:#fff}

.tiles{width:76%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.tile{border:1px solid #2b8fc9;border-radius:7px;background:#0b1520;text-align:center;padding:5px;box-sizing:border-box;overflow:hidden}
.tile span{display:block;font-size:13px;color:#9ed7ff;font-weight:900;margin-bottom:2px}
.tile b{font-size:34px;line-height:34px;color:#fff}
.tile small{display:block;font-size:12px;color:#ddd}
.tile i{display:block;font-size:11px;color:#7fcaff;font-style:normal;white-space:nowrap;margin-top:1px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.pair p{margin:0;padding:0}
.gust b,.wind .pair p:nth-child(2) b{color:#ff4b4b}
.rain b{color:#4bbcff}
.water b{color:#64ff75}
.lightning b{color:#c783ff;font-size:42px}

/* =========================================================
   CLEAN FINAL FIX – funktionierende Version nur feinjustieren
   ========================================================= */

/* Kopfzeile "Wetterinfos Lauf / Update" ausblenden */
header,
.topbar,
.header,
.page-header,
.monitor-header,
.info-header,
.titlebar,
.statusbar {
  display: none !important;
}

/* Hauptlayout darf den gewonnenen Platz nutzen */
body,
.monitor,
.app,
.container,
.dashboard,
.wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Warnkacheln oben höher und besser lesbar */
.warnings,
.warning-grid,
.alert-grid,
.dwd-grid,
.danger-grid,
.dwd-warnings {
  min-height: 42vh !important;
  gap: 8px !important;
}

.warn-card,
.warning-card,
.alert-card,
.dwd-card,
.danger-card,
.warning-tile,
.danger-tile {
  min-height: 92px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

/* Schrift in Warnkacheln größer */
.warn-card *,
.warning-card *,
.alert-card *,
.dwd-card *,
.danger-card *,
.warning-tile *,
.danger-tile * {
  font-size: clamp(18px, 2.6vw, 36px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

/* Zeit/kleine Zusatzzeile in Warnkacheln etwas kleiner lassen */
.warn-time,
.warning-time,
.dwd-time,
.alert-time,
.valid-time,
.time-text {
  font-size: clamp(13px, 1.8vw, 24px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

/* Überschrift Temperatur sichtbar machen */
.temperature-box::before,
.temp-card::before,
.temperature-card::before {
  content: "TEMPERATUR";
  display: block;
  color: #ffffff;
  font-size: clamp(16px, 2.2vw, 30px);
  font-weight: 900;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

/* Temperatur groß, Gradzeichen bleibt direkt daneben */
#temperature,
.temperature,
.temperature-value,
.temp-value {
  color: #ffffff !important;
  white-space: nowrap !important;
  font-size: clamp(58px, 7.5vw, 110px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
}

/* Falls °C eigene Einheit ist: direkt daneben setzen */
.temp-unit,
.temperature-unit,
.unit-degree,
.degree-unit {
  display: inline !important;
  vertical-align: super !important;
  font-size: 0.45em !important;
  margin-left: 4px !important;
  color: #ffffff !important;
}

/* Min/Max bewusst klein lassen */
#tempMin,
#tempMax,
.temp-minmax,
.minmax,
.temperature-minmax {
  font-size: clamp(13px, 1.7vw, 22px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* Untere Wetterdaten: Messwerte groß und weiß */
.weather-data,
.weather-values,
.bottom-row,
.bottom-weather,
.metric-grid,
.data-grid,
.values-grid {
  gap: 8px !important;
}

.metric-value,
.weather-value,
.value-main,
.data-main,
.big-value,
.measurement-value,
#rainDay,
#rain24h,
#rainRate,
#wind,
#gust,
#waterLevel,
#lightning,
#lightningInfo,
#lightningDistance {
  color: #ffffff !important;
  font-size: clamp(46px, 6.4vw, 95px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Alle Messwertbereiche unten weiß */
.metric-card *,
.weather-tile *,
.value-card *,
.data-card *,
.bottom-row *,
.bottom-weather * {
  color: #ffffff !important;
}

/* Labels unten weiß, aber nicht größer als Messwerte */
.metric-label,
.weather-label,
.value-title,
.data-title,
.label {
  color: #ffffff !important;
  font-size: clamp(15px, 2vw, 28px) !important;
  font-weight: 900 !important;
}

/* Zusatztexte unten weiß, aber kleiner */
.metric-sub,
.weather-sub,
.value-sub,
.data-sub,
.subline,
.hint {
  color: #ffffff !important;
  font-size: clamp(13px, 1.7vw, 22px) !important;
  font-weight: 800 !important;
}

/* Platz für unten verbessern */
.weather-main,
.main-row,
.values,
.weather-values,
.bottom-row {
  min-height: 0 !important;
}