/*
 * Regentage-Heatmap und Tooltip (Handy- und PC-Ansicht).
 * Die Karte selbst ist durchsichtig wie die anderen Karten (Farben kommen aus --ink und --muted der Seite).
 * Je mehr Regen, desto kräftiger und dunkler das Blau; trockene Tage sind kaum sichtbar.
 */
.heat-panel {
  --hm-l0: rgba(128, 160, 205, .18);
  --hm-l1: #bcd6fb;
  --hm-l2: #7fb0f5;
  --hm-l3: #3f7be6;
  --hm-l4: #1f47c9;
}
.heat-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 20px; }
.heat-stats div { min-width: 120px; }
.heat-stats dt { margin: 0; font-size: .76rem; color: var(--muted); }
.heat-stats dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.heat-stats dd small { font-size: .8rem; font-weight: 500; color: var(--muted); }

.heat-wrap { overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.hm { --cell: 18px; --gap: 3px; display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; width: max-content; }
.hm-months { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: var(--cell); column-gap: var(--gap); font-size: .72rem; color: var(--muted); height: 14px; }
.hm-months span { white-space: nowrap; overflow: visible; }
.hm-days { grid-row: 2; display: grid; grid-template-rows: repeat(7, var(--cell)); row-gap: var(--gap); font-size: .68rem; color: var(--muted); }
.hm-days span { line-height: var(--cell); }
.hm-grid { grid-row: 2; grid-column: 2; display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column; grid-auto-columns: var(--cell); gap: var(--gap); }
.hm-cell { border-radius: 3px; outline: 0; }
.hm-cell[data-l="0"] { background: var(--hm-l0); }
.hm-cell[data-l="1"] { background: var(--hm-l1); }
.hm-cell[data-l="2"] { background: var(--hm-l2); }
.hm-cell[data-l="3"] { background: var(--hm-l3); }
.hm-cell[data-l="4"] { background: var(--hm-l4); }
.hm-cell[data-l="x"] { background: transparent; box-shadow: inset 0 0 0 1px var(--hm-l0); }
.hm-cell.pad { visibility: hidden; }
.hm-cell:hover, .hm-cell.on { box-shadow: 0 0 0 2px var(--ink); position: relative; z-index: 1; }

.heat-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.heat-source { margin: 0; font-size: .74rem; color: var(--muted); }
.heat-legend { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted); }
.heat-legend i { width: 14px; height: 14px; border-radius: 3px; }
.heat-legend i[data-l="0"] { background: var(--hm-l0); }
.heat-legend i[data-l="1"] { background: var(--hm-l1); }
.heat-legend i[data-l="2"] { background: var(--hm-l2); }
.heat-legend i[data-l="3"] { background: var(--hm-l3); }
.heat-legend i[data-l="4"] { background: var(--hm-l4); }
.heat-note { margin: 10px 0 0; color: var(--muted); }
.heat-panel h2 { margin: 0; font-size: 1.1rem; }
.heat-panel .heat-sub { margin: 4px 0 14px; color: var(--muted); font-size: .85rem; }
.heat-panel .heat-sub:empty, .heat-panel .panel-sub:empty { display: none; }

.tip {
  position: fixed; z-index: 1000; pointer-events: none; padding: 8px 12px; border-radius: 6px; font-size: .82rem; line-height: 1.35;
  color: #fff; background: rgba(8, 14, 26, .94); border: 1px solid rgba(170, 200, 250, .25);
  transform: translate(-50%, -100%); white-space: nowrap;
}
.tip b { display: block; font-weight: 600; }