* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Liquid-Glass-Tokens */
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.13);
  --glass-border: rgba(255, 255, 255, 0.20);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --blur: 14px;
  --radius: 26px;
  --radius-sm: 18px;

  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.72);
  --accent: #9fe0ff;
}

html, body {
  height: 100%;
  /* Body scrollt NICHT — nur der Inhalt (.app) scrollt. So bleibt der
     Hintergrund garantiert fixiert (auch in mobilen WebViews). */
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Fixierter Hintergrund-Container: liegt hinter allem, scrollt nie mit. */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Eigene, statische Compositor-Ebene -> kein Neuzeichnen beim Scrollen. */
  transform: translateZ(0);
  will-change: transform;
}
/* Reiner schwarzer Hintergrund — keine Vignette, keine Kanten. */

/* Hintergrund: tiefes Schwarz (Weltraum). */
.bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000000;
  transition: background 1s ease;
}

/* ---- Weltkugel (orthografischer Globus) mit Tag/Nacht-Grenze ---- */
.world-map {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: min(135vw, 640px);
  max-width: none;
  height: auto;
  opacity: 0.4;             /* dezenter Hintergrund, kollidiert nicht mit Inhalt */
  pointer-events: none;
}

/* ---- Animierte Himmelsszene (Sonne/Mond, Sterne, Wolken) ---- */
.sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
/* Weltraum-Look: Sonne/Mond & Wolken ausblenden, Sterne immer sichtbar. */
.celestial, .clouds { display: none; }
.sky .stars { opacity: 0.85; }

/* Sterne (nur nachts sichtbar) */
.stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* mehrere kleine Punkte per radial-gradient „gestreut" */
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 25% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 75%, #fff, transparent),
    radial-gradient(1px 1px at 70% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 82% 50%, #fff, transparent),
    radial-gradient(1px 1px at 90% 80%, #fff, transparent),
    radial-gradient(1px 1px at 33% 88%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 63% 40%, #fff, transparent),
    radial-gradient(1px 1px at 15% 45%, #fff, transparent);
}
.sky.night .stars { opacity: 0.9; animation: twinkle 4s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 0.9; } 50% { opacity: 0.55; } }

/* Himmelskörper — Position wird per JS gesetzt (--x, --y in %) */
.celestial {
  position: absolute;
  inset: 0;
}
.celestial-body {
  position: absolute;
  left: var(--x, 75%);
  top: var(--y, 18%);
  width: 96px; height: 96px;
  margin: -48px;
  border-radius: 50%;
  transition: left 1.5s ease, top 1.5s ease, background 1.2s ease, box-shadow 1.2s ease;
}
/* Sonne (Tag) */
.sky.day .celestial-body {
  background: radial-gradient(circle at 50% 50%, #fff7d6 0%, #ffe07a 45%, #ffb347 100%);
  box-shadow: 0 0 60px 20px rgba(255, 214, 120, 0.55),
              0 0 120px 50px rgba(255, 179, 71, 0.28);
  animation: sunpulse 6s ease-in-out infinite;
}
@keyframes sunpulse {
  0%,100% { box-shadow: 0 0 60px 20px rgba(255,214,120,0.55), 0 0 120px 50px rgba(255,179,71,0.28); }
  50%     { box-shadow: 0 0 70px 26px rgba(255,214,120,0.65), 0 0 140px 60px rgba(255,179,71,0.34); }
}
/* Mond (Nacht) — mit „Kratern" via inset-Schatten */
.sky.night .celestial-body {
  background: radial-gradient(circle at 38% 38%, #ffffff 0%, #e8edf5 55%, #c4ccda 100%);
  box-shadow: 0 0 40px 12px rgba(210, 225, 255, 0.35),
              inset -14px -10px 0 -4px rgba(180, 195, 220, 0.55);
}

/* Ziehende Wolken */
.clouds { position: absolute; inset: 0; }
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.5);
  border-radius: 100px;
  filter: blur(6px);
  opacity: 0.7;
  will-change: transform;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.cloud-a { width: 140px; height: 42px; top: 22%; animation: drift 60s linear infinite; }
.cloud-a::before { width: 60px; height: 60px; top: -24px; left: 24px; }
.cloud-a::after  { width: 46px; height: 46px; top: -16px; left: 74px; }
.cloud-b { width: 110px; height: 34px; top: 46%; opacity: 0.5; animation: drift 90s linear infinite; animation-delay: -30s; }
.cloud-b::before { width: 48px; height: 48px; top: -20px; left: 20px; }
.cloud-b::after  { width: 38px; height: 38px; top: -12px; left: 60px; }
.cloud-c { width: 90px; height: 28px; top: 12%; opacity: 0.35; animation: drift 120s linear infinite; animation-delay: -60s; }
.cloud-c::before { width: 40px; height: 40px; top: -16px; left: 16px; }
.cloud-c::after  { width: 30px; height: 30px; top: -10px; left: 50px; }
@keyframes drift {
  from { transform: translateX(-180px); }
  to   { transform: translateX(120vw); }
}
/* Nachts Wolken dezenter/dunkler */
.sky.night .cloud { background: rgba(200, 210, 230, 0.28); opacity: 0.5; }

/* Dekorative, weich verschwommene Lichtflecken für Tiefe */
.blob { display: none; }

.app {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  will-change: scroll-position;
  transform: translateZ(0);
  max-width: 540px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 18px 40px;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* alte Edge */
}
.app::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* WebKit/Chrome/Safari */

/* Aktualisieren-Icon dreht sich beim Laden */
#refreshBtn.spin { animation: spin 0.8s linear infinite; }

/* ---- Glas-Grundbaustein ---- */
.card,
.tile,
.icon-btn,
.search-panel input,
.search-results li,
.air-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow),
              inset 0 1px 0 var(--glass-highlight);
  /* In eigene Rendering-Ebene isolieren -> weniger Neuberechnung beim Scrollen. */
  transform: translateZ(0);
  contain: paint;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.place {
  flex: 1;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0,0,0,0.25);
  cursor: pointer;
}
.place:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.icon-btn {
  color: var(--text);
  font-size: 17px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, background 0.2s ease;
}
.icon-btn:hover { background: var(--glass-bg-strong); }
.icon-btn:active { transform: scale(0.9); }

/* Suche */
.search-panel { margin-top: 14px; animation: slideDown 0.25s ease; }
.search-panel input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.search-panel input::placeholder { color: var(--text-dim); }
.search-results { list-style: none; margin-top: 10px; }
.search-results li {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.search-results li:hover { background: var(--glass-bg-strong); }
.search-results li:active { transform: scale(0.98); }
.search-results .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Favoriten-Menü */
.fav-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  animation: slideDown 0.25s ease;
}
.fav-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 10px; }
.fav-list { list-style: none; }
.fav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 6px;
  border-top: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.fav-item:first-child { border-top: none; }
.fav-item .fav-name { flex: 1; font-weight: 500; }
.fav-item .fav-star { font-size: 16px; }
.fav-item .fav-del {
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.fav-item .fav-del:hover { background: rgba(255,255,255,0.12); color: #fff; }
.fav-empty { font-size: 13px; color: var(--text-dim); padding: 6px 2px; }
/* "Aktuellen Ort zu Favoriten"-Button im Panel */
.fav-add {
  width: 100%;
  margin: 14px 0 6px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.fav-add:hover { background: rgba(255,255,255,0.2); }
.fav-add.active { color: #ffd54f; }

/* Status */
.status {
  text-align: center;
  padding: 16px;
  color: var(--text-dim);
  min-height: 20px;
  font-size: 14px;
}

/* Aktuelles Wetter */
.current { text-align: center; padding: 28px 0 10px; animation: fadeUp 0.5s ease; }
.cur-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cur-icon { font-size: 68px; line-height: 1; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3)); }
.cur-temp {
  font-size: 80px;
  font-weight: 200;
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.cur-desc { font-size: 20px; font-weight: 500; }
.cur-sub { font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.cur-updated { font-size: 11px; color: var(--text-dim); margin-top: 4px; opacity: 0.85; }

/* Karten */
.card {
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 16px;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* Stündlich */
.hourly-row { display: flex; overflow-x: auto; gap: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hourly-row::-webkit-scrollbar { display: none; }
.hour {
  flex: 0 0 auto;
  width: 62px;
  text-align: center;
  padding: 8px 0;
  border-radius: 16px;
  transition: background 0.2s ease;
}
.hour:hover { background: rgba(255,255,255,0.08); }
.hour .h-time { font-size: 12px; color: var(--text-dim); }
.hour .h-icon { font-size: 24px; margin: 8px 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.hour .h-pop { font-size: 11px; color: var(--accent); font-weight: 600; min-height: 14px; }
.hour .h-temp { font-size: 16px; font-weight: 600; }

/* 7 Tage */
.day {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.day:first-child { border-top: none; }
.day .d-name { width: 58px; font-size: 15px; font-weight: 500; }
.day .d-icon { font-size: 22px; width: 38px; text-align: center; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); }
.day .d-pop { width: 46px; font-size: 12px; color: var(--accent); font-weight: 600; }
.day .d-range { flex: 1; text-align: right; font-size: 15px; }
.day .d-min { color: var(--text-dim); margin-right: 16px; }

/* Prognosesicherheit (Konfidenz) */
.d-conf { display: inline-flex; gap: 3px; width: 40px; align-items: center; }
.d-conf .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.28); }
.conf-high .d-conf .dot { background: var(--accent); }
.conf-med  .d-conf .dot:nth-child(-n+2) { background: var(--accent); }
.conf-low  .d-conf .dot:nth-child(1)     { background: var(--accent); }
.conf-med  { opacity: 0.92; }
.conf-low  { opacity: 0.82; }
.conf-note { font-size: 11px; color: var(--text-dim); margin-top: 12px; line-height: 1.4; }

/* Details-Grid */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.tile {
  position: relative;
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* feiner diagonaler Glanz oben */
.tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  pointer-events: none;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), 0 12px 28px rgba(0,0,0,0.22); }
.t-head { display: flex; align-items: center; gap: 8px; }
.t-ic {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 9px;
  background: rgba(255,255,255,0.18);
  font-size: 15px;
}
.tile .t-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.tile .t-value { font-size: 27px; font-weight: 700; margin-top: 10px; text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.tile .t-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Luftqualität */
.air { font-size: 24px; font-weight: 600; }
.air .a-sub { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-top: 4px; }

/* Pollen-Belastung */
.pollen-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pollen-row.muted { opacity: 0.5; }
.pollen-row .p-name { width: 68px; font-size: 14px; }
.pollen-row .p-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.14); overflow: hidden; }
.pollen-row .p-fill { display: block; height: 100%; border-radius: 4px; }
.pollen-row .p-fill.p0 { background: rgba(255,255,255,0.25); }
.pollen-row .p-fill.p1 { background: #9ccc65; }
.pollen-row .p-fill.p2 { background: #ffd54f; }
.pollen-row .p-fill.p3 { background: #ff9800; }
.pollen-row .p-fill.p4 { background: #ef5350; }
.pollen-row .p-lvl { width: 66px; text-align: right; font-size: 12px; color: var(--text-dim); }
.p-hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

/* Regenradar */
.radar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.radar-head .card-title { margin-bottom: 0; }
.radar-controls { display: flex; align-items: center; gap: 10px; }
.radar-btn {
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  color: var(--text); width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; font-size: 14px; display: grid; place-items: center;
}
.radar-btn:active { transform: scale(0.92); }
.radar-time { font-size: 12px; color: var(--text-dim); min-width: 48px; text-align: right; }
.radar-canvas {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
}
/* Radar-Zeitregler */
.radar-slider-wrap { margin-top: 12px; }
.radar-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.18); outline: none; cursor: pointer;
}
.radar-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #eaf7ff; border: 2px solid #80d8ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4); cursor: pointer;
}
.radar-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #eaf7ff; border: 2px solid #80d8ff; cursor: pointer;
}
.radar-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-dim); margin-top: 6px;
}
.radar-scale #radarNow { color: var(--accent); }

.footer { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 28px; }

.hidden { display: none !important; }

/* Pull-to-refresh Indikator */
.ptr {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0;
  transition: height 0.2s ease, opacity 0.2s ease;
}
.ptr.active { opacity: 1; }
.ptr #ptrIcon { display: inline-block; font-size: 16px; }
.ptr.ready #ptrIcon { transform: rotate(180deg); transition: transform 0.2s ease; }
.ptr.spinning #ptrIcon { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Animationen */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Hochwertiger Scroll-Reveal-Effekt ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Sanfteres Verhalten bei „Reduzierte Bewegung" */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}