/* V2 editorial layout for nuclear-wheather.html. Loaded after nuclear-common_v2.css;
   replaces the former nuclear-plant.css + nuclear-wheather.css pair on this page.
   Temperature series use the shared accents: Tmax peach, Tavg lime, Tmin accent. */
body.weather-page.nuclear-v2 {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--v2-paper);
  color: var(--v2-ink);
  line-height: 1.45;
}

.weather-page.nuclear-v2 main { display: block; margin: 0; }
.weather-page.nuclear-v2 [id] { scroll-margin-top: 124px; }

.weather-page {
  --weather-max: var(--story-peach);
  --weather-avg: var(--story-lime);
  --weather-min: var(--acc);
}

.weather-page .detail-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--v2-paper) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--v2-line) 72%, transparent);
  backdrop-filter: blur(18px);
}

.weather-page .detail-site-header .site-brand { margin-right: auto; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.weather-v2-hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--v2-line);
}

.weather-v2-hero-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(18px, 3vh, 32px);
  padding-block: clamp(28px, 5vh, 64px) clamp(28px, 4vh, 54px);
}

.weather-v2-hero-top,
.weather-v2-hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.weather-v2-eyebrow { color: var(--v2-muted); font-weight: 800; }

/* --title-chars (set by nuclear-wheather.js) keeps long plant names on the line. */
.weather-v2-hero h1 {
  margin: 0;
  color: var(--v2-ink);
  font-family: var(--v2-display);
  font-size: min(clamp(44px, 9vw, 142px), calc((min(100vw, 1600px) - 2 * var(--v2-gutter)) / (var(--title-chars, 13) * .72)));
  line-height: .86;
  letter-spacing: -.075em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.weather-v2-hero h1 span { color: var(--story-lime); }

.weather-v2-lede { max-width: 920px; margin: 0; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.4; }
.weather-v2-lede strong { color: var(--story-lime); font-weight: 800; }

.weather-v2-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--v2-line);
}

.weather-v2-facts[hidden] { display: none; }

.weather-v2-fact {
  position: relative;
  flex: 1 1 210px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 132px;
  padding: 18px 20px 18px 23px;
  background: var(--surf);
}

.weather-v2-fact::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--weather-fact-tone, var(--v2-accent)); }
.weather-v2-fact[data-tone="lime"] { --weather-fact-tone: var(--story-lime); }
.weather-v2-fact[data-tone="peach"] { --weather-fact-tone: var(--story-peach); }
.weather-v2-fact[data-tone="lilac"] { --weather-fact-tone: var(--story-lilac); }
.weather-v2-fact-label { color: var(--v2-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.weather-v2-fact strong {
  font-family: var(--v2-display);
  font-size: clamp(30px, 3vw, 48px);
  line-height: .95;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.weather-v2-fact strong small { font-size: .5em; letter-spacing: -.02em; }
.weather-v2-fact > small { color: var(--v2-muted); font-size: 12px; }
.weather-v2-fact.is-pending strong { color: var(--v2-muted); }

.weather-v2-scroll-note { color: var(--v2-muted); text-align: right; }

.weather-v2-motion-toggle {
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: var(--v2-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.weather-v2-motion-toggle:hover { border-color: var(--v2-ink); color: var(--v2-ink); }

/* ── Loading / error ─────────────────────────────────────────────────── */
.weather-v2-state {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding-block: clamp(56px, 8vw, 110px);
  color: var(--v2-muted);
}

.weather-v2-state[hidden] { display: none; }
.weather-v2-state p { margin: 0; max-width: 560px; font-size: 15px; }
.weather-v2-state h2 { margin: 0; color: var(--v2-ink); font-family: var(--v2-display); font-size: clamp(32px, 5vw, 64px); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
.weather-v2-state--error h2 { color: var(--story-peach); }
.weather-v2-state-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--story-lime); }
.nuclear-v2:not(.v2-motion-paused) .weather-v2-state-pulse { animation: weather-v2-pulse 1.2s ease-in-out infinite; }

/* ── 01 Standort ─────────────────────────────────────────────────────── */
.weather-v2-coordinates { color: var(--v2-ink); font-variant-numeric: tabular-nums; }

.weather-v2-location {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.weather-v2-map {
  height: clamp(340px, 52vh, 560px);
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--map-bg);
}

.weather-v2-map[hidden] { display: none; }
.weather-v2-map .leaflet-tooltip { border-color: var(--leaflet-tooltip-border); background: var(--leaflet-tooltip-bg); color: var(--leaflet-tooltip-text); }

.weather-v2-stations { display: grid; gap: 12px; }

.weather-v2-station {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 18px 20px 18px 23px;
  border: 1px solid var(--v2-line);
  border-radius: 18px;
  background: var(--surf);
}

.weather-v2-station::before { content: ""; position: absolute; inset: 18px auto 18px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--story-lime); }
.weather-v2-station.is-missing::before { background: var(--v2-line); }
.weather-v2-station .v2-eyebrow { color: var(--v2-muted); }
.weather-v2-station h3 { margin: 0; font-family: var(--v2-display); font-size: 20px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.weather-v2-station h3 a { color: var(--v2-ink); text-decoration: none; }
.weather-v2-station h3 a:hover { color: var(--story-lime); }
.weather-v2-station p { margin: 0; color: var(--v2-ink); font-size: 14px; }
.weather-v2-station dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; }
.weather-v2-station dl div { display: grid; }
.weather-v2-station dt { color: var(--v2-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.weather-v2-station dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ── 02 Monatsvergleich ─────────────────────────────────────────────── */
.weather-v2-chapter--comparison { background: radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--story-peach) 9%, transparent), transparent 42%); }

.weather-v2-chart-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--surf);
}

.weather-v2-chart-frame svg { display: block; width: 100%; height: auto; }
/* Phones scroll the chart sideways instead of shrinking its labels. */
.weather-v2-chart-scroll { overflow-x: auto; scrollbar-width: thin; }
.weather-v2-chart-scroll svg { min-width: 640px; }
.weather-v2-chart-placeholder { display: grid; place-items: center; min-height: 260px; padding: 32px; color: var(--v2-muted); text-align: center; }
.weather-v2-chart-placeholder p { margin: 0; }

.weather-v2-chart-frame .chart-grid-line { stroke: color-mix(in srgb, var(--v2-ink) 9%, transparent); stroke-width: 1; }
.weather-v2-chart-frame .chart-axis { stroke: color-mix(in srgb, var(--v2-ink) 26%, transparent); stroke-width: 1.2; }
.weather-v2-chart-frame .chart-label { fill: var(--v2-muted); font-size: 12px; }
.weather-v2-chart-frame .chart-value { fill: var(--v2-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.weather-v2-chart-frame .temp-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.weather-v2-chart-frame .temp-line.is-construction { stroke-width: 2.2; stroke-dasharray: 7 6; opacity: .7; }
.weather-v2-chart-frame .temp-dot { stroke: var(--surf); stroke-width: 2; }
.weather-v2-chart-frame .temp-dot.is-construction { opacity: .7; }
.weather-v2-chart-frame [data-metric="max"] { --weather-tone: var(--weather-max); }
.weather-v2-chart-frame [data-metric="avg"] { --weather-tone: var(--weather-avg); }
.weather-v2-chart-frame [data-metric="min"] { --weather-tone: var(--weather-min); }
.weather-v2-chart-frame .temp-line { stroke: var(--weather-tone); }
.weather-v2-chart-frame .temp-dot { fill: var(--weather-tone); }

.nuclear-v2:not(.v2-motion-paused) .weather-v2-chart-frame.v2-animate .temp-series { animation: v2-rise .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * .12s) both; }

.weather-v2-chart-frame .chart-hover-line {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--v2-ink) 55%, transparent);
  pointer-events: none;
  z-index: 2;
}

.weather-v2-chart-frame.is-hovering .chart-hover-line { display: block; }

.weather-v2-chart-frame .chart-tooltip {
  display: none;
  position: absolute;
  z-index: 3;
  min-width: 220px;
  max-width: min(320px, calc(100% - 20px));
  padding: 12px 14px;
  border: 1px solid var(--v2-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--v2-paper) 94%, transparent);
  box-shadow: var(--shadow-panel);
  color: var(--v2-ink);
  pointer-events: none;
}

.weather-v2-chart-frame.is-hovering .chart-tooltip { display: block; }
.weather-v2-chart-frame .chart-tooltip-title { margin-bottom: 8px; font-family: var(--v2-display); font-size: 15px; letter-spacing: -.02em; text-transform: uppercase; }
.weather-v2-chart-frame .chart-tooltip-grid { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 10px; align-items: baseline; font-size: 12px; font-variant-numeric: tabular-nums; }
.weather-v2-chart-frame .chart-tooltip-grid span { white-space: nowrap; }
.weather-v2-chart-frame .chart-tooltip-year { font-weight: 800; }
.weather-v2-chart-frame .chart-tooltip-label { color: var(--weather-tone, var(--v2-muted)); font-weight: 800; }

.weather-v2-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--v2-line);
  list-style: none;
  color: var(--v2-muted);
  font-size: 12px;
}

.weather-v2-chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.weather-v2-chart-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--weather-tone, var(--v2-ink)); border-radius: 999px; }
.weather-v2-chart-legend .is-construction i { border-top-style: dashed; opacity: .7; }
.weather-v2-chart-legend strong { color: var(--v2-ink); }
.weather-v2-chart-legend .weather-v2-legend-gap { margin-left: auto; }

/* ── 03 Jahreszeiten ─────────────────────────────────────────────────── */
.weather-v2-chapter--seasons { background: radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--story-lilac) 10%, transparent), transparent 40%); }

.weather-v2-seasons {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--v2-line);
}

.weather-v2-seasons > * { display: grid; align-content: start; gap: 16px; min-width: 0; padding: clamp(22px, 3vw, 40px); background: var(--surf); }
.weather-v2-seasons .v2-eyebrow { color: var(--v2-muted); }

.weather-v2-annual-value {
  display: flex;
  align-items: baseline;
  gap: .04em;
  margin: 0;
  color: var(--weather-annual-tone, var(--story-peach));
  font-family: var(--v2-display);
  font-size: clamp(64px, 9vw, 132px);
  line-height: .85;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
}

.weather-v2-annual[data-tone="accent"] { --weather-annual-tone: var(--acc); }
.weather-v2-annual-value small { margin-left: .12em; font-size: .32em; letter-spacing: -.02em; }
.weather-v2-annual p:not(.weather-v2-annual-value) { margin: 0; color: var(--v2-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.weather-v2-annual p strong { color: var(--v2-ink); }

.weather-v2-seasons .v2-bars-row { grid-template-columns: 6em minmax(0, 1fr) 6.4em; font-size: 14px; }
.weather-v2-seasons .v2-bars-track { height: 12px; }

.weather-v2-season-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--v2-muted); font-size: 12px; }
.weather-v2-season-legend li { display: inline-flex; align-items: center; gap: 6px; }
.weather-v2-season-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--story-peach); }
.weather-v2-season-legend li[data-tone="accent"]::before { background: var(--acc); }
.weather-v2-season-note { margin: 0; color: var(--v2-muted); font-size: 12px; }

/* ── 04 Messwerte ────────────────────────────────────────────────────── */
.weather-v2-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  background: var(--surf);
}

.weather-v2-table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.weather-v2-table :is(th, td) { padding: 10px 14px; border-bottom: 1px solid var(--v2-line); text-align: right; white-space: nowrap; }
.weather-v2-table :is(th, td):first-child { text-align: left; }
.weather-v2-table th { color: var(--v2-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.weather-v2-table thead tr:first-child th { color: var(--v2-ink); font-family: var(--v2-display); font-size: 15px; letter-spacing: -.02em; }
.weather-v2-table thead tr:first-child th.is-construction { color: var(--v2-muted); }
.weather-v2-table tbody tr:hover td { background: color-mix(in srgb, var(--v2-ink) 4%, transparent); }
.weather-v2-table tfoot td { background: color-mix(in srgb, var(--surf2) 70%, transparent); font-weight: 700; }
.weather-v2-table tfoot tr:first-child td,
.weather-v2-table tfoot .avg-row-yearly td { border-top: 2px solid var(--v2-line); }
.weather-v2-table tfoot .avg-row-yearly td { background: var(--surf2); color: var(--story-lime); }
.weather-v2-table tfoot .avg-row-yearly td:first-child { color: var(--v2-ink); }
.weather-v2-table tbody tr:last-child td { border-bottom: 0; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.weather-page.nuclear-v2 .weather-v2-source { margin: 0; padding-block: 28px 0; color: var(--v2-muted); font-size: 12px; }

.weather-page.nuclear-v2 .page-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding-block: 32px;
  color: var(--v2-muted);
  font-size: 12px;
}

.weather-page.nuclear-v2 .page-footer a { color: var(--v2-muted); text-decoration: none; }
.weather-page.nuclear-v2 .page-footer a:hover { color: var(--v2-ink); }

@keyframes weather-v2-pulse { 50% { transform: scale(.6); opacity: .45; } }

@media (max-width: 920px) {
  .weather-v2-location,
  .weather-v2-seasons { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .weather-page .detail-site-header { gap: 8px; overflow-x: auto; }
  .weather-v2-hero-bottom .v2-button { width: 100%; }
  .weather-v2-scroll-note { display: none; }
  .weather-v2-fact { flex-basis: 45%; min-height: 0; }
  .weather-v2-fact strong { font-size: clamp(26px, 8vw, 34px); }
  .weather-v2-map { height: 320px; }
  .weather-v2-chart-legend .weather-v2-legend-gap { margin-left: 0; }
}