/* Himmel – Design-System 2.0 (Glas, Inter, 4-px-Raster) */
@font-face{ font-family: "Inter"; font-style: normal; font-display: block; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family: "Inter"; font-style: normal; font-display: block; font-weight: 100 900; src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"), url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  /* Abstände (4-px-Raster) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  /* Radien */
  --r-card: 24px; --r-in: 14px; --r-pill: 999px;
  /* Farben */
  --txt: #fff; --mut: rgba(255,255,255,.68); --faint: rgba(255,255,255,.42); --line: rgba(255,255,255,.12);
  --glass: rgba(255,255,255,.085); --glass-hi: rgba(255,255,255,.14); --glass-b: rgba(255,255,255,.13);
  --accent: #7cc4ff; --rain: #5fb4ff; --warn1: #ffd54a; --warn2: #ffa53a; --warn3: #ff5a4e; --warn4: #c03ad6;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ background: #0d1a36; color-scheme: dark; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
body{ margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--txt); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
html[lang="ar"] body{ font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, var(--font); }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a{ color: #cfe6ff; text-decoration-color: rgba(207,230,255,.4); }
h2,h3,p{ margin: 0; }
.num, .big, .dlo, .dhi, .ht, .hv{ font-variant-numeric: tabular-nums; }
.ui{ width: 1em; height: 1em; flex: none; }
.wi{ display: block; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

/* Hintergrund */
#sky{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -2; display: block; background: var(--skybg, #0d1a36); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; }
.shade{ position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.12) 100%), linear-gradient(180deg, rgba(4,10,28,.05), rgba(4,10,28,0) 28%, rgba(4,10,28,.22) 62%, rgba(4,10,28,.42)); }
html[data-sky="snow"][data-phase="day"] .shade, html[data-sky="fog"][data-phase="day"] .shade, html[data-sky="cloudy"][data-phase="day"] .shade{ background: linear-gradient(180deg, rgba(5,20,48,.22), rgba(5,20,48,.16) 30%, rgba(5,20,48,.34) 70%, rgba(5,20,48,.5)); }

/* Kopfzeile */
.top{ position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: calc(var(--safe-t) + var(--s3)) var(--s4) var(--s3); transition: background .35s, box-shadow .35s; }
.top::before{ content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: rgba(12,22,46,.42); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border-bottom: 1px solid rgba(255,255,255,.08); }
body.scrolled .top::before{ opacity: 1; }
.locbtn{ min-width: 0; flex: 0 1 auto; max-width: calc(100% - 150px); display: flex; }
.chip{ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.chip .ui{ font-size: 14px; color: var(--accent); }
.chip.gps .ui{ color: #7fd8ff; }
.chip.fallback{ background: rgba(255,190,80,.16); border-color: rgba(255,200,110,.35); }
.chip.fallback .ui{ color: #ffcf6e; }
.chip .spin{ width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.mini{ position: absolute; left: 50%; bottom: 14px; translate: -50% 0; max-width: calc(100% - 200px); overflow: hidden; display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; white-space: nowrap; }
.mini .wi{ width: 26px; height: 26px; }
.mini .mt{ font-weight: 500; color: var(--mut); }
body.scrolled .mini{ opacity: 1; transform: none; }
body.scrolled .locbtn .chip{ opacity: 0; pointer-events: none; }
.locbtn .chip{ transition: opacity .25s; }
.actions{ flex: none; display: flex; gap: var(--s2); }
.ibtn{ height: 38px; min-width: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .15s, background .2s; }
.ibtn:active{ transform: scale(.94); background: rgba(255,255,255,.2); }
.ibtn svg{ width: 19px; height: 19px; }
.ibtn .ui{ font-size: 19px; }
.langbtn b{ font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.langbtn .gl .ui{ font-size: 17px; }

/* Pull-to-refresh */
.ptr{ position: fixed; top: calc(var(--safe-t) + 8px); left: 50%; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--r-pill); background: rgba(14,24,48,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px; font-weight: 600; transform: translate(-50%, -80px); opacity: 0; pointer-events: none; }
.ptr-ring{ width: 18px; height: 18px; border-radius: 50%; border: 2.2px solid rgba(255,255,255,.25); border-top-color: #fff; transform: rotate(calc(var(--p, 0) * 300deg)); }
.ptr.go .ptr-ring{ animation: spin .8s linear infinite; }
.ptr.anim{ transition: transform .3s var(--ease), opacity .3s; }

/* Layout */
.app{ max-width: 1120px; margin: 0 auto; padding: 0 var(--s4) calc(var(--safe-b) + var(--s8)); }

/* Hero */
.hero{ text-align: center; padding: var(--s4) 0 var(--s8); display: flex; flex-direction: column; align-items: center; }
.hero-place{ display: inline-flex; align-items: center; gap: 4px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; max-width: 100%; text-shadow: 0 1px 14px rgba(0,0,0,.18); }
.hero-place > span:first-child{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-place .chev .ui{ font-size: 22px; opacity: .7; }
.hero-temp{ position: relative; display: inline-flex; align-items: flex-start; font-size: clamp(104px, 33vw, 148px); font-weight: 150; line-height: 1; letter-spacing: -.05em; margin: var(--s1) 0 0; padding-inline-start: .26em; text-shadow: 0 6px 40px rgba(0,0,0,.16); }
.hero-temp .deg{ font-size: .62em; line-height: 1.05; font-weight: 200; opacity: .9; letter-spacing: 0; }
.hero-cond{ display: inline-flex; align-items: center; gap: var(--s2); font-size: 20px; font-weight: 550; margin-top: var(--s1); }
.hero-ico .wi{ width: 40px; height: 40px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.18)); }
.hero-sub{ margin-top: var(--s2); font-size: 15px; font-weight: 500; color: var(--mut); display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.hero-sub b{ color: #fff; font-weight: 600; }
.hero-sub .sep{ width: 4px; height: 4px; border-radius: 50%; background: var(--faint); align-self: center; }
html:not(.cached) body:not(.skel) .hero > *{ animation: heroIn .8s var(--ease) both; }
body:not(.skel) .hero > :nth-child(2){ animation-delay: .05s; } body:not(.skel) .hero > :nth-child(3){ animation-delay: .1s; } body:not(.skel) .hero > :nth-child(4){ animation-delay: .15s; }
@keyframes heroIn{ from{ opacity: 0; transform: translateY(10px); } }

/* Raster */
.grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.c1, .c2, .c4{ grid-column: 1 / -1; }
@media (min-width: 900px){
  .grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
  .c1{ grid-column: span 1; } .c2{ grid-column: span 2; } .c4{ grid-column: 1 / -1; }
  #hourCard{ order: -2; } #summaryCard{ order: -3; } #wearCard, #bestCard{ order: -3; }
  .grid{ grid-auto-flow: row dense; }
  #dayCard{ grid-row: span 3; }
  #rainCard{ order: -1; } #dayCard{ order: -1; }
  .hero{ padding-top: var(--s6); }
}

/* Karten */
.card, .tile{ position: relative; background: var(--glass); border: 1px solid var(--glass-b); border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s4);
  backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 32px -12px rgba(0,8,30,.35); overflow: hidden; }
.card::after, .tile::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%); }
.eyebrow{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); margin-bottom: var(--s3); }
html[lang="ar"] .eyebrow{ letter-spacing: 0; font-size: 13px; }
.eyebrow .ui{ font-size: 15px; opacity: .9; }
.eyebrow::after{ content: ""; flex: 1; height: 1px; background: var(--line); margin-inline-start: 6px; }
.tile .eyebrow::after{ display: none; }
.muted{ color: var(--mut); } .small{ font-size: 13px; } .center{ text-align: center; } .end{ text-align: end; }

/* Reveal */
.reveal{ opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity: 1; transform: none; }

/* Skeleton */
.sk{ display: block; height: 14px; border-radius: 7px; margin: 8px 0; background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.08) 75%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.sk.w100{ width: 100%; } .sk.w90{ width: 90%; } .sk.w80{ width: 80%; } .sk.w70{ width: 70%; } .sk.w60{ width: 60%; } .sk.tall{ height: 150px; width: 100%; border-radius: 16px; }
@keyframes shimmer{ from{ background-position: 100% 0; } to{ background-position: -200% 0; } }
body.skel #heroTemp{ display: inline-block; width: 2.1ch; height: .82em; margin-top: .1em; border-radius: 22px; background: linear-gradient(90deg, rgba(255,255,255,.1) 25%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.1) 75%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
body.skel .hero-temp .deg{ visibility: hidden; }
body.skel #heroCond, body.skel #heroSub, body.skel #locName{ display: inline-block; min-width: 9em; height: 1em; border-radius: 8px; background: rgba(255,255,255,.12); animation: pulse 1.4s ease-in-out infinite; }
body.skel #locName{ min-width: 6em; } body.skel #heroSub{ min-width: 12em; }
body.skel .tile{ min-height: 150px; } body.skel .tile.c2{ min-height: 120px; }
body.skel .tile::before{ content: ""; position: absolute; left: 16px; right: 40%; top: 18px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.12); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity: .45; } }

/* Warnungen */
.warnings{ display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.warnings:empty{ display: none; }
.warn{ position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4) var(--s3) var(--s3); border-radius: 20px; text-align: start; background: rgba(30,18,10,.38); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); overflow: hidden; animation: warnIn .7s var(--ease) both; }
.warn::before{ content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--wc); }
.warn .wico{ width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--wc) 24%, transparent); color: var(--wc); }
.warn .wico .ui{ font-size: 22px; }
.warn b{ display: block; font-size: 15px; font-weight: 650; line-height: 1.3; }
.warn small{ display: block; font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.warn .wgo .ui{ font-size: 20px; opacity: .6; }
html[dir="rtl"] .warn .wgo{ transform: scaleX(-1); }
.sev-minor{ --wc: var(--warn1); } .sev-moderate{ --wc: var(--warn2); } .sev-severe{ --wc: var(--warn3); } .sev-extreme{ --wc: var(--warn4); }
@keyframes warnIn{ from{ opacity: 0; transform: translateY(-8px); } }

/* Dein Tag / Anziehen / Beste Zeit */
.summary-text{ font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -.005em; }
.wear-ico{ display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.wear-ico span{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 48px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; font-weight: 600; }
.wear-ico .ui{ font-size: 22px; color: #ffe08a; }
.wear-ico span.ex .ui{ color: var(--accent); }
.wear-text{ font-size: 14.5px; color: var(--mut); line-height: 1.5; }
.wear-text b{ color: #fff; font-weight: 600; }
.best-text{ font-size: 14.5px; color: var(--mut); }
.best-text .bt{ display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #fff; margin-bottom: 4px; }

/* Regen 2 Std. */
.rain-head{ font-size: 17px; font-weight: 600; margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.rain-head .ui{ font-size: 20px; color: var(--accent); flex: none; }
.rainchart svg{ width: 100%; height: auto; display: block; overflow: visible; }
.rainchart text{ fill: var(--faint); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.rainchart .axis text{ fill: var(--mut); font-size: 11px; }
#rainCard.dry .rain-area{ opacity: .3; }

/* Stunden */
.hscroll{ overflow-x: auto; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); scrollbar-width: none; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
.hscroll::-webkit-scrollbar{ display: none; }
.hourly{ position: relative; height: 206px; }
.hourly > svg{ position: absolute; inset: 0; overflow: visible; }
.hcol .hi .wi{ width: 32px; height: 32px; }
.hcol{ position: absolute; top: 0; width: 56px; height: 100%; display: flex; flex-direction: column; align-items: center; scroll-snap-align: start; }
.hcol .ht{ font-size: 12.5px; font-weight: 600; color: var(--mut); height: 18px; }
.hcol.now .ht{ color: #fff; }
.hcol .hi{ width: 32px; height: 32px; margin-top: 10px; }
.hcol .ev{ position: absolute; top: 64px; font-size: 10.5px; font-weight: 700; color: #ffd27a; white-space: nowrap; }
.hcol .dm{ position: absolute; top: -1px; inset-inline-start: -10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.18); }
.hourly .tl{ fill: #fff; font-size: 13.5px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; }
.hourly .pl{ fill: #9fd4ff; font-size: 11px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; }
.hourly .nowbg{ fill: rgba(255,255,255,.08); }

/* 10 Tage */
.daily{ display: grid; }
.drow{ border-top: 1px solid var(--line); }
.drow:first-child{ border-top: 0; }
.drow summary{ list-style: none; display: grid; grid-template-columns: minmax(72px, 1.1fr) 34px 40px 34px minmax(70px, 2fr) 34px; align-items: center; gap: var(--s2); min-height: 52px; cursor: pointer; }
.drow summary::-webkit-details-marker{ display: none; }
.dn{ font-weight: 600; font-size: 15px; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di .wi{ width: 32px; height: 32px; }
.dp{ font-size: 12px; font-weight: 700; color: #cdeaff; text-align: center; }
.dlo{ color: var(--mut); text-align: end; font-weight: 500; }
.dhi{ font-weight: 600; text-align: start; }
.dbar{ position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.dbar i{ position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.dbar .dot{ position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid rgba(10,20,40,.5); transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.dmore{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); padding: 2px 0 var(--s3); animation: heroIn .35s var(--ease); }
.dmore span{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mut); padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.dmore span .ui{ font-size: 16px; color: var(--accent); }
.dmore .full{ grid-column: 1 / -1; color: #fff; font-weight: 600; }
.drow[open] summary .dn{ color: var(--accent); }

/* Detail-Kacheln */
.tile{ min-height: 168px; display: flex; flex-direction: column; padding: var(--s4); }
.tile .eyebrow{ margin-bottom: var(--s2); }
.big{ font-size: 34px; font-weight: 550; letter-spacing: -.03em; line-height: 1.1; }
.big small{ font-size: 15px; font-weight: 500; color: var(--mut); letter-spacing: 0; margin-inline-start: 2px; }
.lbl{ font-size: 15px; font-weight: 600; margin-top: 2px; }
.tile .foot-note{ margin-top: auto; padding-top: var(--s2); font-size: 12.5px; color: var(--mut); line-height: 1.4; }
.scale{ position: relative; height: 6px; border-radius: 3px; margin: var(--s3) 0 var(--s1); }
.scale b{ position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(0,0,0,.25); }
.uvs{ background: linear-gradient(90deg, #5bd16a, #f3e04b 30%, #ff9f3a 55%, #ff4f4f 75%, #b65cff); }
.aqs{ background: linear-gradient(90deg, #50e3c2, #5bd16a 20%, #f3e04b 40%, #ff9f3a 60%, #ff4f4f 80%, #9a3cff); }
.compass{ width: 80px; height: 80px; flex: none; }
.compass text{ fill: var(--mut); font-size: 9px; font-weight: 700; font-family: var(--font); }
.needle{ transform-origin: 46px 46px; transition: transform 1.2s var(--ease); }
.windrow{ display: flex; align-items: center; gap: var(--s3); flex: 1; }
.hum-viz{ display: flex; gap: 3px; align-items: flex-end; height: 34px; margin-top: var(--s2); }
.hum-viz i{ flex: 1; border-radius: 3px; background: rgba(255,255,255,.14); }
.hum-viz i.on{ background: linear-gradient(180deg, #8fd3ff, #3d9cf5); }
.gauge{ width: 100%; max-width: 150px; display: block; margin: 0 auto -6px; }
.thermo{ position: relative; height: 6px; border-radius: 3px; margin: var(--s3) 0 var(--s1); background: linear-gradient(90deg, #6aa8ff, #77e0d0 35%, #ffe066 60%, #ff7a50); }
.thermo b{ position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(0,0,0,.25); }
.thermo b.real{ background: rgba(255,255,255,.45); width: 8px; height: 8px; }
.thermo b.feel{ background: #fff; }
.vis-viz{ display: flex; gap: 4px; margin-top: var(--s3); }
.vis-viz i{ flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); }
.vis-viz i.on{ background: rgba(255,255,255,.85); }
.sunarc{ width: 100%; height: auto; display: block; margin: var(--s1) 0; }
.sunrow{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s2); }
.sunrow small{ display: block; font-size: 12px; color: var(--mut); }
.sunrow b{ font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sunrow .mid{ text-align: center; font-size: 12.5px; color: var(--mut); }
.sunrow .mid b{ display: block; font-size: 13px; color: #ffe08a; font-weight: 600; }
.aqrow{ display: flex; align-items: center; gap: var(--s4); }
.pills{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.pills span{ display: grid; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: 11.5px; color: var(--mut); }
.pills b{ font-size: 16px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.pol{ display: grid; gap: 10px; margin-top: var(--s1); }
.pol .pr{ display: grid; grid-template-columns: 84px 1fr 72px; align-items: center; gap: var(--s3); font-size: 13.5px; }
.pol .pb{ height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.pol .pb i{ position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; background: linear-gradient(90deg, #7ee08a, #f3e04b, #ff8a3a, #ff4f4f); background-size: 400px 100%; }
.pol .pv{ font-size: 12.5px; color: var(--mut); text-align: end; }

/* Fußzeile */
.foot{ text-align: center; padding: var(--s8) var(--s2) 0; font-size: 12px; color: var(--mut); line-height: 1.6; }
.refresh{ display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-size: 13px; font-weight: 600; margin-bottom: var(--s3); }
.refresh .ui{ font-size: 16px; }
.refresh.off{ background: rgba(255,170,60,.2); border-color: rgba(255,190,90,.4); }
body.loading .refresh .ui{ animation: spin .9s linear infinite; }
.foot .lic{ opacity: .7; margin-top: 4px; }

/* Sheets */
.sheet-bg{ position: fixed; inset: 0; background: rgba(0,4,16,.45); z-index: 40; opacity: 0; transition: opacity .28s; }
.sheet-bg.open{ opacity: 1; }
.sheet{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 560px; margin: 0 auto; max-height: 88vh; overflow: auto; padding: var(--s2) var(--s5) calc(var(--safe-b) + var(--s6)); border-radius: 28px 28px 0 0; background: rgba(20,28,48,.86); backdrop-filter: blur(32px) saturate(1.6); -webkit-backdrop-filter: blur(32px) saturate(1.6); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; transform: translateY(100%); transition: transform .34s var(--ease); box-shadow: 0 -20px 60px rgba(0,0,0,.35); }
.sheet.open{ transform: none; }
.sheet.tall{ min-height: 72vh; }
.grab{ width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 4px auto 14px; }
.sh-title{ font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin-bottom: var(--s3); display: flex; align-items: center; gap: 8px; }
.sh-title .ui{ font-size: 22px; }
.sheet h3{ margin: var(--s4) 0 var(--s1); font-size: 15px; }
.sheet p{ line-height: 1.55; margin-bottom: var(--s2); }
.warn-sev{ display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: #1a1000; background: var(--wc); }
.sinput{ width: 100%; font: inherit; font-size: 16px; color: #fff; height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); outline: none; margin-bottom: var(--s3); }
.sinput:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,196,255,.2); }
.gpsrow{ display: grid; grid-template-columns: 32px 1fr; align-items: center; width: 100%; text-align: start; padding: 12px 14px; border-radius: 14px; background: rgba(80,170,255,.14); border: 1px solid rgba(124,196,255,.28); margin-bottom: var(--s2); }
.gpsrow .ui{ font-size: 20px; color: var(--accent); }
.gpsrow small{ grid-column: 2; color: #ffd27a; font-size: 12px; }
.gpsrow.on{ background: rgba(80,170,255,.26); }
.sheet .eyebrow{ margin: var(--s4) 0 var(--s2); }
.prow{ display: flex; align-items: center; border-radius: 14px; background: rgba(255,255,255,.06); margin-bottom: 6px; }
.pmain{ flex: 1; text-align: start; padding: 11px 14px; display: grid; }
.pmain small{ color: var(--mut); font-size: 12.5px; }
.star{ width: 48px; height: 48px; display: grid; place-items: center; color: rgba(255,255,255,.55); }
.star .ui{ font-size: 20px; }
.star.on{ color: #ffd34d; } .star.on .ui{ fill: currentColor; }
.langs{ display: grid; gap: 6px; }
.langs button{ display: grid; grid-template-columns: 34px 1fr auto; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: start; font-size: 16px; }
.langs button.on{ background: rgba(80,170,255,.24); box-shadow: inset 0 0 0 1px rgba(124,196,255,.45); }
.langs em{ font-style: normal; color: var(--mut); font-size: 12px; font-weight: 700; }
.toast{ position: fixed; left: 50%; bottom: calc(var(--safe-b) + 20px); transform: translate(-50%, 20px); opacity: 0; transition: .3s var(--ease); z-index: 60; padding: 11px 16px; border-radius: 14px; background: rgba(16,22,38,.92); border: 1px solid rgba(255,255,255,.1); font-size: 14px; max-width: 90vw; }
.toast.on{ opacity: 1; transform: translate(-50%, 0); }

/* Icon-Animationen (nur Hero) */
.anim .w-sun{ animation: sunSpin 40s linear infinite; }
.anim .w-drop{ animation: dropFall 1.6s ease-in infinite; }
.anim .w-flake{ animation: flakeFall 3s ease-in-out infinite; }
.anim .w-bolt{ animation: boltFlash 4s ease-in-out infinite; }
.anim .w-fog{ animation: fogMove 5s ease-in-out infinite alternate; }
@keyframes sunSpin{ to{ transform: rotate(360deg); } }
@keyframes dropFall{ 0%{ transform: translateY(-3px); opacity: 0; } 30%{ opacity: 1; } 100%{ transform: translateY(6px); opacity: 0; } }
@keyframes flakeFall{ 0%{ transform: translateY(-3px); opacity: 0; } 30%{ opacity: 1; } 100%{ transform: translateY(5px); opacity: 0; } }
@keyframes boltFlash{ 0%, 82%, 100%{ opacity: 1; } 86%{ opacity: .3; } 90%{ opacity: 1; } 94%{ opacity: .5; } }
@keyframes fogMove{ to{ transform: translateX(3px); } }

/* Tablet */
@media (min-width: 600px){
  .hero-place{ font-size: 34px; }
  .card, .tile{ padding: var(--s5); }
}
@media (min-width: 900px){
  .tile{ min-height: 180px; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal{ opacity: 1; transform: none; }
}

#tWind .big{ font-size: 28px; }
#tWind .big small{ font-size: 13px; }
.mini .mt{ overflow: hidden; text-overflow: ellipsis; }
.hero-temp{ direction: ltr; padding-inline-start: 0; padding-left: .26em; }
html[dir="rtl"] .hero-place .chev{ order: -1; }

/* ---- Flackerschutz (iOS/WebKit) ---- */
body{ overscroll-behavior-y: none; }
.shade{ transform: translateZ(0); }
/* Mit gespeicherten Daten: keine Skelette und kein erneutes Einblenden beim Start/Neuladen */
html.cached body.skel .app{ opacity: 0; }
html.cached .warn{ animation: none; }
.shade{ bottom: auto; height: 100vh; height: 100lvh; }