:root {
  --bg: #0d1b2a;
  --bg2: #13263a;
  --card: #1b3a55;
  --card2: #16304a;
  --text: #e8f1f8;
  --mute: #8fa8bd;
  --accent: #4cc9f0;
  --warn-y: #f6c445;
  --warn-o: #f08c3a;
  --warn-r: #ef476f;
  --line: rgba(255,255,255,.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 calc(12px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  min-height: 100vh;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1100px; margin-inline: auto;
}
a { color: var(--accent); }
header { padding: calc(20px + env(safe-area-inset-top)) 4px 8px; }
h1 { margin: 0; font-size: 1.7rem; }
.sub { color: var(--mute); font-size: .85rem; margin-top: 4px; }
h2 { font-size: 1.1rem; margin: 28px 4px 8px; }
h3 { font-size: .95rem; margin: 8px 0; color: var(--mute); }
section { margin-top: 8px; }

.warnbox { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.warn { padding: 10px 14px; border-radius: 10px; background: var(--card2); border-left: 4px solid var(--warn-y); font-size: .92rem; }
.warn-orange { border-left-color: var(--warn-o); }
.warn-red { border-left-color: var(--warn-r); }
.warn-wind { border-left-color: var(--accent); }
.warn-sea { border-left-color: #48bfe3; }
.warn-day { color: var(--mute); font-size: .85rem; }
.warn-desc { color: var(--mute); font-size: .85rem; margin-top: 4px; }

/* Feste Spaltenzahl statt auto-fit: mit auto-fit blieben auf dem Handy
   einspaltige Kacheln uebrig (220 px passten nicht zweimal nebeneinander),
   und die Seite war nur noch Scrollen. */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.card-now, .card-sun { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  /* Am Rechner reicht der Aktuell-Kachel die halbe Reihe — ueber die
     ganze Breite stand rechts nur Leere. */
  .card-now { grid-column: span 2; }
}
.card { background: var(--card); border-radius: 14px; padding: 14px 16px; }
.card-label { color: var(--mute); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.temp-big { font-size: 3rem; font-weight: 700; line-height: 1.15; }
.card-main { font-size: 1.7rem; font-weight: 600; margin-top: 6px; }
.card-main small { font-size: 1rem; color: var(--mute); font-weight: 400; }
.card-sub { color: var(--mute); font-size: .85rem; margin-top: 4px; }
.wind-name { color: var(--warn-o); }
.dir { display: inline-block; transform: rotate(var(--deg)); font-size: 1.2rem; color: var(--accent); }

.chart-note { color: var(--mute); font-size: .78rem; margin: 2px 4px; }

/* Kurven — nur in der Detailansicht sichtbar, uPlot wird dort nachgeladen */
.chart { background: var(--card2); border-radius: 14px; padding: 10px 6px 4px; margin-top: 8px; }
.chart-small { }
.uplot { font-family: inherit; }
.u-legend { color: var(--mute) !important; font-size: .75rem !important; }

/* Abgelesene Werte gehoeren UEBER den Graphen: darunter verdeckt sie auf dem
   Handy genau der Daumen, mit dem man den Graphen gerade abfaehrt.
   Raster statt Fliesstext — als Fliesstext wuerde sich beim Ziehen mit der
   Wertbreite auch der Umbruch aendern und der Graph unter dem Finger huepfen.
   Eine Zeile je Wert, sobald zwei Spalten nicht mehr ohne Abschneiden passen. */
.chart .uplot { display: flex; flex-direction: column; }
.chart .u-legend {
  order: -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  column-gap: 12px;
  line-height: 1.45;
  margin: 0 2px 6px;
  text-align: left;
}
.chart .u-legend tbody { display: contents; }
.chart .u-legend tr { display: flex; align-items: baseline; gap: 4px; min-width: 0; margin: 0; }
.chart .u-legend th { display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; padding: 1px 0; }
.chart .u-legend th::after { flex: 0 0 auto; }
.chart .u-legend .u-marker { flex: 0 0 auto; align-self: center; }
/* Kuerzen buchstabenweise: als inline-block waere das Label ein Klotz, den der
   Browser nur komplett durch "..." ersetzen kann. */
.chart .u-legend .u-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chart .u-legend .u-value {
  flex: 0 0 auto; padding: 1px 0; white-space: nowrap;
  color: var(--text); font-variant-numeric: tabular-nums;
}

.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.day { background: var(--card); border-radius: 12px; padding: 10px 12px; text-align: center; }
.day-head { font-weight: 600; }
.day-head small { color: var(--mute); font-weight: 400; }
.day-emoji { font-size: 2rem; margin: 6px 0; }
.day-temp { font-size: 1.05rem; }
.day-rain, .day-wind { font-size: .82rem; margin-top: 4px; }
.day-dhmz { font-size: .74rem; color: var(--mute); margin-top: 6px; border-top: 1px solid var(--line); padding-top: 5px; }
.day-n { font-size: .7rem; margin-top: 3px; }
.mute { color: var(--mute); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table td, .table th { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--mute); font-weight: 500; font-size: .8rem; }
.table tr.hl { background: rgba(76, 201, 240, .08); }
.models td:nth-child(n+2), .models th:nth-child(n+2) { text-align: right; }

.jadran summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.jadran-body { background: var(--card2); border-radius: 12px; padding: 12px 16px; font-size: .9rem; line-height: 1.5; }

footer { margin-top: 40px; color: var(--mute); font-size: .78rem; }
.sources { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.src.stale { color: var(--warn-o); }
.attr { line-height: 1.6; }

@media (max-width: 640px) {
  .temp-big { font-size: 2.4rem; }
  h1 { font-size: 1.4rem; }
}

/* Tages-Detail: stündliche Übersicht */
.day-click { cursor: pointer; transition: background .15s, outline .15s; }
.day-click:hover { background: var(--card2); }
.day-open { outline: 2px solid var(--accent); background: var(--card2); }
.day-detail { background: var(--card2); border-radius: 14px; padding: 10px 12px 12px; margin-top: 10px; }
.day-detail-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; padding: 2px 2px 8px; }
#day-detail-close { background: none; border: none; color: var(--mute); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 2px 6px; }
#day-detail-close:hover { color: var(--text); }
.hour-strip { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px; }
.hour-tile { flex: 0 0 auto; min-width: 84px; background: var(--card); border-radius: 10px; padding: 8px 5px; text-align: center; scroll-snap-align: start; font-size: .75rem; }
.hs-time { color: var(--mute); font-weight: 600; }
.hs-time::after { content: " Uhr"; font-weight: 400; font-size: .68rem; }
.hs-icon { width: 36px; height: 36px; margin: 2px auto; }
.hs-temp { font-size: 1.05rem; font-weight: 700; }
.hs-rain, .hs-wind { margin-top: 3px; }
.hs-mute { color: var(--mute); }
.hs-arrow { display: inline-block; color: var(--accent); font-size: .95rem; margin-right: 2px; }

/* Meteocons */
/* Text-Icons in Datenzeilen und Ueberschriften (ersetzen die frueheren Emoji).
   Meteocons sitzen mit viel Luft in einer 512er-Box, darum deutlich groesser
   als 1em und per vertical-align auf die Schriftlinie gezogen. */
.ticon { width: 1.6em; height: 1.6em; vertical-align: -.5em; margin-right: -.1em; }
.sun-next { font-weight: 600; }
.wicon { width: 44px; height: 44px; display: inline-block; vertical-align: middle; }
.wicon-big { width: 64px; height: 64px; margin-left: 4px; }
.day-emoji .wicon { width: 52px; height: 52px; }

/* Regenradar */
.radar-box { background: var(--card2); border-radius: 14px; padding: 10px; margin-top: 8px; }
.radar-map { height: 460px; border-radius: 10px; overflow: hidden; background: var(--card); }
.radar-bar { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px; }
.radar-btn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #06202e; font-size: .95rem; line-height: 1; }
.radar-btn:hover { filter: brightness(1.1); }
.radar-dhmz { margin-top: 10px; }
.radar-dhmz-img { width: 100%; max-width: 720px; border-radius: 10px; display: block; margin-bottom: 8px; }
.leaflet-container { background: var(--card); font-family: inherit; }
.leaflet-control-attribution { background: rgba(13,27,42,.75) !important; color: var(--mute) !important; font-size: .65rem !important; }
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-bar a { background: var(--card) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-bar a:hover { background: var(--card2) !important; }
@media (max-width: 640px) { .radar-map { height: 400px; } }

/* Detail-Modus (Modellzahlen, Vergleichsquellen, Quellen-Status) */
.detail-only { display: none !important; }
.show-details .detail-only { display: revert !important; }
.show-details section.detail-only { display: block !important; }
.show-details .sources.detail-only { display: flex !important; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.detail-toggle { background: var(--card); color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: .8rem; cursor: pointer; }
.detail-toggle:hover { color: var(--text); }
.detail-toggle.is-on { background: var(--accent); color: #06202e; border-color: transparent; }

/* Neu laden — im PWA-Standalone gibt es keine Adressleiste zum Nachladen. */
.head-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; padding: 6px 10px; }
.reload-icon { width: 17px; height: 17px; }
.icon-btn.is-busy { color: var(--accent); }
.icon-btn.is-busy .reload-icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon-btn.is-busy .reload-icon { animation: none; } }
.day-gust, .hs-gust { font-size: .74rem; color: var(--mute); margin-top: 2px; }


/* Warnungen als aufklappbarer Balken */
.warnbar { margin-top: 14px; background: var(--card2); border-radius: 12px; border-left: 4px solid var(--warn-y); }
.warnbar[open] { padding-bottom: 6px; }
.warnbar-summary { cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 9px;
  font-size: .92rem; list-style: none; }
.warnbar-summary::-webkit-details-marker { display: none; }
.warnbar-summary::after { content: "▾"; margin-left: auto; color: var(--mute); transition: transform .15s; }
.warnbar[open] .warnbar-summary::after { transform: rotate(180deg); }
.warnbar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn-y); flex: 0 0 auto; }
.warnbar-text { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warnbar .warnbox { margin-top: 0; padding: 0 10px 4px; }

/* Radar auf Touch: Karte erst nach Tipp beweglich (sonst kapert sie das Scrollen) */
.radar-map.radar-locked { touch-action: pan-x pan-y !important; }
.radar-hint { position: absolute; inset: auto 0 8px 0; z-index: 500; text-align: center;
  pointer-events: auto; color: var(--text); font-size: .78rem; }
.radar-hint::before { content: ""; }
.radar-map { position: relative; }
.radar-hint { background: rgba(13,27,42,.82); padding: 6px 10px; margin: 0 auto; width: max-content;
  border-radius: 999px; border: 1px solid var(--line); }

/* Zeitleiste: schmale Spur, Bedienung ueber den (sichtbar gestylten) Slider */
.radar-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 4px 4px; }
.radar-time { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.radar-time.is-forecast { color: var(--warn-y); }
.radar-jumps { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.jump-btn { background: var(--card); color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 13px; font-size: .78rem; cursor: pointer; min-height: 34px; }
.jump-btn:hover { color: var(--text); }
.jump-btn.is-active { background: var(--accent); color: #06202e; border-color: transparent; font-weight: 600; }

.radar-timeline { flex: 1 1 auto; position: relative; }
.radar-track { display: flex; gap: 1px; height: 26px; align-items: stretch; pointer-events: none; }
.tl-seg { flex: 1 1 0; min-width: 0; border-radius: 2px; position: relative;
  background: rgba(143,168,189,.30); }
.tl-seg.is-forecast { background: rgba(246,196,69,.32); }
.tl-seg.is-active { background: var(--accent); box-shadow: 0 0 0 2px var(--text), 0 1px 4px rgba(0,0,0,.5);
  border-radius: 3px; z-index: 2; }
.tl-seg.is-forecast.is-active { background: var(--warn-y); }
.tl-label { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-size: .62rem; color: var(--mute); }

/* Slider liegt ueber der Spur: liefert Ziehen, Tastatur und Screenreader-Semantik.
   Sichtbar bleibt nur der Griff — die Spur zeichnet .radar-track. */
.radar-slider { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.radar-slider::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.radar-slider::-moz-range-track { height: 100%; background: transparent; border: 0; }
.radar-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 44px;
  background: transparent; border: 0; }
.radar-slider::-moz-range-thumb { width: 28px; height: 44px; background: transparent; border: 0; }
.radar-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.radar-legend { display: flex; align-items: center; gap: 8px; padding: 20px 4px 0; font-size: .7rem; color: var(--mute); }
.lg-scale { display: block; height: 9px; border-radius: 2px; flex: 1 1 auto; max-width: 260px;
  background: linear-gradient(90deg, #96cdf5 0 12%, #5aa5eb 12% 24%, #2873d7 24% 36%, #23af82 36% 48%,
    #5fc846 48% 60%, #f5cd3c 60% 72%, #f0912d 72% 84%, #e64655 84% 94%, #be4bc8 94% 100%); }
.lg-scale-labels { display: flex; gap: 10px; }

/* Ebenen-Umschalter Regen/Wind */
.radar-modes { display: flex; gap: 6px; padding: 0 4px 8px; }
.mode-btn { display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: .82rem; cursor: pointer; min-height: 34px; }
.mode-btn:hover { color: var(--text); }
.mode-btn.is-active { background: var(--accent); color: #06202e; border-color: transparent; font-weight: 600; }
.mode-btn .ticon { width: 1.15em; height: 1.15em; }
.mode-btn.is-active .ticon { filter: brightness(.25); }

/* Beaufort-Legende der Windkarte */
.lg-wind { display: flex; flex: 1 1 auto; max-width: 300px; height: 16px;
  border-radius: 3px; overflow: hidden; }
.lg-wseg { flex: 1 1 0; font: 600 9px/16px -apple-system, system-ui, sans-serif;
  text-align: center; color: rgba(15, 23, 42, .78); }

/* Partikel-Canvas der Windanimation (eigenes Leaflet-Pane) */
.wind-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Windpfeil in den Orts-Pillen (zeigt in Stroemungsrichtung).
   [hidden] explizit — eigenes display wuerde das Attribut sonst aushebeln. */
.place-mark .pm-arr { font-style: normal; display: inline-block; font-size: 12px;
  line-height: 1; transform-origin: 50% 50%; }
.place-mark .pm-arr[hidden] { display: none; }
.radar-legend[hidden] { display: none; }

/* km/h-Suffix in der Wind-Pille — die nackte Zahl las sich als Knoten */
.place-mark .pm-unit { font-size: 9px; font-weight: 600; opacity: .75; margin-left: -2px; }
.place-mark .pm-unit[hidden] { display: none; }

/* Ortsmarken mit Temperatur */
.leaflet-div-icon.place-mark { background: none; border: 0; width: 0; height: 0; }
.place-mark .pm-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(15,23,42,.7); }
.place-mark.is-home .pm-dot { background: #f6c445; width: 11px; height: 11px; left: -5px; top: -5px; }
.place-mark .pm-pill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 5px; align-items: baseline; white-space: nowrap; padding: 2px 7px;
  border-radius: 999px; background: rgba(255,255,255,.93); color: #0f172a;
  font: 600 11px/1.35 -apple-system, system-ui, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.place-mark.is-home .pm-pill { background: #f6c445; }
.place-mark .pm-temp { font-size: 13px; font-weight: 700; font-style: normal; }
.place-mark.is-hidden .pm-pill { visibility: hidden; }


/* Stunden-Ansicht klappt in der Zeile der angetippten Karte auf (mobile first) */
.day-detail { grid-column: 1 / -1; }
.day-detail[hidden] { display: none; }
.day-open { position: relative; }
.day-open::after {   /* Pfeil von der Karte zum Panel */
  content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom-color: var(--card2); border-top: 0;
}

/* Live-Blitzkarte (erst beim Aufklappen geladen) */
.blitz-frame { border-radius: 10px; overflow: hidden; background: var(--card); }
.blitz-frame:empty { min-height: 0; }
.blitz-frame iframe { display: block; width: 100%; height: 460px; border: 0; }
.blitz-note { font-size: .75rem; line-height: 1.5; margin-top: 8px; }
@media (max-width: 640px) { .blitz-frame iframe { height: 380px; } }


/* Kleiner Hinweis, dass eine Kachel aufklappbar ist */
.day-click { position: relative; }
.day-click::before {
  content: "";
  position: absolute; top: 9px; right: 10px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform .15s, border-color .15s;
  pointer-events: none;
}
.day-click:hover::before { border-color: var(--text); }
.day-open::before { transform: rotate(-135deg); border-color: var(--accent); }

/* Sonnen-Kachel: Auf-/Untergang, Hoechststand und Tageslaenge nebeneinander,
   damit die vier Zeiten in eine Kachelhoehe passen. */
.sun-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin-top: 8px; }
@media (min-width: 700px) { .sun-grid { grid-template-columns: repeat(4, 1fr); } }
.sun-grid > div { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.sun-what { color: var(--mute); font-size: .8rem; }
.sun-what-wide { margin-left: 1.5em; }
.sun-when { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.sun-next .sun-when { color: var(--accent); }

/* Laufende Stunde in der 24-Stunden-Leiste hervorheben */
.hour-tile.is-now { background: var(--card2); outline: 1px solid var(--accent); }
.hour-tile.is-now .hs-time { color: var(--accent); }
.hour-tile.is-now .hs-time::after { content: ""; }
#hours-now { margin-top: 8px; }