:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172033; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
main { width: min(1180px, 100%); margin: 0 auto; padding: 1rem; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
h1 { font-size: 1.25rem; margin: 0; }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; font-size: .9rem; }
nav a { color: #1849a9; text-decoration: none; }
nav a[aria-current="page"] { color: #172033; font-weight: 700; text-decoration: underline; text-underline-offset: .2rem; }
button { border: 1px solid #b7c2d5; background: white; color: #172033; padding: .45rem .8rem; border-radius: .35rem; cursor: pointer; }
button.active { background: #1849a9; color: white; border-color: #1849a9; }
.controls { margin: 1rem 0 .4rem; }
.time-picker { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; }
.time-picker label { display: grid; gap: .2rem; font-size: .8rem; color: #536176; }
input[type="date"], input[type="time"], select { border: 1px solid #b7c2d5; border-radius: .35rem; padding: .42rem .5rem; color: #172033; background: white; font: inherit; }
#time-label { display: block; margin-top: .55rem; font-size: .85rem; color: #536176; }
#status, #threshold-stats, #marker-scale { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: #536176; min-height: 1.2em; }
#threshold-stats { font-weight: 600; }
.seo-intro { margin: .45rem 0 .7rem; color: #536176; font-size: .88rem; }
.seo-intro a { color: #1849a9; }
.impressum-card { display: block; width: min(100%, 420px); margin: 1.5rem 0; border: 1px solid #d5dce8; border-radius: .5rem; }
.landing-page { width: min(980px, 100%); }
.landing-hero { margin: 1rem 0; padding: clamp(1.5rem, 5vw, 3.5rem); border-radius: .75rem; background: linear-gradient(135deg, #e8f1ff, #f6faff); }
.landing-hero h2 { max-width: 20ch; margin: 0; font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.08; }
.landing-hero p { max-width: 65ch; margin: 1rem 0 0; font-size: 1.05rem; line-height: 1.55; }
.landing-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.35rem; }
.landing-actions a { padding: .55rem .85rem; border: 1px solid #1849a9; border-radius: .35rem; color: #1849a9; font-weight: 600; text-decoration: none; }
.landing-actions a:first-child { background: #1849a9; color: white; }
.landing-section { margin: 1rem 0; padding: 1.25rem; border: 1px solid #d5dce8; border-radius: .6rem; background: white; }
.landing-section h2 { margin: 0 0 .7rem; font-size: 1.25rem; }
.landing-section p, .landing-section li { line-height: 1.55; }
.landing-section p:last-child { margin-bottom: 0; }
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding: 0; list-style: none; }
.landing-steps li { padding: .9rem; border-radius: .4rem; background: #f4f7fb; }
.landing-steps strong { display: block; margin-bottom: .25rem; color: #1849a9; }
#map { height: max(430px, calc(100vh - 185px)); border: 1px solid #d5dce8; border-radius: .5rem; overflow: hidden; background: #e6ebf3; }
.celebration-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.voltage-marker { min-width: 0; padding: 0; border: 1.5px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px #17203366; }
.maplibregl-popup-content { padding: .8rem 1rem; font: inherit; color: #172033; }
.measurement-map-popup .maplibregl-popup-content { width: min(340px, calc(100vw - 2rem)); }
.measurement-map-popup.is-expanded .maplibregl-popup-content { width: min(50vw, calc(100vw - 2rem)); height: min(50vh, calc(100vh - 2rem)); overflow: auto; }
.maplibregl-popup-close-button { padding: .15rem .35rem; border: 0; font-size: 1.1rem; }
.popup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding-right: 1.4rem; }
.popup-expand { padding: .2rem .4rem; font-size: .72rem; white-space: nowrap; }
.measurement-popup dl { display: grid; grid-template-columns: auto auto; gap: .25rem .8rem; margin: .25rem 0 0; }
.measurement-popup dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.history { margin-top: .7rem; font-size: .75rem; color: #536176; }
.history strong, .history span { display: block; }
.chart-legend { display: flex; gap: .65rem; margin-top: .2rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: .25rem; }
.chart-legend i { width: .7rem; height: .18rem; border-radius: 1rem; }
.chart-threshold-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; color: #536176; font-size: .7rem; }
.chart-threshold-legend span { display: inline-block; width: .7rem; height: .7rem; border-radius: .12rem; }
.history .chart-threshold-low-warning { fill: #38bdf8; background: #38bdf8; opacity: .25; }
.history .chart-threshold-low-critical { fill: #1d4ed8; background: #1d4ed8; opacity: .25; }
.history .chart-threshold-high-warning { fill: #f59e0b; background: #f59e0b; opacity: .2; }
.history .chart-threshold-high-critical { fill: #b91c1c; background: #b91c1c; opacity: .2; }
.history svg { display: block; width: 280px; max-width: 100%; height: 132px; margin: .25rem 0; background: #f7f9fc; border-radius: .2rem; }
.measurement-map-popup.is-expanded .history svg { width: 100%; height: auto; aspect-ratio: 280 / 132; }
.history .chart-grid { stroke: #d5dce8; stroke-width: 1; stroke-dasharray: 2 2; }
.history .chart-label { fill: #667085; font-size: 9px; font-family: system-ui, sans-serif; }
.stale { color: #a04b00; font-weight: 700; }
.statistics-page { width: min(980px, 100%); }
.statistics-chart { margin: 1rem 0; padding: 1rem; border: 1px solid #d5dce8; border-radius: .5rem; background: white; }
.statistics-chart h2 { margin: 0 0 .7rem; font-size: 1rem; }
.statistics-chart svg { display: block; width: 100%; height: auto; min-height: 190px; background: #f7f9fc; border-radius: .25rem; }
.statistics-chart .chart-grid { stroke: #d5dce8; stroke-width: 1; stroke-dasharray: 2 2; }
.statistics-chart .chart-label { fill: #667085; font-size: 11px; font-family: system-ui, sans-serif; }
.statistics-chart .chart-caption, .empty-chart { margin: .45rem 0 0; color: #536176; font-size: .82rem; }
footer { padding: .7rem 1rem; text-align: center; font-size: .8rem; }
footer a { color: #1849a9; }
.admin-page { width: min(1275px, 100%); }
.admin-page header a { color: #1849a9; }
.admin-card { margin: 1rem 0; padding: 1rem; border: 1px solid #d5dce8; border-radius: .5rem; background: white; }
.admin-card h2 { margin: 0 0 .75rem; font-size: 1rem; }
.admin-card form { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.admin-card label { display: grid; gap: .2rem; color: #536176; font-size: .85rem; }
.admin-card input { min-width: 15rem; padding: .42rem .5rem; border: 1px solid #b7c2d5; border-radius: .35rem; font: inherit; }
.new-token { margin-top: .8rem; padding: .75rem; border: 1px solid #f59e0b; border-radius: .35rem; background: #fffbeb; }
.new-token code { display: block; margin-top: .4rem; overflow-wrap: anywhere; font-size: .8rem; }
.new-token p { margin: .45rem 0 0; font-size: .82rem; }
.table-wrap { overflow-x: auto; }
.admin-card table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-card th, .admin-card td { padding: .55rem; border-top: 1px solid #d5dce8; text-align: left; vertical-align: middle; }
.admin-card th { color: #536176; font-weight: 600; }
.admin-card td button { margin: .1rem; font-size: .8rem; }
.admin-card button.danger { color: #a61b1b; border-color: #e6a5a5; }
@media (max-width: 560px) {
  .time-picker { gap: .4rem; }
  header { align-items: flex-start; flex-direction: column; }
  .statistics-chart { padding: .7rem; }
  .statistics-chart svg { min-height: 150px; }
  .landing-steps { grid-template-columns: 1fr; }
  .measurement-map-popup.is-expanded .maplibregl-popup-content { width: calc(100vw - 2rem); height: min(70vh, calc(100vh - 2rem)); }
}