/* ============================================================
   weather2.css — Styles der serverseitigen /wetter2-Seite
   Design uebernommen aus dem freigegebenen HTML-Prototyp (v11).
   Alles unter .wx genamespaced, kollidiert nicht mit dem Theme.
   Deploy target: www/assets/css/weather2.css
   ============================================================ */
.wx{
  --wx-ink:#161C24; --wx-paper:#F3F6F8; --wx-card:#FFFFFF; --wx-muted:#5B6672;
  --wx-line:#E6EBF0; --wx-line2:#EEF2F6;
  --wx-rhine:#0E7C86; --wx-rhine-deep:#0A5A62; --wx-rhine-soft:#E0F1F2;
  --wx-sun:#F0A227; --wx-hot:#EC6236; --wx-cold:#4E93D6;
  --wx-brand:#E20714;
  --wx-shadow:0 1px 2px rgba(20,30,45,.04), 0 8px 24px rgba(20,30,45,.06);
  --wx-shadow-lg:0 2px 6px rgba(20,30,45,.05), 0 24px 60px rgba(20,30,45,.10);
  color:var(--wx-ink); line-height:1.45;
  font-variant-numeric:tabular-nums;
  /* Flaches Layout: kein Panel — Karten sitzen direkt auf dem weissen mybasel-Canvas */
}
.wx *{box-sizing:border-box}
.wx h1,.wx h2,.wx h3{margin:0; letter-spacing:-.01em}
.wx .num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.wx .eyebrow{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--wx-muted)}
.wx .card{background:var(--wx-card); border:1px solid var(--wx-line); border-radius:18px; box-shadow:var(--wx-shadow)}

/* ---------- ortswaehler ---------- */
.wx .cities{display:inline-flex; flex-wrap:wrap; gap:4px; background:#EAEEF2; padding:4px; border-radius:999px; margin-bottom:18px}
.wx .cities a, .wx .cities .own-chip{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-weight:600; font-size:14px; color:var(--wx-muted);
  padding:7px 18px; border-radius:999px; transition:.18s;
}
.wx .cities a[aria-current="true"], .wx .cities .own-chip[aria-current="true"]{background:#fff; color:var(--wx-ink); box-shadow:0 1px 3px rgba(20,30,45,.12)}
.wx .cities .own-chip svg{width:13px; height:13px; color:var(--wx-brand); flex:none}
.wx .cities .own-chip button{border:0; background:transparent; color:var(--wx-muted); font-size:15px; line-height:1; cursor:pointer; padding:0 0 0 2px}
.wx .cities .own-chip button:hover{color:var(--wx-brand)}

/* ---------- wetterhinweis (modellbasiert, einzeilig-kompakt) ---------- */
.wx .wx-hint{display:flex; align-items:center; gap:9px; margin-bottom:12px;
  background:#FDF0DC; border:1px solid #F3D9A8; border-radius:999px; padding:5px 14px;
  font-size:12.5px; color:#6B4E14; white-space:nowrap; overflow:hidden}
.wx .wx-hint svg{width:16px; height:16px; color:#B07816; flex:none}
.wx .wx-hint b{font-weight:750}
.wx .wx-hint span{overflow:hidden; text-overflow:ellipsis; min-width:0}
.wx .wx-hint small{margin-left:auto; flex:none; font-size:10.5px; color:#A08652}
@media (max-width:640px){ .wx .wx-hint small{display:none} }

/* nowcast-zeile im hero */
.wx .hero-now{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:10px; background:rgba(255,255,255,.55); border-radius:999px; padding:6px 13px;
  font-size:12.5px; font-weight:650; color:var(--wx-rhine-deep); position:relative}
.wx .hero-now svg{width:14px; height:14px; flex:none; color:var(--wx-rhine)}

/* ---------- hero + sprechblase + webcam ---------- */
.wx .hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:14px; margin-bottom:16px}
.wx .hero-grid.no-side{grid-template-columns:1fr}
@media (max-width:760px){ .wx .hero-grid{grid-template-columns:1fr} }
.wx .hero{
  position:relative; overflow:hidden; border-radius:26px; color:#3a2f1e;
  padding:24px 24px 20px; border:1px solid rgba(255,255,255,.5);
  background:radial-gradient(120% 140% at 88% -20%, #FFE7B8 0%, #FBD2A6 34%, #F3D9CF 60%, #E6EEF5 100%);
  box-shadow:var(--wx-shadow-lg);
  display:flex; flex-direction:column;
}
.wx .hero .glow{
  position:absolute; top:-90px; right:-40px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,130,.95), rgba(255,214,130,0) 68%);
  filter:blur(2px); animation:wxbreathe 8s ease-in-out infinite;
}
@keyframes wxbreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.wx .hero .place{font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; position:relative}
.wx .hero .place .dot{width:7px; height:7px; border-radius:50%; background:var(--wx-brand)}
.wx .hero .when{font-size:12.5px; color:#7a6a4e; margin-top:2px; position:relative}
.wx .hero-main{display:flex; align-items:center; gap:14px; margin:8px 0 0; position:relative}
.wx .hero-temp{font-size:clamp(48px,9vw,72px); font-weight:200; letter-spacing:-.04em; line-height:.92; white-space:nowrap}
.wx .hero-temp sup{font-size:.34em; font-weight:300; top:-.55em; margin-left:.04em; position:relative}
.wx .hero-ico{width:60px; height:60px; color:#F09415; flex:none}
.wx .hero-cond{font-size:17px; font-weight:600; position:relative}
.wx .hero-feels{font-size:13.5px; color:#7a6a4e; position:relative; margin-top:1px}
.wx .hero-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative}
.wx .hero-nav{display:flex; gap:6px}
.wx .hero-nav a{display:grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:rgba(255,255,255,.6); color:var(--wx-brand); text-decoration:none; font-size:14px; font-weight:700}
.wx .hero-nav a.disabled{opacity:.35; pointer-events:none}
/* tageskurve im hero (JS zeichnet in #wx-daycurve) */
.wx .hero-chart{position:relative; margin-top:10px; flex:1; display:flex; flex-direction:column; justify-content:center;
  background:rgba(255,255,255,.5); border-radius:16px; padding:10px 12px 6px}
.wx .hero-chart svg{display:block; width:100%; height:auto}
.wx .hero-chart-readout{font-size:11.5px; color:#7a6a4e; min-height:15px; padding:2px 2px 0}
.wx .hero-chart-readout b{color:#3a2f1e}
.wx .hero-chart-readout .rn{color:var(--wx-rhine)}
.wx .hero-stats{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; position:relative}
.wx .hstat{display:flex; align-items:center; gap:8px; font-size:12.5px; color:#4a3f2c}
.wx .hstat svg{width:16px; height:16px; opacity:.7; flex:none}
.wx .hstat b{font-weight:700}
@media (max-width:560px){
  /* Cards fast randabfallend: volle Viewport-Breite minus 2px, egal welches
     Container-Padding das Theme setzt */
  .wx{margin-left:calc(50% - 50vw + 2px); margin-right:calc(50% - 50vw + 2px)}
  .wx .hero{padding:18px 16px 14px}
  .wx .hero-ico{width:50px;height:50px}
  /* Chartbox randlos mit Minimal-Padding: weisse Box bleibt (Kontrast), Platz maximal */
  .wx .hero-chart{margin:8px -12px 0; padding:3px 2px 0; border-radius:10px}
  .wx .hero-chart-readout{min-height:12px; font-size:10.5px; padding:0 6px 2px}
  .wx .hero-stats{margin-top:10px}
  /* Meteogramm: weniger Innenabstand, Readout kompakt */
  .wx .meteo-wrap{padding:10px 0 4px}
  .wx .meteo-readout{padding:0 10px 6px; font-size:12px}
  .wx .meteo-legend{padding:4px 10px 2px}
}

/* petrol wetter-sprechblase + tipp-buttons */
.wx .sidecol{display:flex; flex-direction:column}
.wx .bubble{position:relative; background:var(--wx-rhine-deep); color:#fff; border-radius:22px;
  padding:18px 14px 14px 20px; box-shadow:var(--wx-shadow-lg)}
.wx .bubble h3{margin:0 0 8px; font-size:18px; letter-spacing:-.015em; line-height:1.28; padding-right:40px}
.wx .bubble .wico{position:absolute; top:16px; right:17px; width:30px; height:30px; color:#fff; opacity:.85}
.wx .bubble p{margin:0; font-size:13.5px; color:#C2DEE1; line-height:1.55}
.wx .bubble p + p{margin-top:8px}
.wx .bubble p b{color:#fff}
.wx .bub-clip{position:relative}
.wx .bub-scroll{max-height:132px; overflow-y:auto; padding-right:10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent}
.wx .bub-scroll::-webkit-scrollbar{width:5px}
.wx .bub-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3); border-radius:3px}
.wx .bub-clip::after{content:""; position:absolute; left:0; right:10px; bottom:0; height:34px; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,90,98,0), var(--wx-rhine-deep)); transition:opacity .25s}
.wx .bub-clip.at-end::after{opacity:0}
/* Mobile: Blase hoeher, damit weniger gescrollt werden muss */
@media (max-width:760px){ .wx .bub-scroll{max-height:240px} }
/* Bruecke zu den Tipps: immer sichtbar am Blasenende, Pfeil zeigt auf die Buttons */
.wx .bub-bridge{display:flex; align-items:center; gap:7px; margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.16); font-size:12.5px; font-weight:700; color:#9BDCE2}
.wx .bub-bridge svg{width:14px; height:14px; flex:none}
.wx .tail{width:26px; height:14px; margin-left:42px; overflow:hidden; flex:none}
.wx .tail::before{content:""; display:block; width:16px; height:16px; background:var(--wx-rhine-deep);
  transform:rotate(45deg) translateY(-12px); margin-left:5px}
.wx .tipbtns{display:flex; flex-direction:column; gap:8px}
.wx .tipbtns a{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--wx-brand); color:#fff; text-decoration:none; font-weight:700; font-size:13.5px;
  padding:11px 15px; border-radius:12px; transition:.15s}
.wx .tipbtns a:hover{background:#F0303B; color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(226,7,20,.25)}
.wx .tipbtns a .arr{flex:none; width:16px; height:16px; opacity:.85}

/* webcam: volle breite unter dem hero (panorama) */
.wx .hero-cam{position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--wx-shadow-lg);
  min-height:230px; background:linear-gradient(160deg,#8FB3C9,#5C7F96 60%,#3F5F74)}
.wx .hero-cam.cam-wide{margin:0 0 16px; aspect-ratio:21/7; min-height:190px}
@media (max-width:760px){ .wx .hero-cam{aspect-ratio:16/9; min-height:0} .wx .hero-cam.cam-wide{aspect-ratio:16/9; min-height:0} }
.wx .hero-cam img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.wx .hero-cam::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 45%)}
.wx .hero-cam .live{position:absolute; top:10px; left:10px; z-index:2; display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.45); color:#fff; font-size:11px; font-weight:700; letter-spacing:.05em; padding:4px 9px; border-radius:999px}
.wx .hero-cam .live i{width:7px;height:7px;border-radius:50%;background:#ff4d4d; animation:wxpulse 1.6s infinite}
@keyframes wxpulse{0%,100%{opacity:1}50%{opacity:.3}}
.wx .hero-cam .clab{position:absolute; left:12px; bottom:11px; z-index:2; color:#fff; font-size:13px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.wx .cam-dots{position:absolute; bottom:12px; right:14px; z-index:3; display:flex; gap:7px}
.wx .cam-dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.45); transition:.15s}
.wx .cam-dots button[aria-pressed="true"]{background:#fff}

/* ---------- sektionen ---------- */
.wx .sec{margin-top:22px}
.wx .sec-head{display:flex; align-items:baseline; justify-content:space-between; margin:0 4px 10px; gap:12px}
.wx .sec-head h2{font-size:16px; font-weight:750}
.wx .sec-note{font-size:12px; color:var(--wx-muted); text-align:right}

/* ---------- meteogramm ---------- */
.wx .meteo-wrap{padding:16px 4px 6px}
.wx .meteo-readout{display:flex; align-items:center; gap:10px; padding:0 14px 8px; min-height:24px; font-size:13px; color:var(--wx-muted); flex-wrap:wrap}
.wx .meteo-readout b{color:var(--wx-ink); font-weight:700}
.wx .meteo-readout .rain{color:var(--wx-rhine)}
.wx .meteo-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:0 8px 6px}
.wx .meteo-scroll svg{display:block}
.wx .meteo-legend{display:flex; gap:16px; padding:6px 16px 2px; font-size:11.5px; color:var(--wx-muted); flex-wrap:wrap}
.wx .meteo-legend span{display:inline-flex; align-items:center; gap:6px}
.wx .meteo-legend i{width:14px; height:3px; border-radius:2px; display:inline-block}

/* ---------- tipps ---------- */
.wx .tips{padding:6px 6px}
.wx .tips a{display:flex; align-items:center; gap:13px; padding:12px 12px; text-decoration:none; color:var(--wx-ink);
  font-size:14.5px; font-weight:550; border-radius:12px; transition:.15s}
.wx .tips a + a{border-top:1px solid var(--wx-line2)}
.wx .tips a:hover{background:var(--wx-rhine-soft)}
.wx .tips .tico{width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; background:#FCE8CF; color:var(--wx-sun)}
.wx .tips .tico.rainy{background:var(--wx-rhine-soft); color:var(--wx-rhine)}
.wx .tips .tico.cloudy{background:#EEF1F4; color:#7B8794}
.wx .tips .tico svg{width:19px; height:19px}
.wx .tips .arr{margin-left:auto; color:var(--wx-muted); flex:none; width:16px; height:16px}

/* ---------- 9-tage-trend ---------- */
.wx .days{padding:6px 6px}
.wx .day-row{display:grid; grid-template-columns:52px 30px 1fr 84px; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  text-decoration:none; color:inherit}
.wx a.day-row:hover{background:var(--wx-line2)}
.wx a.day-row.today:hover{background:var(--wx-rhine-soft)}
.wx .day-row:focus-visible{outline:2px solid var(--wx-brand); outline-offset:-2px}
.wx .day-row + .day-row{border-top:1px solid var(--wx-line2)}
.wx .day-row.today{background:var(--wx-rhine-soft)}
.wx .day-row .dow{font-weight:650; font-size:14px}
.wx .day-row .dico{width:24px; height:24px}
.wx .rangebar{position:relative; height:8px; background:var(--wx-line); border-radius:999px}
.wx .rangebar .fill{position:absolute; top:0; bottom:0; border-radius:999px}
.wx .day-row .temps{display:flex; justify-content:space-between; gap:10px; font-size:14px}
.wx .day-row .tmin{color:var(--wx-muted)} .wx .day-row .tmax{font-weight:700}
@media (max-width:560px){ .wx .day-row{grid-template-columns:46px 26px 1fr 72px; gap:8px} }

/* ---------- region-zone ---------- */
.wx .region-zone{margin-top:34px; padding:16px 14px 14px; border-radius:26px; background:#E9EEF3; border:1px solid var(--wx-line)}
.wx .region-zone .sec{margin-top:18px}
.wx .zone-sub{font-size:12.5px; color:var(--wx-muted); margin:4px 4px 0}

/* ---------- karte ---------- */
/* isolation: eigener Stacking-Context — Leaflet-Panes/-Controls (z-index 400-1000)
   bleiben in der Karte gefangen und legen sich beim Scrollen nicht ueber den Header */
.wx .mapcard{overflow:hidden; isolation:isolate; position:relative; z-index:0}
.wx .map-controls{display:flex; gap:6px; padding:12px 14px; flex-wrap:wrap; border-bottom:1px solid var(--wx-line2)}
.wx .lchip{border:1px solid var(--wx-line); background:#fff; font-size:12.5px; font-weight:600; color:var(--wx-muted);
  padding:6px 13px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; font-family:inherit}
.wx .lchip svg{width:14px;height:14px}
.wx .lchip[aria-pressed="true"]{background:var(--wx-brand); border-color:var(--wx-brand); color:#fff}
/* ortssuche in der karten-kontrollleiste */
.wx .map-search{position:relative; margin-left:auto; flex:1 1 170px; max-width:250px}
.wx .map-search input{width:100%; border:1px solid var(--wx-line); border-radius:999px; padding:6px 14px;
  font-family:inherit; font-size:12.5px; color:var(--wx-ink); background:#fff; outline:none}
.wx .map-search input:focus{border-color:var(--wx-rhine)}
.wx .search-results{display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1100;
  background:#fff; border:1px solid var(--wx-line); border-radius:12px; box-shadow:var(--wx-shadow-lg); overflow:hidden}
.wx .search-results button{display:block; width:100%; text-align:left; border:0; background:#fff; cursor:pointer;
  font-family:inherit; padding:8px 12px}
.wx .search-results button + button{border-top:1px solid var(--wx-line2)}
.wx .search-results button:hover{background:var(--wx-rhine-soft)}
.wx .search-results b{display:block; font-size:12.5px; color:var(--wx-ink)}
.wx .search-results span{display:block; font-size:11px; color:var(--wx-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wx .map-data{display:flex; gap:6px; padding:0 14px 12px; flex-wrap:wrap; border-bottom:1px solid var(--wx-line2); padding-top:10px; margin-top:-2px}
.wx .dchip{border:1px solid var(--wx-line); background:#fff; font-size:12.5px; font-weight:600; color:var(--wx-muted);
  padding:6px 13px; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; font-family:inherit}
.wx .dchip .cdot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55}
.wx .dchip[aria-pressed="true"]{background:var(--wx-rhine); border-color:var(--wx-rhine); color:#fff}
.wx .dchip[aria-pressed="true"] .cdot{opacity:1}
.wx .mapview{position:relative; height:440px; background:#EAEFF1}
/* Wetter-Skin: Basiskarte entsaettigt, damit Radar-/Temperatur-Overlays farblich ehrlich bleiben */
.wx-basemap{filter:grayscale(1) brightness(1.06) contrast(.94)}
.wx #wx-map{position:absolute; inset:0}
.wx .map-caption{border-top:1px solid var(--wx-line2); padding:10px 14px; font-size:12px; color:var(--wx-muted); line-height:1.5}

/* marker-pills (Leaflet divIcon) */
.wx-mk{display:inline-flex; align-items:center; gap:4px; background:#fff; border:1.5px solid; border-radius:999px;
  padding:2.5px 8px 2.5px 6px; font-size:11px; font-weight:750; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.28);
  white-space:nowrap; font-variant-numeric:tabular-nums; width:max-content}
.wx-mk svg{width:11px; height:11px; flex:none}
.wx-mk.water{border-color:#0E7C86; color:#0A5A62}
.wx-mk.pool{border-color:#2BA0F5; color:#1C6DAD}
.wx-mk.air{border-color:#3DA35D; color:#2C7A44}
.wx-mk.air.warn{border-color:#E8A03C; color:#9A6414}
.wx-pin{width:16px; height:16px; border-radius:50%; background:#E20714; border:3px solid #fff; box-shadow:0 0 4px rgba(0,0,0,.4)}
.wx-pin.own{background:#3B82F6}

/* karten-overlays */
.wx .aqi-badge{position:absolute; right:12px; top:12px; z-index:1000; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.95); border-radius:999px; padding:6px 12px; font-size:11.5px; font-weight:700; box-shadow:var(--wx-shadow)}
.wx .aqi-badge .cdot{width:8px; height:8px; border-radius:50%; background:#3DA35D}
.wx .pollen-panel{position:absolute; right:12px; bottom:12px; z-index:1000; background:rgba(255,255,255,.96); border-radius:12px;
  box-shadow:var(--wx-shadow); padding:10px 12px; max-width:250px}
.wx .pollen-panel .eyebrow{display:block; margin-bottom:7px}
.wx .pollen-panel .chips{display:flex; flex-wrap:wrap; gap:6px}
.wx .addloc{position:absolute; left:12px; bottom:12px; z-index:1000; display:inline-flex; align-items:center; gap:7px; border:0;
  background:rgba(255,255,255,.95); box-shadow:var(--wx-shadow); border-radius:10px; padding:8px 13px;
  font-family:inherit; font-size:12.5px; font-weight:650; color:var(--wx-ink); cursor:pointer}
.wx .addloc svg{width:14px; height:14px; color:var(--wx-brand); flex:none}
.wx .addloc[aria-pressed="true"]{background:var(--wx-brand); color:#fff}
.wx .addloc[aria-pressed="true"] svg{color:#fff}
.wx .mapview.adding .leaflet-container{cursor:crosshair}
.wx .radar-controls{display:flex; align-items:center; gap:10px; position:absolute; left:12px; top:12px; z-index:1000;
  background:rgba(255,255,255,.92); border-radius:10px; padding:6px 10px; box-shadow:var(--wx-shadow)}
.wx .radar-controls button{border:0; background:transparent; cursor:pointer; color:var(--wx-brand); font-size:13px; line-height:1; display:flex; padding:2px}
.wx .radar-controls input[type=range]{width:110px}
.wx .radar-time{font-size:11.5px; color:var(--wx-muted); min-width:76px}

/* popup-inhalt (in Leaflet-Popups) */
.leaflet-popup-content .wx-pop{min-width:236px; font-variant-numeric:tabular-nums}
.wx-pop .pop-title{font-size:13.5px; font-weight:750; display:flex; align-items:center; gap:7px; color:#161C24}
.wx-pop .pop-title svg{width:22px; height:22px; color:#F0A227; flex:none}
.wx-pop .pop-sub{font-size:11.5px; color:#5B6672; margin:1px 0 7px}
.wx-pop .pop-days{display:flex; align-items:center; justify-content:space-between; gap:4px; margin:9px 0 2px;
  background:#F5F8FA; border-radius:9px; padding:4px 6px}
.wx-pop .pop-days span{font-size:12px; font-weight:650}
.wx-pop .pop-days button{border:0; background:transparent; cursor:pointer; padding:2px 4px; color:#161C24; display:flex; border-radius:6px}
.wx-pop .pop-days button:disabled{color:#C3CCD4; cursor:default}
.wx-pop .pop-days button svg{width:14px; height:14px}
.wx-pop .pop-temp{font-size:19px; font-weight:700; margin-top:8px}
.wx-pop .pop-temp small{font-size:11px; color:#5B6672; font-weight:500}
.wx-pop .pop-row{display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-top:7px; gap:8px}
.wx-pop .pop-row .pr{display:inline-flex; align-items:center; gap:5px}
.wx-pop .pop-row svg{width:13px; height:13px; color:#0E7C86; flex:none}
.wx-pop .mut{color:#5B6672}
.wx-pop .pop-foot{display:flex; justify-content:space-between; font-size:10.5px; color:#5B6672;
  border-top:1px solid #EEF2F6; margin-top:10px; padding-top:7px; gap:8px}
.wx-pop .pop-go{margin-top:10px; width:100%; border:0; background:#E20714; color:#fff; font-family:inherit;
  font-size:12.5px; font-weight:650; padding:7px 10px; border-radius:9px; cursor:pointer; display:block; text-align:center; text-decoration:none}
.wx-pop .arow{display:flex; justify-content:space-between; font-size:12px; padding:3px 0}
.wx-pop .arow b{font-weight:700}

/* ---------- chips (bewertungen) ---------- */
.wx .chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; padding:4px 10px; border-radius:999px}
.wx .chip.ideal{background:#E4F5E9; color:#1E7A3D}
.wx .chip.ok{background:#FDF0DC; color:#9A6414}
.wx .chip.cold{background:#E7F0FA; color:#2F6BAD}
.wx .chip .cdot{width:6px; height:6px; border-radius:50%; background:currentColor}
.wx-pop .chip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; padding:4px 10px; border-radius:999px}
.wx-pop .chip.ideal{background:#E4F5E9; color:#1E7A3D}
.wx-pop .chip.ok{background:#FDF0DC; color:#9A6414}
.wx-pop .chip.cold{background:#E7F0FA; color:#2F6BAD}
.wx-pop .chip .cdot{width:6px; height:6px; border-radius:50%; background:currentColor}

/* ---------- wasser-cards ---------- */
.wx .water-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:4px}
.wx .wtile{background:linear-gradient(160deg,#fff,#FAFDFD); border:1px solid var(--wx-line); border-radius:16px; padding:15px 16px; box-shadow:var(--wx-shadow)}
.wx .wtile .wname{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px}
.wx .wtile .wname svg{width:17px; height:17px; color:var(--wx-rhine); flex:none}
.wx .wtile .wtemp{font-size:30px; font-weight:250; letter-spacing:-.03em; margin:8px 0 6px}
.wx .wtile .wtemp sup{font-size:.4em; top:-.7em; font-weight:300; position:relative}
.wx .wtile .wmeta{font-size:11.5px; color:var(--wx-muted); margin-top:9px; display:flex; gap:12px; flex-wrap:wrap}
.wx .pools{margin-top:12px; padding:4px 4px 8px}
.wx .pool-row{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:13.5px}
.wx .pool-row + .pool-row{border-top:1px solid var(--wx-line2)}
.wx .pool-row .pt{font-weight:700; color:var(--wx-rhine-deep)}
.wx .pool-row a{color:inherit; text-decoration:none}
.wx .pool-row a:hover{color:var(--wx-rhine-deep)}
.wx .pool-foot{padding:9px 12px 4px; font-size:11.5px; color:var(--wx-muted); border-top:1px solid var(--wx-line2)}
.wx .pool-foot a{color:var(--wx-rhine-deep)}

/* ---------- luft & pollen cards ---------- */
.wx .air-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; padding:4px}
.wx .air-scale{position:relative; height:6px; border-radius:999px; margin-top:10px;
  background:linear-gradient(90deg,#3DA35D 0%,#A5C93C 25%,#E8A03C 50%,#E2632F 75%,#B33A3A 100%)}
.wx .air-scale i{position:absolute; top:-3px; width:12px; height:12px; border-radius:50%; background:#fff;
  border:2.5px solid var(--wx-ink); transform:translateX(-50%)}
.wx .air-rows{margin-top:8px}
.wx .arow{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; padding:4px 0; gap:8px}
.wx .arow + .arow{border-top:1px solid var(--wx-line2)}
.wx .arow b{font-weight:700}
.wx .pollen-card{margin-top:12px; padding-bottom:12px}
.wx .pollen-chips{display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px 2px}

/* ---------- klima ---------- */
.wx .klima-prose{padding:14px 16px 4px; font-size:13.5px; line-height:1.65}
.wx .klima-prose p{margin:0 0 10px}
.wx .klima-table-wrap{overflow-x:auto; padding:0 6px 10px}
.wx .klima-table-wrap table{width:100%; border-collapse:collapse; font-size:12.5px; min-width:600px; font-variant-numeric:tabular-nums}
.wx .klima-table-wrap th, .wx .klima-table-wrap td{padding:7px 10px; text-align:right; border-top:1px solid var(--wx-line2); white-space:nowrap}
.wx .klima-table-wrap th:first-child, .wx .klima-table-wrap td:first-child{text-align:left; font-weight:650}
.wx .klima-table-wrap thead th{border-top:0; color:var(--wx-muted); font-weight:650; font-size:11.5px}
.wx .klima-table-wrap tr.jahr td{border-top:2px solid var(--wx-line); font-weight:700}
.wx .klima-src{padding:0 16px 12px; font-size:11px; color:var(--wx-muted)}
.wx .pollen-cal td.pk{height:26px; min-width:36px; padding:0}
.wx .pollen-cal .pk0{background:#F0F3F6}
.wx .pollen-cal .pk1{background:#FCE9C8}
.wx .pollen-cal .pk2{background:#F5C97E}
.wx .pollen-cal .pk3{background:#E8836B}
.wx .pollen-legend{display:flex; flex-wrap:wrap; gap:14px; padding:8px 16px 4px; font-size:11.5px; color:var(--wx-muted)}
.wx .pollen-legend i{display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-right:5px}

/* ---------- faq ---------- */
.wx .faq{padding:4px 8px}
.wx .faq-item + .faq-item{border-top:1px solid var(--wx-line2)}
.wx .faq-item summary{cursor:pointer; padding:13px 8px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.wx .faq-item summary::-webkit-details-marker{display:none}
.wx .faq-item summary h3{font-weight:650; font-size:14px; margin:0; letter-spacing:0}
.wx .faq-item .faq-mark{flex:none; width:18px; height:18px; position:relative; opacity:.55}
.wx .faq-item .faq-mark::before, .wx .faq-item .faq-mark::after{content:""; position:absolute;
  background:var(--wx-ink); left:3px; right:3px; top:8px; height:2px; border-radius:2px; transition:transform .18s}
.wx .faq-item .faq-mark::after{transform:rotate(90deg)}
.wx .faq-item[open] .faq-mark::after{transform:rotate(0deg)}
.wx .faq-item summary:hover{color:var(--wx-rhine-deep)}
.wx .faq-item summary:focus-visible{outline:2px solid var(--wx-brand); outline-offset:-2px; border-radius:10px}
.wx .faq-item p{margin:0; padding:0 30px 14px 8px; font-size:13.5px; color:var(--wx-muted); line-height:1.65; max-width:78ch}
.wx .faq-item p a{color:var(--wx-rhine-deep); font-weight:600}
.wx .faq-item p a:hover{text-decoration:underline}

.wx .src-note{margin-top:14px; text-align:center; font-size:11.5px; color:var(--wx-muted)}

/* ---------- a11y / motion ---------- */
.wx .cities a:focus-visible, .wx .lchip:focus-visible, .wx .dchip:focus-visible, .wx .tips a:focus-visible,
.wx .addloc:focus-visible, .wx .cam-dots button:focus-visible, .wx .own-chip button:focus-visible,
.wx .radar-controls button:focus-visible, .wx-pop .pop-days button:focus-visible, .wx-pop .pop-go:focus-visible,
.wx .tipbtns a:focus-visible, .wx .bub-scroll:focus-visible{
  outline:2px solid #E20714; outline-offset:2px; border-radius:10px;
}
@media (prefers-reduced-motion:reduce){
  .wx .hero .glow, .wx .hero-cam .live i{animation:none}
}

/* Widget-Angebot am Seitenende: verweist auf /wetter/widget */
.wx .widget-cta{
  /* .card kommt vom Theme als Bootstrap-Karte (flex-direction:column plus
     -webkit-box-Altlasten). Richtung darum ausdruecklich setzen, sonst
     stapelt der Teaser und zieht sich in die Hoehe. */
  display:flex; flex-direction:row; -webkit-box-orient:horizontal;
  -webkit-box-direction:normal; -ms-flex-direction:row;
  align-items:center; justify-content:space-between; gap:14px 20px;
  flex-wrap:wrap; padding:16px 20px; min-height:0;
}
.wx .widget-cta-text{flex:1 1 320px; display:flex; flex-direction:column; gap:2px; min-width:0}
.wx .widget-cta-text > a{
  font-size:15px; font-weight:750; color:var(--wx-ink); text-decoration:none;
}
.wx .widget-cta-text > a:hover{text-decoration:underline}
.wx .widget-cta-text span{font-size:13px; color:var(--wx-muted); line-height:1.45}
.wx .widget-cta-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px; border-radius:999px; background:#E20714; color:#fff;
  font-size:13.5px; font-weight:650; text-decoration:none; white-space:nowrap;
}
.wx .widget-cta-btn:hover{filter:brightness(1.08); color:#fff; text-decoration:none}
@media (max-width:575.98px){
  .wx .widget-cta{padding:14px 16px}
  .wx .widget-cta-btn{width:100%}
}

/* Dezenter Verweis aufs Widget: laeuft als letztes Element in der
   Kennzahlenzeile mit (nach dem Luftdruck) und wird per margin-left:auto
   ans rechte Ende geschoben. Farbe aus dem warmen Hero-Verlauf. */
.wx .hero-stats .hero-embed{
  margin-left:auto; align-self:center;
  font-size:11.5px; line-height:1.3; color:#7a6a4e; text-decoration:none;
  border-bottom:1px dotted rgba(122,106,78,.55); padding-bottom:1px;
}
@media (max-width:575.98px){
  /* Auf schmalen Geraeten bricht die Zeile ohnehin um - dann nicht zusaetzlich
     nach rechts ziehen, sonst steht der Link allein und verloren. */
  .wx .hero-stats .hero-embed{margin-left:0}
}
.wx .hero-stats .hero-embed:hover,
.wx .hero-stats .hero-embed:focus{color:#3a2f1e; border-bottom-color:#3a2f1e; text-decoration:none}