:root {
  color-scheme: light;
  /* ---- Markenfarbpalette (von Kurt vorgegeben, 05.08.2026) ---- */
  --surface-1:      #FBFAF6; /* Weiss-warm    – Karten, Boxen, abgesetzte Bereiche */
  --page:           #F1F0E9; /* Creme/Leinen  – Seitenhintergrund, helle Flächen */
  --text-primary:   #2C3E4A; /* Tiefblau-Grau – Fliesstext, Überschriften */
  --text-secondary: #5B7A8C; /* Rauchblau     – Untertitel, sekundäre Labels, Icons */
  --text-muted:     #7C97A4; /* Rauchblau hell– Metadaten, Platzhaltertext, Fussnoten */
  --grid:           #DAD6C8; /* Leinen-Grau   – Borders, Trennlinien */
  --baseline:       #c9c2ac; /* etwas kräftigeres Leinen-Grau für Baseline/Achsen */
  --border:         rgba(44,62,74,0.12);
  --primary:        #2E5266; /* Petrol        – Buttons, Links, Kopfzeile, Akzente */
  --primary-hover:  #1F3B49; /* Petrol dunkel – Hover-/Aktiv-Zustand von Buttons */
  /* ---- Serien-/Chartfarben: unverändert – feste Zuordnung ist Design-System-Regel (nicht Teil der Markenpalette) ---- */
  --series-1: #2a78d6; /* blau      – Temperatur */
  --series-2: #eb6834; /* orange    – Wind */
  --series-3: #1baf7a; /* aqua      – Regen */
  --series-4: #eda100; /* gelb      – Luftdruck */
  --series-5: #e87ba4; /* magenta   – Ort 5 im Vergleich */
  --series-6: #008300; /* grün      – Modell 5 im Meteogramm */
  --series-7: #4a3aa7; /* violett   – Luftfeuchtigkeit */
  --series-8: #e34948; /* rot       – Beste Auswahl im Meteogramm */
  /* ---- Statusfarben aus der Markenpalette (good/warning/critical); serious/extreme sind eigene
         Zwischen-/Übertöne, von uns in derselben warmen Farbfamilie ergänzt, da in der Vorgabe nicht enthalten ---- */
  --good:     #6E8B5A; /* Salbeigrün – Bestätigungen, Erfolgsmeldungen */
  --warning:  #B5891E; /* Ockergelb  – Hinweise, Warnungen */
  --serious:  #AC6326; /* abgeleitet: zwischen Warning/Critical, gleiche warme Familie */
  --critical: #A33D2F; /* Ziegelrot  – Fehlermeldungen */
  --extreme:  #6E2430; /* abgeleitet: dunkler/gesättigter als Critical, für Gefahrenstufe 5 */
  --daylight-band: rgba(46,82,102,0.10);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.45;
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

header.site {
  position: sticky; top:0; z-index: 50;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.site-inner {
  max-width: 1100px; margin: 0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand { display:flex; flex-direction:column; }
.brand strong { font-size:20px; letter-spacing:-0.01em; }
.brand span { font-size:12px; color:var(--text-muted); }
nav.site-nav { display:flex; gap:4px; flex-wrap:wrap; }
nav.site-nav a {
  text-decoration:none; color:var(--text-secondary); font-size:13px;
  padding:6px 10px; border-radius:6px;
}
nav.site-nav a:hover { background: var(--page); color:var(--text-primary); }

main { max-width:1100px; margin:0 auto; padding: 24px 20px 60px; }

.hero { padding: 28px 0 8px; }
.hero h1 { font-size:30px; margin:0 0 6px; letter-spacing:-0.01em; }
.hero p { color:var(--text-secondary); margin:0; max-width:640px; font-size:15px;}
.hero .note {
  margin-top:14px; font-size:12.5px; color:var(--text-muted);
  border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--surface-1);
  max-width:640px;
}

section.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 26px;
  margin-top: 22px;
  scroll-margin-top: 76px; /* Sticky-Header nicht über den Sektionsanfang legen beim Anker-Sprung */
}
section.panel h2 {
  font-size:19px; margin: 0 0 4px; display:flex; align-items:center; gap:10px;
}
section.panel > p.lead { color:var(--text-secondary); font-size:13.5px; margin:0 0 18px; max-width:680px;}

.badge {
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px;
  background: var(--page); color: var(--text-muted); border:1px solid var(--border);
  text-transform:uppercase; letter-spacing:.03em;
}
.badge.soon { color:#8a6d00; background:#fff2cf; border-color:#f0e0a8; }

/* --- Aktuelle Beobachtung (Gauges) --- */
.observation-card {
  border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:20px; background:var(--page);
}
.observation-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.observation-head h3 { margin:0; font-size:15px; }
.observation-head h3 span { color:var(--text-secondary); font-weight:400; }
.observation-updated { font-size:11.5px; color:var(--text-muted); }
.gauge-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:6px 0 14px; }
.gauge-item { flex:1 1 130px; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:130px; }
.gauge-item svg { display:block; }
.gauge-visual { height:172px; display:flex; align-items:center; justify-content:center; }
#obsWindroseSvgWrap svg { width:168px; height:168px; }
.gauge-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-top:2px; font-weight:600; }
.gauge-minmax { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.observation-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--border); }
.condition { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; }
.cond-icon { font-size:26px; line-height:1; }
.obs-mini-stats { display:flex; gap:22px; flex-wrap:wrap; }
.obs-mini-stat { font-size:12px; color:var(--text-secondary); display:flex; flex-direction:column; gap:1px; }
.obs-mini-stat strong { font-size:13.5px; color:var(--text-primary); font-weight:600; }

/* --- Meteogramm (Mehrmodell-Diagramm) --- */
.meteogram-card {
  border:1px solid var(--border); border-radius:12px; padding:16px 18px 14px; margin-bottom:20px;
  background: var(--surface-1);
}
.meteogram-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:2px; }
.meteogram-head h3 { margin:0; font-size:17px; }
.meteogram-coords { font-size:12px; color:var(--text-muted); display:block; margin-top:2px; }
.meteogram-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px; color:var(--text-secondary); max-width:380px; justify-content:flex-end; }
.meteogram-legend .item { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.meteogram-legend .swatch { width:15px; height:3px; border-radius:2px; display:inline-block; flex:0 0 auto; }
.meteogram-note { font-size:11.5px; color:var(--text-muted); margin:6px 0 12px; max-width:720px; }
.meteogram-scroll { overflow-x:auto; padding-bottom:4px; }
svg.meteogram-svg { display:block; height:auto; min-width:900px; }
.meteogram-foot { font-size:11px; color:var(--text-muted); margin-top:8px; }

/* --- pills / controls --- */
.controls-row { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.control-group { display:flex; flex-direction:column; gap:6px; }
.control-group > label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.pillbar { display:flex; gap:4px; background:var(--page); border:1px solid var(--border); border-radius:8px; padding:3px; }
.pillbar button {
  border:none; background:transparent; color:var(--text-secondary); font-size:12.5px;
  padding:5px 11px; border-radius:6px; cursor:pointer; font-weight:500;
}
.pillbar button.active { background:var(--surface-1); color:var(--text-primary); box-shadow:0 1px 2px var(--border); }
.pillbar button[data-fixed="true"]::after { content:" (fix)"; font-size:10px; color:var(--text-muted); }

/* --- location picker --- */
.location-block { display:flex; flex-direction:column; gap:6px; min-width:200px; }
select.location-select {
  border:1px solid var(--border); background:var(--page); color:var(--text-primary);
  border-radius:8px; padding:6px 10px; font-size:12.5px; font-family:inherit;
}
.location-search-wrap { position:relative; }
input.location-search {
  border:1px solid var(--border); background:var(--page); color:var(--text-primary);
  border-radius:8px; padding:6px 10px; font-size:12.5px; font-family:inherit; width:220px;
}
.location-results {
  position:absolute; top:calc(100% + 4px); left:0; z-index:20; width:260px; max-height:220px; overflow:auto;
  background:var(--surface-1); border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.12);
  display:none;
}
.location-results.show { display:block; }
.location-results button {
  display:block; width:100%; text-align:left; border:none; background:none; padding:7px 10px;
  font-size:12.5px; color:var(--text-primary); cursor:pointer;
}
.location-results button:hover { background:var(--page); }
.location-results button:disabled { color:var(--text-muted); cursor:not-allowed; }
.location-chips { display:flex; gap:6px; flex-wrap:wrap; }
.location-chip {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 6px 4px 10px;
  border-radius:999px; background:var(--page); border:1px solid var(--border);
}
.location-chip .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.location-chip button { border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:13px; line-height:1; padding:2px; }
.location-chip button:hover { color:var(--text-primary); }
.location-hint { font-size:11.5px; color:var(--text-muted); }

/* --- compare summary table --- */
table.compare-table { width:100%; border-collapse:collapse; margin:14px 0 4px; font-size:12.5px; }
table.compare-table th, table.compare-table td {
  text-align:right; padding:7px 9px; border-bottom:1px solid var(--grid); font-variant-numeric: tabular-nums;
}
table.compare-table th:first-child, table.compare-table td:first-child { text-align:left; }
table.compare-table th { color:var(--text-muted); font-weight:500; }
table.compare-table .dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; }

/* --- stat tiles --- */
.stat-row { display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
.stat-tile { border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--page); }
.stat-tile .label { font-size:11.5px; color:var(--text-muted); margin-bottom:4px; }
.stat-tile .value { font-size:22px; font-weight:600; }
.stat-tile .unit { font-size:13px; color:var(--text-secondary); font-weight:400; margin-left:2px;}

/* --- chart --- */
.chart-wrap { position:relative; }
svg.chart { width:100%; height:auto; display:block; overflow:visible; }
.chart-title { font-size:13px; color:var(--text-secondary); margin-bottom:8px; }
.tooltip {
  position:absolute; pointer-events:none; background:var(--surface-1); border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; font-size:12px; box-shadow:0 4px 14px rgba(0,0,0,.12);
  transform: translate(-50%,-115%); white-space:nowrap; display:none; z-index:5;
}
.tooltip .t-date { color:var(--text-muted); font-size:11px; }
.tooltip .t-val { font-weight:600; }

.below-chart-row { display:flex; justify-content:space-between; align-items:center; margin-top:10px; flex-wrap:wrap; gap:8px;}
.linklike-btn {
  background:none; border:1px solid var(--border); color:var(--text-secondary); font-size:12px;
  padding:5px 10px; border-radius:6px; cursor:pointer;
}
.linklike-btn:hover { color:var(--text-primary); }

table.data-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:12.5px; display:none; }
table.data-table.show { display:table; }
table.data-table th, table.data-table td {
  text-align:right; padding:6px 8px; border-bottom:1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}
table.data-table th:first-child, table.data-table td:first-child { text-align:left; }
table.data-table th { color:var(--text-muted); font-weight:500; }
.table-scroll { max-height:260px; overflow:auto; border:1px solid var(--border); border-radius:8px; }

/* --- Ortsübersicht / Karten-Kopplung --- */
.map-embed-wrap { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--page); }
.map-embed { width:100%; height:520px; border:0; display:block; }
.map-embed-fallback { font-size:11.5px; color:var(--text-muted); margin:8px 0 18px; }
.map-sync-card { border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--page); }

/* --- stub sections --- */
.stub-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.stub-card { border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--page); }
.stub-card h3 { margin:0 0 6px; font-size:14.5px; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.stub-card ul { margin:8px 0 0; padding-left:18px; font-size:12.5px; color:var(--text-secondary); }
.stub-card ul li { margin-bottom:3px; }
.status-chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:999px; }
.status-chip.good { background:rgba(12,163,12,.12); color:var(--good); }
.status-chip.warning { background:rgba(250,178,25,.16); color:#8a6d00; }
.status-chip.serious { background:rgba(236,131,90,.16); color:#a14a26; }
.status-chip.critical { background:rgba(208,59,59,.14); color:var(--critical); }
.status-chip.extreme { background:rgba(138,16,57,.16); color:var(--extreme); }

/* --- reusable: section cards, chart legend, trend chip --- */
.section-card { border:1px solid var(--border); border-radius:12px; padding:16px 18px 14px; margin-bottom:20px; background:var(--page); }
.section-card h3 { margin:0 0 4px; font-size:15px; }
.section-card-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.section-card-row > .section-card { flex:1 1 260px; margin-bottom:0; }
.chart-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--text-secondary); margin-bottom:10px; }
.chart-legend .item { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.chart-legend .swatch { width:15px; height:3px; border-radius:2px; display:inline-block; flex:0 0 auto; }
.trend-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--surface-1); border:1px solid var(--border); color:var(--text-secondary); margin-top:4px; }
.windrose-wrap { display:flex; justify-content:center; align-items:center; padding:4px 0 8px; }
.windrose-row { display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap; }
.windrose-legend { display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--text-secondary); min-width:150px; }
.windrose-legend .item { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.windrose-legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; flex:0 0 auto; }
.windrose-legend .calm-item { padding-top:4px; margin-top:2px; border-top:1px solid var(--border); }
.windrose-legend .pct { margin-left:auto; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.section-note { font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.waterbody-note { font-size:12px; color:var(--text-secondary); margin:6px 0 0; }

/* --- webcams --- */
.webcam-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.webcam-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--page); display:flex; flex-direction:column; max-width:360px; }
.webcam-thumb {
  height:110px; width:100%; border:0; padding:0; cursor:pointer; overflow:hidden; position:relative;
  background: linear-gradient(135deg, var(--primary), var(--text-secondary));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; opacity:.85;
}
.webcam-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.webcam-card.featured { max-width:none; width:100%; }
.webcam-card.featured .webcam-thumb { height:340px; font-size:60px; }
.webcam-thumb:hover { opacity:1; }
.webcam-body { padding:12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.webcam-body strong { font-size:13.5px; }
.webcam-body span { font-size:11.5px; color:var(--text-muted); }
.webcam-body a { align-self:flex-start; margin-top:auto; font-size:12px; text-decoration:none; font-weight:600; }
.webcam-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* --- Webcam-Lightbox --- */
.webcam-lightbox {
  display:none; position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.7);
  align-items:center; justify-content:center; padding:24px;
}
.webcam-lightbox.show { display:flex; }
.webcam-lightbox-inner {
  position:relative; background:var(--surface-1); border-radius:14px; padding:18px;
  max-width:min(640px, 100%); width:100%; box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.webcam-lightbox-media {
  border-radius:10px; overflow:hidden; height:min(60vh, 420px);
  background:linear-gradient(135deg, var(--primary), var(--text-secondary));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:64px;
}
.webcam-lightbox-media img { width:100%; height:100%; object-fit:contain; background:#000; }
.webcam-lightbox-foot { padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.webcam-lightbox-foot strong { font-size:14.5px; }
.webcam-lightbox-foot span { font-size:12px; color:var(--text-muted); }
.webcam-lightbox-foot a { font-size:12.5px; font-weight:600; text-decoration:none; }
.webcam-lightbox-close {
  position:absolute; top:10px; right:10px; border:1px solid var(--border); background:var(--surface-1);
  color:var(--text-secondary); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:15px; line-height:1;
}
.webcam-lightbox-close:hover { color:var(--text-primary); }

footer.site { max-width:1100px; margin:0 auto; padding:20px 20px 50px; color:var(--text-muted); font-size:12px; }

/* ===================================================================
   Responsive – Tablet (≤ 860px: iPad Hoch- und Querformat)
   =================================================================== */
@media (max-width: 860px) {
  main { padding: 18px 16px 48px; }
  .hero { padding: 20px 0 6px; }
  .hero h1 { font-size: 25px; }
  .hero p { font-size: 14px; }
  section.panel { padding: 18px 16px 20px; margin-top: 16px; }
  .site-inner { padding: 12px 16px; gap: 10px; }

  nav.site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: thin;
  }
  nav.site-nav a { white-space: nowrap; flex: 0 0 auto; }

  .gauge-item { flex-basis: 108px; min-width: 108px; }
  .gauge-visual { height: 140px; }
  #obsWindroseSvgWrap svg { width: 136px; height: 136px; }
  .controls-row { gap: 12px; }
  .control-group { min-width: 0; }
  input.location-search { width: 100%; min-width: 160px; }
  .location-search-wrap { flex: 1 1 auto; min-width: 0; }
  .map-embed { height: 380px; }
  .webcam-card.featured .webcam-thumb { height: 260px; font-size: 48px; }
}

/* ===================================================================
   Responsive – Mobile (≤ 560px: iPhone Hoch- und Querformat)
   =================================================================== */
@media (max-width: 560px) {
  .site-inner { flex-direction: row; flex-wrap: wrap; }
  .brand { flex: 1 1 auto; }

  .hero h1 { font-size: 21px; }
  .hero .note { padding: 9px 10px; font-size: 12px; }

  section.panel h2 { font-size: 16.5px; flex-wrap: wrap; }
  section.panel > p.lead { font-size: 12.5px; }

  .stat-row { grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); gap: 8px; }
  .stat-tile { padding: 10px 11px; }
  .stat-tile .value { font-size: 18px; }

  .gauge-row { gap: 6px; }
  .gauge-item { flex-basis: 46%; min-width: 46%; }
  .gauge-item svg { width: 100%; height: auto; max-width: 130px; }
  .gauge-visual { height: 120px; }
  #obsWindroseSvgWrap svg { width: 118px; height: 118px; }

  .observation-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .obs-mini-stats { gap: 14px; }

  .controls-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .control-group { width: 100%; }
  .pillbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .location-chips { width: 100%; }

  .meteogram-head { flex-direction: column; }
  .meteogram-legend { justify-content: flex-start; max-width: 100%; }

  table.compare-table, table.data-table { font-size: 11.5px; }
  table.compare-table th, table.compare-table td,
  table.data-table th, table.data-table td { padding: 5px 6px; }

  .map-embed { height: 300px; }
  .webcam-card.featured .webcam-thumb { height: 200px; font-size: 40px; }

  .webcam-grid, .stub-grid { grid-template-columns: 1fr; }
  .section-card-row { flex-direction: column; }
  .section-card-row > .section-card { flex-basis: auto; }
}