*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    background: #f2f1ec;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  #forecast { scroll-margin-top: 0.6rem; }

  body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #f2f1ec;
    color: #1c1c1a;
    padding: 0.5rem 0.88rem 0.08rem;
    min-height: 100vh;
    width: min(128rem, 100%);
    margin-inline: auto;
  }

  /* Header */
  header {
    display: grid;
    grid-template-columns: minmax(24rem, 1fr) auto minmax(8rem, 1fr);
    align-items: flex-start;
    gap: 0.5rem 0.7rem;
    margin-bottom: 0.38rem;
  }
  header > div:first-child { min-width: 0; }
  .header-actions { display: flex; align-items: center; justify-self: end; gap: .38rem; margin-left: 0; }
  .share-view { display: inline-flex; align-items: center; height: 1.72rem; padding: 0 .55rem; border: 1px solid #d4d3cc; border-radius: 7px; background: rgba(255,255,255,.78); color: #4d4e48; font: inherit; font-size: .72rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; }
  .share-view:hover { background: #ebe9e1; }
  h1 { font-size: 1.24rem; font-weight: 600; }
  .meta {
    font-size: 0.73rem;
    color: #7a7a72;
    margin-top: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.16rem;
    border: 1px solid #d4d3cc;
    border-radius: 8px;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  .site-nav a {
    display: inline-grid;
    place-items: center;
    width: 1.72rem;
    height: 1.72rem;
    border-radius: 6px;
    color: #555;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
  }
  /* The sun-behind-cloud glyph sits in a roomier em box than the other
     icons, so it needs a nudge to read at the same visual size. The
     1.72rem cell is fixed, so this cannot shift the layout. */
  .site-nav a[href="/klima/"] { font-size: 1.16rem; }
  .site-nav a:hover { background: #ebe9e1; }
  .site-nav a.active {
    background: #5c7a62;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  }

  /* Primary tabs */
  .klima-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    justify-self: center;
    min-width: 0;
    gap: 0.26rem;
    overflow-x: auto;
    margin: 0.02rem auto 0;
    padding: 0.02rem;
    border: 1.5px solid #d2cdc0;
    border-bottom-color: #bdb7a8;
    border-radius: 10px;
    background: linear-gradient(180deg, #f0eee7, #e3e1d8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 1px 4px rgba(58,54,44,0.08);
    scrollbar-width: thin;
  }
  .klima-tab {
    flex: 0 0 auto;
    padding: 0.46rem 0.82rem;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    background: rgba(255,255,255,0.54);
    color: #5f5c54;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .klima-tab:hover,
  .klima-tab:focus-visible {
    color: #2f3f32;
    background: rgba(255,255,255,0.7);
    outline: none;
  }
  button.klima-tab[aria-selected="true"] {
    position: relative;
    color: #284535 !important;
    border: 1px solid #b7b9b1 !important;
    border-bottom: 2px solid #8c9a90 !important;
    background: #dcddd8 !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 3px rgba(55, 62, 54, .12);
  }
  button.klima-tab[aria-selected="true"]::after { content: ""; position: absolute; right: .48rem; bottom: .22rem; left: .48rem; height: 2px; border-radius: 999px; background: #4f765b; }
  .klima-panel[hidden] { display: none; }
  html[data-initial-klima-tab]:not([data-initial-klima-tab="aktuell"]) [data-klima-tab="aktuell"].active {
    color: #5f5c54;
    border-color: transparent;
    border-bottom-color: transparent;
    background: rgba(255,255,255,0.54);
    box-shadow: none;
  }
  html[data-initial-klima-tab="archiv"] [data-klima-tab="archiv"],
  html[data-initial-klima-tab="rekorde"] [data-klima-tab="rekorde"],
  html[data-initial-klima-tab="karten"] [data-klima-tab="karten"],
  html[data-initial-klima-tab="stationen"] [data-klima-tab="stationen"] {
    color: #284535;
    border-color: #b7b9b1;
    border-bottom-color: #8c9a90;
    background: #dcddd8;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 3px rgba(55, 62, 54, .12);
  }
  html[data-initial-klima-tab]:not([data-initial-klima-tab="aktuell"]) #tab-aktuell { display: none; }
  html[data-initial-klima-tab="archiv"] #tab-archiv[hidden],
  html[data-initial-klima-tab="rekorde"] #tab-rekorde[hidden],
  html[data-initial-klima-tab="karten"] #tab-karten[hidden],
  html[data-initial-klima-tab="stationen"] #tab-stationen[hidden] {
    display: block;
  }
  .stations-panel-inner {
    padding: 0.78rem 0.9rem;
    border: 1px solid #e1dfd6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.05);
  }
  .stations-loading,
  .stations-muted {
    color: #77736a;
    font-size: 0.82rem;
  }
  .stations-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.72rem;
  }
  .stations-head h2 {
    font-size: 1rem;
    line-height: 1.15;
    margin-bottom: 0.12rem;
  }
  .stations-head p {
    max-width: 52rem;
    color: #77736a;
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .stations-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.62rem;
  }
  .stations-kpis > div {
    padding: 0.52rem 0.62rem;
    border: 1px solid #e2dfd4;
    border-radius: 8px;
    background: #f7f6f0;
  }
  .stations-kpis strong {
    display: block;
    color: #1f3825;
    font-size: 1.05rem;
    line-height: 1.1;
  }
  .stations-kpis span {
    display: block;
    color: #77736a;
    font-size: 0.73rem;
    margin-top: 0.12rem;
  }
  .stations-state-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-bottom: 0.72rem;
  }
  .stations-state-strip button {
    padding: 0.18rem 0.4rem;
    border: 1px solid #dedbd0;
    border-radius: 999px;
    background: #fbfaf6;
    color: #77736a;
    font: inherit;
    font-size: 0.74rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .stations-state-strip button:hover,
  .stations-state-strip button:focus-visible {
    border-color: #bccab7;
    background: #f0f3eb;
    outline: none;
  }
  .stations-state-strip button.active {
    border-color: #5c7a62;
    background: #e9f0e7;
    color: #314536;
  }
  .stations-state-strip strong { color: #4f6754; }
  .stations-toolbar {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    margin-bottom: 0.5rem;
  }
  .stations-toolbar input[type="search"] {
    flex: 1 1 18rem;
    min-width: 0;
    height: 1.85rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid #cbc9c0;
    border-radius: 7px;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: 0.8rem;
  }
  .stations-toolbar label {
    color: #55534c;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .stations-table-wrap {
    max-height: min(42rem, 78vh);
    overflow: auto;
    border: 1px solid #e2dfd4;
    border-radius: 8px;
  }
  .stations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
  }
  .stations-table th,
  .stations-table td {
    padding: 0.42rem 0.5rem;
    border-bottom: 1px solid #ece9de;
    text-align: left;
    vertical-align: top;
  }
  .stations-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f3f1e8;
    color: #66645c;
    font-weight: 700;
  }
  .station-link {
    border: 0;
    background: transparent;
    color: #1f3825;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
  }
  .station-link:hover,
  .station-link:focus-visible {
    text-decoration: underline;
    outline: none;
  }
  .station-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.18rem 0.3rem;
    margin-top: 0.22rem;
  }
  .station-members span {
    padding: 0.08rem 0.28rem;
    border-radius: 999px;
    background: #ebe7db;
    color: #3f403a;
    font-size: 0.7rem;
    font-weight: 550;
    line-height: 1.25;
  }
  .station-members small {
    color: #5f5d55;
    font-size: 0.66rem;
    font-weight: 500;
  }

  /* Shared station selector */
  .nowrap { white-space: nowrap; }
  /* Deliberate line break inside a note, so the clause needs no leading separator. */
  .note-line { display: block; }
  .station-control-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.44rem 1rem;
    margin-bottom: 0.18rem;
  }
  .station-selector-bar {
    min-height: 2.55rem;
    padding-bottom: 0.22rem;
    border-bottom: 1px solid rgba(210, 208, 198, 0.72);
  }
  html.maps-multiples-active .station-selector-bar {
    display: none;
  }
  .station-selector-bar[hidden] { display: none; }
  .station-row {
    display: flex;
    flex: 1 1 34rem;
    flex-wrap: wrap;
    gap: 0.28rem;
  }
  .forecast-range { display: inline-flex; align-items: center; gap: 0.14rem; padding: 0.14rem; border: 1px solid #d8d6cc; border-radius: 7px; background: #f7f6f1; white-space: nowrap; }
  .forecast-range-main { border-color: #c7c2af; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(75,69,51,.1); background: #f4f1e8; }
  html:not([data-klima-tab="aktuell"]) .forecast-range-main { display: none; }
  /* The frame is an inset shadow rather than a border so adding it costs no
     layout width, which would otherwise shift the whole switch. */
  .forecast-range-btn { border: 0; border-radius: 5px; padding: 0.34rem 0.48rem; background: transparent; box-shadow: inset 0 0 0 1px rgba(140,133,110,.20); color: #66645c; font: inherit; font-size: 0.73rem; font-weight: 650; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; }
  .forecast-range-btn:hover:not(.active) { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(140,133,110,.34); color: #4a4840; }
  .forecast-range-main .forecast-range-btn { padding: .34rem .62rem; font-size: .78rem; }
  .forecast-range-btn.active { background: #fff; color: #30553a; box-shadow: inset 0 0 0 1px rgba(140,133,110,.30), 0 1px 2px rgba(0,0,0,.10); }
  html[data-forecast-range="outlook"] .compare-hint, html[data-forecast-range="outlook"] #forecast, html[data-forecast-range="outlook"] .aktuell-history, html[data-forecast-range="outlook"] .aktuell-month-history, html[data-forecast-range="outlook"] .aktuell-ytd { display: none; }
  /* Keep the normal selector-row footprint in the Austria outlook so the shared
     range switch never moves; the station controls are present but not visible.
     The bar must keep its normal min-height here: the row centres its items, so
     raising it moved the switch down by half the difference. */
  html[data-klima-tab="aktuell"][data-forecast-range="outlook"] .station-row, html[data-klima-tab="aktuell"][data-forecast-range="outlook"] .station-picker, html[data-klima-tab="aktuell"][data-forecast-range="outlook"] .baseline-control { visibility: hidden; pointer-events: none; }
  html[data-forecast-range="14"] #forecast .fc-hourly-wrap { display: none; }
  html[data-forecast-range="14"] #forecast .fc-daily-wrap { display: block; }
  html[data-forecast-range="14"] #forecast .fc-days { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .18rem; margin: 0 var(--fc-chart-right, 2.25rem) 0 var(--fc-chart-left, 2rem); }
  html[data-forecast-range="14"] #forecast .fc-day { min-height: 10.25rem; padding: .36rem .16rem .48rem; }
  html[data-forecast-range="14"] #forecast .fc-day .ic { font-size: 1.3rem; }
  html[data-forecast-range="14"] #forecast .fc-day .cond { display: block; min-height: 2.25em; margin-top: .03rem; font-size: .6rem; line-height: 1.13; }
  html[data-forecast-range="14"] #forecast .fc-day .tmax { font-size: .94rem; }
  html[data-forecast-range="14"] #forecast .fc-day .tmin { font-size: .76rem; }
  html[data-forecast-range="14"] #forecast .fc-day .extra { margin-top: .28rem; font-size: .63rem; line-height: 1.3; }
  html[data-forecast-range="14"] #forecast .fc-day .fc-anom { padding: .025rem .28rem; font-size: .64rem; font-weight: 650; }
  html[data-forecast-range="14"] #forecast .fc-now { grid-template-columns: calc((100% - .6rem) / 7) minmax(0, 1fr); margin: .2rem var(--fc-chart-right, .3rem) .55rem .3rem; padding: .25rem 0 .5rem; border-bottom: 1px solid #ece9e0; }
  html[data-forecast-range="14"] .aktuell-history, html[data-forecast-range="14"] .aktuell-month-history, html[data-forecast-range="14"] .aktuell-ytd { display: none; }
  @media (max-width: 1180px) {
    html[data-forecast-range="14"] #forecast .fc-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .28rem; margin-inline: .3rem; }
    html[data-forecast-range="14"] #forecast .fc-day { min-height: 9rem; padding: .32rem .32rem .42rem; }
    html[data-forecast-range="14"] #forecast .fc-day .cond { font-size: .62rem; }
    html[data-forecast-range="14"] #forecast .fc-day .extra { font-size: .63rem; }
  }
  #forecast-outlook { min-height: 0; }
  #forecast-outlook .outlook-toolbar { display: grid; grid-template-columns: minmax(25rem, 1fr) minmax(0, 70rem) minmax(0, 1fr); align-items: flex-start; gap: .6rem 1rem; margin: .55rem 0 .45rem; }
  #forecast-outlook .outlook-period { grid-column: 1; }
  #forecast-outlook .outlook-controls { display: flex; align-items: center; gap: 1rem; }
  #forecast-outlook .outlook-mode-stack { grid-column: 2; justify-self: start; text-align: left; }
  #forecast-outlook .outlook-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 70rem; margin: .35rem auto; }
  #forecast-outlook .outlook-signal { max-width: 70rem; margin: .35rem auto .5rem; }
  #forecast-outlook .outlook-signal h3 { margin: 0 0 .22rem; font-size: .76rem; color: #626057; }
  #forecast-outlook .outlook-signal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  #forecast-outlook .outlook-signal-card { padding: .4rem .5rem; border: 1px solid #e0ded5; border-radius: 7px; background: #fbfaf6; }
  #forecast-outlook .outlook-signal-card .k { color: #77756d; font-size: .64rem; font-weight: 650; text-transform: uppercase; }
  #forecast-outlook .outlook-signal-card .v { margin-top: .06rem; color: #2f302c; font-size: 1rem; font-weight: 700; }
  #forecast-outlook .outlook-signal-card .a { margin-top: .04rem; color: #8b5540; font-size: .68rem; font-weight: 650; }
  #forecast-outlook .outlook-signal-card .s, #forecast-outlook .outlook-signal p { margin: .12rem 0 0; color: #77756d; font-size: .62rem; line-height: 1.25; }
  #forecast-outlook .outlook-map-card { padding: .45rem; border: 1px solid #e0ded5; border-radius: 8px; background: #fbfaf6; }
  #forecast-outlook .outlook-map-card h3 { margin: 0 0 .25rem; font-size: .78rem; color: #626057; }
  #forecast-outlook .outlook-map-card svg { display: block; width: 100%; height: min(25vw, 18rem); min-height: 12rem; }
  #forecast-outlook .outlook-period { display: grid; width: min(100%, 20rem); gap: .25rem; }
  #forecast-outlook .outlook-week-picker, #forecast-outlook .outlook-date-nav { width: 100%; min-height: 2rem; box-sizing: border-box; border: 1.5px solid #c8c7c0; border-radius: 7px; }
  #forecast-outlook .outlook-week-picker select { width: 100%; min-height: 2rem; padding-inline: .48rem; font-size: .8rem; font-weight: 650; color: #33332f; text-align: center; text-align-last: center; }
  #forecast-outlook .outlook-date-nav { display: grid; grid-template-columns: 1.82rem minmax(0, 1fr) 1.82rem; }
  #forecast-outlook .outlook-date-nav .map-step-btn { width: auto; min-height: 2rem; }
  #forecast-outlook .outlook-period-dates { display: grid; place-items: center; min-height: 2rem; padding: 0 .25rem; border-left: 1px solid #e4e2da; border-right: 1px solid #e4e2da; color: #33332f; font-size: .8rem; font-weight: 650; text-align: center; white-space: nowrap; }
  #forecast-outlook .outlook-anomaly-note { margin: .18rem 0 0; color: #77756d; font-size: .64rem; }
  @media (max-width: 900px) {
    #forecast-outlook .outlook-toolbar { display: flex; flex-wrap: wrap; }
    #forecast-outlook .outlook-mode-stack { order: 2; }
    #forecast-outlook .outlook-signal-grid { grid-template-columns: 1fr; }
  }
  #forecast-outlook .outlook-outline path { fill: none; stroke: rgba(255,255,255,.36); stroke-width: .008; }
  #forecast-outlook .fc-foot { margin-top: .65rem; font-size: .58rem; }
  .station-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 24rem;
    min-width: min(100%, 15rem);
    max-width: 26rem;
    margin-left: auto;
    order: 3;
  }
  .station-picker label {
    font-size: 0.72rem;
    color: #66645c;
    font-weight: 600;
  }
  .station-picker-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }
  .station-picker input {
    width: 100%;
    min-width: 0;
    height: 1.82rem;
    padding: 0.22rem 1.8rem 0.22rem 0.52rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font: inherit;
    font-size: 0.78rem;
  }
  .station-picker input:focus {
    outline: 2px solid rgba(92,122,98,0.24);
    border-color: #5c7a62;
  }
  .baseline-control {
    order: 2;
    display: flex;
    align-items: center;
    gap: 0.32rem;
    flex: 0 0 auto;
    margin-left: 1.25rem;
  }
  .baseline-control label {
    font-size: 0.78rem;
    color: #66645c;
    font-weight: 600;
    white-space: nowrap;
  }
  .baseline-control .option-select { height: 1.82rem; max-width: 11rem; }
  .baseline-control.is-auto-changed .option-select {
    animation: baseline-auto-flash 3.8s cubic-bezier(.22,.8,.25,1);
  }
  .baseline-control.is-auto-restored .option-select {
    animation-name: baseline-restore-flash;
  }
  @keyframes baseline-auto-flash {
    0% { box-shadow: 0 0 0 0 rgba(179, 120, 42, 0); border-color: #ddd9cf; background: #fff; }
    14% { box-shadow: 0 0 0 3px rgba(179, 120, 42, 0.34); border-color: rgba(179, 120, 42, 0.68); background: #fff8e8; }
    42% { box-shadow: 0 0 0 2px rgba(179, 120, 42, 0.22); border-color: rgba(179, 120, 42, 0.48); background: #fffaf0; }
    100% { box-shadow: 0 0 0 0 rgba(179, 120, 42, 0); border-color: #ddd9cf; background: #fff; }
  }
  @keyframes baseline-restore-flash {
    0% { box-shadow: 0 0 0 0 rgba(92, 122, 98, 0); border-color: #ddd9cf; background: #fff; }
    14% { box-shadow: 0 0 0 3px rgba(92, 122, 98, 0.3); border-color: rgba(92, 122, 98, 0.62); background: #f5fbf4; }
    42% { box-shadow: 0 0 0 2px rgba(92, 122, 98, 0.2); border-color: rgba(92, 122, 98, 0.44); background: #f8fcf7; }
    100% { box-shadow: 0 0 0 0 rgba(92, 122, 98, 0); border-color: #ddd9cf; background: #fff; }
  }
  .baseline-control.is-disabled { opacity: 0.5; }
  .baseline-control.is-disabled .info-btn { pointer-events: auto; }
  .station-picker-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 1.65rem;
    border: 0;
    border-left: 1px solid #ddd9cf;
    border-radius: 0 5px 5px 0;
    background: transparent;
    color: #66645c;
    font-size: 0.82rem;
    cursor: pointer;
  }
  .station-picker-toggle:hover,
  .station-picker-toggle:focus-visible {
    background: #f1efe7;
    outline: none;
  }
  .station-picker-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.28rem);
    left: 3.8rem;
    right: 0;
    max-height: min(24rem, 70vh);
    overflow: auto;
    padding: 0.25rem;
    border: 1px solid #d5d3ca;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(55, 54, 48, 0.16);
  }
  .station-picker-item {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) 3.1rem 3.2rem minmax(4.6rem, auto);
    align-items: baseline;
    gap: 0.45rem;
    width: 100%;
    padding: 0.34rem 0.42rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #2f2f2b;
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
  }
  .station-picker-item:hover,
  .station-picker-item:focus-visible,
  .station-picker-item.active {
    background: #f1efe7;
    outline: none;
  }
  .spi-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spi-state, .spi-year, .spi-members { color: #77736a; white-space: nowrap; }
  .spi-state { font-weight: 650; }
  .spi-members { text-align: right; }
  .station-btn {
    padding: 0.24rem 0.66rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 20px;
    background: #fff;
    font-size: 0.8rem;
    font-family: inherit;
    color: #444;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: normal;
  }
  .station-btn:hover { background: #ebe9e1; border-color: #b0afa8; }
  .station-btn.active {
    border-color: var(--sc);
    background: var(--sc);
    color: #fff;
    font-weight: 600;
  }
  .station-btn.secondary-active {
    border-color: var(--sc2);
    background: transparent;
    color: var(--sc2);
    font-weight: 600;
  }

  .archive-toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(14rem, 1fr) auto;
    align-items: start;
    gap: 0.22rem 0.42rem;
    margin-bottom: 0.28rem;
  }

  .param-group {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0.18rem;
    flex-wrap: wrap;
    justify-self: center;
    align-self: start;
    margin-left: 0;
    padding: 0.08rem 0.2rem;
    border: 1px solid rgba(212, 211, 204, 0.75);
    border-radius: 8px;
    background: rgba(255,255,255,0.42);
  }
  .param-btn {
    padding: 0.2rem 0.5rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.78rem;
    font-family: inherit;
    color: #555;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .param-btn:hover { background: #ebe9e1; }
  .param-btn:disabled,
  .param-btn.unavailable {
    opacity: 0.42;
    cursor: not-allowed;
  }
  .param-btn:disabled:hover,
  .param-btn.unavailable:hover {
    background: #fff;
  }
  .param-btn.active {
    border-color: #5c7a62;
    background: #5c7a62;
    color: #fff;
    font-weight: 600;
  }

  .sep { width: 1px; height: 1.4rem; background: #d4d3cc; margin: 0 0.1rem; }

  .range-group {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
    margin-left: 0;
    align-self: start;
    padding: 0.08rem 0.22rem;
    border: 1px solid rgba(212, 211, 204, 0.75);
    border-radius: 8px;
    background: rgba(255,255,255,0.34);
  }
  .option-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.18rem;
    margin-right: 0;
    margin-left: 0;
    justify-self: end;
    align-self: start;
    padding: 0.1rem 0.24rem;
    border: 1px solid rgba(212, 211, 204, 0.75);
    border-radius: 8px;
    background: rgba(255,255,255,0.42);
  }
  .option-row {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
  }
  .option-group .option-row + .option-row {
    padding-left: 0.04rem;
    gap: 0.42rem;
  }
  .agg-group {
    display: inline-flex;
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    overflow: hidden;
  }
  .agg-btn { display: flex; }
  .agg-btn input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
  }
  .agg-btn span {
    display: block;
    padding: 0.22rem 0.56rem;
    font-size: 0.78rem;
    font-family: inherit;
    color: #555;
    background: #fff;
    cursor: pointer;
    border-right: 1px solid #c8c7c0;
    white-space: normal;
    transition: background 0.12s, color 0.12s;
    user-select: none;
  }
  .agg-btn:last-child span { border-right: none; }
  .agg-btn:hover span { background: #ebe9e1; }
  .agg-btn:has(input:checked) span { background: #888; color: #fff; font-weight: 600; }
  .anomaly-group {
    display: inline-flex;
    align-items: center;
    gap: 0.26rem;
    margin-left: 0.38rem;
  }
  .anomaly-group .option-select { opacity: 0.45; transition: opacity 0.15s; }
  .anomaly-group:has(#anomaly-mode:checked) .option-select { opacity: 1; }
  .option-row:has(input[name="agg"][value="season"]:checked) .anomaly-group .option-select { opacity: 1; }
  .option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-size: 0.78rem;
    color: #555;
    white-space: normal;
  }
  .option-toggle input {
    margin: 0;
    accent-color: #5c7a62;
  }
  .option-toggle:has(input:disabled) { opacity: 0.35; cursor: default; pointer-events: none; }
  .option-select {
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    padding: 0.2rem 0.42rem;
    background: #fff;
    font-size: 0.78rem;
    font-family: inherit;
    color: #555;
  }
  #anomaly-baseline { width: 11.9rem; }
  .info-btn {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 50%;
    background: #fff;
    color: #5c5c54;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .info-btn:hover { background: #ebe9e1; }
  .range-btn {
    padding: 0.24rem 0.52rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.78rem;
    font-family: inherit;
    color: #555;
    cursor: pointer;
  }
  .range-btn:hover { background: #ebe9e1; }
  .range-btn.active { border-color: #888; background: #888; color: #fff; }
  /* active preset the data can't fully cover (e.g. 30J on UV): stays selected, but dimmed
     with a dotted underline + tooltip so the shorter actual range is obvious. */
  .range-btn.active.range-clamped { background: #9a8f7d; border-color: #b0a99a; text-decoration: underline dotted; }
  .compact-action {
    padding-left: 0.62rem;
    padding-right: 0.62rem;
  }

  /* Date fields */
  .date-row {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex: 0 1 auto;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #555;
    padding: 0.08rem 0.22rem;
    border: 1px solid rgba(212, 211, 204, 0.75);
    border-radius: 8px;
    background: rgba(255,255,255,0.34);
  }
  .date-row label { color: #666; }
  .date-field { position: relative; display: inline-flex; align-items: center; }
  .date-display {
    width: 7.35rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    padding: 0.22rem 2.05rem 0.22rem 0.42rem;
    font-size: 0.82rem;
    font-family: inherit;
    background: #fff;
  }
  .date-display:focus { outline: 2px solid #5c7a62; border-color: transparent; }
  .picker-btn {
    position: absolute;
    right: 0.18rem;
    top: 50%;
    transform: translateY(-50%);
    min-width: 1.9rem;
    padding: 0.12rem 0.28rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 4px;
    background: #f0efe8;
    font-size: 0.68rem;
    cursor: pointer;
  }
  .picker-btn:hover { background: #e0dfd8; }
  .native-date-input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  }
  .nav-btn {
    min-width: 2rem;
    padding: 0.22rem 0.44rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-btn:hover:not(:disabled) { background: #ebe9e1; }
  .nav-btn:disabled { opacity: 0.4; cursor: default; }

  /* Messages */
  #error, #empty {
    display: none;
    border-radius: 8px;
    padding: 0.62rem 0.82rem;
    margin-bottom: 0.3rem;
    font-size: 0.84rem;
  }
  #error { background: #fff3f0; border: 1px solid #f5c0b0; color: #8b1a00; }
  #empty { background: #fffae8; border: 1px solid #e8d58a; color: #6a4d00; }
  #loading {
    display: none;
    position: fixed;
    bottom: 1.1rem;
    right: 1.1rem;
    z-index: 50;
    border-radius: 8px;
    padding: 0.52rem 0.9rem;
    font-size: 0.84rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: #f0f5f0;
    border: 1px solid #b8cebb;
    color: #3a5c40;
  }

  .seasonal-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    margin-bottom: 0.24rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 0.78rem;
    color: #1e40af;
  }
  .seasonal-info[hidden] { display: none; }

  .archive-collapse-section {
    min-width: 0;
  }
  .archive-stats-section {
    margin: 0 0 0.28rem;
    padding: 0.34rem 0.54rem 0.42rem;
    border: 1px solid #deded5;
    border-radius: 9px;
    background: linear-gradient(170deg, #fafaf6, #f4f3ec);
  }
  .archive-collapse-title {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    margin-bottom: 0.24rem;
    color: #3f463d;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .archive-collapse-section.collapsed .archive-collapse-title { margin-bottom: 0; }
  .archive-collapse-section.collapsed .archive-collapse-body { display: none; }
  .archive-collapse-btn {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #c8d4c4;
    border-radius: 5px;
    background: #f4f7f1;
    color: #2f5b3b;
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(45,62,48,.08);
  }
  .archive-collapse-btn:hover { border-color: #b9c7b2; background: #f3f6ef; }
  .archive-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .archive-title-meta {
    margin-left: auto;
    color: #7a7a72;
    font-size: 0.68rem;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
  }

  .climate-profile {
    display: block;
    margin: 0.42rem 0 0.28rem;
    padding: 0.42rem 0.54rem 0.5rem;
    border: 1px solid #deded5;
    border-radius: 9px;
    background: linear-gradient(170deg, #fafaf6, #f4f3ec);
  }
  .climate-profile[hidden] { display: none; }
  .climate-profile-title {
    display: flex;
    justify-content: flex-start;
    gap: 0.34rem;
    align-items: center;
    margin-bottom: 0.34rem;
    color: #3b3b36;
    font-size: 0.76rem;
    font-weight: 700;
  }
  .climate-profile-title span:last-child {
    color: #7a7a72;
    font-weight: 500;
    font-size: 0.68rem;
  }
  .climate-profile-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.22rem;
  }
  .climate-profile-month {
    min-width: 0;
    padding: 0.3rem 0.34rem;
    border-radius: 7px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(170,170,155,0.34);
  }
  .profile-month-head {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    color: #7a7a72;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.14rem;
  }
  .climate-profile-month.is-past-latest { opacity: 0.6; }
  .climate-profile-month.is-past-latest .profile-month-sub:first-of-type { color: #9a948c; }
  .profile-month-main {
    color: #1c1c1a;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: normal;
  }
  .profile-month-sub {
    margin-top: 0.1rem;
    color: #7a7a72;
    font-size: 0.64rem;
    line-height: 1.22;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .profile-hot { color: #b91c1c; }
  .profile-cold { color: #1d4ed8; }
  .profile-flat { color: #78716c; }
  @media (max-width: 1180px) { .climate-profile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 760px) { .climate-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .chart-warning { color: #8a5a00; font-size: 0.74rem; font-weight: 500; margin-left: 0.45rem; white-space: nowrap; }

  /* Stats grid */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.24rem;
    margin-bottom: 0;
  }
  .stat-card {
    min-width: 0;
    min-height: 4.28rem;
    max-height: 4.28rem;
    overflow: visible;
    padding: 0.24rem 0.46rem;
    border: 1px solid #deded5;
    border-radius: 9px;
    background: linear-gradient(170deg, #fafaf6, #f4f3ec);
  }
  .stat-label {
    display: block;
    font-size: 0.63rem;
    color: #7a7a72;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
  }
  .stat-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    font-size: 0.96rem;
    font-weight: 700;
    color: #1c1c1a;
    line-height: 1.25;
    padding-bottom: 0.02rem;
  }
  .stat-note {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.65rem;
    color: #7a7a72;
    margin-top: 0.18rem;
    line-height: 1.38;
    padding-bottom: 0.04rem;
  }
  .stat-card.has-detail {
    position: relative;
    cursor: help;
  }
  .detail-tooltip {
    position: absolute;
    left: 0.45rem;
    top: calc(100% + 0.36rem);
    z-index: 20;
    display: none;
    width: max-content;
    max-width: min(40rem, calc(100vw - 1.5rem));
    padding: 0.44rem 0.56rem;
    border: 1px solid #d6d4c9;
    border-radius: 8px;
    background: #fffef9;
    color: #45453f;
    box-shadow: 0 0.45rem 1.4rem rgba(0,0,0,.16);
    font-size: 0.72rem;
    line-height: 1.45;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
  }
  .stat-card.has-detail:hover .detail-tooltip,
  .stat-card.has-detail:focus .detail-tooltip {
    display: block;
  }
  /* Modal overlays */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(28, 28, 26, 0.32);
  }
  .modal-backdrop[hidden] { display: none; }
  .modal-panel {
    position: relative;
    width: min(44rem, 100%);
    max-height: min(80vh, 42rem);
    overflow: auto;
    border: 1px solid #d8d7cf;
    border-radius: 10px;
    background: #fff;
    padding: 0.9rem 1rem;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.22);
  }
  .modal-panel h2 {
    font-size: 1rem;
    margin-bottom: 0.55rem;
  }
  .modal-panel p {
    margin-bottom: 0.55rem;
    color: #444;
    font-size: 0.86rem;
    line-height: 1.45;
  }
  .modal-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    border: 0;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: #666;
    cursor: pointer;
  }
  .records-table-wrap { overflow-x: auto; }
  .records-recent { margin: .24rem 0 .48rem; padding-bottom: .42rem; border-bottom: 1px solid #dfdcd2; }
  .records-recent-toggle { position: absolute; left: 67%; top: 50%; transform: translate(-50%, -50%); border: 1px solid #c8b68d; border-radius: 6px; background: #f6f0df; color: #685126; padding: .3rem .58rem; font: inherit; font-size: .73rem; font-weight: 700; cursor: pointer; }
  .records-recent-toggle:hover { border-color: #9f8350; background: #eee3c8; }
  .records-recent-toggle.active { border-color: #806536; background: #e5d2a4; color: #4c3a18; box-shadow: inset 0 0 0 1px rgba(128,101,54,.12); }
  .records-recent > p { margin: 0 0 .26rem; color: #77736a; font-size: .72rem; }
  .records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
  }
  .records-main-table,
  .records-national-table {
    table-layout: fixed;
  }
  .records-table th,
  .records-table td {
    padding: 0.34rem 0.42rem;
    border-bottom: 1px solid #e5e4dc;
    text-align: left;
    white-space: normal;
  }
  .records-table thead th {
    background: #f3f1e8;
    border-top: 1px solid #dedbd0;
    border-bottom: 2px solid #d1cec2;
    color: #666;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .records-panel {
    background: #fff;
    border-radius: 10px;
    padding: 0.68rem 0.78rem 0.72rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
  }
  .records-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    gap: 0.38rem 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.32rem;
  }
  .records-header-actions { display: inline-flex; align-items: center; margin-left: auto; }
  .records-table-header { padding-bottom: .18rem; }
  .records-heading-line {
    display: flex;
    align-items: baseline;
    gap: 0.32rem;
    min-width: 0;
    flex-wrap: wrap;
  }
  .records-subtitle,
  .records-loading,
  .records-empty {
    color: #77736a;
    font-size: 0.78rem;
  }
  .records-heading-line .card-title { margin-bottom: 0; }
  .records-scope-toggle {
    display: inline-flex;
    align-self: center;
    flex: 0 0 auto;
    border: 1.5px solid #c8c7c0;
    border-radius: 7px;
    overflow: hidden;
  }
  .records-scope-btn {
    padding: 0.24rem 0.72rem;
    border: 0;
    background: #fff;
    font: inherit;
    font-size: 0.78rem;
    color: #555;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .records-scope-btn + .records-scope-btn { border-left: 1.5px solid #c8c7c0; }
  .records-scope-btn:hover { background: #ebe9e1; }
  .records-scope-btn.active { background: #5c7a62; color: #fff; }
  @media (max-width: 760px) { .records-header-actions { margin-left: 0; } .records-recent-toggle { position: static; transform: none; margin-right: .42rem; } }
  .records-main-table th:first-child,
  .records-national-table th:first-child {
    width: 8.2rem;
    color: #5a5a52;
    font-weight: 700;
  }
  .records-main-table td:nth-child(3) {
    font-weight: 700;
    color: #22221f;
    white-space: nowrap;
  }
  .records-main-table th:nth-child(2) { width: 25%; }
  .records-main-table th:nth-child(3) { width: 12%; }
  .records-main-table th:nth-child(4) { width: 18%; }
  .records-main-table th:nth-child(5) { width: 26%; }
  .records-main-table td:nth-child(4) {
    white-space: nowrap;
  }
  /* National table adds a Station column: Wert (3), Station (4), Datum (5). */
  .records-national-table td:nth-child(3) {
    font-weight: 700;
    color: #22221f;
    white-space: nowrap;
  }
  .records-national-table td:nth-child(4) { font-weight: 600; }
  .records-national-table td:nth-child(5) { white-space: nowrap; }
  .records-national-table th:nth-child(2) { width: 20%; }
  .records-national-table th:nth-child(3) { width: 10%; }
  .records-national-table th:nth-child(4) { width: 20%; }
  .records-national-table th:nth-child(5) { width: 14%; }
  .records-national-table th:nth-child(6) { width: 22%; }

  /* Maps */
  .maps-panel-inner {
    background: #fff;
    border-radius: 10px;
    padding: 0.68rem 0.78rem 0.78rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
  }
  .maps-header {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto minmax(10rem, 1fr);
    align-items: flex-start;
    gap: 0.55rem 1rem;
    margin-bottom: 0.58rem;
  }
  .maps-header p {
    max-width: 48rem;
    color: #77736a;
    font-size: 0.74rem;
    line-height: 1.25;
  }
  .maps-header.compact {
    margin-bottom: 0.24rem;
  }
  .maps-header.compact .map-global-controls {
    grid-column: 3;
    justify-content: flex-start;
  }
  .map-global-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.58rem;
  }
  .map-global-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    color: #4f4d47;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .map-global-controls .map-baseline-control {
    gap: 0.34rem;
    min-height: 2rem;
    color: #5f5d55;
    font-size: 0.84rem;
    font-weight: 650;
  }
  .map-global-controls .map-baseline-control select {
    min-width: 8.3rem;
    min-height: 1.82rem;
    padding: 0.16rem 0.34rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
  }
  .maps-controls.multiples {
    margin-top: -0.04rem;
  }
  .map-baseline-slot {
    justify-content: flex-start;
  }
  .maps-stale-note {
    margin: 0 0 0.55rem;
    padding: 0.42rem 0.58rem;
    border: 1px solid #e3c56d;
    border-radius: 7px;
    background: #fff8e8;
    color: #6d4b00;
    font-size: 0.78rem;
  }
  .maps-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.36rem;
    margin-bottom: 0.68rem;
  }
  .map-control-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.34rem;
    min-width: 0;
  }
  .map-control-left {
    justify-content: flex-start;
  }
  .map-control-right {
    justify-content: flex-start;
  }
  .map-mode-tabs {
    display: inline-flex;
    min-height: 2rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
  }
  .map-mode-btn {
    border: 0;
    border-right: 1px solid #dddcd4;
    background: #fafaf6;
    color: #5f5d55;
    padding: 0.24rem 0.52rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .map-mode-btn:last-child { border-right: 0; }
  .map-mode-btn.active {
    background: #4d7f62;
    color: #fff;
  }
  .maps-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    color: #5f5d55;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .maps-controls select {
    min-height: 2rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 7px;
    background: #fff;
    color: #33332f;
    font: inherit;
    font-weight: 500;
    max-width: 9.2rem;
    padding: 0.22rem 1.35rem 0.22rem 0.42rem;
  }
  #map-multiples { max-width: 8.5rem; }
  .map-tiles-control {
    margin-left: clamp(1rem, 1.6vw, 1.8rem);
    padding: 0.08rem 0.34rem 0.08rem 0.42rem;
    border: 1px solid #dedbd2;
    border-radius: 8px;
    background: #f5f4ef;
  }
  .maps-controls .map-tiles-control {
    color: #4a4944;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .map-tiles-control select {
    border-color: #bcb9af;
    background: #fff;
    box-shadow: 0 1px 3px rgba(58, 54, 44, 0.08);
  }
  #map-baseline {
    min-width: 8.2rem;
    max-width: 8.8rem;
    font-weight: 500;
  }
  #map-left-layer,
  #map-right-layer { max-width: 11.2rem; }
  #map-left-param,
  #map-right-param { max-width: 8.2rem; }
  .maps-controls select:disabled {
    opacity: 0.46;
    cursor: not-allowed;
  }
  .map-check {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    color: #5f5d55;
    font-size: 0.78rem;
    font-weight: 600;
    min-height: 2rem;
    padding: 0.25rem 0.52rem;
    border: 1.5px solid #d8d7cf;
    border-radius: 7px;
    background: #fafaf6;
  }
  .map-check input {
    width: 0.88rem;
    height: 0.88rem;
  }
  /* Groups related checkboxes into one bordered pill (matches .map-mode-tabs' look) instead
     of each rendering as its own separate box. */
  .map-check-group {
    display: inline-flex;
    border: 1.5px solid #c8c7c0;
    border-radius: 7px;
    background: #fafaf6;
    overflow: hidden;
  }
  .map-check-group .map-check {
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .map-check-group .map-check + .map-check {
    border-left: 1px solid #dddcd4;
  }
  .map-month-controls {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1.5px solid #c8c7c0;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
  }
  .map-month-controls.disabled {
    opacity: 0.52;
  }
  .map-month-controls select {
    width: 7.9rem;
    min-height: 2rem;
    border: 0;
    border-left: 1px solid #dddcd4;
    border-right: 1px solid #dddcd4;
    padding: 0.18rem 0.26rem;
    color: #33332f;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 650;
    background: #fff;
  }
  .map-step-btn {
    display: inline-grid;
    place-items: center;
    width: 1.82rem;
    min-height: 2rem;
    border: 0;
    background: #fafaf6;
    color: #555;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
  }
  .map-step-btn:hover:not(:disabled) { background: #ebe9e1; }
  .map-step-btn.coarse { width: 1.38rem; color: #746c5f; font-size: 0.82rem; }
  /* min/max seek buttons carry a word, so they size to their content */
  .map-step-btn.seek { width: auto; padding: 0 0.42rem; font-size: 0.74rem; }
  .map-step-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .maps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.72rem;
  }
  .maps-grid.compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .maps-grid:not(.compare) .map-card {
    width: min(100%, 74rem);
    margin-inline: auto;
  }
  .map-card {
    min-width: 0;
    border: 1px solid #e0ded5;
    border-radius: 8px;
    background: #fbfaf5;
    padding: 0.56rem 0.58rem 0.46rem;
  }
  .map-card-meta {
    /* Sized for the tallest realistic grid-layer meta (title/subtitle + rank chip + min/max +
       share badges wrapping to 2 lines + auto-caption + collapsed Bundesländer toggle), so a
       station-only layer (no grid meta at all) still keeps its map starting at the same height. */
    min-height: 7.3rem;
  }
  .map-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.36rem;
  }
  .maps-grid:not(.compare) .map-card-meta {
    min-height: 5.4rem;
  }
  .map-title {
    color: #30302c;
    font-size: 0.9rem;
    font-weight: 700;
  }
  .map-subtitle {
    color: #747168;
    font-size: 0.72rem;
    line-height: 1.25;
  }
  .map-count {
    flex: 0 0 auto;
    color: #77736a;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .map-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem 0.55rem;
    min-height: 1.22rem;
    margin: -0.08rem 0 0.28rem;
    color: #5f5c53;
    font-size: 0.72rem;
    line-height: 1.25;
  }
  .map-summary strong {
    color: #30302c;
    font-weight: 750;
  }
  .map-summary span {
    color: #6f6c62;
  }
  .map-summary .map-share-chip {
    padding: 0.06rem 0.34rem;
    border-radius: 999px;
    background: #efede5;
    color: #55524a;
    font-weight: 700;
  }
  .map-auto-caption {
    display: inline-block;
    min-height: 1.42rem;
    margin: 0.18rem 0 0.56rem;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    background: rgba(236, 234, 227, 0.82);
    color: #55534d;
    font-size: 0.78rem;
    line-height: 1.28;
    font-weight: 700;
  }
  .map-auto-caption.empty { visibility: hidden; }
  .map-state-summary {
    margin: -0.02rem 0 0.28rem;
    color: #5f5c53;
    font-size: 0.72rem;
  }
  .map-state-summary summary {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    cursor: pointer;
    color: #49624f;
    font-weight: 720;
    list-style: none;
  }
  .map-state-summary summary::-webkit-details-marker { display: none; }
  .map-state-summary summary::before {
    content: "▸";
    color: #7b8c7c;
    font-size: 0.68rem;
  }
  .map-state-summary[open] summary::before { content: "▾"; }
  .map-state-summary-wrap {
    overflow-x: auto;
    margin-top: 0.26rem;
    border-top: 1px solid #e4e1d8;
    padding-top: 0.24rem;
  }
  .map-state-summary table {
    width: 100%;
    border-collapse: collapse;
    min-width: 28rem;
  }
  .map-state-summary th,
  .map-state-summary td {
    padding: 0.18rem 0.34rem;
    border-bottom: 1px solid #ebe8df;
    text-align: right;
    white-space: nowrap;
  }
  .map-state-summary th:nth-child(2),
  .map-state-summary td:nth-child(2) {
    text-align: left;
  }
  .map-state-summary thead th {
    color: #77736a;
    font-weight: 700;
  }
  .map-state-summary tbody th {
    color: #36362f;
    font-weight: 720;
  }
  .station-map {
    display: block;
    width: 100%;
    aspect-ratio: 1000 / 560;
    min-height: 17rem;
  }
  .maps-grid:not(.compare) .station-map {
    max-height: 56vh;
    min-height: 13rem;
  }
  .map-frame {
    fill: #f5f4ee;
    stroke: #d8d6cc;
    stroke-width: 1.5;
  }
  .map-state {
    fill: #ecebe3;
    stroke: #cbc8ba;
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
  }
  .map-state.state-1 { fill: #f1efe8; }
  .map-state.state-2 { fill: #e7e8df; }
  .map-river-line {
    fill: none;
    stroke: rgba(44, 110, 138, 0.28);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .map-state-label {
    fill: rgba(74, 72, 65, 0.34);
    font-size: 18px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
  }
  .map-grid-raster {
    opacity: 0.86;
    mix-blend-mode: multiply;
  }
  .map-raster-hit {
    fill: transparent;
    pointer-events: all;
  }
  .map-pending-overlay rect {
    fill: rgba(250, 249, 243, 0.76);
    stroke: rgba(87, 126, 101, 0.28);
    stroke-width: 1.4;
  }
  .map-pending-overlay text {
    fill: #4f5f55;
    font-size: 20px;
    font-weight: 800;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(255,255,255,0.82);
    stroke-width: 4px;
    stroke-linejoin: round;
  }
  .map-pending-overlay text.small {
    fill: #747168;
    font-size: 13px;
    font-weight: 650;
  }
  .map-capital {
    pointer-events: none;
  }
  .map-capital circle {
    fill: #4e4c44;
    stroke: #fff;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
  }
  .map-capital text {
    fill: rgba(45, 45, 40, 0.76);
    font-size: 13px;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255,255,255,0.86);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
  }
  .map-station-point {
    stroke: rgba(255,255,255,0.92);
    stroke-width: 1.8;
    cursor: pointer;
    transition: r 0.12s ease, stroke-width 0.12s ease;
  }
  .map-station-point:hover {
    stroke: #1c1c1a;
    stroke-width: 2.5;
  }
  .map-station-point.selected {
    stroke: #1c1c1a;
    stroke-width: 3.5;
  }
  .map-station-point.grid-context {
    opacity: 0.62;
    stroke-width: 1.2;
  }
  .map-station-point.grid-context:hover,
  .map-station-point.grid-context.selected {
    opacity: 1;
  }
  .map-anim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    /* The map's visible frame is inset 26/1000 of the svg width, so match it
       and the bar's border lines up with the panel above instead of
       overhanging it. */
    margin: 0.52rem 2.6% 0.05rem;
    padding: 0.34rem 0.55rem;
    min-height: 2rem;
    border: 1px solid #d8ceb8;
    border-radius: 8px;
    background: #fffaf0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    font-size: 0.78rem;
  }
  .map-anim-caption {
    color: #675337;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .map-anim-controls input[type="range"] { flex: 1 1 12rem; min-width: 90px; accent-color: #7a5c2c; }
  .map-anim-controls select { font-size: 0.76rem; padding: 0.1rem 0.2rem; }
  .map-anim-label { flex: 0 0 13.5rem; text-align: center; font-weight: 600; color: #4a4a42; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* while playing, per-pixel hover values would refer to a stale frame */
  .map-animating .map-raster-hit { pointer-events: none; }
  .map-anim-label.record { color: #b03d2f; }
  /* cold/dry end of the anomaly palette, so the marker matches the map */
  .map-anim-label.record-low { color: #3370a6; }

  /* Austria-wide ranking chip in the map summary; also used for the Klimaspirale's
     station-data-insufficient notice so it carries the same visual weight, not a
     footnote that's easy to miss. */
  .map-rank-chip,
  .spiral-fallback-chip,
  .zonal-fallback-chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #f3e8df;
    border: 1px solid #e0cbb8;
    color: #8a4a2c;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.12;
    cursor: help;
  }

  /* small multiples (Kleinvielfache) */
  .map-multiples-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.4rem;
  }
  .map-tile { margin: 0; cursor: pointer; border: 1px solid #e0ddd2; border-radius: 7px; overflow: hidden; background: #fbfaf6; }
  .map-tile svg { display: block; width: 100%; height: auto; }
  .map-tile.missing svg image { visibility: hidden; }
  .map-tile figcaption { font-size: 0.72rem; text-align: center; padding: 0.14rem 0.2rem; color: #55554d; }
  .map-tile:hover { border-color: #9a8a6a; }
  .map-tile.selected { border-color: #7a5c2c; box-shadow: 0 0 0 1px #7a5c2c; }
  .map-tile.missing figcaption::after { content: " · Karte fehlt"; color: #a09c90; }
  .map-multiples-card .map-legend { margin-top: 0.7rem; }
  @media (max-width: 880px) {
    .map-multiples-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .map-multiples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Wärmestreifen (warming stripes) */
  .stripes-card {
    margin: 0.7rem 0 0.85rem;
    padding: 0.55rem 0.75rem 0.42rem;
    border: 1px solid #e2ded2;
    border-radius: 9px;
    background: #fbfaf6;
  }
  .stripes-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.44rem; }
  .stripes-collapse-btn {
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #cbd8c5;
    border-radius: 5px;
    background: #f8fbf5;
    color: #48634d;
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
  }
  .stripes-collapse-btn:hover { border-color: #aebfa7; background: #f0f5ec; }
  .stripes-title { font-size: 0.85rem; font-weight: 700; color: #3c3c34; }
  .stripes-card.collapsed .stripes-body { display: none; }
  .stripes-canvas-wrap { position: relative; border-radius: 5px; overflow: visible; }
  .stripes-canvas-wrap canvas { display: block; width: 100%; }
  .stripes-trend-wrap { position: relative; margin-top: 0.08rem; }
  .stripes-trend-title { margin: 0 0 0.12rem 0.15rem; color: #6a675e; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
  .stripes-trend-wrap canvas { display: block; width: 100%; }
  .stripes-trend-tip { top: 1.45rem; text-align: left; line-height: 1.25; }
  .stripes-tip {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    background: rgba(30, 34, 40, 0.92);
    color: #f2f2ee;
    font-size: 0.72rem;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  .stripes-legend { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 0.34rem; font-size: 0.72rem; color: #55554d; font-variant-numeric: tabular-nums; }
  .stripes-legend-bar { flex: 0 1 380px; max-width: 60vw; height: 10px; border-radius: 3px; border: 1px solid #d8d4c8; }
  .stripes-legend-note { color: #8a8880; }
  .stripes-caption { display: inline; font-size: 0.74rem; color: #55554d; margin-top: 0.24rem; font-variant-numeric: tabular-nums; }
  .stripes-note { display: inline; font-size: 0.66rem; color: #8a8880; margin-left: 0.25rem; }
  .stripes-note::before { content: "· "; }

  .spiral-card {
    margin: 0.7rem 0 0.85rem;
    padding: 0.6rem 0.75rem 0.5rem;
    border: 1px solid #e2ded2;
    border-radius: 9px;
    background: #fbfaf6;
  }
  .spiral-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.44rem; }
  .spiral-collapse-btn {
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #cbd8c5;
    border-radius: 5px;
    background: #f8fbf5;
    color: #48634d;
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
  }
  .spiral-collapse-btn:hover { border-color: #aebfa7; background: #f0f5ec; }
  .spiral-title { font-size: 0.85rem; font-weight: 700; color: #3c3c34; }
  .spiral-stage-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }
  /* Shared player control bar for the Klimaspirale and the Zonalanomalien: one bordered
     row of play / restart / speed / timeline, sitting below each canvas. */
  .player-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: min(30rem, 100%);
    margin: 0.55rem auto 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e1dccf;
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 0.12rem 0.35rem rgba(60, 54, 42, 0.08);
  }
  .spiral-play-btn,
  .spiral-restart-btn,
  .spiral-speed-select {
    border: 1px solid #d5cdbf;
    border-radius: 6px;
    background: #faf7ef;
    color: #4f4b43;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
  }
  .spiral-play-btn { min-width: 3.35rem; }
  .spiral-restart-btn { min-width: 4.5rem; }
  /* Speed selects stay compact (fit "Normal"); the native dropdown still opens to the
     full option text. The timeline slider takes the freed space. */
  .spiral-speed-select,
  .zonal-speed-select { flex: 0 1 5.6rem; min-width: 4.4rem; max-width: 6.5rem; padding-right: 1.2rem; text-overflow: ellipsis; }
  .spiral-play-btn:hover,
  .spiral-restart-btn:hover,
  .spiral-speed-select:hover { border-color: #b9aa96; background: #f7f3eb; }
  .spiral-year-range {
    flex: 1 1 12rem;
    min-width: 0;
    height: 0.85rem;
    accent-color: #6f8fa3;
    background: transparent;
    cursor: pointer;
  }
  .spiral-year-range::-webkit-slider-runnable-track {
    height: 0.32rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #c6d6dd, #6f8fa3);
  }
  .spiral-year-range::-webkit-slider-thumb {
    width: 0.86rem;
    height: 0.86rem;
    margin-top: -0.27rem;
    border: 2px solid #fffdf8;
    border-radius: 50%;
    background: #5f8297;
    box-shadow: 0 0.08rem 0.28rem rgba(36, 58, 70, 0.28);
    appearance: none;
  }
  .spiral-year-range::-moz-range-track {
    height: 0.32rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #c6d6dd, #6f8fa3);
  }
  .spiral-year-range::-moz-range-thumb {
    width: 0.72rem;
    height: 0.72rem;
    border: 2px solid #fffdf8;
    border-radius: 50%;
    background: #5f8297;
    box-shadow: 0 0.08rem 0.28rem rgba(36, 58, 70, 0.28);
  }
  .spiral-card.collapsed .spiral-body { display: none; }
  .spiral-body { text-align: center; margin-top: -1.3rem; }
  .spiral-canvas-wrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
    overflow: visible;
    min-height: 0;
    padding: 0.2rem;
    border-radius: 8px;
    background: #171713;
    max-width: 100%;
  }
  .spiral-canvas-wrap canvas { display: block; max-width: 100%; cursor: default; }
  .spiral-tip { top: 6px; z-index: 3; }
  .spiral-caption { font-size: 0.74rem; color: #55554d; margin-top: 0.3rem; text-align: center; font-variant-numeric: tabular-nums; }
  /* Zonalanomalien — per-Bundesland spring-bar race; its own idiom, not the spiral. */
  .zonal-card {
    margin: 0.7rem 0 0.85rem;
    padding: 0.6rem 0.75rem 0.5rem;
    border: 1px solid #e2ded2;
    border-radius: 9px;
    background: #fbfaf6;
  }
  .zonal-head { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.44rem; }
  .zonal-collapse-btn {
    width: 1.15rem; height: 1.15rem;
    border: 1px solid #d8ccbb; border-radius: 5px;
    background: #fbf6ee; color: #6a5636;
    font-size: 0.72rem; line-height: 1; cursor: pointer;
  }
  .zonal-collapse-btn:hover { border-color: #c6b393; background: #f5ece0; }
  .zonal-title { font-size: 0.85rem; font-weight: 700; color: #3c3c34; }
  /* breathing room between the bar canvas and its control bar, matched to the spiral so
     the two cards end up the same height once their canvases are aligned */
  .zonal-card .zonal-controls { margin-top: 0.8rem; }
  .zonal-card.collapsed .zonal-body { display: none; }
  .zonal-body { text-align: center; }
  .zonal-canvas-wrap {
    position: relative;
    display: inline-flex; justify-content: center;
    max-width: 100%;
    padding: 0.35rem; border-radius: 8px;
    background: #15140f;
  }
  .zonal-canvas-wrap canvas { display: block; max-width: 100%; cursor: default; }
  .zonal-tip { top: 6px; z-index: 3; }
  .zonal-play-btn,
  .zonal-restart-btn,
  .zonal-speed-select {
    border: 1px solid #d5cdbf; border-radius: 6px;
    background: #faf7ef; color: #4f4b43;
    font-size: 0.72rem; font-weight: 700; line-height: 1.1;
    padding: 0.25rem 0.55rem; cursor: pointer;
  }
  .zonal-play-btn { min-width: 3.35rem; }
  .zonal-restart-btn { min-width: 4.5rem; }
  .zonal-play-btn:hover,
  .zonal-restart-btn:hover,
  .zonal-speed-select:hover { border-color: #7fb0a6; background: #eef6f3; }
  .zonal-year-range {
    flex: 1 1 12rem; min-width: 0; height: 0.85rem;
    accent-color: #4d9e8a; background: transparent; cursor: pointer;
  }
  .zonal-year-range::-webkit-slider-runnable-track {
    height: 0.32rem; border-radius: 999px;
    background: linear-gradient(90deg, #cfe7e0, #4d9e8a);
  }
  .zonal-year-range::-webkit-slider-thumb {
    width: 0.86rem; height: 0.86rem; margin-top: -0.27rem;
    border: 2px solid #fffdf8; border-radius: 50%;
    background: #3f8b78; box-shadow: 0 0.08rem 0.28rem rgba(18, 60, 52, 0.3);
    appearance: none;
  }
  .zonal-year-range::-moz-range-track {
    height: 0.32rem; border-radius: 999px;
    background: linear-gradient(90deg, #cfe7e0, #4d9e8a);
  }
  .zonal-year-range::-moz-range-thumb {
    width: 0.72rem; height: 0.72rem;
    border: 2px solid #fffdf8; border-radius: 50%;
    background: #3f8b78; box-shadow: 0 0.08rem 0.28rem rgba(18, 60, 52, 0.3);
  }
  .zonal-caption { font-size: 0.74rem; color: #55554d; margin-top: 0.3rem; text-align: center; font-variant-numeric: tabular-nums; }
  .zonal-note,
  .spiral-note { font-size: 0.66rem; color: #8a8880; margin-top: 0.2rem; text-align: center; line-height: 1.3; }

  /* Klimaspirale + Zonalanomalien side by side; stacks on narrow screens. */
  .records-duo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
  }
  .records-duo > .spiral-card,
  .records-duo > .zonal-card {
    flex: 1 1 340px;
    min-width: min(100%, 320px);
    margin: 0.7rem 0 0.2rem;
  }
  /* In a half-width column the spiral's canvas + controls no longer fit side by side,
     so stack them (same idea as its mobile breakpoint). */
  .records-duo .spiral-body { margin-top: 0; }
  @media (max-width: 720px) {
    .records-duo { gap: 0; }
  }

  /* Scoped to the single-map card so the tile view, whose grid spans the full
     card, keeps its own full-width legend. */
  .map-card > .map-legend { margin-inline: 2.6%; }
  .map-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: #66645c;
    font-size: 0.72rem;
    font-weight: 600;
  }
  .map-legend-bar {
    flex: 1 1 8rem;
    height: 0.55rem;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    cursor: help;
  }
  .map-legend-bar.grid-tl {
    background: linear-gradient(90deg, #37749d, #eee8ca, #da9a50, #b03d2f);
  }
  .map-legend-bar.grid-rr {
    background: linear-gradient(90deg, #f5f0dc, #7aacaa, #3e719a, #363a7a);
  }
  .map-legend-bar.grid-so {
    background: linear-gradient(90deg, #d2dbe0, #ecc665, #bf6f2e);
  }
  .map-legend-bar.grid-anom-tl {
    background: linear-gradient(90deg, #3370a6, #f7f6f0, #b54330);
  }
  .map-legend-bar.grid-anom-rr {
    background: linear-gradient(90deg, #ae7f44 0%, #f7f6f0 48%, #f7f6f0 52%, #69a69a 78%, #386c9a 100%);
  }
  .map-legend-bar.grid-anom-so {
    background: linear-gradient(90deg, #708e9d, #f7f6f0, #d28b30);
  }
  .map-hover-tip {
    position: fixed;
    z-index: 10000;
    /* Wide enough that a full "Stations-Abweichung 1961-1990: -12,3 °C" line
       stays intact; pre-line still wraps longer content instead of overflowing. */
    max-width: 17rem;
    padding: 0.28rem 0.42rem;
    border-radius: 5px;
    background: rgba(37, 36, 32, 0.94);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 700;
    white-space: pre-line;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  /* The click hint explains an interaction rather than reporting a measured
     value, so it is set apart from the readings above it. */
  .map-hover-hint {
    display: block;
    margin-top: 0.32rem;
    font-style: italic;
    font-weight: 500;
    opacity: 0.78;
  }

  /* Chart card */
  .card {
    background: #fff;
    border-radius: 10px;
    padding: 0.32rem 0.78rem 0.22rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
    margin-bottom: 0.16rem;
  }
  .card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.32rem;
  }

  /* Today in history */
  .today-section {
    background: #fff;
    border-radius: 10px;
    padding: 0.14rem 0.78rem;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
  }
  .aktuell-ytd,
  .aktuell-history,
  .aktuell-month-history { margin-top: 0.16rem; }

  .today-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.38rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #3f463d;
    margin-bottom: 0.15rem;
  }
  .today-section.collapsed .today-title { margin-bottom: 0; }
  .today-section.collapsed .today-grid { display: none; }
  .today-collapse-btn {
    flex: 0 0 auto;
    width: 1.18rem;
    height: 1.18rem;
    border: 1px solid #c8d4c4;
    border-radius: 5px;
    background: #f4f7f1;
    color: #2f5b3b;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(45,62,48,.08);
  }
  .today-collapse-btn:hover { border-color: #b9c7b2; background: #f3f6ef; }
  .today-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .today-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .today-card {
    min-width: 0;
    padding: 0.26rem 0.42rem;
    border: 1px solid #deded5;
    border-radius: 8px;
    background: linear-gradient(170deg, #fafaf6, #f4f3ec);
  }
  .today-card .stat-label { font-size: 0.63rem; }
  .today-card .stat-value { font-size: 0.92rem; }
  .today-card .stat-value .stat-inline { margin-left: 0.42rem; font-size: 0.72em; font-weight: 600; color: #6a6a6a; white-space: nowrap; }
  .today-card .stat-value .rain-day-share { margin-left: 0.55rem; font-size: 0.72em; font-weight: 700; }
  .today-card .stat-note  { font-size: 0.63rem; line-height: 1.23; overflow-wrap: anywhere; }
  .today-card .today-sub  { font-size: 0.7rem; line-height: 1.2; color: #6a6a6a; margin-top: 0.05rem; overflow-wrap: anywhere; }
  .ytd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ytd-grid .today-card { padding-block: 0.28rem; }
  .ytd-grid .stat-value .small-unit { font-size: 0.72em; color: #777; font-weight: 600; }
  .month-history-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* These cards reserve room for two records and the reference. */
  #today-grid .today-card .stat-note,
  .month-history-grid .today-card .stat-note { -webkit-line-clamp: 3; }
  .month-history-grid .today-sub { margin-top: 0; }
  .month-history-grid .today-sub + .stat-note { margin-top: 0.1rem; }

  /* Compare hint */
  .compare-hint {
    font-size: 0.72rem;
    color: #8a8a80;
    margin-bottom: 0.1rem;
  }

  /* Responsive */
  @media (max-width: 1040px) {
    header { grid-template-columns: minmax(0, 1fr) auto; }
    .klima-tabs { grid-column: 1 / -1; grid-row: 2; }
    .header-actions { grid-column: 2; grid-row: 1; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .today-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .maps-grid.compare { grid-template-columns: minmax(0, 1fr); }
    .stations-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stations-head { flex-direction: column; gap: 0.35rem; }
  }
  @media (max-width: 640px) {
    .klima-tabs { width: 100%; justify-self: stretch; justify-content: flex-start; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .station-row, .station-picker, .date-row { flex-basis: 100%; max-width: none; }
    .station-picker-list { left: 0; }
    .station-picker-item {
      grid-template-columns: minmax(8rem, 1fr) 2.8rem 3rem;
      gap: 0.35rem;
    }
    .spi-members { display: none; }
    .option-group { margin-left: 0; margin-right: 0; }
    .range-group { margin-left: 0; }
    .sep { display: none; }
    .stations-kpis { grid-template-columns: minmax(0, 1fr); }
    .stations-toolbar { align-items: stretch; flex-direction: column; gap: 0.42rem; }
    .stations-table { min-width: 42rem; }
  }

  .satellite-panel { padding: .72rem .82rem; border-radius: 10px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.06); }
  .satellite-header { display: flex; justify-content: space-between; gap: .7rem; align-items: flex-end; }
  .satellite-header h2 { margin: 0; color: #344a4a; font-size: 1rem; }
  .satellite-header p, .satellite-note { margin: .18rem 0 0; color: #706f68; font-size: .78rem; line-height: 1.35; }
  /* Reserve two description lines + a stable KPI block so the map/table below never shift when switching product. */
  .satellite-headinfo p { min-height: 2.1rem; }
  .satellite-kpis { min-height: 6.9rem; align-content: start; }
  .satellite-meta { margin: .34rem 0 .1rem; color: #77746d; font-size: .72rem; }
  .satellite-headinfo { min-width: 0; flex: 1 1 auto; }
  /* Product tabs share one fixed row with the date buttons; the source/density controls
     sit in a reserved-height strip below so showing them never shifts the map/table. */
  /* Date group pinned left, the (fixed-width) product tabs centred on the page; the
     source/density controls sit centred right below the tabs in a reserved-height strip. */
  .satellite-toolbar { display: grid; grid-template-columns: 35% minmax(0,1fr); align-items: center; gap: .5rem; margin: .4rem 0 0; }
  .satellite-type-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .62rem; min-width: 0; justify-self: start; }
  .satellite-subcontrols { display: flex; align-items: center; flex-wrap: wrap; gap: .38rem; }
  /* Secondary context controls (Quelle/Auflösung): pill-shaped and lighter so they read
     as distinct from the primary, rectangular product tabs. */
  .satellite-density-switch { display: flex; align-items: center; flex-wrap: wrap; gap: .22rem; padding: 0; border: 0; background: transparent; color: #858178; font-size: .66rem; font-weight: 650; }
  .satellite-density-switch[hidden] { display: none; }
  .satellite-density-switch button { padding: .15rem .4rem; border: 1px solid #e3dfd5; border-radius: 999px; background: transparent; color: #716e66; font: inherit; font-size: .69rem; cursor: pointer; }
  .satellite-density-switch button.active { border-color: #9abbb4; background: #eff6f4; color: #285c54; }
  .satellite-product-switch { display: flex; gap: .28rem; margin: 0; }
  .satellite-product-switch button { padding: .28rem .58rem; border: 1px solid #d7d6ce; border-radius: 6px; background: #fbfaf6; color: #605e56; font: inherit; font-size: .76rem; cursor: pointer; }
  .satellite-product-switch button.active { border-color: #4f837b; background: #e7f1ef; color: #285c54; font-weight: 700; }
  .satellite-source-switch { display: flex; align-items: center; flex-wrap: wrap; gap: .22rem; padding: 0; border: 0; background: transparent; color: #858178; font-size: .66rem; font-weight: 650; }
  .satellite-source-switch button { padding: .15rem .4rem; border: 1px solid #e3dfd5; border-radius: 999px; background: transparent; color: #716e66; font: inherit; font-size: .69rem; cursor: pointer; }
  .satellite-source-switch button.active { border-color: #9abbb4; background: #eff6f4; color: #285c54; }
  .satellite-date-picker { display: inline-grid; grid-template-columns: 1.9rem 1.9rem minmax(10rem,auto) 1.9rem 1.9rem; gap: .24rem; align-items: center; margin: 0; justify-self: start; }
  .satellite-date-picker button, .satellite-date-picker input { height: 2rem; border: 1px solid #d7d6ce; border-radius: 6px; background: #fbfaf6; color: #605e56; font: inherit; font-size: .76rem; }
  .satellite-date-picker button { cursor: pointer; font-weight: 700; }
  .satellite-date-picker button:disabled { cursor: default; opacity: .42; }
  .satellite-date-field { position: relative; display: grid; grid-template-columns: minmax(9rem, 1fr) 2rem; }
  .satellite-date-display { min-width: 0; padding: 0 .45rem; border-radius: 6px 0 0 6px !important; }
  .satellite-calendar-btn { margin-left: -1px; border-radius: 0 6px 6px 0 !important; }
  .satellite-native-date { position: absolute; width: 1px; height: 1px !important; opacity: 0; pointer-events: none; }
  .satellite-hover-tip {
    position: fixed; z-index: 10000; max-width: 15rem; padding: 0.28rem 0.42rem;
    border-radius: 5px; background: rgba(37,36,32,.94); color: #fff; font-size: .72rem;
    font-weight: 700; line-height: 1.3; white-space: pre-line; pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
  }
  .satellite-layout { display: grid; grid-template-columns: minmax(20rem,1.45fr) minmax(17rem,.75fr); gap: .72rem; align-items: start; }
  .satellite-layout figure { margin: 0; padding: .45rem; border: 1px solid #d9dedb; border-radius: 8px; background: #f4f5f1; }
  .satellite-map-wrap { position: relative; width: min(100%, 51.75rem); aspect-ratio: 1.724 / 1; margin-inline: auto; }
  .satellite-map { display: block; width: 100%; height: 100%; object-fit: fill; background: #edf0ed; }
  .satellite-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(54, 79, 75, .52); stroke-width: .010; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
  .satellite-layout figcaption { margin-top: .32rem; color: #4c5551; font-size: .78rem; font-weight: 700; text-align: center; }
  .satellite-legend { display: flex; align-items: center; gap: .42rem; margin-top: .34rem; color: #6d706d; font-size: .68rem; }
  .satellite-legend i { flex: 1; height: .48rem; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: linear-gradient(90deg,#f7f6ef,#a2d3e5,#1f69a6); }
  .satellite-playback { display: flex; align-items: center; gap: .48rem; width: min(51.75rem,100%); margin: .58rem 0 0; padding: .5rem .6rem; border: 1px solid #e1dccf; border-radius: 8px; background: #fffdf8; color: #715c37; font-size: .72rem; box-shadow: 0 .12rem .35rem rgba(60,54,42,.08); }
  .satellite-playback > span { text-transform: uppercase; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
  .satellite-playback button, .satellite-playback select { height: 1.65rem; border: 1px solid #d5cdbf; border-radius: 5px; background: #fffdf8; color: #4f4b43; font: inherit; font-weight: 700; cursor: pointer; }
  .satellite-playback button { width: 1.85rem; }
  .satellite-play-range { flex: 1 1 9rem; min-width: 5rem; accent-color: #7a5c2c; }
  .satellite-play-label { flex: 0 0 5.5rem; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .satellite-playback select { width: 3.7rem; padding: 0 .12rem; }
  .satellite-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(3.2rem,auto)); gap: .42rem; }
  .satellite-states { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .42rem; }
  .satellite-kpis > div, .satellite-states > div { padding: .44rem .5rem; border: 1px solid #e0ded4; border-radius: 7px; background: #f8f7f1; }
  .satellite-kpis > div { background: linear-gradient(180deg,#fcfbf6,#f6f5ef); }
  .satellite-layout h3 { margin: .68rem 0 .34rem; padding-top: .16rem; border-top: 1px solid #e9e6dd; color: #58605c; font-size: .78rem; }
  .satellite-coverage-note { margin: .46rem 0 0; color: #77746c; font-size: .68rem; line-height: 1.35; }
  .satellite-kpis span, .satellite-kpis small, .satellite-states span, .satellite-states small { display: block; color: #77746c; font-size: .68rem; }
  .satellite-kpis strong { display: block; margin: .1rem 0; color: #275e75; font-size: 1.1rem; }
  .satellite-states strong { display: block; margin: .08rem 0; color: #315f70; font-size: .86rem; }
  @media (max-width: 760px) { .satellite-toolbar { grid-template-columns: 1fr; justify-items: start; row-gap: .4rem; } .satellite-type-controls, .satellite-subcontrols { justify-content: flex-start; } .satellite-layout { grid-template-columns: minmax(0,1fr); } .satellite-states { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 420px) { .satellite-kpis, .satellite-states { grid-template-columns: minmax(0,1fr); } .satellite-playback { flex-wrap: wrap; } .satellite-play-range { flex-basis: 10rem; order: 3; } }

  .pegel-filters { align-items: center; }
  .pegel-inner { --pegel-column-height: min(52rem, 74vh); --pegel-map-height: min(27rem, 48vh); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .8rem; align-items: start; }
  .pegel-inner > .stations-head, .pegel-inner > .pegel-filters, .pegel-inner > #pegel-seasonal-summary, .pegel-inner > .pegel-method { grid-column: 1 / -1; }
  .pegel-inner:has(.pegel-seasonal-card:not(.collapsed)) { --pegel-column-height: min(50rem, 68vh); --pegel-map-height: min(24rem, 42vh); }
  #pegel-seasonal-summary { min-width: 0; }
  .pegel-seasonal-card { margin: 0; padding: .34rem .54rem .42rem; border: 1px solid #c8d7e7; border-radius: 9px; background: linear-gradient(170deg, #fafcfd, #f2f7fb); }
  .pegel-seasonal-card .archive-collapse-title { flex-wrap: wrap; margin-bottom: .28rem; color: #46645b; }
  .pegel-seasonal-card.collapsed .archive-collapse-title { margin-bottom: 0; }
  .pegel-seasonal-card .archive-title-text { flex: 0 1 auto; }
  .pegel-seasonal-counts { color: #66726b; font-size: .72rem; font-weight: 500; white-space: nowrap; }
  .pegel-seasonal-heading { margin-left: auto; color: #27628e; font-size: .72rem; white-space: nowrap; }
  .pegel-seasonal-detail { width: 100%; box-sizing: border-box; padding: .38rem .48rem; border: 1px solid #d5e1eb; border-radius: 7px; background: #fff; text-align: left; }
  .pegel-seasonal-detail p { margin: 0 0 .3rem; color: #68736c; font-size: .68rem; }
  .pegel-seasonal-detail ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .12rem .62rem; margin: 0; padding: 0; list-style: none; background: linear-gradient(to right, transparent calc(33.333% - 1px), #e0e8ee calc(33.333% - 1px), #e0e8ee calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.667% - 1px), #e0e8ee calc(66.667% - 1px), #e0e8ee calc(66.667% + 1px), transparent calc(66.667% + 1px)); }
  .pegel-seasonal-note { margin: .38rem 0 0 !important; padding-top: .28rem; border-top: 1px solid #e0e8ee; }
  .pegel-seasonal-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.1rem 11.5rem; align-items: center; gap: .28rem; width: 100%; padding: .1rem 0; border: 0; background: transparent; color: #35587a; font: inherit; text-align: left; cursor: pointer; }
  .pegel-seasonal-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pegel-seasonal-name small { color: #69756e; } .pegel-seasonal-row:hover .pegel-seasonal-name, .pegel-seasonal-row:focus-visible .pegel-seasonal-name { text-decoration: underline; } .pegel-seasonal-row:focus-visible { outline: 1px solid #4c83b7; outline-offset: 2px; border-radius: 3px; } .pegel-seasonal-bar { height: .42rem; overflow: hidden; border-radius: 99px; background: #d9e7f2; } .pegel-seasonal-bar i { display: block; height: 100%; border-radius: inherit; background: #4c83b7; } .pegel-seasonal-row strong { display: grid; grid-template-columns: 3.8rem 2.1rem minmax(0, 1fr); column-gap: .24rem; align-items: baseline; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .pegel-seasonal-delta, .pegel-seasonal-normal-percent { text-align: right; } .pegel-seasonal-row strong small { color: #4b6a7d; font-size: .76rem; font-weight: 700; }
  @media (max-width: 1050px) { .pegel-seasonal-detail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(to right, transparent calc(50% - 1px), #e0e8ee calc(50% - 1px), #e0e8ee calc(50% + 1px), transparent calc(50% + 1px)); } } @media (max-width: 700px) { .pegel-seasonal-card { padding: .3rem .4rem .36rem; } .pegel-seasonal-heading { width: 100%; margin-left: 1.5rem; } .pegel-seasonal-detail ol { grid-template-columns: minmax(0, 1fr); background: none; } }
  .pegel-inner > .stations-table-wrap { grid-column: 1; grid-row: 4 / span 2; height: var(--pegel-column-height); max-height: none; }
  .pegel-inner > .pegel-map-card { grid-column: 2; grid-row: 4; margin: 0; align-self: start; }
  .pegel-inner > .pegel-detail { grid-column: 2; grid-row: 5; height: calc(var(--pegel-column-height) - var(--pegel-map-height) - .45rem); min-height: 0; margin: 0; overflow: auto; box-sizing: border-box; }
  .pegel-inner > .pegel-method { grid-row: 6; margin-top: 0; }
  .pegel-filters select { max-width: 15rem; padding: .35rem; border: 1px solid #d7d6ce; border-radius: 6px; background: #fff; color: #4f4b43; font: inherit; font-size: .78rem; }
  .pegel-table tbody tr { cursor: pointer; }
  .pegel-table caption { caption-side: top; padding: .25rem 0 .35rem; text-align: left; }
  .pegel-table th, .pegel-table td { padding: .34rem .42rem; vertical-align: top; }
  .pegel-table th:nth-child(1) { width: 24%; }
  .pegel-table th:nth-child(2) { width: 19%; }
  .pegel-table th:nth-child(3) { width: 16%; }
  .pegel-table th:nth-child(4) { width: 23%; }
  .pegel-table th:nth-child(5) { width: 18%; }
  .pegel-table th button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
  .pegel-table th button:hover { color: #285c54; text-decoration: underline; }
  .pegel-river-link { padding: 0; border: 0; background: transparent; color: #285c54; font: inherit; text-align: left; cursor: pointer; }
  .pegel-river-link:hover { text-decoration: underline; }
  .pegel-table tbody tr:hover, .pegel-table tbody tr.selected { background: #edf6f3; }
  .pegel-table td small { display: block; color: #77746c; margin-top: .12rem; }
  .pegel-table .pegel-measurements > span { display: block; white-space: nowrap; }
  .pegel-table .pegel-measurements > span + span { margin-top: .16rem; }
  .pegel-table .pegel-times { color: #5f625f; font-size: .72rem; line-height: 1.45; white-space: nowrap; }
  .pegel-tag { display: inline-block; padding: .1rem .34rem; border-radius: 99px; background: #dff0ed; color: #1c655e; font-size: .64rem; font-weight: 700; }
  .pegel-tag.w { background: #ece6f5; color: #634483; }
  .pegel-detail { margin: .55rem 0; }
  .pegel-detail:not(:empty) { position: static; padding: .42rem; border: 1px solid #c8d9d0; border-radius: 8px; background: #fffdf8; box-shadow: 0 .14rem .45rem rgba(46,68,57,.13); }
  .pegel-detail-empty { margin: 0; color: #77746c; font-size: .78rem; }
  .pegel-detail h2 { margin: 0; font-size: .95rem; color: #344a4a; }
  .pegel-detail p, .pegel-method { color: #706f68; font-size: .76rem; line-height: 1.4; }
  .pegel-detail > p { margin: .08rem 0 .26rem; }
  .pegel-measurement-section + .pegel-measurement-section { margin-top: .38rem; padding-top: .36rem; border-top: 1px solid #e5e1d7; }
  .pegel-measurement-section h3 { margin: 0; color: #52645e; font-size: .74rem; }
  .pegel-detail-grid { display: grid; grid-template-columns: .9fr 1.15fr 1.25fr .82fr; gap: .28rem; margin-top: .26rem; }
  .pegel-detail-grid > div { padding: .32rem .38rem; border: 1px solid #e0ded4; border-radius: 6px; background: #f8f7f1; }
  .pegel-detail-grid > .pegel-history-slot { grid-column: 1 / -1; padding: 0; border: 0; background: transparent; }
  .pegel-detail-grid > .pegel-deviation-slot { padding: 0; border: 0; background: transparent; }
  .pegel-detail-grid > .pegel-source { display: flex; flex-direction: column; justify-content: center; }
  .pegel-history-slot .pegel-history { margin: 0; min-height: 100%; box-sizing: border-box; }
  .pegel-detail-grid .pegel-deviation { min-height: 0; padding: .32rem .38rem; }
  .pegel-detail-grid small { display: block; color: #77746c; font-size: .64rem; }
  .pegel-detail-grid strong { display: block; margin-top: .08rem; overflow-wrap: anywhere; }
  .pegel-source-link { color: #61716a; font-size: .72rem; font-weight: 500; text-decoration: underline; text-underline-offset: .12em; }
  .pegel-method { margin-top: .7rem; padding-top: .55rem; border-top: 1px solid #e8e5dc; }
  .pegel-map-card { height: var(--pegel-map-height); box-sizing: border-box; overflow: visible; margin: .55rem 0 .7rem; padding: .55rem; border: 1px solid #cbd9d0; border-radius: 8px; background: #f2f6f1; }
  .pegel-map-card h3 { margin: 0 0 .35rem; color: #52645e; font-size: .78rem; }
  .pegel-map-card p { margin: .28rem 0 0; color: #77746c; font-size: .68rem; line-height: 1.35; }
  #pegel-map { display: block; width: 100%; height: calc(100% - 1.85rem); background: #edf4ee; border: 1px solid #cad9cf; border-radius: 6px; }
  .pegel-map-land { fill: #cfe3d1; stroke: rgba(48, 78, 61, .8); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
  .pegel-river { fill: none; stroke: #438dc1; stroke-width: .016; stroke-linecap: round; stroke-linejoin: round; opacity: .88; pointer-events: none; }
  .pegel-marker { fill: #d66c36; stroke: #fffdf8; stroke-width: .016; vector-effect: non-scaling-stroke; cursor: pointer; }
  .pegel-marker.w { fill: #7654a6; }
  .pegel-marker.border { stroke: #52645e; stroke-width: .027; }
  .pegel-marker:hover { stroke: #14201b; stroke-width: 1.4; }
  .pegel-marker.selected { stroke: #14201b; stroke-width: 2; }
  .pegel-locator { fill: none; stroke: #14201b; stroke-width: 1.6; vector-effect: non-scaling-stroke; pointer-events: none; transform-box: fill-box; transform-origin: center; opacity: .6; }
  .pegel-locator.animate { animation: pegel-locate 1.4s ease-out 3 forwards; }
  @keyframes pegel-locate { 0% { transform: scale(5); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1); opacity: .6; } }
  @media (prefers-reduced-motion: reduce) { .pegel-locator.animate { animation: none; } }
  .pegel-history { margin-top: .36rem; padding: .36rem .42rem; border: 1px solid #cfe0d8; border-radius: 6px; background: #f3f8f4; color: #4f5b55; font-size: .7rem; line-height: 1.32; }
  .pegel-history > strong, .pegel-history > span { display: block; }
  .pegel-history > span, .pegel-history small { color: #68736c; font-size: .64rem; }
  .pegel-history > div { margin-top: .14rem; }
  .pegel-method-hint { position: relative; display: inline-block; margin-left: .14rem; color: #39716e; font-weight: 700; cursor: help; }
  .pegel-method-hint:focus { outline: 1px solid #6b9e99; outline-offset: 2px; border-radius: 50%; }
  .pegel-method-tooltip { position: absolute; z-index: 5; right: 0; bottom: calc(100% + .35rem); width: min(18rem, 70vw); padding: .38rem .46rem; border-radius: 6px; background: #2f4641; color: #fff; font-size: .68rem; font-weight: 400; line-height: 1.32; box-shadow: 0 .16rem .5rem rgba(30,45,41,.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .14s ease .7s, visibility 0s linear .84s; }
  .pegel-method-tooltip a { color: #d8f2ea; text-decoration: underline; }
  .pegel-method-hint:hover .pegel-method-tooltip, .pegel-method-hint:focus .pegel-method-tooltip, .pegel-method-hint:focus-within .pegel-method-tooltip { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: .7s, .7s; }
  .pegel-water-level { margin-top: .38rem; padding-top: .32rem; border-top: 1px solid #d8e5dc; }
  .pegel-history.unavailable { border-color: #e2dfd5; background: #faf9f5; }
  .pegel-deviation { min-height: 4.1rem; box-sizing: border-box; padding: .48rem .55rem; border: 1px solid #cddfd5; border-left: .32rem solid #43886a; border-radius: 7px; background: #f1f8f3; color: #365445; }
  .pegel-deviation small { display: inline; font-size: .82rem; font-weight: 700; line-height: 1.24; white-space: nowrap; }
  .pegel-deviation span, .pegel-deviation em { display: block; font-size: .63rem; line-height: 1.24; }
  .pegel-deviation small, .pegel-deviation em { color: #617269; }
  .pegel-deviation strong { display: inline; margin-left: .26rem; font-size: .95rem; color: #2c654a; white-space: nowrap; }
  .pegel-deviation.low { border-color: #c8d7e7; border-left-color: #4c83b7; background: #f0f6fb; color: #35587a; }
  .pegel-deviation.low strong { color: #27628e; }
  .pegel-deviation.high { border-color: #ecd4ba; border-left-color: #ca7537; background: #fff6ed; color: #794d2d; }
  .pegel-deviation.high strong { color: #a75723; }
  .pegel-deviation.unavailable { border-color: #e2dfd5; border-left-color: #aaa69d; background: #faf9f5; color: #66645e; }
  .pegel-deviation.unavailable strong { color: #626059; font-size: .82rem; }
  @media (max-width: 900px) { .pegel-inner { display: block; } .pegel-inner > .stations-table-wrap, .pegel-inner > .pegel-detail { height: auto; min-height: 0; } .pegel-inner > .stations-table-wrap { margin-top: .55rem; } .pegel-inner > .pegel-map-card { height: auto; margin-top: .55rem; } #pegel-map { width: 100%; height: auto; aspect-ratio: 1.724 / 1; } }
  @media (max-width: 760px) { .pegel-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 460px) { .pegel-detail-grid { grid-template-columns: minmax(0,1fr); } .pegel-detail-grid > .pegel-history-slot { grid-column: auto; } .pegel-filters select { width: 100%; max-width: none; } }
  .pegel-source-status { margin-left: .36rem; color: #9a5728; font-size: .68rem; font-weight: 700; white-space: nowrap; }
  .pegel-freshness-status { color: #77746c; font-weight: 500; }
  .pegel-seasonal-detail.pegel-seasonal-single ol { background: none; }
  .pegel-seasonal-detail.pegel-seasonal-single ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .pegel-seasonal-single .pegel-seasonal-row { min-height: 2.45rem; padding: .3rem .45rem; border: 1px solid #d5e1eb; border-left: .3rem solid #4c83b7; border-radius: 6px; background: #f6faff; }
  .pegel-seasonal-single .pegel-seasonal-row.water { border-left-color: #8163a4; background: #faf8fd; }
  .pegel-seasonal-single .pegel-seasonal-row.flow { border-left-color: #43886a; background: #f3faf6; }
  @media (max-width: 700px) { .pegel-seasonal-detail.pegel-seasonal-single ol { grid-template-columns: minmax(0, 1fr); } }

  .pegel-view-switch { display: flex; width: fit-content; margin: 0 auto .55rem; padding: .2rem; gap: .18rem; border: 1px solid #b9cbbd; border-radius: 9px; background: #edf3ee; box-shadow: 0 1px 2px rgba(46,68,57,.10); }
  .pegel-view-switch button { min-width: 8.6rem; padding: .36rem .82rem; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #465b53; font: inherit; font-size: .84rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
  .pegel-view-switch button:hover { background: #e2ece5; color: #285c54; }
  .pegel-view-switch button[aria-pressed="true"] { border-color: #92b19b; background: #fffdf8; color: #285c54; box-shadow: 0 1px 2px rgba(46,68,57,.16); }
  .pegel-reset { padding: .3rem .52rem; border: 1px solid #cbd9d0; border-radius: 6px; background: #fffdf8; color: #52645e; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
  .pegel-reset:hover:not(:disabled) { border-color: #92b19b; color: #285c54; }
  .pegel-reset:disabled { opacity: .55; cursor: default; }
  .groundwater-inner > .groundwater-summary { grid-column: 1 / -1; grid-row: 3; }
  .groundwater-summary { display: flex; flex-wrap: wrap; gap: .24rem .55rem; padding: .32rem .48rem; border: 1px solid #d5e1eb; border-radius: 7px; background: #f8fbfd; color: #68736c; font-size: .72rem; }
  .groundwater-count { font-weight: 700; }
  .groundwater-count.very-low, .groundwater-status.very-low, .groundwater-status-card.very-low strong { color: #b22622; }
  .groundwater-count.low, .groundwater-status.low, .groundwater-status-card.low strong { color: #a65e1b; }
  .groundwater-count.medium, .groundwater-status.medium, .groundwater-status-card.medium strong { color: #28724b; }
  .groundwater-count.high, .groundwater-status.high, .groundwater-status-card.high strong { color: #27628e; }
  .groundwater-count.very-high, .groundwater-status.very-high, .groundwater-status-card.very-high strong { color: #364fb8; }
  .groundwater-status { font-weight: 700; white-space: nowrap; }
  .groundwater-marker { stroke: #fffdf8; stroke-width: .016; vector-effect: non-scaling-stroke; cursor: pointer; }
  .groundwater-marker.stale { opacity: .42; }
  .groundwater-marker.selected { stroke: #14201b; stroke-width: 2; }
  #groundwater-map { display: block; width: 100%; background: #edf4ee; border: 1px solid #cad9cf; border-radius: 6px; }
  .groundwater-status-card { display: flex; flex-direction: column; justify-content: center; }
  .groundwater-status-card span, .groundwater-stale-note { color: #706f68; font-size: .68rem; line-height: 1.3; }
  .groundwater-stale-note { margin: .38rem 0 0; }
  @media (max-width: 900px) { .groundwater-inner > .groundwater-summary { grid-row: auto; } }
  #pegel-surface-view[hidden], #pegel-groundwater-view[hidden] { display: none !important; }
  .groundwater-inner > #groundwater-deviation-summary { grid-column: 1 / -1; grid-row: 4; min-width: 0; }
  .groundwater-inner > .stations-table-wrap { grid-row: 5 / span 2; }
  .groundwater-inner > .groundwater-map-card { grid-row: 5; }
  .groundwater-inner > .groundwater-detail { grid-row: 6; }
  .groundwater-inner > .pegel-method { grid-row: 7; }
  .groundwater-inner:has(.groundwater-deviation-card:not(.collapsed)) { --pegel-column-height: min(42rem, 54vh); --pegel-map-height: min(21rem, 34vh); }
  .groundwater-deviation-card .archive-collapse-title { flex-wrap: wrap; margin-bottom: .28rem; color: #46645b; }
  .groundwater-deviation-card.collapsed .archive-collapse-title { margin-bottom: 0; }
  .groundwater-deviation-detail { width: 100%; box-sizing: border-box; padding: .38rem .48rem; border: 1px solid #d5e1eb; border-radius: 7px; background: #fff; }
  .groundwater-deviation-detail > p { margin: 0 0 .3rem; color: #68736c; font-size: .68rem; }
  .groundwater-deviation-detail ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .12rem .62rem; margin: 0; padding: 0; list-style: none; background: linear-gradient(to right, transparent calc(33.333% - 1px), #e0e8ee calc(33.333% - 1px), #e0e8ee calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent calc(66.667% - 1px), #e0e8ee calc(66.667% - 1px), #e0e8ee calc(66.667% + 1px), transparent calc(66.667% + 1px)); }
  .groundwater-deviation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .1rem .35rem; width: 100%; padding: .15rem .28rem; border: 0; border-left: .24rem solid #b22622; background: transparent; color: #35587a; font: inherit; text-align: left; cursor: pointer; }
  .groundwater-deviation-row > span { min-width: 0; }
  .groundwater-deviation-row strong { color: #8f2826; white-space: nowrap; }
  .groundwater-deviation-row span strong { display: block; overflow: hidden; color: #35587a; text-overflow: ellipsis; white-space: nowrap; }
  .groundwater-deviation-row small { color: #69756e; font-size: .66rem; }
  .groundwater-deviation-row > small { grid-column: 2; text-align: right; }
  .groundwater-deviation-row:hover, .groundwater-deviation-row:focus-visible { background: #f8eeee; text-decoration: underline; }
  .groundwater-deviation-row:focus-visible { outline: 1px solid #b22622; outline-offset: 1px; }
  .groundwater-comparison { margin-top: .38rem; padding-top: .36rem; border-top: 1px solid #e5e1d7; }
  .groundwater-comparison h3 { margin: 0; color: #52645e; font-size: .74rem; }
  .groundwater-comparison-grid { display: grid; grid-template-columns: 1.25fr .85fr 1.2fr; gap: .28rem; margin-top: .26rem; }
  .groundwater-comparison-grid > div { padding: .32rem .38rem; border: 1px solid #e0ded4; border-radius: 6px; background: #f8f7f1; }
  .groundwater-comparison-grid small, .groundwater-comparison-grid span, .groundwater-trend small { display: block; color: #77746c; font-size: .64rem; line-height: 1.3; }
  .groundwater-comparison-grid strong, .groundwater-trend strong { display: block; margin-top: .08rem; overflow-wrap: anywhere; }
  .groundwater-deviation.low { border-left: .28rem solid #b22622; background: #fdf6f5; }
  .groundwater-deviation.low strong { color: #a52e2b; }
  .groundwater-deviation.high { border-left: .28rem solid #27628e; background: #f4f8fb; }
  .groundwater-deviation.high strong { color: #27628e; }
  .groundwater-trend { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); align-items: center; gap: .4rem; margin-top: .28rem; padding: .28rem .38rem; border: 1px solid #e0ded4; border-radius: 6px; background: #f8f7f1; }
  .groundwater-trend span { display: block; margin-top: .08rem; color: #77746c; font-size: .64rem; line-height: 1.3; }
  .groundwater-trend svg { width: 100%; height: 2.1rem; overflow: visible; }
  .groundwater-trend path { stroke: #d7d6ce; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .groundwater-trend polyline { fill: none; stroke: #4c83b7; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .groundwater-history-loading { margin: .28rem 0 0; color: #77746c; font-size: .7rem; }
  .groundwater-legend { display: flex; flex-wrap: wrap; gap: .08rem .4rem; margin-top: .23rem; color: #627068; font-size: .62rem; }
  .groundwater-legend span { display: inline-flex; align-items: center; gap: .14rem; }
  .groundwater-legend i { width: .52rem; height: .52rem; border: 1px solid rgba(0,0,0,.18); border-radius: 50%; }
  .groundwater-state-counts { display: flex; flex-wrap: wrap; gap: .08rem .38rem; margin-top: .18rem; color: #627068; font-size: .62rem; line-height: 1.25; }
  .groundwater-state-counts span { display: inline-flex; align-items: center; gap: .12rem; white-space: nowrap; }
  .groundwater-state-counts i { width: .42rem; height: .42rem; border-radius: 50%; }
  .groundwater-state-counts i.very-low { background: #DF0101; }
  .groundwater-state-counts i.low { background: #FE9A2E; }
  .groundwater-table-trend { display: inline-block; color: #627068; font-size: .7rem; font-weight: 700; white-space: nowrap; }
  .groundwater-table-trend.rising { color: #27628e; }
  .groundwater-table-trend.falling { color: #a65e1b; }
  .groundwater-table-trend.stable, .groundwater-table-trend.unavailable { color: #77746c; font-weight: 500; }
  #groundwater-map { height: calc(100% - 5.45rem); }
  @media (max-width: 1050px) { .groundwater-deviation-detail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); background: linear-gradient(to right, transparent calc(50% - 1px), #e0e8ee calc(50% - 1px), #e0e8ee calc(50% + 1px), transparent calc(50% + 1px)); } }
  @media (max-width: 900px) { .groundwater-inner > #groundwater-deviation-summary, .groundwater-inner > .stations-table-wrap, .groundwater-inner > .groundwater-map-card, .groundwater-inner > .groundwater-detail, .groundwater-inner > .pegel-method { grid-row: auto; } #groundwater-map { height: auto; aspect-ratio: 1.724 / 1; } }
  @media (max-width: 700px) { .groundwater-deviation-detail ol { grid-template-columns: minmax(0, 1fr); background: none; } .groundwater-comparison-grid { grid-template-columns: minmax(0, 1fr); } .groundwater-trend { grid-template-columns: minmax(0, 1fr); } }

  /* Keep the desktop composition intact while scaling its density smoothly with
     available width. The maxima are the established large-screen dimensions. */
  header { gap: clamp(.32rem, .44vw, .7rem); }
  .header-actions { gap: clamp(.2rem, .24vw, .38rem); }
  .share-view { padding-inline: clamp(.4rem, .32vw, .55rem); font-size: clamp(.68rem, .5vw, .72rem); }
  .site-nav { gap: clamp(.12rem, .14vw, .22rem); padding: clamp(.1rem, .1vw, .16rem); }
  .site-nav a { width: clamp(1.48rem, 1.3vw, 1.72rem); height: clamp(1.48rem, 1.3vw, 1.72rem); font-size: clamp(.88rem, .82vw, 1rem); }
  .klima-tabs { gap: clamp(.16rem, .17vw, .26rem); }
  .klima-tab { padding: clamp(.34rem, .3vw, .46rem) clamp(.52rem, .52vw, .82rem); font-size: clamp(.74rem, .55vw, .86rem); }
  .station-control-row { gap: clamp(.25rem, .28vw, .44rem) clamp(.5rem, .63vw, 1rem); }
  .station-row { gap: clamp(.18rem, .18vw, .28rem); }
  .station-btn { padding: clamp(.18rem, .15vw, .24rem) clamp(.44rem, .42vw, .66rem); font-size: clamp(.72rem, .54vw, .8rem); white-space: nowrap; }
  .forecast-range-main .forecast-range-btn { padding: clamp(.26rem, .24vw, .34rem) clamp(.46rem, .38vw, .62rem); font-size: clamp(.72rem, .54vw, .78rem); }
  .station-picker { flex-basis: clamp(20rem, 15vw, 24rem); max-width: clamp(20rem, 15vw, 24rem); }
  .baseline-control { margin-left: clamp(.45rem, .8vw, 1.25rem); gap: clamp(.22rem, .2vw, .32rem); }
  .baseline-control label { font-size: clamp(.72rem, .54vw, .78rem); }
  .baseline-control .option-select { max-width: clamp(9.5rem, 6.9vw, 11rem); }