/* === Detailseite: Tagesstatistik je Wetterstation === */
.detail-page {
  width: min(100%, 1024px);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.detail-header-card,
.detail-summary-card,
.detail-panel,
.detail-empty {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 68, 102, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}

.detail-header-card {
  min-height: 68px;
  padding: 10px 18px 10px 136px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.detail-kicker {
  color: #607080;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-header-card h1 {
  margin: 2px 0 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.detail-updated {
  min-width: 230px;
  text-align: right;
  color: #607080;
  font-size: 0.8rem;
}

.detail-updated span,
.detail-label {
  display: block;
  color: #607080;
  font-size: 0.8rem;
  font-weight: 700;
}

.detail-updated strong {
  display: block;
  color: #111;
  font-size: 0.95rem;
  font-weight: 800;
  margin-top: 2px;
}

.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.detail-summary-card {
  min-height: 118px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.detail-icon {
  font-size: 1.55rem;
  line-height: 1;
}

.detail-value {
  color: #05080c;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
}

.detail-section-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 10px;
}

.detail-panel {
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-panel-title {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 68, 102, 0.12);
  color: #0d2633;
  font-size: 1.05rem;
  font-weight: 900;
}

.detail-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row-label {
  margin-bottom: 6px;
  color: #607080;
  font-size: 0.86rem;
  font-weight: 800;
}

.detail-row-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.detail-row-values span {
  padding: 9px 10px;
  border-radius: 12px;
  background: #eef6f9;
  color: #06131a;
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.detail-row-values span:first-child::before {
  content: "min ";
  color: #607080;
  font-size: 0.7rem;
  font-weight: 800;
}

.detail-row-values span:last-child::before {
  content: "max ";
  color: #607080;
  font-size: 0.7rem;
  font-weight: 800;
}

.detail-empty {
  margin: auto;
  padding: 28px;
  text-align: center;
}

.detail-empty h1 {
  margin: 0 0 8px;
}

/* Alte Detail-Karten bleiben als Fallback erhalten, falls noch irgendwo verwendet. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.4rem;
}

.cards.tight {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  flex: 1;
}

.container {
  padding: 0.5rem 0.8rem;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 1024px;
  margin: 0 auto;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.card {
  background: white;
  padding: 0.6rem;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.card-title {
  font-size: 0.75rem;
  color: #777;
  margin-bottom: 0.3rem;
  text-align: center;
}

.card-value {
  font-size: 1.2rem;
  font-weight: bold;
}

.section-title {
  font-size: 0.95rem;
  margin: 0.6rem 0 0.3rem;
  font-weight: bold;
  color: #444;
}

.timestamp {
  font-size: 0.9rem;
  color: #666;
}

html.dark .detail-header-card,
html.dark .detail-summary-card,
html.dark .detail-panel,
html.dark .detail-empty {
  background: rgba(36, 38, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html.dark .detail-header-card h1,
html.dark .detail-updated strong,
html.dark .detail-value,
html.dark .detail-panel-title {
  color: #fff;
}

html.dark .detail-kicker,
html.dark .detail-updated,
html.dark .detail-updated span,
html.dark .detail-label,
html.dark .detail-row-label {
  color: #aab4c0;
}

html.dark .detail-row-values span {
  background: #171a1f;
  color: #fff;
}

html.kitty .detail-header-card,
html.kitty .detail-summary-card,
html.kitty .detail-panel,
html.kitty .detail-empty {
  background: rgba(255, 240, 245, 0.95);
  border-color: #ffcce5;
}

html.kitty .detail-header-card h1,
html.kitty .detail-value,
html.kitty .detail-panel-title {
  color: #cc0066;
}

html.kitty .detail-row-values span {
  background: #ffe6f0;
  color: #99004d;
}

@media (max-width: 900px) {
  .detail-header-card {
    padding-left: 126px;
  }

  .detail-value {
    font-size: 1.35rem;
  }

  .detail-section-grid {
    grid-template-columns: 1fr 1fr 1.2fr;
  }
}

@media (max-width: 720px) {
  body {
    overflow: auto;
  }

  .detail-page {
    height: auto;
    min-height: calc(var(--vh, 1vh) * 100 - 50px);
    overflow: visible;
  }

  .detail-header-card {
    padding-left: 14px;
    margin-top: 46px;
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-updated {
    min-width: 0;
    text-align: left;
  }

  .detail-summary-grid,
  .detail-section-grid {
    grid-template-columns: 1fr;
  }
}

/* Internationales Wetter */
body.international-weather-page { overflow-y: auto; background: radial-gradient(circle at 82% 5%, #d9f2ef 0, transparent 31%), #eef6f9; }
.international-page { display: block; height: auto; min-height: calc(100vh - 50px); max-width: 1500px; margin: auto; padding: 26px 28px 36px; }
.international-hero { padding:10px 15px; border:1px solid rgba(0,68,102,.09); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(237,247,250,.94)); box-shadow:0 5px 17px rgba(18,70,89,.08); }
.international-search { position:relative; display:flex; align-items:center; gap:10px; max-width:760px; }.international-search label { flex:0 0 auto; color:#607983; font-size:.72rem; font-weight:850; text-transform:uppercase; }.international-search>div:first-of-type { display:flex; flex:1; min-width:0; }.international-search input { flex:1; min-width:0; height:40px; padding:0 12px; border:1px solid #b8ced7; border-right:0; border-radius:10px 0 0 10px; outline:0; background:#fff; color:#173d4b; font:inherit; }.international-search input:focus { border-color:#1681a3; box-shadow:0 0 0 3px rgba(22,129,163,.1); }.international-search button { min-height:40px; border:0; border-radius:0 10px 10px 0; padding:0 18px; background:#004466; color:#fff; font-weight:800; cursor:pointer; }.international-search button:hover { background:#006699; }
.location-suggestions { position:absolute; z-index:8; top:72px; left:0; right:0; overflow:hidden; border-radius:13px; background:#fff; box-shadow:0 16px 35px rgba(7,44,57,.25); }.location-suggestions a { display:flex; justify-content:space-between; gap:10px; padding:11px 14px; color:#153f4c; text-decoration:none; border-bottom:1px solid #e5eff2; }.location-suggestions a:hover { background:#eff8f7; }.location-suggestions span { color:#72878e; font-size:.75rem; }
.international-message { margin:12px 0 0; padding:9px 13px; border-radius:10px; background:#dcfce7; color:#166534; }.international-message.is-error { background:#fee2e2; color:#991b1b; }
.favorite-strip { display:flex; align-items:center; gap:17px; margin:17px 0; }.favorite-heading { display:flex; flex-direction:column; color:#254f5c; font-weight:900; white-space:nowrap; }.favorite-heading small { color:#82969d; }.favorite-list { display:flex; gap:8px; overflow-x:auto; padding:3px; }.favorite-chip { display:flex; align-items:center; flex:0 0 auto; overflow:hidden; border:1px solid rgba(23,77,92,.12); border-radius:12px; background:rgba(255,255,255,.84); }.favorite-chip a { padding:7px 8px 7px 12px; color:#214b58; text-decoration:none; }.favorite-chip a strong,.favorite-chip a span { display:block; }.favorite-chip a span { color:#829399; font-size:.65rem; }.favorite-chip form { padding-right:5px; }.favorite-chip button { border:0; border-radius:50%; background:transparent; color:#87989e; font-size:1.2rem; cursor:pointer; }.favorite-chip button:hover { color:#dc2626; background:#fee2e2; }.favorite-empty { margin:0; color:#789099; font-size:.8rem; }
.international-location { display:flex; align-items:center; justify-content:space-between; margin:8px 0 13px; }.international-location h2 { margin:1px 0; color:#153d4a; font-size:1.75rem; }.international-location div>span,.international-location small { color:#748991; }.favorite-add,.favorite-saved { padding:9px 14px; border-radius:12px; font-weight:900; }.favorite-add { border:1px solid #b8d128; background:#f6ffcf; color:#526400; cursor:pointer; }.favorite-add span { font-size:1.25rem; }.favorite-saved { color:#657800; background:#eff7c5; }
.international-days { display:grid; grid-template-columns:repeat(10,minmax(120px,1fr)); gap:9px; }.international-day { min-width:0; padding:14px 12px; border:1px solid rgba(0,68,102,.09); border-radius:16px; background:rgba(255,255,255,.89); box-shadow:0 5px 17px rgba(18,70,89,.07); }.international-day.is-today { border-color:#9db520; background:linear-gradient(155deg,#fbffe5,#fff); }.international-day header { display:flex; justify-content:space-between; align-items:start; }.international-day header strong,.international-day header span { display:block; }.international-day header strong { color:#153e4b; font-size:.78rem; }.international-day header div>span { margin-top:2px; color:#819299; font-size:.68rem; }.international-icon { font-size:1.65rem; }.international-description { min-height:30px; margin:11px 0 5px; color:#657b83; font-size:.68rem; }.international-temp { display:flex; align-items:baseline; gap:7px; margin-bottom:10px; }.international-temp strong { color:#d34736; font-size:1.45rem; }.international-temp span { color:#1681a3; font-weight:800; }.international-day dl { margin:0; }.international-day dl div { padding:6px 0; border-top:1px solid #e8eff1; }.international-day dt { color:#8a9a9f; font-size:.57rem; font-weight:900; text-transform:uppercase; }.international-day dd { margin:2px 0 0; color:#294d59; font-size:.7rem; font-weight:800; }.international-day dd small { display:block; color:#83969c; font-weight:500; }.international-source { color:#82969d; font-size:.68rem; text-align:right; }.international-welcome { display:grid; place-items:center; min-height:320px; color:#607982; text-align:center; }.international-welcome span { font-size:4rem; }.international-welcome h2 { margin:10px 0 0; color:#214d5b; }.international-welcome p { margin:5px; }
html.dark body.international-weather-page { background:#171d20; }.dark .international-hero { background:linear-gradient(145deg,#242a2d,#1d2427); border-color:rgba(255,255,255,.08); }.dark .international-search label { color:#aab8be; }.dark .international-search input { background:#171b1d; border-color:#53636a; color:#fff; }.dark .international-day,.dark .favorite-chip { background:#242a2d; border-color:rgba(255,255,255,.09); }.dark .international-day.is-today { background:linear-gradient(155deg,#303521,#242a2d); border-color:#7d901e; }.dark .international-location h2,.dark .international-day header strong,.dark .international-day dd,.dark .favorite-heading,.dark .favorite-chip a { color:#f2f6f7; }.dark .international-day dl div { border-color:rgba(255,255,255,.08); }
@media(max-width:1100px){.international-days{grid-template-columns:repeat(5,1fr)}}
@media(max-width:720px){.international-page{padding:12px 10px 28px}.international-hero{padding:8px 10px}.international-search{align-items:stretch;flex-direction:column;gap:5px}.favorite-strip{align-items:flex-start;flex-direction:column;gap:7px}.international-location{align-items:flex-start}.international-days{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.international-day{flex:0 0 145px;scroll-snap-align:start}.international-search button{padding:0 12px}}

.international-day { color:inherit; text-decoration:none; transition:transform .15s ease,box-shadow .15s ease; }
.international-day:hover { transform:translateY(-2px); box-shadow:0 9px 22px rgba(18,70,89,.14); }
.international-back { display:inline-block; margin-bottom:10px; color:#326575; font-size:.78rem; font-weight:800; text-decoration:none; }
.international-detail-head { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px; padding:17px 20px; border:1px solid rgba(0,68,102,.09); border-radius:16px; background:rgba(255,255,255,.92); box-shadow:0 5px 17px rgba(18,70,89,.08); }
.international-detail-head h1 { margin:2px 0; color:#153d4a; }.international-detail-head p,.international-detail-head div>span { margin:0;color:#748991;font-size:.75rem; }.international-detail-icon { font-size:3rem; }
.international-detail-summary { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:2px 9px; min-width:110px; }.international-detail-summary strong { color:#d34736;font-size:2rem; }.international-detail-summary>span { color:#1681a3!important;font-size:1.1rem!important;font-weight:800; }.international-detail-summary small { grid-column:1/-1;color:#657b83; }
.international-detail-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:10px 0; }.international-detail-facts article { padding:10px 13px;border:1px solid rgba(0,68,102,.09);border-radius:12px;background:rgba(255,255,255,.88); }.international-detail-facts span,.international-detail-facts strong { display:block; }.international-detail-facts span { color:#829399;font-size:.64rem;text-transform:uppercase;font-weight:800; }.international-detail-facts strong { margin-top:3px;color:#214b58; }
.international-hourly-wrap { padding:14px;border:1px solid rgba(0,68,102,.09);border-radius:16px;background:rgba(255,255,255,.65); }.international-hourly-heading { display:flex;justify-content:space-between;margin-bottom:10px;color:#214b58; }.international-hourly-heading span { color:#829399;font-size:.7rem; }
.international-hourly { display:grid;grid-template-columns:repeat(24,minmax(105px,1fr));gap:7px;overflow-x:auto;padding-bottom:4px; }.international-hour { padding:10px;border-radius:12px;background:#fff;box-shadow:0 3px 10px rgba(18,70,89,.06); }.international-hour time,.international-hour>span,.international-hour>strong,.international-hour>small { display:block;text-align:center; }.international-hour time { color:#315c69;font-weight:900; }.international-hour-icon { margin:5px 0;font-size:1.35rem; }.international-hour>strong { color:#d34736;font-size:1.2rem; }.international-hour>small { color:#7c9097;font-size:.6rem; }.international-hour dl { margin:8px 0 0; }.international-hour dl div { padding:4px 0;border-top:1px solid #edf2f3; }.international-hour dt { color:#91a0a5;font-size:.52rem;text-transform:uppercase;font-weight:800; }.international-hour dd { margin:1px 0 0;color:#365864;font-size:.61rem;font-weight:700; }
html.dark .international-detail-head,html.dark .international-detail-facts article,html.dark .international-hourly-wrap { background:#242a2d;border-color:rgba(255,255,255,.09); } html.dark .international-hour { background:#1b2023; } html.dark .international-detail-head h1,html.dark .international-detail-facts strong,html.dark .international-hourly-heading,html.dark .international-hour time,html.dark .international-hour dd { color:#f2f6f7; } html.dark .international-hour dl div { border-color:rgba(255,255,255,.08); }
@media(max-width:720px){.international-detail-head{grid-template-columns:1fr auto;gap:8px}.international-detail-icon{font-size:2rem}.international-detail-summary{grid-column:1/-1}.international-detail-facts{grid-template-columns:1fr 1fr}.international-hourly-heading{align-items:flex-start;flex-direction:column;gap:2px}}

/* Kachelmann-Mehrtageprognose */
body.kachelmann-forecast-page {
  overflow-x: hidden;
  overflow-y: auto;
}
.kachelmann-detail-page {
  display: block;
  width: min(100%, 1280px);
  height: auto;
  min-height: calc(var(--vh, 1vh) * 100 - 50px);
  margin: 0 auto;
  padding: 10px 14px 30px;
  overflow: visible;
}
.kachelmann-detail-header { margin-bottom: 14px; }
.kachelmann-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.kachelmann-day-card {
  padding: 16px;
  border: 1px solid rgba(0, 68, 102, .09);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,247,250,.94));
  box-shadow: 0 7px 22px rgba(18,70,89,.09);
}
.kachelmann-day-card header,
.kachelmann-temperature,
.kachelmann-day-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kachelmann-day-card header strong { display: block; color: #173d4b; font-size: 1rem; }
.kachelmann-day-card header span:not(.kachelmann-weather-icon) { color: #6b818a; font-size: .76rem; }
.kachelmann-weather-icon { font-size: 2rem; line-height: 1; }
.kachelmann-temperature { margin: 16px 0; }
.kachelmann-temperature span { color: #2472ad; font-size: 1.25rem; font-weight: 800; }
.kachelmann-temperature strong { color: #d35f12; font-size: 1.8rem; }
.kachelmann-day-card dl { display: grid; gap: 7px; margin: 0; }
.kachelmann-day-card dl div { padding-top: 7px; border-top: 1px solid rgba(38,87,104,.10); }
.kachelmann-day-card dt { color: #6b818a; font-size: .74rem; }
.kachelmann-day-card dd { margin: 0; color: #173d4b; font-size: .82rem; font-weight: 800; }
.kachelmann-day-card p { margin: 12px 0 0; color: #607983; font-size: .75rem; }
.kachelmann-source-note { color: #6b818a; font-size: .75rem; text-align: center; }
.kachelmann-source-note a { color:#176f91; font-weight:800; }
.forecast-location-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:10px 15px; border:1px solid rgba(0,68,102,.09); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(237,247,250,.94)); box-shadow:0 5px 17px rgba(18,70,89,.08); }.forecast-location-bar form,.forecast-location-bar label { display:flex; align-items:center; gap:10px; }.forecast-location-bar label>span { color:#607983; font-size:.72rem; font-weight:850; text-transform:uppercase; }.forecast-location-bar select { min-width:280px; height:40px; padding:0 38px 0 12px; border:1px solid #b8ced7; border-radius:10px; background:#fff; color:#173d4b; font:inherit; font-weight:800; cursor:pointer; }.forecast-location-bar>span { color:#6b818a; font-size:.72rem; }
html.dark .kachelmann-day-card { background: linear-gradient(145deg, #242a2d, #1d2427); border-color: rgba(255,255,255,.08); }
html.dark .forecast-location-bar { background:linear-gradient(145deg,#242a2d,#1d2427); border-color:rgba(255,255,255,.08); }.dark .forecast-location-bar select { background:#171b1d; border-color:#53636a; color:#fff; }.dark .forecast-location-bar label>span,.dark .forecast-location-bar>span { color:#aab8be; }
html.dark .kachelmann-day-card header strong,
html.dark .kachelmann-day-card dd { color: #f4f8fa; }

@media (max-width: 720px) {
  .kachelmann-detail-page { padding-top: 54px; }
  .forecast-location-bar,.forecast-location-bar form,.forecast-location-bar label { align-items:stretch; flex-direction:column; }.forecast-location-bar select { width:100%; min-width:0; }.forecast-location-bar>span { line-height:1.4; }
  .kachelmann-days { grid-template-columns: 1fr; }
}

/* Kompakte Kioskansicht für den 1024×600-Bildschirm der Wetterstation. */
@media (min-width: 721px) and (max-width: 1100px) and (max-height: 700px) {
  .kachelmann-detail-page {
    padding: 6px 10px 8px;
    min-height: 0;
  }
  .kachelmann-detail-header {
    min-height: 52px;
    margin-bottom: 7px;
    padding: 6px 14px 6px 136px;
    border-radius: 13px;
  }
  .kachelmann-detail-header h1 { font-size: 1.25rem; }
  .kachelmann-detail-header .detail-kicker { font-size: .68rem; }
  .kachelmann-detail-header .forecast-detail-meta { font-size: .68rem; }
  .forecast-location-bar { min-height:38px; margin-bottom:7px; padding:4px 9px; }.forecast-location-bar select { min-width:235px; height:30px; }.forecast-location-bar>span { max-width:40%; text-align:right; }
  .kachelmann-days {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }
  .kachelmann-day-card {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 13px;
  }
  .kachelmann-day-card header strong { font-size: .84rem; }
  .kachelmann-day-card header span:not(.kachelmann-weather-icon) { font-size: .64rem; }
  .kachelmann-weather-icon { font-size: 1.45rem; }
  .kachelmann-temperature { margin: 7px 0 8px; }
  .kachelmann-temperature span { font-size: 1rem; }
  .kachelmann-temperature strong { font-size: 1.35rem; }
  .kachelmann-day-card dl { gap: 2px; }
  .kachelmann-day-card dl div { padding-top: 4px; }
  .kachelmann-day-card dt { font-size: .63rem; }
  .kachelmann-day-card dd { font-size: .7rem; }
  .kachelmann-day-card p { margin: 5px 0 0; font-size: .62rem; }
  .kachelmann-source-note { margin: 5px 0 0; font-size: .62rem; }
}

/* Österreichweite Tages-Hitliste */
.hitlist-page {
  width: min(100%, 1280px);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.hitlist-header,
.hitlist-table-card,
.hitlist-notice {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 68, 102, 0.09);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.hitlist-header {
  min-height: 68px;
  padding: 9px 18px 9px 136px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hitlist-header h1 { margin: 2px 0 0; font-size: 1.45rem; }
.hitlist-date-form { display: flex; align-items: center; gap: 8px; color: #607080; font-size: 0.78rem; font-weight: 700; }
.hitlist-live-time { color: #607080; font-size: 0.78rem; font-weight: 700; }
.hitlist-date-navigation { position: relative; display: flex; align-items: center; gap: 7px; }
.hitlist-day-arrow,
.hitlist-calendar-toggle {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
  border: 1px solid rgba(0, 68, 102, 0.18); border-radius: 9px; background: #fff;
  color: #173042; font-weight: 800; text-decoration: none;
}
.hitlist-day-arrow { width: 34px; font-size: 1rem; }
.hitlist-day-arrow.is-disabled { opacity: 0.28; pointer-events: none; }
.hitlist-calendar-toggle { min-width: 132px; padding: 6px 10px; cursor: pointer; }
.hitlist-calendar-wrap { position: relative; }
.hitlist-calendar {
  position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; width: 286px; padding: 12px;
  border: 1px solid rgba(0, 68, 102, 0.16); border-radius: 12px; background: #fff;
  box-shadow: 0 12px 30px rgba(15, 45, 60, 0.2);
}
.hitlist-calendar-selects { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 10px; }
.hitlist-calendar-selects label { color: #607080; font-size: 0.65rem; font-weight: 800; }
.hitlist-calendar-selects select { width: 100%; margin-top: 3px; padding: 6px; border: 1px solid rgba(0,68,102,.18); border-radius: 7px; background: #fff; }
.hitlist-calendar-weekdays,
.hitlist-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.hitlist-calendar-weekdays { margin-bottom: 3px; color: #607080; font-size: 0.65rem; font-weight: 800; }
.hitlist-calendar-days a,
.hitlist-calendar-days span { display: grid; place-items: center; min-height: 30px; border-radius: 7px; font-size: 0.75rem; }
.hitlist-calendar-days a { color: #173042; background: rgba(191,215,48,.2); font-weight: 800; text-decoration: none; }
.hitlist-calendar-days a:hover,
.hitlist-calendar-days a.is-selected { color: #fff; background: #075985; }
.hitlist-calendar-days .is-unavailable { color: rgba(96,112,128,.32); }
.hitlist-calendar-today { display: block; margin-top: 9px; color: #075985; font-size: .74rem; font-weight: 800; text-align: center; }
.hitlist-date-form select {
  min-width: 130px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 68, 102, 0.2);
  border-radius: 9px;
  background: #fff;
  color: #173042;
  font-weight: 700;
}

.hitlist-notice {
  padding: 7px 12px;
  color: #8a5b00;
  background: rgba(255, 247, 210, 0.95);
  font-size: 0.76rem;
  font-weight: 700;
}

.hitlist-tabs {
  flex: 0 0 46px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  overflow: hidden;
  border-radius: 12px;
  background: #073642;
}

.hitlist-tabs button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}

.hitlist-tabs button.is-active { background: #bfd730; color: #173042; }
.hitlist-table-card { flex: 0 0 auto; min-height: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; }
.hitlist-table-meta { min-height: 34px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hitlist-table-meta strong { font-size: 1.05rem; }
.hitlist-table-meta span { color: #607080; font-size: 0.72rem; }
.hitlist-table-scroll { flex: 0 0 auto; min-height: 0; overflow-x: auto; overflow-y: visible; }
.hitlist-table { width: 100%; border-collapse: collapse; }
.hitlist-table.compact-data-table th { position: sticky; top: 0; z-index: 1; text-align: left; color: #fff; background: #073642; }
.hitlist-table td { border-bottom-color: rgba(0, 68, 102, 0.1); }
.hitlist-table tbody tr:nth-child(odd) { background: rgba(7, 89, 133, 0.035); }
.hitlist-table tbody tr.is-vienna { background: rgba(191, 215, 48, 0.18); }
.hitlist-table th:first-child,
.hitlist-table td:first-child { width: 42px; text-align: center; }
.hitlist-value { font-weight: 850; white-space: nowrap; }
.hitlist-value-time { margin-left: 7px; color: #607080; font-size: 0.72em; font-weight: 500; }
.hitlist-rain-temperature { margin-left: 14px; color: #607080; font-size: 0.86em; font-weight: 400; }
.hitlist-empty { padding: 28px !important; text-align: center; color: #607080; }

html.dark .hitlist-header,
html.dark .hitlist-table-card {
  background: rgba(31, 34, 39, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark .hitlist-header h1,
html.dark .hitlist-table-meta strong,
html.dark .hitlist-table td { color: #fff; }
html.dark .hitlist-date-form select { background: #20252b; color: #fff; border-color: rgba(255,255,255,0.15); }
html.dark .hitlist-day-arrow,
html.dark .hitlist-calendar-toggle,
html.dark .hitlist-calendar,
html.dark .hitlist-calendar-selects select { background: #20252b; color: #fff; border-color: rgba(255,255,255,.15); }
html.dark .hitlist-calendar-days a { color: #fff; background: rgba(191,215,48,.16); }
html.dark .hitlist-calendar-days a:hover,
html.dark .hitlist-calendar-days a.is-selected { background: #0e7490; }
html.dark .hitlist-table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.035); }
html.dark .hitlist-table tbody tr.is-vienna { background: rgba(191, 215, 48, 0.12); }
html.dark .hitlist-rain-temperature { color: rgba(255,255,255,.68); }
html.dark .hitlist-value-time { color: rgba(255,255,255,.68); }

.capital-weather-table th:first-child,
.capital-weather-table td:first-child { width: 92px; text-align: left; }
.capital-condition span { display: block; font-size: 1.45rem; }
.capital-condition small,
.capital-station-name { display: block; color: #607080; font-size: .68rem; white-space: nowrap; }
.capital-weather-note { margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.85); color: #526d78; font-size: .72rem; }
html.dark .capital-weather-note { background: rgba(31,34,39,.92); color: #b9cbd1; }

@media (max-width: 720px) {
  .hitlist-page { height: auto; min-height: calc(100vh - 50px); overflow: visible; padding-top: 54px; }
  .hitlist-header { padding-left: 14px; align-items: flex-start; flex-direction: column; }
  .hitlist-tabs { grid-template-columns: 1fr 1fr; flex-basis: 88px; }
  .hitlist-table-scroll { overflow-x: auto; }
  .hitlist-table { min-width: 690px; }
}

/* === Vollflächiger GeoSphere-Tagesverlauf === */
.forecast-day-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.forecast-day-link:hover {
  color: inherit;
}

.forecast-detail-page {
  width: min(100%, 1280px);
  height: calc(var(--vh, 1vh) * 100 - 50px);
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

.forecast-detail-header,
.forecast-chart,
.forecast-detail-summary article {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 68, 102, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.forecast-detail-header {
  min-height: 64px;
  padding: 9px 18px 9px 136px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.forecast-detail-header h1 {
  margin: 2px 0 0;
  font-size: 1.45rem;
}

.forecast-detail-meta {
  text-align: right;
  font-size: 0.78rem;
  color: #607080;
}

.forecast-detail-meta span,
.forecast-detail-meta strong { display: block; }
.forecast-detail-meta strong { margin-top: 2px; color: #17212b; }

.forecast-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.forecast-weather-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.forecast-detail-summary article {
  padding: 8px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.forecast-detail-summary span {
  color: #607080;
  font-size: 0.75rem;
  font-weight: 700;
}

.forecast-detail-summary strong {
  white-space: nowrap;
  font-size: 1.05rem;
}

.forecast-chart {
  min-height: 0;
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(62, 114, 133, 0.12);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,248,250,.94));
  box-shadow: 0 12px 32px rgba(23, 67, 83, 0.10);
}

.forecast-chart-large { flex: 1.05; }

.forecast-chart-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.forecast-combined-grid {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.forecast-chart-heading {
  min-height: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.forecast-chart-heading strong { color: #183d4b; font-size: 0.92rem; letter-spacing: .01em; }
.forecast-chart-heading span { color: #6d828b; font-size: 0.7rem; }
.forecast-chart-heading i { display: inline-block; width: 16px; margin: 0 4px; border-top: 2px solid; vertical-align: middle; }
.legend-observed { border-color: #dc2626 !important; }
.legend-forecast { border-color: #f87171 !important; border-top-style: dashed !important; }

.forecast-chart-body {
  flex: 1;
  min-height: 0;
  position: relative;
}

.day-chart-svg {
  width: 100%;
  height: 100%;
  min-height: 130px;
  overflow: visible;
}

.chart-plot-bg { fill: rgba(231, 243, 247, .42); }
.chart-grid { stroke: rgba(38, 87, 104, 0.15); stroke-width: 1; stroke-dasharray: 3 7; }
.chart-axis { fill: #6b7f88; font-size: 11px; font-weight: 600; }
.chart-now { stroke: #e11d48; stroke-width: 2; stroke-dasharray: 3 5; }
.chart-now-label { fill: #be123c; font-size: 11px; font-weight: 800; }
.line-observed,
.line-observed-thin,
.line-forecast,
.line-forecast-thin,
.cloud-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.line-observed { stroke: #0891b2; stroke-width: 3.5; filter: drop-shadow(0 2px 2px rgba(8,145,178,.18)); }
.line-observed-thin { stroke: #0891b2; stroke-width: 1.8; opacity: 0.72; }
.line-forecast { stroke: #f59e0b; stroke-width: 3.5; stroke-dasharray: 9 7; filter: drop-shadow(0 2px 2px rgba(245,158,11,.14)); }
.line-forecast-thin { stroke: #f59e0b; stroke-width: 1.8; stroke-dasharray: 7 6; opacity: 0.78; }
.area-observed { fill: url(#observed-area); pointer-events: none; }
.area-forecast { fill: url(#forecast-area); pointer-events: none; }
.line-observed-point, .line-observed-thin-point { fill: #fff; stroke: #0891b2; stroke-width: 2.5; }
.line-forecast-point, .line-forecast-thin-point { fill: #fff; stroke: #f59e0b; stroke-width: 2.5; }
#weather-chart .line-observed { stroke: #dc2626; filter: drop-shadow(0 2px 2px rgba(220,38,38,.18)); }
#weather-chart .line-forecast { stroke: #f87171; filter: drop-shadow(0 2px 2px rgba(248,113,113,.16)); }
#weather-chart .line-observed-point { stroke: #dc2626; }
#weather-chart .line-forecast-point { stroke: #f87171; }
.line-observed-point, .line-observed-thin-point, .line-forecast-point, .line-forecast-thin-point,
.chart-data-point { opacity: 0; transition: opacity .15s ease, r .15s ease; }
.chart-data-point.is-key-point { opacity: .55; }
.line-observed-point.is-last-point, .line-observed-thin-point.is-last-point,
.line-forecast-point.is-last-point, .line-forecast-thin-point.is-last-point,
.chart-data-point.is-last-point { opacity: 1; }
.line-observed-point:hover, .line-observed-thin-point:hover, .line-forecast-point:hover,
.line-forecast-thin-point:hover, .chart-data-point:hover { opacity: 1; }
.chart-temperature-area { fill: url(#temperature-area); pointer-events: none; }
.rain-observed { fill: #38bdf8; opacity: 0.58; rx: 3; }
.rain-forecast { fill: #fbbf24; opacity: 0.58; rx: 3; }
.cloud-line { stroke: #94a3b8; stroke-width: 1.8; stroke-dasharray: 3 7; opacity: .8; }
.chart-guide { stroke: rgba(15, 58, 72, .42); stroke-width: 1.5; stroke-dasharray: 4 5; }
.chart-inspector-point { fill: #fff; stroke-width: 3; }
.chart-inspector-point.temperature { stroke: #dc2626; }
.chart-inspector-point.humidity { stroke: #2563eb; }
.chart-inspector-point.rain { stroke: #38bdf8; }
.chart-inspector-point.cloud { stroke: #94a3b8; }
.chart-inspector-point.wind { stroke: #0891b2; }
.chart-inspector-point.gust { stroke: #f59e0b; }
.chart-inspector-point.power { stroke: #f59e0b; }
.chart-inspector-point.energy { stroke: #16a34a; }
.chart-tooltip {
  position: absolute;
  z-index: 3;
  top: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(38, 87, 104, .16);
  border-radius: 11px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(20,59,73,.16);
  color: #536d77;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip strong { color: #183d4b; }
.chart-tooltip .temperature { color: #b91c1c; font-weight: 800; }
.chart-tooltip .humidity { color: #1d4ed8; font-weight: 800; }
.chart-tooltip .rain { color: #0284c7; font-weight: 800; }
.chart-tooltip .cloud { color: #64748b; font-weight: 800; }
.chart-tooltip .wind { color: #087f9b; font-weight: 800; }
.chart-tooltip .gust { color: #c56b00; font-weight: 800; }
.chart-tooltip .power { color: #b45309; font-weight: 800; }
.chart-tooltip .energy { color: #15803d; font-weight: 800; }
.chart-tooltip small { color: #7b8e96; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.chart-tooltip-forecast { top: 8px; max-width: calc(100% - 12px); }

.shelly-chart-grid {
  flex: 1;
  grid-template-columns: 1fr;
}

.shelly-detail-page .forecast-detail-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.legend-temperature { border-color: #dc2626 !important; }
.legend-humidity { border-color: #2563eb !important; }
.legend-power { border-color: #f59e0b !important; }
.legend-energy { border-color: #16a34a !important; }
.chart-axis-temperature { fill: #b91c1c; }
.chart-axis-humidity { fill: #1d4ed8; }
.chart-axis-power { fill: #b45309; }
.chart-axis-energy { fill: #15803d; }
.energy-history-bar { fill: rgba(22, 163, 74, .48); }
.energy-history-bar.is-selected { fill: #16a34a; filter: drop-shadow(0 2px 4px rgba(22, 163, 74, .28)); }
.energy-history-bar.has-detail { fill: #16a34a; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(22, 163, 74, .22)); }
.energy-history-bar.has-detail:hover { fill: #0f8a3d; }
.energy-history-svg .chart-axis.is-selected { fill: #15803d; font-weight: 900; }

.energy-month-select,
.energy-period-link {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #cbdce3;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  color: #173f4e;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}
.energy-period-link { display: inline-flex; align-items: center; }
html.dark .energy-month-select,
html.dark .energy-period-link { background: #242a2d; border-color: rgba(255,255,255,.14); color: #fff; }
html.dark .chart-axis-temperature { fill: #f87171; }
html.dark .chart-axis-humidity { fill: #60a5fa; }

.shelly-chart-empty {
  height: 100%;
  min-height: 130px;
  display: grid;
  place-items: center;
  color: #607080;
  font-size: 0.85rem;
}

html.dark .forecast-detail-header,
html.dark .forecast-chart,
html.dark .forecast-detail-summary article {
  background: rgba(31, 34, 39, 0.96);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}

html.dark .forecast-detail-header h1,
html.dark .forecast-detail-meta strong,
html.dark .forecast-detail-summary strong,
html.dark .forecast-chart-heading strong { color: #fff; }
html.dark .forecast-detail-meta,
html.dark .forecast-detail-summary span,
html.dark .forecast-chart-heading span,
html.dark .chart-axis { color: #aab4c0; fill: #aab4c0; }
html.dark .chart-grid { stroke: rgba(255,255,255,0.13); }
html.dark .chart-plot-bg { fill: rgba(255,255,255,.035); }
html.dark .line-observed-point, html.dark .line-observed-thin-point,
html.dark .line-forecast-point, html.dark .line-forecast-thin-point { fill: #242a2d; }
html.dark .chart-tooltip { background: rgba(31,34,39,.94); border-color: rgba(255,255,255,.12); color: #b8c6cc; }
html.dark .chart-tooltip strong { color: #fff; }
html.dark .chart-inspector-point { fill: #242a2d; }

@media (max-width: 720px) {
  .forecast-detail-page { height: auto; overflow: visible; padding-top: 54px; }
  .forecast-detail-header { padding-left: 14px; align-items: flex-start; flex-direction: column; }
  .forecast-detail-meta { text-align: left; }
  .forecast-detail-summary { grid-template-columns: 1fr 1fr; }
  .shelly-detail-page .forecast-detail-summary { grid-template-columns: 1fr 1fr; }
  .forecast-chart-grid { grid-template-columns: 1fr; }
  .forecast-chart-body { height: 220px; }
}