/* wetter3 – Design "Himmelsblick" – Design-Tokens + Basis-Komponenten
   Standard = klarer Tageshimmel. Die Wetterlage/Tageszeit wird über EINE Klasse am <body>
   gewählt (sky-night | sky-cloudy | sky-fog | sky-rain | sky-snow | sky-storm).
   Ohne Klasse gilt der Tageshimmel. Nacht und Gewitter sind "dunkle" Varianten
   (komplett überschriebene Farbpalette), alle anderen "helle" Varianten (nur anderer Hintergrund). */
:root {
  /* ---- Farben (Tag) ---- */
  --color-primary: #1F5FBF;          /* Himmelblau (kräftig) – Buttons, Links, Fokus */
  --color-primary-hover: #174A96;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0B3B66;        /* Tiefes Wetterblau – Überschriften, Zweitaktionen */
  --color-accent: #F5B83D;           /* Sonnengelb – NUR dekorativ (Sonne, Zeit-Linie, Badge-Rand), nie als Textfarbe */
  --color-accent-soft: #FFF1CF;
  --color-bg: #EAF3FB;
  --color-surface: #FFFFFF;
  --color-text: #0F2238;
  --color-text-muted: #34495F;
  --color-border: #748CA8;           /* >= 3:1 gegen Fläche (Eingabefelder, WCAG 1.4.11) */
  --color-success: #1B7F4B;
  --color-warning: #8F5B00;
  --color-error: #B3261E;

  /* ---- Schrift (nur lokale System-Schriften, keine Web-Fonts/CDNs) ---- */
  --font-heading: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: 2.5rem;
  --fs-clock: clamp(3rem, 12vw, 6.5rem);   /* Uhrzeit */
  --fs-temp: clamp(3.5rem, 14vw, 5.5rem);  /* Temperatur */
  --fw-light: 300; --fw-normal: 400; --fw-medium: 600; --fw-bold: 800;

  /* ---- Abstände, Radien, Schatten, Übergänge ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 59, 102, .08);
  --shadow: 0 8px 28px rgba(11, 59, 102, .14);
  --shadow-lg: 0 18px 48px rgba(11, 59, 102, .22);
  --transition: 180ms ease;
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-primary);

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-blur: blur(14px) saturate(140%);

  /* ---- Himmel-Hintergründe (nicht gekachelt) ---- */
  --sky-day:
    radial-gradient(circle at 88% 6%, rgba(245, 184, 61, .45) 0, rgba(245, 184, 61, 0) 260px),
    linear-gradient(180deg, #A9D2F5 0%, #D4E8F8 45%, #EAF3FB 100%);
  --sky-night:
    radial-gradient(1.5px 1.5px at 12% 14%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 31% 7%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 54% 18%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 73% 9%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 93% 22%, rgba(255,255,255,.75), transparent),
    radial-gradient(circle at 90% 8%, rgba(214, 226, 255, .22) 0, rgba(214, 226, 255, 0) 240px),
    linear-gradient(180deg, #0B1730 0%, #14284D 55%, #1E3A66 100%);
  --sky-cloudy:
    radial-gradient(circle at 88% 4%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 280px),
    linear-gradient(180deg, #BCCAD8 0%, #D2DCE6 50%, #E4EAF0 100%);
  --sky-fog:
    linear-gradient(180deg, #D5DCE3 0%, #E3E8ED 50%, #EEF1F4 100%);
  --sky-rain:
    repeating-linear-gradient(105deg, rgba(255,255,255,.07) 0 2px, rgba(255,255,255,0) 2px 22px),
    linear-gradient(180deg, #AABBCC 0%, #C0CEDB 50%, #D3DEE8 100%);
  --sky-snow:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 320px),
    linear-gradient(180deg, #C9DAEA 0%, #E2ECF5 50%, #F4F8FC 100%);
  --sky-storm:
    radial-gradient(circle at 80% 10%, rgba(245, 184, 61, .16) 0, rgba(245, 184, 61, 0) 220px),
    linear-gradient(180deg, #1F2733 0%, #323E50 55%, #435269 100%);
  --bg-page: var(--sky-day);
}

/* ================= Wetterlagen / Tageszeit (Klasse am <body>) ================= */
body.sky-cloudy { --bg-page: var(--sky-cloudy); }
body.sky-fog    { --bg-page: var(--sky-fog); }
body.sky-rain   { --bg-page: var(--sky-rain); }
body.sky-snow   { --bg-page: var(--sky-snow); }

/* Dunkle Varianten: eigene Palette, damit Text/Karten/Felder konsistent bleiben */
body.sky-night {
  --bg-page: var(--sky-night);
  --color-primary: #8DBBFF; --color-primary-hover: #B3D1FF; --color-on-primary: #0A1B33;
  --color-secondary: #C6DBFF; --color-accent: #F5B83D; --color-accent-soft: #3D3A2C;
  --color-bg: #0B1730; --color-surface: #14233F;
  --color-text: #EAF2FF; --color-text-muted: #B4C4DA; --color-border: #5C7399;
  --color-success: #5AD08C; --color-warning: #F2B84B; --color-error: #FF9088;
  --glass-bg: rgba(16, 30, 56, .76); --glass-border: rgba(160, 190, 240, .28);
  --shadow: 0 8px 28px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}
body.sky-storm {
  --bg-page: var(--sky-storm);
  --color-primary: #9CC4FF; --color-primary-hover: #C2DAFF; --color-on-primary: #0E1622;
  --color-secondary: #D3E2FA; --color-accent: #F5B83D; --color-accent-soft: #433B26;
  --color-bg: #1F2733; --color-surface: #2A3446;
  --color-text: #F2F6FB; --color-text-muted: #C3CEDD; --color-border: #6F819C;
  --color-success: #62D494; --color-warning: #F2B84B; --color-error: #FF9A92;
  --glass-bg: rgba(31, 39, 51, .78); --glass-border: rgba(180, 200, 230, .28);
  --shadow: 0 8px 28px rgba(0, 0, 0, .4); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}

/* ================= Basis ================= */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-text); font-size: var(--fs-base); line-height: 1.55;
  color: var(--color-text); min-height: 100vh;
  background-color: var(--color-bg); background-image: var(--bg-page);
  background-repeat: no-repeat; background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; margin: 0 0 var(--space-3); color: var(--color-secondary); }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px 22px; border-radius: var(--radius-pill); border: 2px solid transparent;
  font: inherit; font-weight: var(--fw-medium); cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled:hover { background: var(--color-primary); }
.btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-accent-soft); border-color: var(--color-primary-hover); color: var(--color-primary-hover); }
.btn-secondary:disabled:hover { background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--glass-bg); box-shadow: none; }
.btn-ghost:disabled:hover { background: transparent; }

/* ================= Karte (Glas) ================= */
.card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow);
}

/* ================= Eingabefeld ================= */
.input {
  width: 100%; min-height: 44px; padding: 10px 16px; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-pill);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover { border-color: var(--color-primary); }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input:disabled { opacity: .55; cursor: not-allowed; background: var(--color-bg); }
.input[aria-invalid="true"] { border-color: var(--color-error); }

/* ================= Badge / Alert ================= */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 12px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  background: var(--color-accent-soft); color: var(--color-text); border: 1px solid var(--color-accent);
}
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-left: 6px solid var(--color-primary);
}
.alert-info    { border-left-color: var(--color-primary); }
.alert-success { border-left-color: var(--color-success); }
.alert-warning { border-left-color: var(--color-warning); }
.alert-error   { border-left-color: var(--color-error); }

/* ================= Responsiv / Bewegung ================= */
@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .card { padding: var(--space-4); border-radius: var(--radius); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }