.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: var(--color-primary-contrast); padding: var(--spacing-s) var(--spacing-m); z-index: 1000; }
.skip-link:focus { left: var(--spacing-m); top: var(--spacing-m); }
.eyebrow { color: var(--color-muted); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--spacing-l); }
.button { display: inline-block; background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-small); padding: .6rem .9rem; text-decoration: none; font-weight: 700; }
.status-box { border-left: .3rem solid var(--color-primary); background: var(--color-surface); padding: var(--spacing-m); margin-block: var(--spacing-m); }
.status-box--warning { border-left-color: var(--color-warning); }
.diagnostics { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--spacing-m); }

.status-banner { margin: 0; padding: .5rem 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-weight: 700; }
.status-banner[data-status="offline"] { border-left: .4rem solid var(--color-warning); }
.button { border: 0; cursor: pointer; }
.button--secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.module-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-s); margin-block: var(--spacing-m); }
.badge { display: inline-block; border: 1px solid var(--color-border); border-radius: 999px; padding: .15rem .55rem; background: var(--color-surface); font-size: .875rem; }
.diagnostic-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--spacing-m); margin-block: var(--spacing-l); }
.diagnostic-panel pre { overflow: auto; max-height: 24rem; padding: var(--spacing-m); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.source-info { display: grid; gap: var(--spacing-xs); border-left: .3rem solid var(--color-primary); padding: var(--spacing-m); background: var(--color-surface); }

.input-card, .weather-result-card { border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-medium, .75rem); padding: 1rem; margin-block: 1rem; background: var(--color-surface, transparent); }
.input-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-block-start: .5rem; }
.input-row input { min-width: min(100%, 18rem); flex: 1 1 18rem; padding: .65rem .75rem; border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-small, .4rem); font: inherit; }
.help-text, .muted { opacity: .78; }
.location-results { list-style: none; padding: 0; display: grid; gap: .5rem; }
.location-results button { width: 100%; text-align: left; }
.metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.metadata-grid div { border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-small, .4rem); padding: .5rem; }
.metadata-grid dt { font-weight: 700; }
.metadata-grid dd { margin: .15rem 0 0; }
.table-wrapper { overflow-x: auto; margin-block: 1rem; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table caption { text-align: left; margin-block-end: .5rem; font-weight: 700; }
.data-table th, .data-table td { border: 1px solid var(--color-border, currentColor); padding: .5rem; text-align: left; }
.status-box--success { border-left: .35rem solid currentColor; }
.status-box--danger { border-left: .35rem solid currentColor; }
.status-box--notice { border-left: .35rem solid currentColor; }

.location-result-button {
  display: grid;
  gap: .25rem;
  justify-items: start;
  width: 100%;
  text-align: left;
}

.location-result-button__title {
  font-weight: 700;
}

.location-result-button__detail,
.location-result-button__meta {
  font-size: .925rem;
  line-height: 1.35;
}

.documentation-layout {
  display: grid;
  gap: var(--space-l, 1.5rem);
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  align-items: start;
}

.documentation-nav,
.documentation-content {
  border: 1px solid var(--color-border, currentColor);
  border-radius: var(--radius-medium, .75rem);
  padding: var(--space-m, 1rem);
  background: var(--color-surface, Canvas);
}

.documentation-content pre {
  overflow-x: auto;
  padding: .75rem;
  border: 1px solid var(--color-border, currentColor);
  border-radius: var(--radius-small, .35rem);
}

.doc-list {
  display: grid;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 48rem) {
  .documentation-layout { grid-template-columns: 1fr; }
}

.form-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: end;
}

.form-grid label {
  display: grid;
  gap: .25rem;
  font-weight: 700;
}

.form-grid input {
  padding: .65rem .75rem;
  border: 1px solid var(--color-border, currentColor);
  border-radius: var(--radius-small, .4rem);
  font: inherit;
}

/* Semantische Kennzahlengrößen: keine XL-Stufe. */
.result-value,
.metric-value {
  font-size: clamp(1.45rem, 3.8vw, 2.15rem);
  font-weight: 800;
  line-height: 1.08;
  margin-block: .75rem;
  overflow-wrap: anywhere;
}
.metric-value--primary {
  font-size: clamp(1.65rem, 4.5vw, 2.45rem);
}
.metric-value--compact {
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
}
.metric-card--compact .metric-card__value {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}
@media (max-width: 32rem) {
  .result-value,
  .metric-value {
    font-size: clamp(1.35rem, 6vw, 1.9rem);
  }
  .metric-value--primary {
    font-size: clamp(1.55rem, 7vw, 2.15rem);
  }
  .metric-value--compact,
  .metric-card--compact .metric-card__value {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  }
}



/* v2.17.1: gemeinsames, umbruchsicheres Raster für Ergebniskennzahlen. */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin-block: 1rem;
}
.result-grid > * {
  min-inline-size: 0;
}
.result-grid .metric-card__value,
.result-grid strong,
.result-grid dd {
  overflow-wrap: anywhere;
}
@media (max-width: 32rem) {
  .result-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
  text-decoration: none;
}

.brand__mark {
  border-radius: 0.35rem;
  display: inline-block;
  height: 2rem;
  width: 2rem;
}

.brand__label {
  font-weight: 700;
}

.chart-card {
  border: 1px solid var(--color-border, currentColor);
  border-radius: var(--radius-medium, .75rem);
  padding: 1rem;
  margin-block: 1rem;
  background: var(--color-surface, Canvas);
}

.chart-card figcaption {
  display: grid;
  gap: .25rem;
  margin-block-end: .75rem;
}

.chart-card svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 44rem;
  block-size: auto;
}

.svg-bar-chart__axis {
  stroke: currentColor;
  stroke-width: 1;
  opacity: .55;
}

.svg-bar-chart__bar rect {
  fill: currentColor;
  opacity: .72;
}

.svg-bar-chart__bar text {
  fill: currentColor;
  font-size: .78rem;
}

.chart-empty-state {
  border: 1px dashed var(--color-border, currentColor);
  border-radius: var(--radius-small, .5rem);
  padding: .75rem;
}

.chart-data-table {
  margin-block-start: .75rem;
}

.chart-data-table table {
  border-collapse: collapse;
  inline-size: min(100%, 32rem);
}

.chart-data-table th,
.chart-data-table td {
  border: 1px solid var(--color-border, currentColor);
  padding: .35rem .5rem;
  text-align: start;
}


.project-status-card { margin-block: 1rem; }
.project-status-card h2 { margin-block-start: 0; }
.project-status-card details pre,
[data-project-status] details pre { overflow-x: auto; padding: .75rem; border: 1px solid var(--color-border, currentColor); border-radius: var(--radius-small, .35rem); background: var(--color-background, Canvas); }

.assessment-card {
  border: 1px solid var(--color-border, currentColor);
  border-inline-start: .45rem solid currentColor;
  border-radius: var(--radius-medium, .75rem);
  padding: 1rem;
  margin-block: 1rem;
  background: var(--color-surface, Canvas);
}
.assessment-card--notice { border-inline-start-color: #8a6500; }
.assessment-card--warning { border-inline-start-color: #b44b00; }
.assessment-card--danger { border-inline-start-color: #b00020; }
.assessment-card__heading { display: flex; gap: .75rem; align-items: center; }
.assessment-card__heading h3 { margin: 0; }
.assessment-card__icon { font-size: 1.75rem; line-height: 1; }
.assessment-card__eyebrow { margin: 0 0 .15rem; font-size: .875rem; font-weight: 700; }
.assessment-meter { overflow: hidden; block-size: .7rem; margin-block: .85rem .25rem; border-radius: 999px; background: color-mix(in srgb, currentColor 15%, transparent); }
.assessment-meter__fill { display: block; block-size: 100%; inline-size: calc(var(--assessment-level) / 6 * 100%); background: currentColor; }
.assessment-card__level { margin: 0; font-size: .875rem; font-weight: 700; }
.assessment-card__recommendation { padding: .65rem .75rem; border-radius: var(--radius-small, .4rem); background: color-mix(in srgb, currentColor 8%, transparent); }
@media (prefers-contrast: more) { .assessment-meter { border: 1px solid currentColor; } }

.forecast-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); margin-block:1rem; }
.forecast-card { border:1px solid currentColor; border-radius:.75rem; padding:1rem; }
.forecast-card h3 { margin-top:0; }

/* Einheitliche UI-Bausteine für Dashboard und Detailseiten */
.card { border-radius: var(--radius-large); box-shadow: var(--shadow-card); }
.metric-card { display: grid; gap: .35rem; align-content: start; }
.metric-card__label { color: var(--color-muted); font-size: .9rem; font-weight: 700; }
.metric-card__value { font-size: var(--metric-size); font-weight: 800; line-height: 1.05; }
.metric-card__detail { margin: 0; color: var(--color-muted); }
.card__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: auto; padding-block-start: .75rem; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; inline-size: fit-content; padding: .25rem .6rem; border: 1px solid currentColor; border-radius: 999px; font-size: .85rem; font-weight: 750; }
.status-badge--success { color: var(--color-success); }
.status-badge--attention { color: var(--color-attention); }
.status-badge--danger { color: var(--color-critical); }
.status-badge--info { color: var(--color-info); }
.disclosure { border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.disclosure > summary { padding: .8rem 1rem; cursor: pointer; font-weight: 700; }
.disclosure > :not(summary) { margin-inline: 1rem; }
@media (max-width: 32rem) {
  .card, .input-card, .weather-result-card { padding: .85rem; }
  h1 { font-size: clamp(1.65rem, 8vw, 2.25rem); line-height: 1.15; }
  h2 { font-size: clamp(1.3rem, 6vw, 1.65rem); }
  .metadata-grid { grid-template-columns: 1fr; }
}

/* Wetter-Dashboard */
.dashboard-shell { max-inline-size: 90rem; }
.dashboard-hero { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-block: 1rem; }
.dashboard-hero h1 { margin-block: .15rem; }
.dashboard-hero__condition { margin: 0; font-size: 1.15rem; }
.dashboard-hero__temperature { display: grid; justify-items: end; }
.dashboard-hero__temperature strong { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; }
.dashboard-hero__temperature span { color: var(--color-muted); font-weight: 700; }
.dashboard-hero .status-badge, .dashboard-hero .card__actions { grid-column: 1 / -1; }
.dashboard-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 1rem; }
.dashboard-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-grid > .card { min-inline-size: 0; }
.dashboard-list { display: grid; gap: .7rem; list-style: none; padding: 0; }
.dashboard-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; }
.dashboard-forecast { display: grid; gap: .75rem; }
.dashboard-forecast__day { display: grid; grid-template-columns: 5rem 1fr auto; gap: .25rem .75rem; padding-block: .65rem; border-block-end: 1px solid var(--color-border); }
.dashboard-forecast__day span:last-child { grid-column: 2 / -1; color: var(--color-muted); }
.dashboard-expert { margin-block: 1rem; }
.dashboard-expert > div { margin-block-end: 1rem; }
.dashboard-empty { margin-block: 1rem; }
@media (max-width: 64rem) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid--wide > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .dashboard-hero { grid-template-columns: 1fr; }
  .dashboard-hero__temperature { justify-items: start; }
  .dashboard-grid, .dashboard-grid--wide { grid-template-columns: 1fr; }
  .dashboard-grid--wide > :last-child { grid-column: auto; }
  .dashboard-forecast__day { grid-template-columns: 4.5rem 1fr; }
  .dashboard-forecast__day span:nth-child(3), .dashboard-forecast__day span:last-child { grid-column: 2; }
}


/* Stündliche Wettervorhersage */
.hourly-forecast { margin-block: 2rem; }
.hourly-forecast__heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: end; }
.hourly-forecast__heading h2 { margin-block: .2rem; }
.hourly-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-block: .5rem; scrollbar-width: thin; }
.hourly-tab { flex: 0 0 auto; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); padding: .55rem .85rem; font: inherit; font-weight: 700; cursor: pointer; }
.hourly-tab.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.hourly-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.hourly-table { min-width: 74rem; margin: 0; }
.hourly-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); }
.hourly-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
@media (max-width: 40rem) {
  .hourly-forecast__heading { display: block; }
  .hourly-table { min-width: 68rem; font-size: .9rem; }
  .hourly-table th, .hourly-table td { padding: .45rem; white-space: nowrap; }
}

/* Zentrale Analyse-Übersicht */
.analysis-overview-shell { max-inline-size: 90rem; }
.analysis-summary, .analysis-actions { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-block: 1rem; }
.analysis-category { margin-block: 2rem; }
.analysis-category__header h2 { margin-block-start: .2rem; }
.analysis-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analysis-result-card { min-inline-size: 0; }
.analysis-result-card .metric-card__value { font-size: clamp(1.5rem, 4vw, 2.35rem); }
/* Die zentrale Übersicht behält bewusst ihre größere Leitkennzahl. */
.analysis-link-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.analysis-link-grid a { color: inherit; font-weight: 750; text-decoration: none; }
.analysis-link-grid a:hover { text-decoration: underline; }
@media (max-width: 52rem) { .analysis-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .analysis-card-grid { grid-template-columns: 1fr; } .analysis-summary, .analysis-actions { align-items: stretch; flex-direction: column; } }

/* Wetter-Cockpit v2.4 */
.dashboard-now { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2rem; align-items:center; margin-block:1rem; }
.dashboard-now__place h2 { margin:.15rem 0; }
.dashboard-now__condition { margin:.15rem 0; font-size:1.15rem; font-weight:700; }
.dashboard-now__temperature { display:grid; justify-items:end; }
.dashboard-now__temperature strong { font-size:clamp(2rem,6vw,3.25rem); line-height:1; }
.dashboard-now__temperature span { color:var(--color-muted); font-weight:700; }
.dashboard-now__facts { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.dashboard-now__facts div { display:grid; gap:.15rem; padding:.7rem; border:1px solid var(--color-border); border-radius:var(--radius-medium); }
.dashboard-now__facts span { color:var(--color-muted); font-size:.85rem; }
.dashboard-now .card__actions { grid-column:1/-1; }
.dashboard-section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; }
.dashboard-section-heading h2 { margin:.15rem 0; }
.dashboard-timeline { margin-block:1rem; }
.dashboard-timeline__scroll { overflow-x:auto; padding-block:.75rem .25rem; }
.dashboard-timeline__list { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(5.5rem,1fr); gap:.5rem; min-inline-size:38rem; list-style:none; padding:0; margin:0; }
.dashboard-timeline__list li { display:grid; justify-items:center; gap:.25rem; padding:.65rem .4rem; border-inline-end:1px solid var(--color-border); }
.dashboard-timeline__list time,.dashboard-timeline__list span:last-child { color:var(--color-muted); font-size:.85rem; }
.dashboard-timeline__icon { font-size:1.65rem; }
.dashboard-cockpit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-block:1rem; }
.dashboard-signals { list-style:none; padding:0; display:grid; gap:.7rem; }
.dashboard-signals li { display:grid; grid-template-columns:1rem minmax(4rem,.65fr) 1fr; gap:.55rem; align-items:center; }
.weather-light { inline-size:.8rem; block-size:.8rem; border-radius:50%; border:1px solid currentColor; }
.weather-light--good { background:var(--color-success); color:var(--color-success); }
.weather-light--warning { background:var(--color-attention); color:var(--color-attention); }
.weather-light--danger { background:var(--color-critical); color:var(--color-critical); }
.weather-light--neutral { background:var(--color-muted); color:var(--color-muted); }
.dashboard-trends { display:grid; gap:.65rem; }
.dashboard-trends > div { display:grid; grid-template-columns:1fr auto; gap:.1rem .6rem; padding-block:.45rem; border-block-end:1px solid var(--color-border); }
.dashboard-trends strong { font-size:1.5rem; }
.dashboard-trends p { grid-column:1/-1; margin:0; color:var(--color-muted); }
.dashboard-days { margin-block:1rem; }
.dashboard-days__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-block-start:1rem; }
.dashboard-day { display:grid; justify-items:center; gap:.25rem; padding:.8rem; border:1px solid var(--color-border); border-radius:var(--radius-medium); text-align:center; }
.dashboard-day__icon { font-size:2rem; }
.dashboard-day small { color:var(--color-muted); }
@media (max-width:64rem) { .dashboard-cockpit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-cockpit-grid > :last-child { grid-column:1/-1; } }
@media (max-width:40rem) {
  .dashboard-now { grid-template-columns:1fr; }
  .dashboard-now__temperature { justify-items:start; }
  .dashboard-now__facts { grid-column:auto; grid-template-columns:1fr; }
  .dashboard-now .card__actions { grid-column:auto; }
  .dashboard-section-heading { display:block; }
  .dashboard-section-heading > a { display:inline-block; margin-block-start:.35rem; }
  .dashboard-cockpit-grid { grid-template-columns:1fr; }
  .dashboard-cockpit-grid > :last-child { grid-column:auto; }
  .dashboard-days__grid { grid-template-columns:repeat(3,minmax(8rem,1fr)); overflow-x:auto; }
}

.climate-summary { margin-block: 1rem; }
.climate-chart-card { margin-block: 1rem; padding: 1rem; border: 1px solid var(--border-color, #cbd5e1); border-radius: .75rem; background: var(--surface-color, #fff); }
.climate-year-chart { width: 100%; min-width: 42rem; height: auto; }
.climate-chart-card { overflow-x: auto; }
.chart-axis { stroke: currentColor; stroke-width: 1; opacity: .55; }
.chart-label { fill: currentColor; font-size: 14px; }
.chart-bar-current { fill: #3478a8; opacity: .72; }
.chart-bar-normal { fill: #8aa6b8; opacity: .45; }
.chart-line-current { fill: none; stroke: #a13d2d; stroke-width: 4; }
.chart-line-normal { fill: none; stroke: #6f5a4e; stroke-width: 3; stroke-dasharray: 9 6; }
@media (prefers-contrast: more) { .chart-line-current,.chart-line-normal { stroke-width: 5; } .chart-bar-current,.chart-bar-normal { opacity: 1; } }

.climate-chart-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: .75rem 0 1rem; padding: 0; list-style: none; }
.climate-chart-legend li { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.chart-legend-line { display: inline-block; width: 2rem; border-top: 4px solid; }
.chart-legend-line--current { border-color: #a13d2d; }
.chart-legend-line--previous { border-color: #2f6f8f; border-top-style: dotted; }
.chart-legend-line--normal { border-color: #6f5a4e; border-top-style: dashed; }
.chart-legend-bar { display: inline-block; width: 1.4rem; height: .8rem; border: 1px solid currentColor; }
.chart-legend-bar--current { background: #3478a8; opacity: .72; }
.chart-legend-bar--previous { background: #5d9270; opacity: .62; }
.chart-legend-bar--normal { background: #8aa6b8; opacity: .45; }
.chart-bar-previous { fill: #5d9270; opacity: .62; }
.chart-line-previous { fill: none; stroke: #2f6f8f; stroke-width: 3; stroke-dasharray: 2 5; }
@media (prefers-contrast: more) {
  .chart-line-current,.chart-line-previous,.chart-line-normal { stroke-width: 5; }
  .chart-bar-current,.chart-bar-previous,.chart-bar-normal { opacity: 1; }
}

.climate-summary-comparison { margin-block: 1rem; overflow-x: auto; }
.climate-summary-comparison__grid {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) repeat(3, minmax(10.5rem, 1fr));
  min-width: 44rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  overflow: hidden;
}
.climate-summary-comparison__grid > div { padding: .8rem .9rem; border-inline-end: 1px solid var(--color-border); border-block-end: 1px solid var(--color-border); }
.climate-summary-comparison__grid > div:nth-child(4n) { border-inline-end: 0; }
.climate-summary-comparison__grid > div:nth-last-child(-n+4) { border-block-end: 0; }
.climate-summary-comparison__corner,
.climate-summary-comparison__heading { background: var(--color-surface-muted, rgba(127,127,127,.08)); }
.climate-summary-comparison__heading { display: grid; gap: .15rem; text-align: center; }
.climate-summary-comparison__heading small,
.climate-summary-comparison__value small { color: var(--color-muted); }
.climate-summary-comparison__label { display: flex; align-items: center; }
.climate-summary-comparison__value { display: grid; align-content: center; gap: .2rem; text-align: center; }
.climate-summary-comparison__value > strong { font-size: 1.15rem; }
@media (max-width: 40rem) {
  .climate-summary-comparison { margin-inline: -.25rem; padding-block-end: .35rem; }
}

.climate-definition-hint {
  display: inline-grid;
  place-items: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  margin-inline-start: .4rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-accent, currentColor);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: help;
}
.climate-definition-hint:hover,
.climate-definition-hint:focus-visible {
  background: var(--color-surface-muted, rgba(127,127,127,.1));
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.climate-extreme-definitions dl { display: grid; gap: .55rem; margin-block-end: 0; }
.climate-extreme-definitions dl > div { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .75rem; }
.climate-extreme-definitions dt { font-weight: 700; }
.climate-extreme-definitions dd { margin: 0; }
@media (max-width: 40rem) { .climate-extreme-definitions dl > div { grid-template-columns: 1fr; gap: .1rem; } }

.climate-trend-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-3); margin:var(--space-4) 0; }
.climate-trend-metrics .metric-card { display:flex; flex-direction:column; gap:.35rem; }
.climate-trend-metrics .metric-card small { display:block; font-size:.8em; font-weight:400; }
.climate-trend-header { margin-top:var(--space-3); }

/* Klimaperioden-Kalender v2.10.2 */
.climate-period-calendar { margin-block: 1.25rem 1.75rem; }
.climate-period-calendar__heading h3 { margin-block-end: .2rem; }
.climate-period-calendar__heading p { margin-block-start: 0; color: var(--color-muted); }
.climate-period-legend { display:flex; flex-wrap:wrap; gap:.55rem 1rem; list-style:none; padding:0; margin:1rem 0; }
.climate-period-legend li { display:inline-flex; align-items:center; gap:.35rem; }
.climate-period-calendar__months { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.climate-period-month { border:1px solid var(--color-border); border-radius:var(--radius-medium); padding:.7rem; min-inline-size:0; }
.climate-period-month h4 { margin:.1rem 0 .55rem; text-align:center; }
.climate-period-weekdays,.climate-period-month__grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.18rem; }
.climate-period-weekdays { color:var(--color-muted); font-size:.72rem; text-align:center; margin-block-end:.2rem; }
.climate-period-day { min-block-size:2.7rem; border:1px solid color-mix(in srgb,var(--color-border) 65%,transparent); border-radius:.35rem; padding:.18rem; display:flex; flex-direction:column; justify-content:space-between; background:var(--color-surface); }
.climate-period-day--blank { visibility:hidden; }
.climate-period-day--future { opacity:.42; }
.climate-period-day--missing { background:color-mix(in srgb,var(--color-attention) 10%,var(--color-surface)); }
.climate-period-day__number { font-size:.74rem; line-height:1; }
.climate-period-day__markers { display:flex; flex-wrap:wrap; gap:.12rem; }
.climate-period-marker { inline-size:1.05rem; block-size:1.05rem; border-radius:.22rem; display:inline-flex; align-items:center; justify-content:center; font-size:.64rem; line-height:1; font-weight:800; border:1px solid currentColor; }
.climate-period-marker--heat { background:#f6c5b8; color:#752516; }
.climate-period-marker--frost { background:#c9def5; color:#194a73; }
.climate-period-marker--dry { background:#f4e2a5; color:#624d00; }
.climate-period-marker--rain { background:#c9e6d5; color:#215b3a; }
.climate-period-marker--missing { background:transparent; color:var(--color-muted); border-style:dashed; }
.climate-period-card__title { display:flex; flex-wrap:wrap; gap:.35rem; }
@media (max-width: 62rem) { .climate-period-calendar__months { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 38rem) { .climate-period-calendar__months { grid-template-columns:1fr; } .climate-period-day { min-block-size:2.45rem; } }
@media (prefers-contrast: more) { .climate-period-marker { border-width:2px; } }


/* Gradtagvergleich v2.11.0 */
.degree-day-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:var(--space-3); margin:1rem 0 1.25rem; }
.degree-day-summary .metric-card { display:grid; gap:.3rem; }
.degree-day-summary .metric-card > strong { font-size:1.3rem; }
.degree-day-summary .metric-card small { color:var(--color-muted); line-height:1.45; }

/* v2.11.1: clearer climate-period details and dual-axis climate trend */
.climate-extreme-definitions__content { margin-block-start: var(--space-3); }
.climate-period-table td small { display:block; margin-block-start:.25rem; line-height:1.5; }
.chart-line-precipitation-trend { fill:none; stroke:#2f6f8f; stroke-width:3; stroke-dasharray:12 5 2 5; }
.chart-legend-line--precipitation-trend { border-top:3px dashed #2f6f8f; }
.chart-axis-title { font-weight:700; }
@media (prefers-contrast: more) { .chart-line-precipitation-trend { stroke-width:5; } }

/* v2.12.0: frei wählbare Klimajahre */
.climate-multi-year-form { margin-block: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface); }
.climate-multi-year-form select { min-inline-size: 8rem; padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface); color: var(--color-text); font: inherit; }
.chart-multi-year-line { fill: none; stroke-width: 3; }
.chart-multi-year-line--0 { stroke: #a13d2d; }
.chart-multi-year-line--1 { stroke: #2f6f8f; stroke-dasharray: 8 5; }
.chart-multi-year-line--2 { stroke: #5d9270; stroke-dasharray: 3 4; }
.chart-multi-year-line--3 { stroke: #6f5a4e; stroke-dasharray: 12 5 2 5; }
.chart-multi-year-bar { opacity: .72; }
.chart-multi-year-bar--0 { fill: #a13d2d; }
.chart-multi-year-bar--1 { fill: #2f6f8f; }
.chart-multi-year-bar--2 { fill: #5d9270; }
.chart-multi-year-bar--3 { fill: #6f5a4e; }
@media (prefers-contrast: more) { .chart-multi-year-line { stroke-width: 5; } .chart-multi-year-bar { opacity: 1; } }
.chart-multi-year-legend { display:inline-block; inline-size:1.5rem; block-size:.35rem; border-radius:999px; }
.chart-multi-year-legend--line-0,.chart-multi-year-legend--bar-0 { background:#a13d2d; }
.chart-multi-year-legend--line-1,.chart-multi-year-legend--bar-1 { background:#2f6f8f; }
.chart-multi-year-legend--line-2,.chart-multi-year-legend--bar-2 { background:#5d9270; }
.chart-multi-year-legend--line-3,.chart-multi-year-legend--bar-3 { background:#6f5a4e; }

.page-toc {
  margin-block: 1.25rem 2rem;
  border: 1px solid var(--color-border, currentColor);
  border-radius: var(--radius-medium, .75rem);
  background: var(--color-surface, Canvas);
}
.page-toc__details { padding: .85rem 1rem; }
.page-toc summary { cursor: pointer; font-weight: 800; }
.page-toc ol { columns: 2; column-gap: 2rem; margin-block-end: 0; padding-inline-start: 1.5rem; }
.page-toc li { break-inside: avoid; margin-block: .35rem; }
.content-section[id] { scroll-margin-block-start: 6.5rem; }
.back-to-top { margin-block: 1.25rem 0; font-size: .9rem; }
.site-footer__data { max-width: 60rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
@media (max-width: 48rem) {
  .page-toc__details:not([open]) { padding-block: .75rem; }
  .page-toc ol { columns: 1; }
}

/* v2.14.0: Informationshierarchie und mobile Klimadetails */
.climate-page-guide {
  margin-block: 1rem 1.5rem;
  padding: .85rem 1rem;
  border-inline-start: .35rem solid var(--color-primary);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.climate-detail-table {
  margin-block: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
}
.climate-detail-table > summary {
  padding: .8rem 1rem;
  cursor: pointer;
}
.climate-detail-table[open] > summary {
  border-block-end: 1px solid var(--color-border);
}
.climate-detail-table .table-scroll {
  margin: 0;
  padding: .75rem;
  overscroll-behavior-inline: contain;
}
@media (max-width: 48rem) {
  .climate-detail-table .data-table th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--color-surface);
    box-shadow: 1px 0 0 var(--color-border);
  }
  .climate-detail-table .data-table {
    white-space: nowrap;
  }
}

/* v2.14.2: expliziter Standortwechsel direkt auf der Klimadatenseite. */
.climate-location-selector {
  padding-block: .25rem 1rem;
}
.climate-location-selector__current {
  margin-block-end: .5rem;
}
.climate-location-selector [data-climate-location-results] {
  margin-block-start: .5rem;
}

/* v2.15.0: Klima-Jahresbericht */
.climate-report-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:var(--content-gap); margin-block:1rem; }
.climate-annual-report__narrative { margin-block:1rem; padding:1rem; border:1px solid var(--color-border); border-radius:var(--radius-medium); background:var(--color-surface); }
.climate-annual-report__narrative h3 { margin-block-start:0; }
.climate-annual-report__narrative ul { display:grid; gap:.45rem; padding-inline-start:1.25rem; }
/* v2.17.0: ruhigere Kennzahlen auf dichten Klimaauswertungen */
.climate-report-metrics .metric-card__value,
.climate-trend-metrics .metric-card__value,
.degree-day-summary .metric-card__value,
.climate-summary-comparison .metric-card__value {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}
.climate-summary-comparison__value > strong {
  font-size: 1.05rem;
}


/* v2.18.0: sichtbare Datenabdeckung für Klimavergleiche. */
.climate-data-quality { margin-block: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.climate-data-quality__heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.climate-data-quality__heading h3 { margin-block: .15rem; }
.climate-data-quality__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem; }
.climate-data-quality__grid article { min-inline-size: 0; padding: .8rem; background: var(--color-surface-muted, rgba(127,127,127,.08)); border-radius: var(--radius-small); }
.climate-data-quality__grid p { margin: .35rem 0; font-size: 1.35rem; font-weight: 800; }
.climate-data-quality__grid small { display: block; color: var(--color-muted); overflow-wrap: anywhere; }
@media (max-width: 48rem) { .climate-data-quality__grid { grid-template-columns: 1fr; } .climate-data-quality__heading { align-items: stretch; flex-direction: column; } }