/* ═══════════════════════════════════════════════════════════════════════════
   wetterdings – Premium Dark Mode Stylesheet
   Mobile First · Glassmorphism · Animated Sky System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens (Dark Mode Only) ─────────────────────────────────────── */
:root {
  /* Core Backgrounds */
  --color-bg:            #050510;
  --color-surface:       rgba(255,255,255,0.05);
  --color-surface-2:     rgba(255,255,255,0.09);
  --color-surface-glass: rgba(8,8,22,0.72);

  /* Borders */
  --color-border:        rgba(255,255,255,0.09);
  --color-border-glow:   rgba(255,255,255,0.2);

  /* Text */
  --color-text-primary:  rgba(255,255,255,0.94);
  --color-text-secondary:rgba(255,255,255,0.52);
  --color-text-tertiary: rgba(255,255,255,0.28);

  /* Accent */
  --color-accent:        #007AFF;
  --color-accent-soft:   rgba(0,122,255,0.18);
  --color-accent-glow:   rgba(0,122,255,0.35);

  /* Weather Colors */
  --color-yellow:        #FFD60A;
  --color-yellow-glow:   rgba(255,214,10,0.4);
  --color-blue:          #007AFF;
  --color-teal:          #5AC8FA;
  --color-green:         #30D158;
  --color-red:           #FF453A;

  /* Shadows */
  --color-card-shadow:   0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  --shadow-sm:           0 2px 12px rgba(0,0,0,0.45);

  /* Typography */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;

  /* Radii */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* Spacing */
  --sp-xs: 6px;
  --sp-sm: 10px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Header */
  --header-h: 56px;
}

/* ── Force Dark Mode Always ──────────────────────────────────────────────── */
html { color-scheme: dark; }

/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font-sans);
  background-color: var(--color-bg);
  color:            var(--color-text-primary);
  min-height:       100dvh;
  overflow-x:       hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden { display: none !important; }

/* ── Overflow-Fix ────────────────────────────────────────────────────────── */
html, body, .app, .main-scroll { max-width: 100%; overflow-x: hidden; }
.section-card { min-width: 0; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   SKY BACKGROUND SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

.sky-bg {
  position:       fixed;
  inset:          0;
  z-index:        -1;
  background:     linear-gradient(180deg, #010612 0%, #030e25 55%, #010612 100%);
  transition:     background 3s ease;
  pointer-events: none;
  opacity:        0;
  overflow:       hidden;
}
.sky-bg.is-active { opacity: 1; }

/* ── Stars Layer ─────────────────────────────────────────────────────────── */
#sky-stars {
  position:   absolute;
  inset:      0;
  transition: opacity 4s ease;
}

.sky-star {
  position:      absolute;
  border-radius: 50%;
  background:    #fff;
  animation:     starTwinkle var(--dur, 3s) ease-in-out infinite var(--del, 0s);
}

@keyframes starTwinkle {
  0%, 100% { opacity: var(--op, 0.8); transform: scale(1); }
  50%       { opacity: calc(var(--op, 0.8) * 0.2); transform: scale(0.6); }
}

/* ── Weather Overlay (Grauschleier bei Bewölkung/Regen) ──────────────────── */
#sky-weather-overlay {
  position:         absolute;
  inset:            0;
  opacity:          0;
  background:       transparent;
  pointer-events:   none;
  /* Übergang beim Wetterwechsel fließend */
  transition:       opacity 3s ease, background 3s ease;
}
#sky-bg[data-weather="cloudy"]   #sky-weather-overlay {
  background: radial-gradient(ellipse 120% 60% at 50% 0%,
    rgba(60,70,90,0.28) 0%, transparent 75%);
  opacity: 1;
}
#sky-bg[data-weather="overcast"] #sky-weather-overlay {
  background: linear-gradient(180deg,
    rgba(45,52,68,0.55) 0%, rgba(35,42,58,0.38) 60%, transparent 100%);
  opacity: 1;
}
#sky-bg[data-weather="rain"]     #sky-weather-overlay {
  background: linear-gradient(180deg,
    rgba(28,35,52,0.72) 0%, rgba(20,28,44,0.55) 55%, rgba(15,22,38,0.30) 100%);
  opacity: 1;
}
#sky-bg[data-weather="snow"]     #sky-weather-overlay {
  background: radial-gradient(ellipse 140% 80% at 50% 0%,
    rgba(80,92,115,0.42) 0%, rgba(60,72,95,0.20) 60%, transparent 100%);
  opacity: 1;
}

/* ── Rain Layer (position:fixed, z-index:5 – über Content, unter Header) ─── */
#rain-layer {
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  z-index:        5;        /* über normalem Inhalt (z=auto), unter Header (z=100) */
  opacity:        0;
  overflow:       hidden;
  pointer-events: none;
  transition:     opacity 0.8s ease;
}
#rain-layer.is-active { opacity: 1; }

/* Einzelner Regentropfen – einfach & zuverlässig */
.raindrop {
  position:      absolute;
  border-radius: 2px;
  background:    rgba(195, 222, 255, 0.78);
  animation:     rainFall linear infinite;
}

/* EINE einfache Animation – kein CSS-Variablen-Problem, kein Rotation-Bug */
@keyframes rainFall {
  0%   { transform: translateY(-20vh); opacity: 0;    }
  10%  { opacity: 0.70; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(120vh); opacity: 0;    }
}

/* ── Clouds Layer ────────────────────────────────────────────────────────── */
#sky-clouds {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  transition:     opacity 4s ease;
}

.sky-cloud-layer {
  position:   absolute;
  left:       -50%;
  width:      200%;
  height:     140px;
  background:
    radial-gradient(ellipse 55% 38% at 20% 52%, rgba(255,255,255,1) 0%, transparent 100%),
    radial-gradient(ellipse 48% 32% at 55% 50%, rgba(255,255,255,1) 0%, transparent 100%),
    radial-gradient(ellipse 38% 28% at 78% 48%, rgba(255,255,255,1) 0%, transparent 100%),
    radial-gradient(ellipse 42% 30% at 90% 55%, rgba(255,255,255,1) 0%, transparent 100%);
  animation:  cloudDrift linear infinite;
}

@keyframes cloudDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* ── Sky Layer (eigenständige 40vh-Zone für Sonne & Mond) ────────────────── */
.sky-layer {
  position:       absolute;
  top:            0;
  left:           0;
  width:          100%;
  height:         40vh;
  pointer-events: none;
  overflow:       visible;   /* Glow darf über Rand hinausgehen */
}

/* ── Celestial Body (Sun / Moon) ─────────────────────────────────────────── */
#sky-celestial {
  position:       absolute;
  width:          140px;
  height:         140px;
  transform:      translate(-50%, -50%);
  pointer-events: none;
  opacity:        0;
  /* KEIN left/top Übergang — Position springt sofort (Timeline-gesteuert) */
  /* Nur Opacity transitions langsam (Aufgang/Untergang / Scroll) */
  transition:     opacity 1.5s ease;
}

/* ── Sun Rays (hinter Halo & Body) ──────────────────────────────────────── */
.celestial-rays {
  position:      absolute;
  inset:         -55px;   /* 250px total diameter */
  border-radius: 50%;
  opacity:       0;
  transition:    opacity 2s ease;
  pointer-events: none;
}

#sky-celestial.is-sun .celestial-rays {
  background: repeating-conic-gradient(
    rgba(255,220,50,0.16) 0deg 3deg,
    transparent            3deg 18deg
  );
  opacity:   0.75;
  animation: raysRotate 50s linear infinite;
}

@keyframes raysRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Halo (Glow-Ring) ────────────────────────────────────────────────────── */
.celestial-halo {
  position:       absolute;
  inset:          -32px;  /* 204px total */
  border-radius:  50%;
  animation:      celestialPulse 6s ease-in-out infinite;
  pointer-events: none;
  transition:     background 2s ease, opacity 2s ease;
}

/* ── Body (Kern) ─────────────────────────────────────────────────────────── */
.celestial-body {
  position:       absolute;
  inset:          20px;   /* 100px body diameter */
  border-radius:  50%;
  pointer-events: none;
  transition:     background 2s ease, box-shadow 2s ease, opacity 2s ease;
}

@keyframes celestialPulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%       { transform: scale(1.20); opacity: 0.28; }
}

/* ── Sonne ───────────────────────────────────────────────────────────────── */
#sky-celestial.is-sun .celestial-body {
  background: radial-gradient(circle at 36% 34%,
    #fffae0 0%,
    #FFE566 20%,
    #FFD60A 50%,
    #FF9F0A 80%,
    #FF7B00 100%
  );
  box-shadow:
    0 0   0  16px rgba(255,220,50,0.10),   /* innere Schimmer-Kante */
    0 0  48px 22px rgba(255,214,10,0.60),  /* heller mittlerer Glow */
    0 0  95px 48px rgba(255,170,10,0.30),  /* warmer äußerer Glow   */
    0 0 180px 90px rgba(255,120,10,0.13);  /* großer Ambient-Glow   */
}
#sky-celestial.is-sun .celestial-halo {
  background: radial-gradient(circle,
    rgba(255,220,50,0.55) 0%,
    rgba(255,190,20,0.28) 38%,
    rgba(255,159,10,0.10) 62%,
    transparent           80%
  );
}

/* ── Mond ────────────────────────────────────────────────────────────────── */
#sky-celestial.is-moon .celestial-body {
  background: radial-gradient(circle at 34% 30%,
    #fafaf2 0%,
    #e4e4d4 35%,
    #c8c8b8 65%,
    #a4a494 100%
  );
  box-shadow:
    0 0  28px 10px rgba(220,220,195,0.45),
    0 0  65px 32px rgba(190,200,230,0.20),
    0 0 130px 65px rgba(160,175,220,0.08);
  /* overflow:hidden clippt Terminator-Divs am Mondrand.
     position:absolute bleibt aus der Basis-Regel – NICHT mit relative überschreiben,
     sonst bricht inset:20px und der Mond fliegt aus der Bahn. */
  overflow: hidden;
}
#sky-celestial.is-moon .celestial-halo {
  background: radial-gradient(circle,
    rgba(225,225,205,0.38) 0%,
    rgba(195,205,235,0.15) 45%,
    transparent             72%
  );
}

/* Karten transparent wenn Sky aktiv */
.sky-active .section-card {
  background:              var(--color-surface-glass) !important;
  backdrop-filter:         blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color:            rgba(255,255,255,0.09) !important;
}
.sky-active .app-header {
  background:              rgba(5,5,16,0.78) !important;
  backdrop-filter:         blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* ── Splash Screen ───────────────────────────────────────────────────────── */
.splash {
  position:        fixed;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-bg);
  z-index:         1000;
  transition:      opacity 0.5s ease, transform 0.5s ease;
}
.splash.fade-out { opacity: 0; transform: scale(1.03); pointer-events: none; }

.splash-logo {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  animation:      splashPulse 1.8s ease-in-out infinite;
}
.splash-icon    { width: 72px; height: 72px; color: var(--color-accent); }
.splash-wordmark {
  font-family:    var(--font-display);
  font-size:      28px;
  font-weight:    300;
  letter-spacing: 0.05em;
  color:          var(--color-text-primary);
}
@keyframes splashPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.97); }
}

/* ── App Shell ───────────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  position:                sticky;
  top:                     0;
  z-index:                 100;
  display:                 flex;
  flex-direction:          column;
  padding:                 env(safe-area-inset-top) 0 0;
  background:              rgba(5,5,16,0.78);
  backdrop-filter:         blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom:           1px solid var(--color-border);
}

.header-logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  height:          36px;
  border-bottom:   1px solid var(--color-border);
}
.header-logo-icon {
  width: 22px; height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.header-logo-text {
  font-family:    var(--font-display);
  font-size:      15px;
  font-weight:    300;
  letter-spacing: 0.12em;
  color:          var(--color-text-primary);
  user-select:    none;
}

.header-controls {
  height:      var(--header-h);
  display:     flex;
  align-items: center;
  gap:         var(--sp-sm);
  padding:     0 var(--sp-md);
}

.btn-icon {
  flex-shrink:     0;
  width:           38px;
  height:          38px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  border-radius:   var(--radius-md);
  background:      transparent;
  color:           var(--color-text-secondary);
  cursor:          pointer;
  font:            inherit;
  transition:      background 0.15s, color 0.15s, transform 0.1s;
}
.btn-icon:hover, .btn-icon:focus-visible {
  background: var(--color-surface-2);
  color:      var(--color-text-primary);
  outline:    none;
}
.btn-icon:active { transform: scale(0.9); }
.btn-icon svg    { width: 20px; height: 20px; }

.btn-lang-toggle { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; }

.location-pill {
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           var(--sp-xs);
  padding:       0 var(--sp-sm);
  height:        36px;
  border:        none;
  border-radius: 100px;
  background:    var(--color-surface-2);
  color:         var(--color-text-secondary);
  cursor:        pointer;
  font:          inherit;
  font-size:     14px;
  overflow:      hidden;
  transition:    background 0.15s, transform 0.1s;
  min-width:     0;
}
.location-pill:hover  { background: rgba(255,255,255,0.13); }
.location-pill:active { transform: scale(0.97); }
.location-pill svg    { width: 16px; height: 16px; flex-shrink: 0; }
.location-pill .chevron { width: 14px; margin-left: auto; flex-shrink: 0; }
.location-pill span   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Search Overlay ──────────────────────────────────────────────────────── */
.search-overlay {
  position:       fixed;
  inset:          0;
  z-index:        200;
  background:     var(--color-bg);
  display:        flex;
  flex-direction: column;
  padding-top:    calc(var(--sp-md) + env(safe-area-inset-top));
  animation:      slideUp 0.22s ease;
}
.search-overlay.hidden { display: none !important; }

@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.search-box {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-sm);
  margin:        0 var(--sp-md);
  padding:       0 var(--sp-md);
  background:    var(--color-surface);
  border-radius: var(--radius-xl);
  border:        1px solid var(--color-border);
  box-shadow:    var(--color-card-shadow);
}
.search-icon { width: 18px; height: 18px; color: var(--color-text-tertiary); flex-shrink: 0; }

#search-input {
  flex:       1;
  height:     48px;
  border:     none;
  background: transparent;
  font:       inherit;
  font-size:  16px;
  color:      var(--color-text-primary);
  outline:    none;
  -webkit-appearance: none;
}
#search-input::placeholder { color: var(--color-text-tertiary); }

.search-results {
  flex:       1;
  overflow-y: auto;
  padding:    var(--sp-sm) var(--sp-md);
  -webkit-overflow-scrolling: touch;
}

.search-result-item {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-md);
  padding:       var(--sp-md);
  border-radius: var(--radius-md);
  cursor:        pointer;
  transition:    background 0.12s;
  border-bottom: 1px solid var(--color-border);
}
.search-result-item:last-child        { border-bottom: none; }
.search-result-item:hover,
.search-result-item:active            { background: var(--color-surface-2); }
.search-result-icon                   { color: var(--color-text-tertiary); }
.search-result-icon svg               { width: 18px; height: 18px; }
.search-result-name                   { font-size: 15px; font-weight: 500; }
.search-result-sub                    { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.search-no-results                    { text-align: center; color: var(--color-text-tertiary); padding: var(--sp-xl); font-size: 15px; }

.search-sep {
  font-size:      11px;
  font-weight:    600;
  color:          var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding:        8px 20px 4px;
  border-top:     1px solid var(--color-border);
  margin-top:     4px;
}

/* ── Main Scroll ─────────────────────────────────────────────────────────── */
.main-scroll {
  flex:       1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:    var(--sp-md);
  display:    flex;
  flex-direction: column;
  gap:        var(--sp-md);
  max-width:  600px;
  margin:     0 auto;
  width:      100%;
}

/* ── Section Cards ───────────────────────────────────────────────────────── */
.section-card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       var(--sp-md);
  box-shadow:    var(--color-card-shadow);
  border:        1px solid var(--color-border);
  animation:     cardEntrance 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stagger animations per card position */
.section-card:nth-child(1) { animation-delay: 0.06s; }
.section-card:nth-child(2) { animation-delay: 0.14s; }
.section-card:nth-child(3) { animation-delay: 0.22s; }
.section-card:nth-child(4) { animation-delay: 0.30s; }
.section-card:nth-child(5) { animation-delay: 0.38s; }
.section-card:nth-child(6) { animation-delay: 0.46s; }

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.section-title {
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-secondary);
  margin-bottom:  var(--sp-md);
}

/* ── Skeleton Loading ────────────────────────────────────────────────────── */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.1)  50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-group  { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-md) 0; }
.skeleton-city   { width: 40%; height: 20px; }
.skeleton-temp   { width: 55%; height: 80px; }
.skeleton-desc   { width: 60%; height: 16px; }
.skeleton-scroll { display: flex; gap: var(--sp-sm); overflow: hidden; }
.skeleton-hour   { width: 60px; height: 90px; flex-shrink: 0; border-radius: var(--radius-md); }
.skeleton-day    { width: 100%; height: 52px; border-radius: var(--radius-md); margin-bottom: var(--sp-xs); }

/* ── Skip Link ───────────────────────────────────────────────────────────── */
.skip-link {
  position:      absolute;
  top:           -100%;
  left:          var(--sp-md);
  background:    var(--color-accent);
  color:         #fff;
  padding:       var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-md);
  font-weight:   600;
  font-size:     14px;
  text-decoration: none;
  z-index:       9999;
  transition:    top 0.15s;
}
.skip-link:focus { top: var(--sp-md); }

/* ═══════════════════════════════════════════════════════════════════════════
   CURRENT WEATHER
   ═══════════════════════════════════════════════════════════════════════════ */

.section-current {
  padding:    var(--sp-lg) var(--sp-md) var(--sp-md);
  text-align: center;
}

.current-city-name {
  font-family:    var(--font-display);
  font-size:      22px;
  font-weight:    700;
  color:          var(--color-text-primary);
  letter-spacing: -0.3px;
  margin-bottom:  var(--sp-sm);
  min-height:     28px;
}

.current-weather {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-sm);
}

.weather-icon-wrap {
  width:           120px;
  height:          120px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  background:      rgba(255,255,255,0.04);
  border:          1px solid rgba(255,255,255,0.09);
  box-shadow:      0 4px 24px rgba(0,0,0,0.35), 0 0 40px rgba(255,255,255,0.03);
  margin-bottom:   var(--sp-sm);
  animation:       iconFloat 4.5s ease-in-out infinite;
  transition:      box-shadow 0.5s ease, transform 0.3s ease;
}
.weather-icon-wrap:hover {
  box-shadow: 0 4px 32px rgba(0,0,0,0.4), 0 0 60px rgba(255,255,255,0.07);
  transform: scale(1.04);
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

.weather-icon-main { font-size: 64px; line-height: 1; }

.current-temp-wrap { display: flex; align-items: flex-start; line-height: 1; }

.current-temp {
  font-family:    var(--font-display);
  font-size:      96px;
  font-weight:    100;
  letter-spacing: -6px;
  color:          var(--color-text-primary);
  text-shadow:    0 0 80px rgba(255,255,255,0.15), 0 0 160px rgba(255,255,255,0.05);
  transition:     text-shadow 1s ease;
}

.temp-unit {
  font-family: var(--font-display);
  font-size:   36px;
  font-weight: 200;
  padding-top: 18px;
  color:       var(--color-text-secondary);
}

.current-desc {
  font-size:      20px;
  font-weight:    300;
  color:          var(--color-text-secondary);
  letter-spacing: 0.01em;
}

.current-details {
  display:         flex;
  gap:             var(--sp-sm);
  margin-top:      var(--sp-md);
  flex-wrap:       wrap;
  justify-content: center;
}

.detail-pill {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
  padding:        var(--sp-sm) var(--sp-md);
  background:     var(--color-surface-2);
  border-radius:  var(--radius-lg);
  border:         1px solid var(--color-border);
  min-width:      72px;
  transition:     background 0.2s, border-color 0.2s, transform 0.18s;
  cursor:         default;
}
.detail-pill:hover {
  background:   rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  transform:    translateY(-3px);
}
.detail-pill svg   { width: 18px; height: 18px; color: var(--color-accent); }
.detail-value      { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.detail-label      { font-size: 11px; color: var(--color-text-tertiary); }

/* ── Kleidungsempfehlung ─────────────────────────────────────────────────── */
.clothing-card {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-md);
}
.clothing-emoji { font-size: 44px; line-height: 1; flex-shrink: 0; }
.clothing-title {
  font-size:      13px;
  font-weight:    600;
  color:          var(--color-text-secondary);
  margin-bottom:  var(--sp-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.clothing-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.clothing-list li {
  font-size:   15px;
  color:       var(--color-text-primary);
  display:     flex;
  align-items: center;
  gap:         8px;
}
.clothing-list li::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--color-accent);
  flex-shrink:   0;
}

/* ── Stündlich ───────────────────────────────────────────────────────────── */
.hourly-scroll {
  overflow-x:       auto;
  overflow-y:       hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;     /* weiche Einrastung, nicht aggressiv */
  scrollbar-width: none;
  margin:  0 calc(-1 * var(--sp-md));
  padding: 0 var(--sp-md);
}
.hourly-scroll::-webkit-scrollbar { display: none; }

.hourly-list {
  display:        flex;
  gap:            var(--sp-sm);
  padding-bottom: var(--sp-xs);
  width:          max-content;
}

/* ── @keyframes Stündliche Karten ───────────────────────────────────────── */
@keyframes hourFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes nowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,122,255,0.22); }
  50%       { box-shadow: 0 0 32px rgba(0,122,255,0.45), 0 0 0 2px rgba(0,122,255,0.14); }
}

.hour-item {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              8px;
  padding:          var(--sp-md) var(--sp-sm);
  min-width:        64px;
  background:       var(--color-surface-2);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  scroll-snap-align: start;              /* Scroll-Snap: jede Karte rastet ein */
  /* Fade-In beim Laden (überschreibbar durch spezifischere nth-child Delays) */
  animation:        hourFadeUp 0.42s cubic-bezier(0.22,1,0.36,1) both;
  transition:       background 0.22s, border-color 0.22s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s;
}

/* Gestaffeltes Einblenden der ersten 12 Karten */
.hour-item:nth-child(1)  { animation-delay: 0.03s; }
.hour-item:nth-child(2)  { animation-delay: 0.07s; }
.hour-item:nth-child(3)  { animation-delay: 0.11s; }
.hour-item:nth-child(4)  { animation-delay: 0.15s; }
.hour-item:nth-child(5)  { animation-delay: 0.19s; }
.hour-item:nth-child(6)  { animation-delay: 0.23s; }
.hour-item:nth-child(7)  { animation-delay: 0.27s; }
.hour-item:nth-child(8)  { animation-delay: 0.31s; }
.hour-item:nth-child(9)  { animation-delay: 0.34s; }
.hour-item:nth-child(10) { animation-delay: 0.37s; }
.hour-item:nth-child(11) { animation-delay: 0.40s; }
.hour-item:nth-child(12) { animation-delay: 0.43s; }

.hour-item:hover {
  background:   rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  transform:    translateY(-5px) scale(1.03);
  box-shadow:   0 10px 28px rgba(0,0,0,0.32);
}

/* Aktuelle Uhrzeit: blauer Glow + subtiles Pulsieren */
.hour-item.is-now {
  background: rgba(0,122,255,0.14);
  border:     1px solid rgba(0,122,255,0.5);
  animation:  hourFadeUp 0.42s cubic-bezier(0.22,1,0.36,1) both,
              nowPulse 2.8s ease-in-out 0.6s infinite;
}

/* Timeline-Scrubber aktive Karte: hebt sich klar ab */
.hour-item.is-timeline-active {
  background:   rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.38);
  transform:    translateY(-5px) scale(1.05);
  box-shadow:   0 10px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.18) inset;
}
.hour-item.is-timeline-active .hour-time {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ── Icon Micro-Animationen ──────────────────────────────────────────────── */
.hour-icon {
  font-size:    24px;
  display:      inline-block;          /* transform funktioniert auf inline nicht */
  transition:   transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.hour-item:hover .hour-icon            { transform: rotate(8deg) scale(1.18); }
.hour-item.is-now .hour-icon           { transform: scale(1.20); }
.hour-item.is-timeline-active .hour-icon { transform: scale(1.22); }

.hour-time   { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.hour-temp   { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.hour-precip { font-size: 11px; color: var(--color-teal); font-weight: 500; }

/* ── Nachtstunden – dunkler, reduzierter Kontrast ────────────────────────── */
.hour-item.is-night {
  background:   rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.055);
}
.hour-item.is-night .hour-time  { color: rgba(255,255,255,0.32); }
.hour-item.is-night .hour-temp  { color: rgba(255,255,255,0.65); }
.hour-item.is-night .hour-icon  { filter: brightness(0.80); }
.hour-item.is-night:hover {
  background:   rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}

/* ── Regenstunden – kühler Blauton ──────────────────────────────────────── */
.hour-item.is-rain {
  background:   rgba(30,65,140,0.18);
  border-color: rgba(110,165,255,0.20);
}
.hour-item.is-rain .hour-precip { color: #5faaff; }
.hour-item.is-rain:hover {
  background:   rgba(40,80,160,0.26);
  border-color: rgba(130,185,255,0.32);
}

/* Kombination: Regen + Nacht */
.hour-item.is-rain.is-night {
  background:   rgba(20,45,105,0.22);
  border-color: rgba(90,145,240,0.18);
}

/* ── Sonnenaufgang / Sonnenuntergang – wie Apple Weather ─────────────────── */
.hour-item.is-sun-event {
  border-color: rgba(255,195,60,0.30);
  overflow:     visible;   /* ::after darf herausragen */
  position:     relative;
}
/* Goldener Underline-Strich als visueller Akzent */
.hour-item.is-sun-event::after {
  content:       '';
  position:      absolute;
  bottom:        -5px;
  left:          50%;
  transform:     translateX(-50%);
  width:         20px;
  height:        2px;
  background:    #FFD580;
  border-radius: 2px;
  opacity:       0.85;
}
.hour-item.is-sunrise {
  background: linear-gradient(160deg,
    rgba(255,130,50,0.14) 0%,
    rgba(255,195,70,0.08) 100%
  );
}
.hour-item.is-sunset {
  background: linear-gradient(160deg,
    rgba(255,90,50,0.13) 0%,
    rgba(255,155,50,0.08) 100%
  );
}
.hour-item.is-sun-event:hover {
  background:   rgba(255,180,50,0.18);
  border-color: rgba(255,210,80,0.45);
  transform:    translateY(-4px);
}
/* Exakte Uhrzeit statt Temperatur – goldene Schrift */
.hour-event-time {
  font-size:      12px;
  font-weight:    700;
  color:          #FFD580;
  letter-spacing: 0.04em;
}

/* ── 7-Tage ──────────────────────────────────────────────────────────────── */
.daily-list { display: flex; flex-direction: column; gap: 2px; }

.day-item {
  display:        grid;
  grid-template-columns: 1fr auto auto auto;
  align-items:    center;
  gap:            var(--sp-sm);
  padding:        var(--sp-sm) var(--sp-xs);
  border-bottom:  1px solid var(--color-border);
  border-radius:  var(--radius-sm);
  transition:     background 0.15s, padding 0.15s, transform 0.15s;
}
.day-item:last-child { border-bottom: none; }
.day-item:hover {
  background: rgba(255,255,255,0.05);
  padding-left:  var(--sp-sm);
  padding-right: var(--sp-sm);
  transform: translateX(2px);
}
.day-name          { font-size: 15px; font-weight: 500; color: var(--color-text-primary); }
.day-name.is-today { color: var(--color-accent); font-weight: 600; }
.day-icon          { font-size: 22px; }
.day-temp          { font-size: 14px; font-weight: 500; }
.day-high          { color: var(--color-text-primary); }
.day-low           { color: var(--color-text-tertiary); margin-left: 4px; }
.day-precip-bar-wrap {
  width:         60px;
  height:        4px;
  background:    var(--color-surface-2);
  border-radius: 2px;
  overflow:      hidden;
}
.day-precip-bar {
  height:        100%;
  background:    linear-gradient(to right, #5AC8FA, #007AFF);
  border-radius: 2px;
  transition:    width 0.6s ease;
}

/* ── Radar ───────────────────────────────────────────────────────────────── */
.section-radar { padding-bottom: var(--sp-sm); }

.radar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--sp-md);
}
.radar-controls { display: flex; gap: var(--sp-xs); }

.btn-radar-control {
  width:         38px;
  height:        38px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        none;
  border-radius: 50%;
  background:    var(--color-accent);
  color:         #fff;
  cursor:        pointer;
  transition:    transform 0.15s, opacity 0.15s, box-shadow 0.2s;
  box-shadow:    0 0 18px var(--color-accent-glow);
}
.btn-radar-control:hover  { opacity: 0.88; box-shadow: 0 0 28px var(--color-accent-glow); }
.btn-radar-control:active { transform: scale(0.92); }
.btn-radar-control svg    { width: 20px; height: 20px; }

.radar-map {
  width:         100%;
  height:        260px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--color-surface-2);
  z-index:       0;
}

/* ── Radar Timeline ──────────────────────────────────────────────────────── */
.radar-timeline {
  margin-top:  var(--sp-sm);
  padding:     6px 2px 0;
  cursor:      pointer;
  user-select: none;
  -webkit-user-select: none;
}
.radar-track {
  position:      relative;
  height:        4px;
  background:    var(--color-border);
  border-radius: 2px;
  margin-bottom: 10px;
}
.radar-progress {
  position:      absolute;
  left:          0; top: 0; bottom: 0;
  background:    linear-gradient(to right, #007aff, #5ac8fa);
  border-radius: 2px;
  transition:    width 0.25s ease;
  pointer-events: none;
}
.radar-thumb {
  position:      absolute;
  top:           50%;
  left:          0%;
  transform:     translate(-50%, -50%);
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    #1c1c1e;
  box-shadow:    0 1px 5px rgba(0,0,0,0.5), 0 0 0 2.5px #0a84ff;
  transition:    left 0.25s ease;
  pointer-events: none;
  z-index:       2;
}
.radar-timestamps { display: flex; align-items: flex-start; }
.radar-ts-tick {
  flex:        1;
  text-align:  center;
  font-size:   9px;
  color:       var(--color-text-tertiary);
  padding:     2px 0;
  user-select: none;
  cursor:      pointer;
  transition:  color 0.2s, font-weight 0.2s;
  line-height: 1.3;
}
.radar-ts-tick.is-active          { color: #0a84ff; font-weight: 700; }
.radar-ts-tick.is-nowcast          { color: var(--color-yellow); }
.radar-ts-tick.is-nowcast.is-active{ color: var(--color-yellow); font-weight: 700; }
.radar-time-label {
  text-align: center;
  font-size:  12px;
  color:      var(--color-text-secondary);
  margin-top: 2px;
  height:     18px;
}
.radar-legend {
  display:         flex;
  gap:             var(--sp-xs);
  align-items:     center;
  margin-top:      var(--sp-xs);
  font-size:       11px;
  color:           var(--color-text-tertiary);
  justify-content: center;
}
.radar-legend-bar {
  width:         120px;
  height:        6px;
  border-radius: 3px;
  background:    linear-gradient(to right, #cce5ff, #66b2ff, #0066ff, #003399);
}

/* ── Sonne ───────────────────────────────────────────────────────────────── */
#section-sun { padding: var(--sp-sm) var(--sp-md) var(--sp-md); }

.sun-section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--sp-xs);
}
.sun-section-header .section-title { margin-bottom: 0; }

.sky-hour-info {
  display:       flex;
  align-items:   center;
  gap:           6px;
  background:    var(--color-surface-2);
  border-radius: var(--radius-xl);
  padding:       4px 12px 4px 8px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--color-text-primary);
  transition:    all 0.3s ease;
}
.sky-hour-info .sky-icon { font-size: 18px; line-height: 1; }
.sky-hour-info .sky-temp { font-size: 13px; font-weight: 700; }

.sun-arc-hint {
  text-align:     center;
  font-size:      9px;
  color:          var(--color-text-tertiary);
  margin-top:     2px;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select:    none;
  opacity:        0.7;
}

.sun-row {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.sun-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 68px; }
.sun-icon     { width: 20px; height: 20px; color: var(--color-yellow); }
.sun-icon-set { opacity: 0.55; }
.sun-label    { font-size: 10px; color: var(--color-text-secondary); text-align: center; font-weight: 500; letter-spacing: 0.01em; }
.sun-time     { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }

/* ── UV-Index ────────────────────────────────────────────────────────────── */
.uv-row {
  border-top:  1px solid var(--color-border);
  padding-top: var(--sp-sm);
  display:     flex;
  flex-direction: column;
  gap:         6px;
}
.uv-info { display: flex; align-items: center; gap: var(--sp-sm); }
.uv-value { font-size: 18px; font-weight: 700; color: var(--color-text-primary); min-width: 26px; }
.uv-level-badge {
  font-size:     11px;
  font-weight:   600;
  padding:       2px 8px;
  border-radius: 100px;
  background:    var(--color-surface-2);
  color:         var(--color-text-secondary);
}
.uv-bar-wrap {
  width:         100%;
  height:        6px;
  border-radius: 3px;
  background:    linear-gradient(to right,
    #30d158 0%, #30d158 18%,
    #ffd60a 18%, #ffd60a 45%,
    #ff9f0a 45%, #ff9f0a 64%,
    #ff375f 64%, #ff375f 82%,
    #bf5af2 82%, #bf5af2 100%
  );
  position:      relative;
  overflow:      visible;
}
.uv-bar {
  position:      absolute;
  top:           50%;
  transform:     translateY(-50%);
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    #fff;
  border:        2px solid var(--color-text-primary);
  box-shadow:    0 1px 4px rgba(0,0,0,0.3);
  transition:    left 0.5s ease;
  left:          0%;
}

.sun-arc-wrap { flex: 1; display: flex; flex-direction: column; align-items: stretch; }
.sun-arc {
  width:        100%;
  height:       64px;
  cursor:       grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select:  none;
}
.sun-arc:active { cursor: grabbing; }

/* ── Offline Banner ──────────────────────────────────────────────────────── */
.offline-banner {
  position:    fixed;
  bottom:      calc(env(safe-area-inset-bottom) + var(--sp-md));
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  align-items: center;
  gap:         var(--sp-sm);
  padding:     var(--sp-sm) var(--sp-md);
  background:  var(--color-surface);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:  var(--color-card-shadow);
  font-size:   13px;
  color:       var(--color-text-secondary);
  white-space: nowrap;
  z-index:     300;
}
.offline-banner svg { width: 16px; height: 16px; color: var(--color-red); }

/* ── Leaflet ─────────────────────────────────────────────────────────────── */
.leaflet-container { background: #0a0f1a !important; font-family: var(--font-sans) !important; }
.leaflet-control-zoom {
  border-radius: var(--radius-md) !important;
  border:        1px solid var(--color-border) !important;
  box-shadow:    var(--color-card-shadow) !important;
}
.leaflet-control-zoom a {
  background: var(--color-surface) !important;
  color:      var(--color-text-primary) !important;
  border:     none !important;
}
.leaflet-control-zoom a:hover { background: var(--color-surface-2) !important; }

/* ── Sky Timeline ─────────────────────────────────────────────────────────── */
#section-timeline { padding: var(--sp-sm) var(--sp-md) var(--sp-md); overflow: hidden; }

.sky-tl-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--sp-md);
}
.tl-section-label {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--color-text-tertiary);
  user-select:    none;
}

.tl-time-badge {
  background:     rgba(255,255,255,0.07);
  border:         1px solid rgba(255,255,255,0.12);
  color:          var(--color-text-primary);
  font-size:      13px;
  font-weight:    600;
  padding:        4px 14px;
  border-radius:  100px;
  white-space:    nowrap;
  text-align:     center;
  letter-spacing: 0.04em;
}

/* ── Ultra-dünner interaktiver Drag-Track ──────────────────────────────── */
.tl-track-wrap {
  position:  relative;
  height:    40px;
  display:   flex;
  align-items: center;
  margin:    0 0 2px;
}
.tl-track-bg {
  position:       absolute;
  left:           0;
  right:          0;
  height:         2px;
  background:     rgba(255,255,255,0.13);
  border-radius:  2px;
  pointer-events: none;
}
.tl-track-fill {
  position:       absolute;
  left:           0;
  height:         2px;
  background:     linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.7));
  border-radius:  2px;
  pointer-events: none;
  width:          0%;
  will-change:    width;
}
.tl-track-handle {
  position:        absolute;
  left:            0;
  width:           20px;
  height:          20px;
  transform:       translateX(-50%);
  pointer-events:  none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  will-change:     left;
}
.tl-handle-inner {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  background:    #ffffff;
  box-shadow:    0 0 0 3px rgba(255,255,255,0.2), 0 2px 9px rgba(0,0,0,0.6);
  transition:    transform 0.14s ease, box-shadow 0.14s ease;
}
.tl-track-wrap:active .tl-handle-inner {
  transform:  scale(1.4);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.26), 0 3px 14px rgba(0,0,0,0.65);
}
.tl-range-overlay {
  position:  absolute;
  inset:     0;
  width:     100%;
  height:    100%;
  opacity:   0;
  cursor:    pointer;
  z-index:   5;
  margin:    0;
  padding:   0;
  -webkit-appearance: none;
  appearance: none;
}

/* Tick labels */
.tl-ticks { position: relative; width: 100%; height: 14px; margin-bottom: 4px; }
.tl-ticks span {
  position:       absolute;
  transform:      translateX(-50%);
  font-size:      9px;
  color:          var(--color-text-tertiary);
  white-space:    nowrap;
  line-height:    1;
  user-select:    none;
  pointer-events: none;
}

.sky-canvas {
  display:       block;
  width:         100%;
  height:        88px;
  border-radius: var(--radius-md);
  cursor:        pointer;
  -webkit-user-select: none;
  user-select:   none;
  box-shadow:    0 2px 12px rgba(0,0,0,0.28);
  margin-top:    6px;
  opacity:       0.92;
}

/* ── UV-Index Detail-Sektion ─────────────────────────────────────────────── */
.uv-detail-card { padding: var(--sp-sm) var(--sp-md) var(--sp-md); }
.uv-detail-inner { display: flex; flex-direction: column; gap: 10px; }

.uv-detail-header {
  display:     flex;
  align-items: baseline;
  gap:         var(--sp-sm);
}
.uv-detail-big {
  font-size:      44px;
  font-weight:    200;
  font-family:    var(--font-display);
  color:          var(--color-text-primary);
  line-height:    1;
  transition:     opacity 0.3s ease;
}
.uv-detail-badge {
  font-size:     12px;
  font-weight:   600;
  padding:       3px 10px;
  border-radius: 100px;
  background:    var(--color-surface-2);
  color:         var(--color-text-secondary);
  transition:    color 0.45s ease, background 0.45s ease;
}

.uv-scale-outer { display: flex; flex-direction: column; gap: 5px; }
.uv-scale-track {
  position:      relative;
  height:        8px;
  border-radius: 4px;
  overflow:      visible;
}
.uv-scale-gradient {
  position:      absolute;
  inset:         0;
  border-radius: 4px;
  background:    linear-gradient(to right,
    #30d158 0%,   #30d158 27%,
    #ffd60a 27%,  #ffd60a 45%,
    #ff9f0a 45%,  #ff9f0a 64%,
    #ff375f 64%,  #ff375f 82%,
    #bf5af2 82%,  #bf5af2 100%
  );
}
.uv-scale-marker {
  position:      absolute;
  top:           50%;
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    #fff;
  border:        2.5px solid rgba(0,0,0,0.25);
  box-shadow:    0 2px 8px rgba(0,0,0,0.5);
  transform:     translate(-50%, -50%);
  left:          0%;
  transition:    left 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.uv-scale-labels {
  display:         flex;
  justify-content: space-between;
  padding:         0 2px;
}
.uv-scale-labels span {
  font-size:  9px;
  color:      var(--color-text-tertiary);
  user-select: none;
}
.uv-recommendation {
  font-size:   13px;
  color:       var(--color-text-secondary);
  line-height: 1.5;
  padding-top: 2px;
  min-height:  18px;
  transition:  opacity 0.35s ease;
}

/* ── Wetterabhängiger Sonnen-Glow (via data-weather auf #sky-bg) ─────────── */
/* Alle Sub-Elemente mit langsamem Übergang für fließende Wetterwechsel */
.celestial-body,
.celestial-halo,
.celestial-rays {
  transition: box-shadow 3s ease, opacity 2.5s ease, background 3s ease;
}

/* ☀️ SONNIG (clear) – voller Glow, starke Strahlen (Default, kein Selektor nötig) */

/* ☁️ LEICHT BEWÖLKT – Sonne sichtbar, Glow und Strahlen gedämpft */
#sky-bg[data-weather="cloudy"] #sky-celestial.is-sun .celestial-body {
  box-shadow:
    0 0  0  10px rgba(255,220,50,0.05),
    0 0 28px 12px rgba(255,214,10,0.25),
    0 0 60px 28px rgba(255,159,10,0.10);
}
#sky-bg[data-weather="cloudy"] #sky-celestial.is-sun .celestial-halo { opacity: 0.28; }
#sky-bg[data-weather="cloudy"] #sky-celestial.is-sun .celestial-rays  { opacity: 0.22; }

/* ☁️☁️ STARK BEWÖLKT – Sonne hinter Wolken, diffuses Licht */
#sky-bg[data-weather="overcast"] #sky-celestial.is-sun .celestial-body {
  box-shadow:
    0 0  8px  3px rgba(255,214,10,0.10),
    0 0 22px 10px rgba(255,159,10,0.06);
  opacity: 0.50;
}
#sky-bg[data-weather="overcast"] #sky-celestial.is-sun .celestial-halo { opacity: 0.08; }
#sky-bg[data-weather="overcast"] #sky-celestial.is-sun .celestial-rays  { opacity: 0; }

/* 🌧️ REGEN – Sonne wird von JS vollständig ausgeblendet (weatherFactor=0)
   Sub-Elemente bleiben trotzdem neutral für den Fall des Wechsels zurück */
#sky-bg[data-weather="rain"] #sky-celestial.is-sun .celestial-body {
  box-shadow: none;
}
#sky-bg[data-weather="rain"] #sky-celestial.is-sun .celestial-halo { opacity: 0; }
#sky-bg[data-weather="rain"] #sky-celestial.is-sun .celestial-rays  { opacity: 0; }

/* 🌨️ SCHNEE – diffuses, weiches Licht */
#sky-bg[data-weather="snow"] #sky-celestial.is-sun .celestial-body {
  box-shadow:
    0 0 18px  7px rgba(255,225,180,0.22),
    0 0 42px 20px rgba(255,200,120,0.10);
  opacity: 0.55;
}
#sky-bg[data-weather="snow"] #sky-celestial.is-sun .celestial-halo { opacity: 0.16; }
#sky-bg[data-weather="snow"] #sky-celestial.is-sun .celestial-rays  { opacity: 0.10; }

/* ── Safe Area ───────────────────────────────────────────────────────────── */
.safe-area-bottom { height: calc(env(safe-area-inset-bottom) + var(--sp-lg)); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .current-temp { font-size: 112px; }
  .radar-map    { height: 320px; }
}
@media (min-width: 600px) {
  .main-scroll { padding: var(--sp-lg); gap: var(--sp-lg); }
  .radar-map   { height: 380px; }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.001ms !important;
    transition-duration:  0.001ms !important;
  }
}

/* ── Focus Visible ───────────────────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mond-Info-Karte (#section-moon)  –  Look wie moon-test.html "Heute"-Card
   ═══════════════════════════════════════════════════════════════════════════ */

.moon-card { padding: var(--sp-md); }

.moon-card-inner {
  display:     flex;
  align-items: center;
  gap:         20px;
  background:  rgba(255,255,255,0.04);
  border:      1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding:     20px 24px;
}

/* ── Preview-Disc (96 px – wie "Heute"-Karte im Test) ──────────────────── */
#moon-preview {
  position:      relative;
  width:         96px;
  height:        96px;
  border-radius: 50%;
  overflow:      hidden;        /* Pflicht – clippt Schatten-Divs am Rand */
  flex-shrink:   0;
  box-shadow:
    0 0 22px  8px rgba(200, 215, 240, 0.18),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* ── Mondoberfläche – in Preview-Disc UND in .celestial-body ───────────── */
.moon-surface {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  background:    radial-gradient(circle at 34% 30%,
    #f8f8f0 0%,
    #dcdcd0 38%,
    #b8b8a8 68%,
    #8e8e80 100%
  );
}

/* moon-shadow-base + moon-terminator: vollständig per inline-style von moon.js */
.moon-shadow-base,
.moon-terminator { pointer-events: none; }

/* ── Info-Block rechts ──────────────────────────────────────────────────── */
.moon-info {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  min-width:      0;
}

.moon-info-name {
  font-size:      1.15rem;
  font-weight:    700;
  color:          var(--color-text-primary);
  line-height:    1.2;
  white-space:    nowrap;
}

.moon-info-stats {
  font-size:   0.85rem;
  color:       rgba(255,255,255,0.5);
  line-height: 1.7;
  margin:      0;
}

.moon-info-stats b {
  color:       rgba(255,255,255,0.88);
  font-weight: 600;
}

/* Responsive: schmale Geräte → Stacked-Layout */
@media (max-width: 380px) {
  .moon-card-inner { padding: 16px; gap: 16px; }
  #moon-preview    { width: 72px; height: 72px; }
  .moon-info-name  { font-size: 1rem; }
}

/* ── Mond-Stats: keine Umbrüche zwischen Zahl + Einheit ─────────────────
   Globale .no-break Utility-Klasse (auch außerhalb der Mond-Sektion nutzbar).
   .moon-stat-sep ist der Mittelpunkt-Trenner zwischen Phase & Beleuchtung. */
.no-break {
  white-space: nowrap;
}
.moon-info-stats .no-break b {
  /* Sicherheitsnetz: <b>-Werte selbst dürfen nicht trennen */
  white-space: nowrap;
}
.moon-stat-sep {
  display:     inline-block;
  margin:      0 8px;
  color:       rgba(255,255,255,0.40);
  user-select: none;
}

/* Mobile Layout-Fix: Phase + Beleuchtung untereinander, sauber zentriert */
@media (max-width: 600px) {
  .moon-card-inner {
    align-items: center;
    gap: 18px;
  }
  .moon-info {
    flex: 1;
    min-width: 0;          /* erlaubt sauberes Schrumpfen */
  }
  .moon-info-stats {
    line-height: 1.7;
  }
  /* Trenner verschwindet, Phase und Beleuchtung kommen in eigene Zeilen */
  .moon-stat-sep { display: none; }
  .moon-info-stats .no-break {
    display:      inline-block;
    margin-right: 4px;
  }
  /* Nach „Phase: X%" Zeilenumbruch erzwingen */
  .moon-info-stats .no-break:first-of-type::after {
    content: "";
    display: block;
    height: 0;
  }
}

/* ── Custom Scrollbar ────────────────────────────────────────────────────── */
@media (hover: hover) {
  ::-webkit-scrollbar       { width: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER + IMPRESSUM-MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Footer (im main-scroll, ganz unten) ────────────────────────────────── */
.site-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         24px 16px 8px;
  margin-top:      auto;
  font-size:       13px;
  color:           rgba(255,255,255,0.50);
  user-select:    none;
}
.footer-link {
  background:    none;
  border:        none;
  padding:       4px 8px;
  margin:        -4px -8px;
  font:          inherit;
  font-size:     13px;
  font-weight:   500;
  color:         rgba(255,255,255,0.78);
  cursor:        pointer;
  border-radius: 8px;
  transition:    color 0.15s ease, background 0.15s ease;
}
.footer-link:hover,
.footer-link:focus-visible {
  color:      #fff;
  background: rgba(255,255,255,0.06);
  outline:    none;
}
.footer-link:active { transform: scale(0.96); }
.footer-sep {
  color:   rgba(255,255,255,0.25);
  font-size: 14px;
  line-height: 1;
}
.footer-copy {
  letter-spacing: 0.01em;
}

/* ── Impressum-Modal Overlay ────────────────────────────────────────────── */
.impressum-modal {
  position:        fixed;
  inset:           0;
  z-index:         600;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding:         16px;
  padding-top:     calc(env(safe-area-inset-top) + 16px);
  padding-bottom:  calc(env(safe-area-inset-bottom) + 16px);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.30s ease;
}
.impressum-modal.is-active {
  opacity:        1;
  pointer-events: auto;
}

.impressum-card {
  position:      relative;
  width:         100%;
  max-width:     560px;
  max-height:    100%;
  background:    rgba(20,22,32,0.96);
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  box-shadow:    0 30px 80px rgba(0,0,0,0.6);
  overflow:      hidden;
  transform:     scale(0.92);
  opacity:       0;
  transition:    transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
                 opacity 0.25s ease;
}
.impressum-modal.is-active .impressum-card {
  transform: scale(1);
  opacity:   1;
}

/* Schließen-Button (Top-Right) */
.impressum-close {
  position:        absolute;
  top:             14px;
  right:           14px;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  background:      rgba(255,255,255,0.08);
  color:           #fff;
  border-radius:   50%;
  cursor:          pointer;
  z-index:         2;
  transition:      background 0.15s ease, transform 0.12s ease;
}
.impressum-close:hover,
.impressum-close:focus-visible {
  background: rgba(255,255,255,0.16);
  outline:    none;
}
.impressum-close:active { transform: scale(0.92); }
.impressum-close svg { width: 16px; height: 16px; }

/* Scrollbarer Inhalt */
.impressum-scroll {
  padding:        28px 26px 24px;
  overflow-y:     auto;
  max-height:     calc(100vh - 32px);
  -webkit-overflow-scrolling: touch;
  color:          var(--color-text-primary);
  font-size:      14.5px;
  line-height:    1.6;
}
.impressum-scroll::-webkit-scrollbar { width: 4px; }
.impressum-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.impressum-h {
  font-size:     22px;
  font-weight:   700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color:         #fff;
}
.impressum-sub {
  color:        var(--color-text-secondary);
  font-size:    13px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 16px;
}
.impressum-scroll h3 {
  font-size:      14px;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin:         22px 0 8px;
}
.impressum-scroll h4 {
  font-size:   14px;
  font-weight: 700;
  margin:      14px 0 4px;
  color:       var(--color-text-primary);
}
.impressum-scroll p {
  margin-bottom: 10px;
  color:         rgba(255,255,255,0.85);
}
.impressum-scroll a {
  color:           var(--color-accent);
  text-decoration: none;
  border-bottom:   1px solid rgba(0,122,255,0.35);
  transition:      border-color 0.15s ease, color 0.15s ease;
}
.impressum-scroll a:hover {
  border-bottom-color: var(--color-accent);
  color: #1a8cff;
}
.impressum-scroll strong { color: #fff; font-weight: 600; }

/* Handelsregister-Liste (Label/Wert in zwei Spalten) */
.impressum-list {
  list-style:     none;
  padding:        0;
  margin:         8px 0 0;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.impressum-list li {
  display:        flex;
  align-items:    baseline;
  gap:            12px;
  padding:        8px 12px;
  background:     rgba(255,255,255,0.04);
  border-radius:  10px;
  border:         1px solid rgba(255,255,255,0.06);
}
.impressum-list li span {
  flex-shrink: 0;
  width:       42%;
  font-size:   13px;
  color:       var(--color-text-secondary);
  font-weight: 500;
}
.impressum-list li strong {
  flex: 1;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.impressum-foot {
  margin-top:    24px;
  padding-top:   16px;
  border-top:    1px solid rgba(255,255,255,0.08);
  font-size:     12px;
  color:         var(--color-text-secondary);
  text-align:    center;
}

/* Mobile-Anpassung – breitere Modal-Card mit etwas weniger Padding */
@media (max-width: 480px) {
  .impressum-scroll  { padding: 26px 20px 22px; font-size: 14px; }
  .impressum-h       { font-size: 20px; }
  .impressum-list li {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }
  .impressum-list li span { width: auto; }
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  .impressum-modal,
  .impressum-card { transition: opacity 0.001ms !important; }
  .impressum-modal.is-active .impressum-card { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTALL-BANNER (PWA „Zum Home-Bildschirm hinzufügen")
   ═══════════════════════════════════════════════════════════════════════════ */

.install-banner {
  position:        fixed;
  left:            50%;
  bottom:          calc(env(safe-area-inset-bottom) + 16px);
  transform:       translateX(-50%) translateY(140%);   /* Startposition: unsichtbar unten */
  width:           calc(100% - 24px);
  max-width:       440px;
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         12px 14px;
  background:      rgba(20,22,32,0.92);
  border:          1px solid rgba(255,255,255,0.10);
  border-radius:   18px;
  box-shadow:      0 12px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  z-index:         400;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.install-banner.is-visible {
  opacity:        1;
  transform:      translateX(-50%) translateY(0);
  pointer-events: auto;
}

.install-banner-icon {
  flex-shrink:   0;
  width:         48px;
  height:        48px;
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    0 2px 8px rgba(0,0,0,0.35);
}
.install-banner-icon img { display: block; width: 100%; height: 100%; }

.install-banner-text {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  line-height:    1.3;
}
.install-banner-text strong {
  font-size:   14px;
  font-weight: 700;
  color:       var(--color-text-primary);
}
.install-banner-text span {
  font-size:   12px;
  color:       var(--color-text-secondary);
  overflow:    hidden;
  text-overflow: ellipsis;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.install-banner-btn {
  flex-shrink:    0;
  border:         none;
  background:     var(--color-accent);
  color:          #fff;
  font:           inherit;
  font-size:      13px;
  font-weight:    700;
  padding:        9px 14px;
  border-radius:  100px;
  cursor:         pointer;
  letter-spacing: 0.02em;
  box-shadow:     0 0 16px rgba(0,122,255,0.35);
  transition:     transform 0.12s, background 0.15s, box-shadow 0.2s;
}
.install-banner-btn:hover  { background: #1a8cff; box-shadow: 0 0 22px rgba(0,122,255,0.55); }
.install-banner-btn:active { transform: scale(0.95); }

.install-banner-close {
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          none;
  background:      transparent;
  color:           var(--color-text-secondary);
  border-radius:   50%;
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s, transform 0.1s;
}
.install-banner-close:hover  { background: rgba(255,255,255,0.10); color: var(--color-text-primary); }
.install-banner-close:active { transform: scale(0.9); }
.install-banner-close svg    { width: 14px; height: 14px; }

/* ── iOS-Anleitung (Modal) ──────────────────────────────────────────────── */
.install-ios-modal {
  position:        fixed;
  inset:           0;
  z-index:         500;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  background:      rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:         16px;
  padding-bottom:  calc(env(safe-area-inset-bottom) + 16px);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.25s ease;
}
.install-ios-modal.is-visible {
  opacity:        1;
  pointer-events: auto;
}

.install-ios-card {
  width:         100%;
  max-width:     420px;
  background:    rgba(20,22,32,0.96);
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding:       24px 22px 18px;
  box-shadow:    0 -10px 50px rgba(0,0,0,0.6);
  transform:     translateY(20px);
  transition:    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.install-ios-modal.is-visible .install-ios-card { transform: translateY(0); }

.install-ios-card h3 {
  font-size:     18px;
  font-weight:   700;
  color:         var(--color-text-primary);
  margin-bottom: 16px;
  text-align:    center;
}

.install-ios-steps {
  list-style:     none;
  padding:        0;
  margin:         0 0 18px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
  counter-reset:  step;
}
.install-ios-steps li {
  display:           flex;
  align-items:       center;
  gap:               12px;
  font-size:         15px;
  font-weight:       500;
  color:             var(--color-text-primary);
  line-height:       1.4;
  counter-increment: step;
}
.install-ios-steps li::before {
  content:         counter(step);
  flex-shrink:     0;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  background:      var(--color-accent);
  color:           #fff;
  font-size:       13px;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.install-ios-step-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border-radius:   10px;
  background:      rgba(0,122,255,0.18);
  color:           var(--color-accent);
  flex-shrink:     0;
}
.install-ios-step-icon svg { width: 18px; height: 18px; }

.install-ios-btn {
  width:         100%;
  border:        none;
  background:    var(--color-accent);
  color:         #fff;
  font:          inherit;
  font-size:     16px;
  font-weight:   700;
  padding:       13px;
  border-radius: 14px;
  cursor:        pointer;
  transition:    background 0.15s, transform 0.12s;
}
.install-ios-btn:hover  { background: #1a8cff; }
.install-ios-btn:active { transform: scale(0.98); }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .install-banner,
  .install-ios-card,
  .install-ios-modal { transition: opacity 0.001ms !important; }
  .install-banner.is-visible    { transform: translateX(-50%); }
  .install-ios-modal.is-visible .install-ios-card { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-ANIMATIONEN  (additiv – respektiert bestehende Animationen)
   ───────────────────────────────────────────────────────────────────────────
   • IntersectionObserver setzt `.is-revealed` auf [data-reveal]-Elemente
   • Subtile Loops (Sun-Pulse, Cloud-Drift, Rain-Wiggle) je nach Wetter-Mood
   • Card-Hover (Desktop), Button-Bounce-In, Background-Drift
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Scroll-Reveal ──────────────────────────────────────────────────── */
[data-reveal] {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease-out,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity:   1;
  transform: translateY(0);
}

/* ── 2. Hintergrund-Drift (sehr dezent, 32 s Loop) ─────────────────────── */
@keyframes wd-bg-drift {
  0%, 100% { background-position: 50% 0%; }
  50%       { background-position: 50% 12%; }
}
.sky-bg {
  background-size: 100% 200%;
  animation: wd-bg-drift 32s ease-in-out infinite;
}

/* ── 3. Stimmungs-Tönung am body (sanfter Übergang über 2.5 s) ────────── */
html[data-mood="rain"]  body { background-color: #0a1224; transition: background-color 2.5s ease; }
html[data-mood="snow"]  body { background-color: #0e1626; transition: background-color 2.5s ease; }
html[data-mood="night"] body { background-color: #03030a; transition: background-color 2.5s ease; }
html[data-mood="sun"]   body { background-color: #060816; transition: background-color 2.5s ease; }
html[data-mood="cloud"] body { background-color: #080d1a; transition: background-color 2.5s ease; }

/* ── 4. Wetter-Hauptsymbol (zentrale Kreisscheibe) ─────────────────────
   Loops auf .weather-icon-main – Wrapper behält iconFloat unverändert. */

/* Sonne: leises Pulsieren via drop-shadow */
@keyframes wd-sun-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(255,214,10,0.55))
                     drop-shadow(0 0 22px rgba(255,180,40,0.20)); }
  50%       { filter: drop-shadow(0 0 18px rgba(255,214,10,0.85))
                     drop-shadow(0 0 36px rgba(255,180,40,0.35)); }
}
[data-weather-mood="sun"] .weather-icon-main {
  animation: wd-sun-pulse 4.2s ease-in-out infinite;
}

/* Wolke: minimaler Side-to-Side-Drift */
@keyframes wd-cloud-drift {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(3px); }
}
[data-weather-mood="cloud"] .weather-icon-main {
  animation: wd-cloud-drift 5.5s ease-in-out infinite;
}

/* Regen/Schnee: leichter Wiggle */
@keyframes wd-rain-wiggle {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  25%       { transform: translateY(-1px) rotate(-1deg); }
  75%       { transform: translateY(1px)  rotate(1deg); }
}
[data-weather-mood="rain"] .weather-icon-main,
[data-weather-mood="snow"] .weather-icon-main {
  animation: wd-rain-wiggle 3.8s ease-in-out infinite;
}

/* ── 5. Card-Hover (nur Desktop / Pointer-Geräte) ──────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .section-card {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease,
                border-color 0.32s ease;
  }
  .section-card:hover {
    transform:    translateY(-3px) scale(1.012);
    box-shadow:   0 16px 42px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.10) inset;
    border-color: rgba(255,255,255,0.16);
  }
}

/* ── 6. Buttons: einmaliger Pop beim Erstauftauchen ───────────────────── */
@keyframes wd-btn-bounce-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.btn-icon,
.btn-radar-control,
.location-pill {
  animation: wd-btn-bounce-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.btn-icon:nth-child(2)         { animation-delay: 0.07s; }
.btn-icon:nth-child(3)         { animation-delay: 0.14s; }
.location-pill                 { animation-delay: 0.05s; }
.btn-radar-control             { animation-delay: 0.20s; }
.btn-radar-control:nth-child(2){ animation-delay: 0.27s; }

/* ═══════════════════════════════════════════════════════════════════════════
   STAGGER-SEQUENZ "Aktuelles Wetter"  (Premium-Look)
   Wird über .is-loaded am #current-weather ausgelöst.
   weather.js triggert das nach jedem Render – auch bei Standortwechsel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Vor .is-loaded: alle Inhalte unsichtbar */
.current-weather:not(.is-loaded) > .current-city-name,
.current-weather:not(.is-loaded) > .weather-icon-wrap,
.current-weather:not(.is-loaded) > .current-temp-wrap,
.current-weather:not(.is-loaded) > .current-desc,
.current-weather:not(.is-loaded) > .current-details {
  opacity: 0;
}

/* Sanfter Fade + Slide-Up für Texte */
@keyframes wd-cw-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Icon-Pop: subtiler Scale-Bounce (0.95 → 1.04 → 1) */
@keyframes wd-cw-icon-popin {
  0%   { opacity: 0; transform: scale(0.95); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1);    }
}

/* Sequenz – Reihenfolge & Timing:
   Stadtname  +40 ms
   Icon-Pop   +80 ms (eigene Scale-Animation)
   Temp      +160 ms
   Desc      +290 ms
   Details   +400 ms
   Pills    +480/580/680/780 ms */

.current-weather.is-loaded > .current-city-name,
.current-weather.is-loaded > .current-temp-wrap,
.current-weather.is-loaded > .current-desc,
.current-weather.is-loaded > .current-details {
  animation: wd-cw-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.current-weather.is-loaded > .current-city-name { animation-delay: 0.04s; }
.current-weather.is-loaded > .current-temp-wrap { animation-delay: 0.16s; }
.current-weather.is-loaded > .current-desc      { animation-delay: 0.29s; }
.current-weather.is-loaded > .current-details   { animation-delay: 0.40s; }

/* Icon: eigener Pop-In + bestehende iconFloat-Loop läuft danach weiter */
.current-weather.is-loaded > .weather-icon-wrap {
  animation:
    wd-cw-icon-popin 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both,
    iconFloat 4.5s ease-in-out infinite 0.80s;
}

/* Detail-Pills feiner gestaffelt – 100 ms-Abstand */
@keyframes wd-pill-pop-in {
  0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
.current-weather.is-loaded .current-details .detail-pill {
  animation: wd-pill-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.current-weather.is-loaded .current-details .detail-pill:nth-child(1) { animation-delay: 0.48s; }
.current-weather.is-loaded .current-details .detail-pill:nth-child(2) { animation-delay: 0.58s; }
.current-weather.is-loaded .current-details .detail-pill:nth-child(3) { animation-delay: 0.68s; }
.current-weather.is-loaded .current-details .detail-pill:nth-child(4) { animation-delay: 0.78s; }

/* ── Reduced-Motion: alle additiven Effekte aus ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sky-bg { animation: none !important; }
  [data-weather-mood="sun"]   .weather-icon-main,
  [data-weather-mood="cloud"] .weather-icon-main,
  [data-weather-mood="rain"]  .weather-icon-main,
  [data-weather-mood="snow"]  .weather-icon-main { animation: none !important; }
  .btn-icon, .btn-radar-control, .location-pill {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .current-weather:not(.is-loaded) > *,
  .current-weather.is-loaded      > *,
  .current-weather.is-loaded .detail-pill {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS (zusätzlich zu bestehenden Animationen)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Smooth Page Load ─────────────────────────────────────────────────
   Body fadet sanft beim ersten Laden ein – verhindert das harte „Aufploppen". */
body {
  opacity:    0;
  transition: opacity 0.45s ease-out;
}
body.is-page-loaded { opacity: 1; }

/* ── 2. Card-Hover stärker (Desktop) – -6 px Lift, Icon reagiert mit ────
   Existierender hover (-3 px) wird hier präzisiert: stärkeres Lift,
   Icon im Inneren skaliert leicht. Trifft NICHT die current-weather-Karte,
   damit deren Stagger-Sequenz in Ruhe bleibt. */
@media (hover: hover) and (pointer: fine) {
  .section-card:not(:has(#current-weather)):hover {
    transform: translateY(-6px) scale(1.012);
  }
  /* Wetter-Icons in Stunden-Cards reagieren auf Hover der Stunde */
  .hour-item                   { transition: transform 0.30s cubic-bezier(0.22,1,0.36,1); }
  .hour-item .hour-icon        { transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); }
  .hour-item:hover .hour-icon  { transform: scale(1.18) rotate(2deg); }
  /* Icon innerhalb von Karten: leichte Reaktion beim Card-Hover */
  .section-card .day-icon      { transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); }
  .day-item:hover .day-icon    { transform: scale(1.12) rotate(-2deg); }
}

/* ── 3. Button-Active-Feedback (alle interaktiven Buttons) ────────────── */
button {
  transition: transform 0.12s ease, opacity 0.15s ease;
}
button:active:not(:disabled) {
  transform: scale(0.96);
}
/* Spezial-Buttons mit eigenem Active-Scale (bestehend) bleiben unangetastet
   durch höhere Specificity der existierenden Regeln */

/* ── 4. Count-Up: monospace-tabular für Zahlen-Sprung-Stabilität ──────── */
#current-temp,
#current-feels,
#current-humidity,
#current-wind,
#current-uv {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
       font-feature-settings: "tnum";
}

/* ── 5. Reduced Motion: Body-Fade aus ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body                          { opacity: 1 !important; transition: none !important; }
  .section-card:hover           { transform: none !important; }
  .hour-item:hover .hour-icon,
  .day-item:hover .day-icon     { transform: none !important; }
  button:active:not(:disabled)  { transform: none !important; }
}