:root{
    --bg:#ffffff;
    --bg-2:#f5f7f8;
    --ink:#13171c;
    --soft:#626c77;
    --line:#e7eaed;
    --m:#d9462a;          /* current metric color (set by JS) */
    --m-soft:#f7d8cd;
    --accent:#d9462a;     /* fixed search accent — stays put while --m changes per tab */
    --display:"Archivo",system-ui,sans-serif;
    --body:"Inter",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
    line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1040px;margin:0 auto;padding:0 28px}
  a{color:inherit}
  h1,h2,h3{font-family:var(--display)}

  .top{display:flex;justify-content:space-between;align-items:center;
    padding:20px 0;border-bottom:1px solid var(--line)}
  .brand{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;
    display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
  a.brand{transition:opacity .15s}
  a.brand:hover{opacity:.75}
  .brand-mark{display:block;border-radius:5px}
  .brand i{font-style:normal;color:var(--m);transition:color .3s}
  .top .tag{font-size:12.5px;color:var(--soft);letter-spacing:.04em;text-transform:uppercase}

  /* ---- hero / search ---- */
  .hero{margin:26px 0 0;padding:38px 26px 34px;text-align:center;
    background:linear-gradient(180deg,#e9f1f6 0%,#f4f8fa 100%);
    border:1px solid #dce7ee;border-radius:22px}
  h1{font-weight:800;font-size:clamp(23px,3.6vw,34px);line-height:1.12;
    letter-spacing:-.02em;margin:0 auto;max-width:none}
  .lede{color:var(--soft);font-size:15px;max-width:52ch;margin:10px auto 0}
  .search{margin:20px auto 0;max-width:500px;position:relative}
  .searchbar{display:flex;gap:10px}
  .field{flex:1;position:relative}
  .field svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--accent);transition:color .2s}
  /* The search field is the clear call to action, tinted in the brand accent so
     it's obvious where to act. Kept lit even while a report is on screen — the
     fixed --accent means it doesn't drift with the per-tab metric colour. */
  .field input{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
    padding:13px 16px 13px 44px;border:1.5px solid #eaa491;border-radius:12px;
    background:#fff;outline:none;box-shadow:0 0 0 4px rgba(217,70,42,.07);
    transition:border-color .2s,box-shadow .2s}
  .field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(217,70,42,.16)}
  .searchbar button{font-family:var(--display);font-weight:700;font-size:15px;color:#fff;
    background:var(--accent);border:0;border-radius:12px;padding:0 22px;cursor:pointer;
    transition:background .2s}
  .searchbar button:hover{background:#bf3a20}
  /* search results dropdown */
  .results{position:absolute;z-index:20;left:0;right:0;margin-top:8px;background:#fff;
    border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -20px #0003;
    overflow:hidden;text-align:left;display:none}
  .results.open{display:block}
  .results button{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
    padding:11px 16px;font-family:var(--body);font-size:15px;color:var(--ink)}
  .results button:hover,.results button.active{background:var(--bg-2)}
  .results .r-kreis{color:var(--soft);font-weight:400}
  .results .r-sub{font-size:12.5px;color:var(--soft)}
  .results .r-empty{padding:12px 16px;color:var(--soft);font-size:14px}
  /* quick-pick chips for the largest cities, sitting under the search field */
  .suggest{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:8px;margin:14px 0 0}
  .suggest .sg{font-family:var(--body);font-size:13.5px;color:var(--ink);text-decoration:none;
    background:#fff;border:1px solid #dce7ee;border-radius:100px;padding:6px 14px;
    transition:border-color .2s,color .2s,box-shadow .2s}
  .suggest .sg:hover{color:var(--accent);border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(217,70,42,.1)}

  /* ---- city ---- */
  .city{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;justify-content:center;
    margin:40px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .city h2{font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin:0}
  .city .m{font-size:12.5px;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
  .city .m b{color:var(--ink)}
  /* metric-agnostic header action → fixed brand accent, not the per-tab --m */
  .share{align-self:center;display:inline-flex;align-items:center;gap:7px;
    font-family:var(--display);font-weight:600;font-size:13px;color:var(--soft);
    background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 14px;
    cursor:pointer;transition:.18s}
  .share svg{width:15px;height:15px}
  .share:hover{color:var(--accent);border-color:var(--accent)}
  .share.copied{color:var(--accent);border-color:var(--accent)}

  /* ---- metric tabs ---- */
  .tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:26px 0 0}
  .tab{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
    font-weight:600;font-size:15px;color:var(--soft);background:var(--bg-2);
    border:1.5px solid transparent;border-radius:100px;padding:10px 18px;cursor:pointer;
    transition:.18s}
  .tab svg{width:17px;height:17px}
  .tab:hover{color:var(--ink)}
  .tab[aria-selected="true"]{color:#fff;background:var(--m);border-color:var(--m);
    box-shadow:0 9px 22px -10px var(--m);transform:translateY(-1px)}
  .tab[disabled]{opacity:.4;cursor:not-allowed}
  /* the selected metric's whole view sits in one tinted panel, so it is obvious
     at a glance that every comparison, chart and tile below belongs to the active
     tab. The wash + border are derived from --m, so the panel recolours with the
     tab (red for Hitze, blue for Schnee) instead of relying on a caption. */
  #metricView{position:relative;margin-top:20px;
    padding:6px clamp(16px,3vw,32px) 34px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--m) 9%,#fff) 0%,#fff 58%);
    border:1px solid color-mix(in srgb,var(--m) 24%,var(--line));
    border-radius:20px;transition:background .25s,border-color .25s}
  #metricView > :first-child{margin-top:26px}
  /* every switch re-runs this fade so the whole view visibly refreshes together */
  #metricView.swap{animation:metricSwap .32s cubic-bezier(.2,.7,.2,1)}
  @keyframes metricSwap{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion: reduce){
    #metricView.swap{animation:none}
  }

  /* ---- the comparison: in your face ---- */
  .impact{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(14px,4vw,48px);
    margin:48px 0 0}
  .col{text-align:center}
  .col .era{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--soft);margin:0 0 10px}
  .col .num{font-family:var(--display);font-weight:900;line-height:.86;letter-spacing:-.03em;
    font-size:clamp(60px,15vw,128px);font-variant-numeric:tabular-nums}
  .col.then .num{color:#aeb6bd}
  .col.now  .num{color:var(--m)}
  .col .unit{font-size:13.5px;color:var(--soft);margin:12px 0 0}
  /* context line under the hero number (e.g. "von 39 Sommertagen" on Hitze) */
  .col .ctx{font-size:12.5px;color:var(--soft);margin:6px 0 0;font-variant-numeric:tabular-nums}
  .col .ctx b{color:var(--ink);font-weight:700}
  .col .ctx:empty{display:none}
  .col .track{height:10px;border-radius:6px;background:var(--bg-2);margin:18px 0 0;overflow:hidden}
  .col .track .fill{height:100%;border-radius:6px;width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
  .col.then .track .fill{background:#c6cdd3}
  .col.now  .track .fill{background:var(--m)}
  /* center badge — value computed from the two numbers, not interpreted */
  .badge{display:flex;flex-direction:column;align-items:center;gap:7px;padding-bottom:22px}
  .badge .chg{font-family:var(--display);font-weight:800;font-size:clamp(15px,2.2vw,20px);
    color:var(--m);background:var(--m-soft);border-radius:100px;padding:7px 15px;white-space:nowrap;
    text-align:center;font-variant-numeric:tabular-nums}
  .badge .chgSub{font-family:var(--display);font-weight:700;font-size:13px;color:var(--soft);
    font-variant-numeric:tabular-nums}

  /* basis caption — names the compared periods, defuses cherry-pick */
  .basis{text-align:center;font-size:13px;color:var(--soft);margin:22px auto 0;max-width:64ch}
  .basis b{color:var(--ink);font-weight:600}

  /* glossary — one compact, dot-separated line right under .basis, so the
     two captions read as one paired block */
  .glossary{text-align:center;font-size:12.5px;color:var(--soft);margin:6px auto 0}

  /* ---- gentle steer line ---- */
  .steer{display:flex;gap:12px;align-items:flex-start;margin:40px auto 0;max-width:72ch;
    padding:18px 20px;background:var(--bg-2);border-radius:13px}
  .steer .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--m);margin-top:7px}
  .steer p{margin:0;font-size:15.5px;color:var(--ink)}

  /* ---- decade chart ---- */
  .sec{margin-top:54px}
  .sec h3{font-weight:800;font-size:20px;letter-spacing:-.01em;margin:0 0 2px}
  .sec .ssub{font-size:14px;color:var(--soft);margin:0 0 26px}

  /* segmented switch between the two stripe views (Balken / Streifen) */
  .stripe-toggle{display:inline-flex;gap:3px;padding:3px;margin:10px 0 16px;
    background:var(--bg-2);border-radius:100px}
  .stripe-toggle button{font-family:var(--display);font-weight:600;font-size:13px;
    color:var(--soft);background:none;border:0;border-radius:100px;padding:6px 15px;
    cursor:pointer;transition:.18s}
  .stripe-toggle button:hover{color:var(--ink)}
  .stripe-toggle button[aria-selected="true"]{color:#fff;background:var(--m)}
  .stripe-toggle button[aria-selected="true"]:hover{color:#fff}

  /* ---- warming stripes (Streifendiagramm, je Streifen ein Jahr) ---- */
  .stripes-wrap{position:relative}
  /* slim banner height: the stripes are texture, not a detail chart, so they stay
     readable compressed and leave the verlauf chart below it room to catch the eye */
  /* Amplitude: each year is a column whose inner bar deflects up (warmer, red) or
     down (cooler, blue) from a central 0-line, so the warming reads as a rising
     silhouette, not only a colour shift. */
  .stripes{display:flex;width:100%;height:clamp(116px,17vh,168px);
    border-radius:6px;overflow:hidden;cursor:crosshair;position:relative;
    background:linear-gradient(#fafafa,#f3f4f6)}
  .stripes .s{flex:1 1 auto;position:relative}
  .stripes .s i{position:absolute;left:0;right:0;display:block}
  .stripes .s:hover i{filter:brightness(1.12)}
  .stripes .zero{position:absolute;left:0;right:0;top:50%;height:1px;z-index:2;
    background:rgba(0,0,0,.22);pointer-events:none}
  .tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;
    background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:6px 9px;
    border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .1s;
    font-variant-numeric:tabular-nums;z-index:3}
  .tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
    border:5px solid transparent;border-top-color:var(--ink)}
  .baseaxis{position:relative;height:42px;margin-top:6px}
  .baseaxis .years{display:flex;justify-content:space-between;font-size:11.5px;
    color:var(--soft);font-variant-numeric:tabular-nums}
  .bracket{position:absolute;top:18px;height:9px;border:1.5px solid #3a6ea5;
    border-bottom:0;border-radius:5px 5px 0 0}
  .bracket .lbl{position:absolute;top:11px;left:50%;transform:translateX(-50%);
    white-space:nowrap;font-size:11.5px;font-weight:600;color:#3a6ea5;
    background:#fff;padding:0 6px}
  .stripe-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px;
    font-size:13px;color:var(--soft)}
  .gradbar{height:12px;width:180px;border-radius:6px;
    background:linear-gradient(90deg,#3a6ea5,#9cc0db,#eef2f5,#f0b48f,#cf3417)}
  .stripe-legend b{color:var(--ink);font-weight:600}
  /* ---- dein Jahrgang: persönlicher Marker auf den Streifen ---- */
  .birth{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;
    font-size:13.5px;color:var(--soft)}
  .birth label{font-family:var(--display);font-weight:600;color:var(--ink)}
  .birth-field{position:relative;display:inline-flex;align-items:center}
  .birth input{width:8em;font-family:var(--body);font-size:15.5px;font-weight:600;color:var(--ink);
    padding:9px 32px 9px 14px;border:1.5px solid color-mix(in srgb,var(--m) 45%,var(--line));border-radius:10px;
    background:#fff;outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 9%,#fff);
    transition:border-color .2s,box-shadow .2s}
  .birth input::placeholder{font-weight:400;color:var(--soft)}
  .birth input:focus{border-color:var(--m);box-shadow:0 0 0 4px color-mix(in srgb,var(--m) 18%,#fff)}
  .birth input::-webkit-outer-spin-button,.birth input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .birth input[type=number]{-moz-appearance:textfield}
  /* clear (×) button inside the field, shown only while something is entered */
  /* full-height hit area on the field's right (~40×44) for a comfortable tap target;
     the × glyph stays small, only the clickable zone grows */
  .birth-clear{position:absolute;right:0;top:0;height:100%;width:40px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:0;border:0;border-radius:0 9px 9px 0;background:none;color:var(--soft);
    font-size:19px;line-height:1;cursor:pointer;transition:color .15s}
  .birth-clear:hover{color:var(--ink)}
  .birth-clear[hidden]{display:none}
  .birth-out{flex:1 1 15em;min-width:0;line-height:1.5}
  .birth-out b{color:var(--ink);font-weight:600}
  /* the vertical marker drawn over the stripes for the chosen year. Index-based
     left%, so it stays aligned when the banner is resized. White halo keeps it
     legible over a dark-red stripe. */
  .stripes .ymark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;z-index:2;
    background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.65);pointer-events:none}
  /* same Jahrgang marker, drawn into the trend chart below — dashed + neutral so it
     reads as an annotation, not a data series */
  .trend .birthline{stroke:var(--ink);stroke-width:1.5;opacity:.42;stroke-dasharray:3 3}
  /* ---- yearly trend + 10-year moving average (SVG line chart) ---- */
  /* The raw line keeps every spike honest (a single hot summer stays a needle);
     the thick line is the trailing 10-year average — the trend underneath. */
  .trend{position:relative;width:100%;margin-top:4px}
  .trend svg{display:block;width:100%;height:auto;overflow:visible}
  .trend .grid{stroke:var(--line)}
  .trend .ylab,.trend .xlab{fill:var(--soft);font-size:12px;font-family:var(--body);
    font-variant-numeric:tabular-nums}
  .trend .raw{fill:none;stroke:var(--m);stroke-width:1.4;opacity:.32;
    stroke-linejoin:round;stroke-linecap:round}
  .trend .ma{fill:none;stroke:var(--m);stroke-width:3.4;
    stroke-linejoin:round;stroke-linecap:round}
  .trend .guide{stroke:var(--m);stroke-width:1;opacity:0}
  .trend .hdot{fill:var(--m);opacity:0}
  .trend .hraw{fill:#fff;stroke:var(--m);stroke-width:1.5;opacity:0}
  /* band mode (Hitze): hot days as a dark sub-area inside the warm summer days */
  .trend .bandWarm{fill:var(--m);opacity:.20}
  .trend .bandHot{fill:var(--m);opacity:.72}
  .trend .edge{fill:none;stroke:var(--m);stroke-width:2;opacity:.5;
    stroke-linejoin:round;stroke-linecap:round}
  .trend .edgeHot{fill:none;stroke:var(--m);stroke-width:2.8;
    stroke-linejoin:round;stroke-linecap:round}
  .trend .rawT{fill:none;stroke:var(--m);stroke-width:1.2;opacity:.28;stroke-linejoin:round}
  .trend .rawS{fill:none;stroke:var(--m);stroke-width:1.2;opacity:.42;stroke-linejoin:round}
  .unitline{font-size:12.5px;color:var(--soft);margin:14px 0 0}
  .trend-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
    font-size:12.5px;color:var(--soft);margin:10px 0 0}
  .trend-legend i{font-style:normal;display:inline-flex;align-items:center;gap:8px}
  .trend-legend .lk{width:24px;border-top:3.4px solid var(--m);border-radius:2px}
  .trend-legend .lk.thin{border-top-width:1.4px;opacity:.5}
  .trend-legend .sw{width:16px;height:12px;border-radius:3px;background:var(--m)}
  .trend-legend .sw.warm{opacity:.30}
  .trend-legend .sw.hot{opacity:.78}
  .sources{font-size:12.5px;color:var(--soft);margin:16px 0 0;line-height:1.6}
  .sources b{color:var(--ink);font-weight:600}

  /* ---- detail tiles ---- */
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
  /* gently tinted in the active metric colour to group them; flex column so the
     comparison caption sits flush at the bottom and the cards line up across the row */
  .tile{display:flex;flex-direction:column;border-radius:14px;
    border:1px solid color-mix(in srgb,var(--m) 16%,var(--line));
    background:color-mix(in srgb,var(--m) 5%,#fff);
    padding:16px 18px 15px}
  .tile .tlab{font-family:var(--display);font-weight:600;font-size:11.5px;color:var(--soft);
    text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
  .tile .tval-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
  .tile .tval{font-family:var(--display);font-weight:800;font-size:25px;line-height:1.05;
    letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
  .tile .tdelta{font-family:var(--display);font-weight:700;font-size:12px;
    padding:2px 8px;border-radius:999px;white-space:nowrap;
    background:var(--m-soft);color:var(--m);font-variant-numeric:tabular-nums}
  /* margin-top:auto pins the caption to the card's bottom edge → captions align
     across the row; the padding keeps a minimum gap when a card is short */
  .tile .tsub{font-size:12.5px;color:var(--soft);margin-top:auto;padding-top:12px;line-height:1.45}

  /* ---- running year "so far" ---- */
  /* Deliberately set apart from the complete-year tiles/charts: a lighter, dashed
     panel marked vorläufig, so an in-progress year is never read as a finished one.
     Only metrics already meaningful this year are rendered (renderCurrent). */
  .current{margin-top:18px;border:1px dashed var(--line);border-radius:14px;
    padding:15px 16px;background:color-mix(in srgb,var(--m-soft) 22%,#fff)}
  .current-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .current-title{font-family:var(--display);font-weight:700;font-size:13px;color:var(--ink);
    text-transform:uppercase;letter-spacing:.04em}
  .current-stand{font-size:12px;color:var(--soft)}
  .current-chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:#fff;
    display:flex;flex-direction:column;gap:3px;min-width:96px}
  .chip .cval{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.05;
    letter-spacing:-.01em;color:var(--ink)}
  .chip .clab{font-size:11.5px;color:var(--soft)}
  /* a record already broken this year — the one genuinely time-sensitive signal */
  .chip.rec{border-color:var(--m);box-shadow:inset 0 0 0 1px var(--m)}
  .chip .cbadge{display:inline-block;margin-top:1px;font-family:var(--display);font-weight:700;
    font-size:10.5px;color:var(--m);text-transform:uppercase;letter-spacing:.03em}

  /* ---- loading placeholders ---- */
  /* Shown the moment a tab is activated, before its chart endpoints resolve. Sized
     to roughly match the real chart so swapping in the content barely shifts layout. */
  @keyframes shimmer{100%{background-position:-200% 0}}
  .skel{background:linear-gradient(90deg,#eef1f3 25%,#e4e8eb 37%,#eef1f3 63%);
    background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:10px}
  .skel-num{height:.7em;width:1.6em;margin:0 auto;border-radius:.12em}
  .skel-chart{height:300px;margin-top:4px}
  .skel-tile{height:96px}
  @media(prefers-reduced-motion:reduce){.skel{animation:none}}

  /* ---- states ---- */
  #report[hidden]{display:none}
  .state{margin:40px auto 0;text-align:center;color:var(--soft);font-size:15px}

  /* ---- details button + bottom share anchor ---- */
  /* second share anchor: same subtle pill as the header, centred above the methodik button */
  .share-row{display:flex;justify-content:center;margin-top:48px}
  .share-row + details.more-info{margin-top:20px}
  details.more-info{margin-top:48px;text-align:center}
  details.more-info summary{list-style:none;cursor:pointer;display:inline-flex;
    align-items:center;gap:10px;padding:14px 26px;border-radius:12px;
    font-family:var(--display);font-weight:700;font-size:15px;color:#fff;
    background:var(--m);box-shadow:0 10px 22px -12px var(--m)}
  details.more-info summary::-webkit-details-marker{display:none}
  details.more-info summary .chev{transition:transform .2s;color:#fff;opacity:.92}
  details.more-info[open] summary .chev{transform:rotate(180deg)}
  details.more-info summary:hover{filter:brightness(.94)}
  details.more-info summary:focus-visible{outline:3px solid var(--m-soft);outline-offset:2px}
  .info-body{text-align:left;margin-top:16px;border:1px solid var(--line);border-radius:14px;
    padding:6px 24px 26px;background:#fff}
  .info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 36px;margin-top:18px}
  .info-grid h4{font-family:var(--display);font-weight:700;font-size:14px;margin:0 0 8px}
  .info-grid p,.info-grid li{font-size:14px;color:var(--soft);margin:0}
  .info-grid ul{margin:0;padding-left:18px}.info-grid li{margin:4px 0}

  footer{margin-top:64px;border-top:1px solid var(--line);padding:30px 0 60px}
  .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
  footer nav{display:flex;flex-wrap:wrap;gap:6px 24px;font-size:13.5px}
  footer nav a{color:var(--soft);text-decoration:none}
  footer nav a:hover{color:var(--m)}
  .src{font-size:12px;color:var(--soft);max-width:66ch;margin:16px 0 0;line-height:1.65}

  @media(max-width:760px){
    .wrap{padding:0 18px}
    .hero{padding:30px 18px 28px;border-radius:18px}
    .sec{margin-top:40px}
    .impact{margin-top:36px}
    .steer{margin-top:32px}
  }
  @media(max-width:640px){
    .impact{grid-template-columns:1fr 1fr;gap:18px}
    .badge{grid-column:1 / -1;order:3;flex-direction:row;gap:12px;padding:8px 0 0}
    /* stacked search: the button loses its flex-stretched height, so it needs real
       vertical padding to stay a tappable target instead of collapsing to one line */
    .searchbar{flex-direction:column}
    .searchbar button{padding:13px 22px}
    .info-grid{grid-template-columns:1fr}
    .tiles{grid-template-columns:1fr}
    .tab{padding:11px 16px}            /* ≥44px tap target */
    .top .tag{display:none}            /* the DWD source line repeats in the footer */
    #metricView{padding-bottom:28px}
    .sec h3{font-size:18px}
  }
  @media(max-width:420px){
    .wrap{padding:0 13px}
    .col .num{font-size:clamp(44px,17vw,70px)}
    .city{gap:6px 14px}
    .stripe-legend{gap:8px}
    .gradbar{width:120px}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}