/* ============================================================
   Wetterstation – Handy-Ansicht (mobile.php)
   Touch-optimiert, Bottom-Navigation, Hell-/Dunkel-Modus.
   ============================================================ */
:root {
  --bg-0:#0a0f1a; --bg-1:#0f1623;
  --bg-grad: radial-gradient(900px 700px at 70% -10%, #1c2f52 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  --card: rgba(24,34,51,0.66); --card-2: rgba(28,39,56,0.55);
  --line: rgba(120,150,190,0.18); --line-strong: rgba(120,150,190,0.32);
  --txt:#e9eff8; --txt-2:#aebbcf; --mut:#7f8da6;
  --acc:#4ea1ff; --ok:#36d399; --warn:#fbbd23; --danger:#f87272;
  --radius:16px; --radius-s:12px;
  --chart-grid: rgba(120,150,190,0.12); --chart-tick:#aebbcf;
  --nav-h: 64px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-theme="light"] {
  --bg-0:#dde6f1; --bg-1:#eef3f9;
  --bg-grad: radial-gradient(900px 700px at 70% -10%, #cfe0f5 0%, #e7eef7 55%, #dde6f1 100%);
  --card: rgba(255,255,255,0.82); --card-2: rgba(255,255,255,0.66);
  --line: rgba(40,70,110,0.16); --line-strong: rgba(40,70,110,0.28);
  --txt:#14233a; --txt-2:#41546e; --mut:#6b7a92;
  --chart-grid: rgba(40,70,110,0.14); --chart-tick:#41546e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; }
body {
  font-family: var(--font); color: var(--txt);
  background: var(--bg-grad); background-attachment: fixed;
  -webkit-font-smoothing: antialiased; line-height: 1.4;
}

.m-app { min-height:100%; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* ---------- Kopfzeile ---------- */
.m-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: color-mix(in srgb, var(--bg-1) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.m-name { font-size: 17px; font-weight: 700; }
.m-loc { font-size: 12px; color: var(--mut); }
.m-head-right { display: flex; align-items: center; gap: 10px; }
.m-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-2); }
.m-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mut); }
.m-dot.online { background: var(--ok); box-shadow: 0 0 0 4px rgba(54,211,153,.16); }
.m-dot.offline { background: var(--danger); }
.m-icon-btn {
  border: 1px solid var(--line); background: var(--card-2); color: var(--txt);
  font-size: 18px; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.m-banner { display:none; margin: 10px 14px 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(248,114,114,.16); border: 1px solid rgba(248,114,114,.4); color: var(--txt); font-size: 13px; }
.m-banner.show { display: block; }

/* ---------- Views ---------- */
.m-views { padding: 14px; }
.m-view { display: none; animation: fade .2s ease; }
.m-view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.m-h { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-2); margin: 2px 0 12px; }

/* ---------- Hero (Jetzt) ---------- */
.m-hero { text-align: center; padding: 8px 0 18px; }
.m-wxicon { font-size: 64px; line-height: 1; }
.m-temp { font-size: 76px; font-weight: 800; letter-spacing: -2px; line-height: 1; margin-top: 4px; }
.m-temp .deg { font-size: 40px; color: var(--txt-2); font-weight: 600; }
.m-feels { color: var(--txt-2); margin-top: 4px; }
.m-tendency { margin-top: 8px; font-weight: 600; color: var(--acc); }

.m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.m-cell { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; }
.m-cell .l { font-size: 12px; color: var(--txt-2); }
.m-cell .v { font-size: 22px; font-weight: 700; margin-top: 4px; }

.m-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-top: 12px; }
.m-card .t { font-size: 13px; color: var(--txt-2); font-weight: 600; margin-bottom: 10px; }
.m-astro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.m-astro .a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--txt-2); }
.m-astro .a .i { font-size: 17px; }
.m-indoor .row { display: flex; justify-content: space-around; font-size: 22px; font-weight: 700; }

.m-warnings { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.m-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--warn); }
.m-warn.danger { border-left-color: var(--danger); }
.m-warn.info { border-left-color: var(--acc); }
.m-warn .wic { font-size: 20px; }
.m-warn .wt { font-weight: 700; font-size: 14px; }
.m-warn .wd { font-size: 13px; color: var(--txt-2); }

/* ---------- Umschalter (Segmented / Chips) ---------- */
.m-seg { display: flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 3px; }
.m-seg button { flex: 1; border: 0; background: transparent; color: var(--txt-2); font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 6px; border-radius: 999px; cursor: pointer; }
.m-seg button.active { background: var(--acc); color: #fff; }
.m-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chips button { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card-2); color: var(--txt-2);
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.m-chips button.active { border-color: var(--acc); color: var(--txt); background: rgba(78,161,255,.16); }
.m-chartwrap { height: 260px; position: relative; }
.m-info { text-align: center; font-size: 12px; color: var(--mut); margin-top: 10px; }

/* ---------- Archiv ---------- */
.m-datebar { display: flex; align-items: center; gap: 10px; }
.m-datebar input[type="date"] { flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--txt);
  font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 12px; }
.m-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.m-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.m-stat .l { font-size: 11px; color: var(--txt-2); }
.m-stat .v { font-size: 18px; font-weight: 700; margin-top: 2px; }

.m-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.m-btn { display: block; text-align: center; text-decoration: none; padding: 13px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); color: var(--txt); font-weight: 600; }
.m-foot { text-align: center; font-size: 12px; color: var(--mut); margin-top: 16px; }

/* ---------- Bottom-Navigation ---------- */
.m-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.m-tabs button { border: 0; background: transparent; color: var(--mut); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0; height: var(--nav-h); justify-content: center; }
.m-tabs button .ti { font-size: 22px; line-height: 1; filter: grayscale(.3); }
.m-tabs button .tl { font-size: 11px; font-weight: 600; }
.m-tabs button.active { color: var(--acc); }
.m-tabs button.active .ti { filter: none; }

@media (prefers-reduced-motion: reduce) { .m-view { animation: none; } }