/* =========================================================
   Wetter Kaisten – Global Styles (Design wie info.html)
   - kompatibel mit bestehendem Markup (header/navbtn usw.)
   - enthält alle bisherigen Funktions-UI-Elemente (Bars, Tables, Charts)
   ========================================================= */

:root{
  --bg: #081425;
  /* Dynamic Sky Theme (0=nacht, 1=tag) */
  --theme: 0;
  --sky-h: 214;
  --sky-s: 55%;
  --sky-l: 10%;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --text: rgba(235,245,255,0.92);
  --muted: rgba(200,215,235,0.70);
  --line: rgba(160,190,230,0.14);
  --accent: rgba(100, 170, 255, 0.90);
  --ok: rgba(120, 210, 255, 0.90);
  --warn: rgba(255, 210, 120, 0.95);
  --bad: rgba(255, 120, 120, 0.92);

  --shadow: 0 14px 40px rgba(0,0,0,0.35);
  --shadow2: 0 10px 28px rgba(0,0,0,0.25);

  --radius: 18px;
  --radius2: 14px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);

  /* Smooth: Hintergrund passt sich Solar/Tageszeit an */
  transition: background 600ms ease;

  background:
    radial-gradient(1200px 600px at 20% -10%,
      hsla(var(--sky-h), var(--sky-s),
           calc(var(--sky-l) + (var(--theme) * 10%)),
           calc(0.18 + (var(--theme) * 0.12))
      ),
      transparent 60%),
    radial-gradient(900px 500px at 90% 20%,
      hsla(var(--sky-h), 60%,
           calc(var(--sky-l) + (var(--theme) * 8%)),
           calc(0.12 + (var(--theme) * 0.10))
      ),
      transparent 55%),
    radial-gradient(1000px 600px at 40% 120%,
      hsla(var(--sky-h), 45%,
           calc(var(--sky-l) + (var(--theme) * 6%)),
           calc(0.08 + (var(--theme) * 0.08))
      ),
      transparent 55%),
    hsl(var(--sky-h), 45%, calc(8% + (var(--theme) * 6%)));

  min-height:100vh;
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; height:auto; }
code{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 2px 6px;
  border-radius: 8px;
}

/* =========================================================
   Layout container
   ========================================================= */
.container,
.pagewrap{
  max-width: 1040px;
  margin: 18px auto 60px;
  padding: 0 16px;
}

/* =========================================================
   Header / Navigation
   (aktuell: .header + .navbtn – bleibt kompatibel)
   später können wir in index.html auf .topbar/.wrap umstellen
   ========================================================= */

.header{
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: left;
  padding: 14px 16px;
  color: var(--text);
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,0.72);
  border-bottom: 1px solid var(--line);
}

/* Titel / Subline im Header (alte Struktur) */
.header h1{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.header h1::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(130,200,255,0.15);
  display:inline-block;
}
.header .sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

/* Navigation */
.nav{
  margin-top: 10px;
  display:flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
}

.navbtn{
  display:inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
  text-decoration:none;
}
.navbtn:hover{
  border-color: var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  text-decoration:none;
}
.navbtn.active{
  border-color: rgba(130,200,255,0.35);
  background: rgba(130,200,255,0.10);
  color: var(--text);
}

/* (Neu-Design Klassen aus info.html – werden bei den neuen Seiten genutzt) */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,0.72);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.brand .dot{
  width: 10px; height:10px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(130,200,255,0.15);
}
.nav a{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav a:hover{
  border-color: var(--line);
  background: rgba(255,255,255,0.04);
  text-decoration:none;
  color: var(--text);
}
.nav a.active{
  border-color: rgba(130,200,255,0.35);
  background: rgba(130,200,255,0.10);
  color: var(--text);
}

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}

/* =========================================================
   Cards / Grid
   ========================================================= */

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
  .header{ text-align:left; }
}

.card{
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 16px;
  position: relative;
}

.card.wide{
  margin-top: 14px;
}

.cardtitle{
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
}

/* optionaler kleiner Icon-Container (falls wir ihn in neuen Seiten verwenden) */
.cardtitle .icon{
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  display:grid;
  place-items:center;
}

/* Big number */
.big{
  font-size: 44px;
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}

.big-heute{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}

/* Key/Value grid */
.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  align-items: baseline;
}
.kv div:nth-child(2n){
  color: var(--text);
  font-weight: 700;
}

/* volle Breite innerhalb kv (z.B. AQI-Bar) */
.kv .kvfull{ grid-column: 1 / -1; }

.subhead{
  margin-top: 6px;
  margin-bottom: 6px;
  font-weight: 900;
  color: var(--text);
}

/* Charts */
.chartwrap{
  width: 100%;
  height: 320px;
}
canvas{ display:block; }

/* =========================================================
   Windrose
   ========================================================= */
.windrosewrap{
  position:absolute;
  right: 14px;
  top: 14px;
  width: 74px;
  height: 74px;
  opacity: 0.9;
}
#windrose{
  width: 74px;
  height: 74px;
  transform-origin: 50% 50%;
  opacity: 0.95;
  filter: brightness(1.7) contrast(1.05) drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* =========================================================
   Bars / Markers (UV, Humidity, AQI)
   - technisch identisch (IDs/Classes bleiben)
   - farblich in Dark UI passend
   ========================================================= */

.uvbar{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
}
#uvfill{
  height:100%;
  width:0%;
  background: rgba(255,255,255,0.18);
}

/* UV-Skala */
.uvbar.uvscale{
  position:relative;
  height: 12px;
  background:
    linear-gradient(90deg,
      #22c55e 0% 20%,
      #facc15 20% 50%,
      #fb923c 50% 65%,
      #ef4444 65% 90%,
      #a855f7 90% 100%
    );
  border: 1px solid rgba(255,255,255,0.12);
}
.uvbar.uvscale #uvfill{
  background: rgba(255,255,255,0.20);
}

.uvmarker,
.hummarker,
.aqmarker{
  position:absolute;
  top:-6px;
  width:0;
  height:24px;
  left:0%;
  transform:translateX(-50%);
  pointer-events:none;
}

.uvmarker:before,
.hummarker:before,
.aqmarker:before{
  content:"";
  position:absolute;
  top:0;
  left:-1px;
  width:2px;
  height:24px;
  background: rgba(255,255,255,0.65);
  border-radius: 2px;
}

.uvmarker:after,
.hummarker:after,
.aqmarker:after{
  content:"";
  position:absolute;
  top:-2px;
  left:-6px;
  width:12px;
  height:12px;
  background: rgba(11,18,32,0.95);
  border: 2px solid rgba(255,255,255,0.65);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.28);
}

/* Humidity comfort bar */
.humbar{
  position:relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 12px;
  background:
    linear-gradient(90deg,
      #fb923c 0% 30%,
      #22c55e 30% 60%,
      #facc15 60% 70%,
      #ef4444 70% 100%
    );
  border: 1px solid rgba(255,255,255,0.12);
}

/* AQI bar */
.aqbar{
  position:relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      #3b82f6 0% 10%,
      #22c55e 10% 20%,
      #facc15 20% 25%,
      #fb923c 25% 50%,
      #ef4444 50% 75%,
      #a855f7 75% 100%
    );
  border: 1px solid rgba(255,255,255,0.12);
  margin: 8px 0 2px;
}

/* =========================================================
   Tables (forecast/rekorde/etc.)
   ========================================================= */

.pagetitle{
  font-size: 18px;
  font-weight: 900;
  margin: 8px 0 14px;
  text-align: left;
  letter-spacing: 0.2px;
  color: var(--text);
}

.tablecard{ padding: 0; }
.tablehead{
  padding: 14px 16px;
  font-weight: 900;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.tablewrap{ overflow:auto; }

table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: left;
  white-space: nowrap;
}

th{
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  background: rgba(0,0,0,0.12);
}

td{
  color: rgba(255,255,255,0.85);
}

td.num,
th.num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td.small,
th.small{
  color: rgba(255,255,255,0.60);
  font-size: 12px;
}

.section{ margin-top: 14px; }

/* =========================================================
   Minor utilities
   ========================================================= */
hr{
  border:0;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

::selection{
  background: rgba(130,200,255,0.25);
}

/* =========================
   Forecast / Trend page
   ========================= */

.forecastgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

@media (max-width: 900px){
  .forecastgrid{ grid-template-columns: 1fr; }
}

.lead{
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 14px;
}

.trendrow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.trendleft{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.iconbubble{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

.trendtitle{
  font-weight: 900;
  letter-spacing: 0.2px;
}

.trendsub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trendright{
  text-align:right;
  flex: 0 0 auto;
}

.trendval{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.05;
}

.trendmeta{
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

/* Trend pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  font-weight: 800;
}

.arrow{
  display:inline-grid;
  place-items:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.10);
}

.up{ color: var(--ok); }
.down{ color: var(--bad); }
.flat{ color: var(--warn); }

.explain{
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

/* Probability bar */
.bar{
  height: 12px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

.fill{
  height:100%;
  width:0%;
  background: rgba(130,200,255,0.35);
}

.probline{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
}

.probline b{
  font-size: 18px;
}

/* Mini table */
.minitable{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
}

.minitable th,
.minitable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.minitable th{
  background: rgba(0,0,0,0.14);
  color: rgba(255,255,255,0.72);
  text-align:left;
  font-weight: 900;
}

.minitable td{
  color: rgba(255,255,255,0.88);
}

.muted{ color: var(--muted); }
.num{ text-align:right; font-variant-numeric: tabular-nums; }

/* Mobile table formatting (JS schreibt m-values) */
.m-topline{ display:none; }
.m-values{ display:none; }

@media (max-width: 640px){
  .minitable thead{ display:none; }
  .m-row{ display:block; padding: 8px 0; }
  .m-row td{ display:block; border-bottom: none; padding: 6px 12px; }
  .m-metric{ font-weight: 900; }
  .m-hint{ display:none; }
  .m-topline{ display:block; color: var(--muted); font-size: 12px; margin-top: 2px; }
  .m-values{ display:block !important; color: rgba(255,255,255,0.88); font-size: 13px; padding-top: 2px; }
}
/* =========================
   Luft & UV page
   ========================= */

.airgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .airgrid{ grid-template-columns: 1fr; }
}

/* AQ/UV subline */
.aqsub{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  min-width: 0;
}
.aqsub b{ color: var(--text); }

.statuspill{
  display:inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

/* Luft/UV Tabelle (dunkel passend) */
.minitable{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
}
.minitable th, .minitable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align:left;
  white-space: nowrap;
}
.minitable th{
  color: rgba(255,255,255,0.72);
  font-weight: 900;
  background: rgba(0,0,0,0.14);
}
.minitable td.num{
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}
.minitable td.muted{ color: var(--muted); font-weight: 650; }

.tiny{ font-size: 12px; color: var(--muted); }

/* Legend */
.legendgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .legendgrid{ grid-template-columns: 1fr; }
}

.legendrow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.swatch{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  flex: 0 0 auto;
}

.legendtext{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.legendtext b{ color: var(--text); }

/* Mobile overflow fixes */
html, body{ overflow-x: hidden; }
.card{ min-width: 0; }
.tablewrap, .chartwrap{ max-width: 100%; }
canvas{ max-width: 100% !important; }

@media (max-width: 520px){
  .aqsub{
    display:grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
    max-width: 100%;
  }
  .aqsub > span:nth-child(2){ display:none; } /* "•" */
  .aqsub span{
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .aqsub #aqStatus,
  .aqsub #uvStatus{
    justify-self:end;
  }

  .minitable{
    width:100%;
    table-layout: fixed;
  }
  .minitable th, .minitable td{
    white-space: normal;
    padding: 8px 10px;
    font-size: 13px;
  }
  .minitable th:first-child,
  .minitable td:first-child{
    width: 38%;
  }
  .minitable td.num,
  .minitable th.num{
    white-space: nowrap;
  }

  /* Rekorde: Mobile – Typ-Spalte schmaler (Max/Min via JS) */
  .recordtable th.typecol,
  .recordtable td.typecol {
    width: 68px;
  }

}
/* =========================
   Rekorde page (wie rekorde Kopie)
   ========================= */

/* Headline sauber umbrechen (Mobile/kleine Breiten) */
.lead{
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px 10px;
  line-height: 1.35;
}
.lead > *{ max-width: 100%; }

/* Range Buttons */
.rangebar{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}
.rangebtn{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  font-weight:800;
  font-size:13px;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
}
.rangebtn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  text-decoration:none;
}
.rangebtn.active{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.20);
  color:#fff;
}

/* Mobile ist jetzt top: KEIN Scrollen */
.tablewrap{
  overflow: visible;
}

/* Grundstil */
.recordtable{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.recordtable th,
.recordtable td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  vertical-align:middle;
  font-variant-numeric: tabular-nums;
}
.recordtable th{
  color:rgba(255,255,255,0.72);
  font-weight:900;
  background:rgba(0,0,0,0.14);
  text-align:left;
  white-space:nowrap;
}

/* Inhalt: keine abgeschnittenen Werte */
.recordtable td.typecol{
  font-weight:900;
  color: var(--muted);
  white-space:nowrap;
}
.recordtable td.valcol,
.recordtable th.valcol{
  text-align:right;
  font-weight:900;
  white-space:nowrap;
}
.recordtable td.timecol,
.recordtable th.timecol{
  text-align:left;
  color: var(--muted);
  white-space:nowrap;
}
.recordtable td.metriccell{
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Defensive: falls irgendwo ellipsis gesetzt ist */
.recordtable td.valcol,
.recordtable td.timecol,
.recordtable td.typecol,
.recordtable td.metriccell{
  overflow: visible;
  text-overflow: unset;
}

/* Desktop: professionelle, stabile Spalten (nichts „verschoben“) */
@media (min-width:521px){
  .recordtable{
    table-layout: fixed;            /* sorgt für saubere, gerade Spalten */
  }

  /* Spaltenbreiten (Header) */
  .recordtable th.metriccol{ width: 48%; }
  .recordtable th.typecol  { width: 16%; }
  .recordtable th.valcol   { width: 16%; }
  .recordtable th.timecol  { width: 20%; }

  /* Gleiche Breiten für Zellen */
  .recordtable td.metriccell{ width: 48%; }
  .recordtable td.typecol   { width: 16%; }
  .recordtable td.valcol    { width: 16%; }
  .recordtable td.timecol   { width: 20%; }

  /* Messwert darf umbrechen, aber keine Überläufe */
  .recordtable td.metriccell{
    overflow: hidden;
  }
}

/* Mobile: bitte nicht mehr anfassen – alles auf einen Blick, ohne Scroll */
@media (max-width:520px){
  .tablewrap{
    overflow-x: hidden;
  }

  .recordtable{
    table-layout: fixed;
  }

  .recordtable th,
  .recordtable td{
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Spaltenverteilung */
  .recordtable th.metriccol{ width: 42%; }
  .recordtable th.typecol  { width: 12%; }
  .recordtable th.valcol   { width: 22%; }
  .recordtable th.timecol  { width: 24%; }

  .recordtable td.metriccell{
    white-space: normal;
    overflow-wrap:anywhere;
  }
  .recordtable td.typecol{
    white-space: nowrap;
  }
  .recordtable td.timecol{
    white-space: normal;
    overflow-wrap:anywhere;
  }
  .recordtable td.valcol{
    white-space: nowrap;
  }

  .recordtable th{
    font-size: 12px;
    opacity: 0.85;
  }
}


/* =========================
   Forecast: Trend-Details Mobile Fix
   ========================= */

@media (max-width: 640px){
  /* Kopfzeile ausblenden */
  .minitable thead{ display:none; }

  /* Zeilen als "Cards" */
  .minitable tbody tr.m-row{
    display:block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  /* Standard-Cells verstecken (wir zeigen nur .m-values) */
  .minitable tbody tr.m-row td.m-now-td,
  .minitable tbody tr.m-row td.m-delta-td,
  .minitable tbody tr.m-row td.m-dir-td,
  .minitable tbody tr.m-row td.m-hint{
    display:none !important;
  }

  /* Metric-Zelle bleibt als Titel */
  .minitable tbody tr.m-row td.m-metric{
    display:block !important;
    font-weight: 900;
    padding: 6px 12px 0;
  }

  /* Unsere kompakte Mobile-Ausgabe */
  .minitable tbody tr.m-row td.m-values{
    display:block !important;
    padding: 6px 12px 10px;
    color: rgba(255,255,255,0.86);
  }

  .m-topline{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    color: rgba(255,255,255,0.92);
    font-weight: 900;
  }

  .m-delta{
    margin-top: 4px;
    color: rgba(255,255,255,0.70);
    font-weight: 800;
  }

  .m-dir{
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
  }
}
/* --- FIX: Tabellen-Header der minitable auch auf Mobile anzeigen --- */
@media (max-width: 700px) {
  table.minitable thead {
    display: table-header-group !important;
  }

  table.minitable th {
    font-size: 12px;
    opacity: 0.75;
    white-space: nowrap;
  }

  table.minitable td {
    white-space: nowrap;
  }
}

/* =========================================================
   Luft & UV – Fixes: Abstand UV-Empfehlung + Mobile Tabellenheader
   ========================================================= */

/* UV Empfehlung: saubere Typo + Zeilenumbrüche */
.advice{
  margin: 0;                 /* wir steuern Abstand über den Block */
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-line;     /* \n wird als Zeilenumbruch angezeigt */
}

/* Block um Empfehlung: Abstand zum Balken + Abstand zu Solar-KV */
.uv-adviceblock{
  margin-top: 14px;          /* Abstand vom UV-Balken */
  margin-bottom: 10px;       /* Abstand zu Solarwerten */
}

/* Mobile: Tabelle darf horizontal scrollen, statt Layout zu zerreissen */
.tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Standard: minitable kann weiterhin "responsive" sein (wenn du das woanders nutzt) */
@media (max-width: 640px){
  .minitable thead{ display:none; }
}

/* ABER: Luft-Tabelle soll Header auch auf Mobile zeigen */
@media (max-width: 640px){
  table.minitable-air thead{
    display: table-header-group !important;
  }
  table.minitable-air th,
  table.minitable-air td{
    white-space: nowrap;
  }
}
/* Forecast Hero: verhindert Überlappung zwischen Bar/Content */
.card.wide .bar{
  margin-bottom: 12px;     /* Abstand nach dem Balken */
}

.card.wide .fill{
  height: 100%;
}

/* Falls irgendwo overflow: hidden auf card liegt und die Bar/Shadow clippt */
.card.wide{
  overflow: visible;
}
/* Forecast: Abstand nach dem Hero-Block, damit nichts "überlappt" */
.forecast-hero{
  margin-bottom: 14px;
}

/* optional: noch etwas mehr Luft zwischen Balken und Text */
.forecast-hero .bar{
  margin: 10px 0 14px;
}


/* === Archiv: Vergleichstabelle Mobile – verhindert Spalten-Overlap === */
@media (max-width: 520px){
  #compareCard .tablewrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #compareCard table.recordtable{
    width: 100%;
    min-width: 820px;   /* WICHTIG: verhindert Zusammenquetschen */
    table-layout: auto;
  }

  #compareCard table.recordtable th,
  #compareCard table.recordtable td{
    white-space: nowrap;
  }
}