/* Synoptik (/synoptik) — Redesign 07/2026: Karten-Hero mit Druckband-Toenung,
   schwebender Glas-Zeitleiste, Legende und Wetterlage als Tages-Karten.
   Folgt den style.css-Design-Tokens (--color-*, --space-*, --radius-*,
   --text-*, --shadow-*); Akzent durchgehend App-Blau (kein Violett mehr).
   Z-Ebenen im Karten-Card: Leaflet-Panes/Controls < 1050 (Bar/Legende)
   < 1100 (Lade-Overlay). */

.syn {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-12);
  color: var(--color-text);
  animation: synFadeIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes synFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Header ─────────────────────────────────────────────────── */

.syn-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.syn-heading {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.syn-subtitle {
  display: block;
  margin-top: 2px;
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.syn-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.syn-timestamp {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.syn-btn-refresh {
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.syn-btn-refresh:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.syn-btn-refresh:disabled { opacity: 0.55; cursor: default; }
.syn-btn-refresh:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Wetterlage-Kurzfassung (Callout-Panel: Icon + Kicker/Lage + short) ── */

.syn-summary {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

/* Explizites display:flex ueberschreibt sonst das [hidden]-Attribut. */
.syn-summary[hidden] { display: none; }

.syn-summary-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-primary);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.syn-summary-body { min-width: 0; }

.syn-summary-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--space-2);
}

.syn-summary-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.syn-summary-lage {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.syn-summary-text {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text-light);
}

/* ── Karten-Hero ────────────────────────────────────────────── */

.syn-map-card {
  position: relative;
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-elevated);
}

.syn-map {
  height: min(70vh, 660px);
}

/* Crossfade-Panes (isobarsA/isobarsB) — FADE_MS in synoptic-map.js muss
   zur Dauer hier passen */
.syn-fade-pane {
  transition: opacity 0.42s ease;
  will-change: opacity;
}

.syn-pane-notransition { transition: none !important; }

/* Lade-Overlay ueber der Karte (Skeleton-State) — deckt auch Bar+Legende */
.syn-map-loading {
  position: absolute;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: linear-gradient(160deg, var(--color-bg) 0%, var(--color-primary-light) 130%);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  font-weight: 500;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.syn-map-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.syn-map-loading.is-error .syn-spinner { display: none; }

.syn-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid var(--color-primary-light);
  border-top-color: var(--color-primary);
  animation: synSpin 0.9s linear infinite;
}

@keyframes synSpin { to { transform: rotate(360deg); } }

/* Hint-Zeile unter der Karte (Isobaren-Info + Karten-Attribution) */
.syn-map-hint {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: right;
}

.syn-map-hint a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.syn-map-hint a:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Legende (Glas-Overlay, Kartenecke oben rechts) ─────────── */

.syn-legend {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1050;
  width: 172px;
  padding: 9px 12px 8px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  pointer-events: none;
}

.syn-legend[hidden] { display: none; }

.syn-legend-title {
  margin-bottom: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
}

.syn-legend-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  opacity: 0.85;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.syn-legend-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Zeitleiste (Steuerleiste unter der Karte, im Karten-Hero) ── */

.syn-map-bar {
  position: relative;         /* normaler Fluss direkt unter der Karte */
  padding: 12px 20px 10px;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
}

.syn-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 2px;
}

.syn-play {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-vivid) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--color-primary-glow), var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.syn-play:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px rgba(3, 105, 161, 0.28), var(--shadow-md);
}

.syn-play:active:not(:disabled) { transform: scale(0.97); }
.syn-play:disabled { opacity: 0.45; cursor: default; }
.syn-play:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Play-Dreieck optisch zentrieren (leicht nach rechts) */
.syn-play .syn-play-ic--play { display: block; margin-left: 2px; }
.syn-play .syn-play-ic--pause { display: none; }
.syn-play.is-playing .syn-play-ic--play { display: none; }
.syn-play.is-playing .syn-play-ic--pause { display: block; }

/* Wind-Partikel-Toggle: ruhige Glas-Variante neben dem Play-Button;
   aktiv = gefuellt Primary (deutlicher Pressed-State zusaetzlich zu
   aria-pressed) */
.syn-wind-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast), color var(--transition-fast),
              opacity var(--transition-fast);
}

.syn-wind-toggle:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.04);
  box-shadow: var(--shadow-md);
}

.syn-wind-toggle:active:not(:disabled) { transform: scale(0.97); }
.syn-wind-toggle:disabled { opacity: 0.45; cursor: default; }
.syn-wind-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.syn-wind-toggle.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-vivid) 100%);
  color: #fff;
  box-shadow: 0 4px 12px var(--color-primary-glow), var(--shadow-sm);
}

/* Partikel-Canvas: rein dekorativ, darf keine Karten-Drags schlucken */
.syn-wind-canvas { pointer-events: none; }

/* Wind-Block in der Legende leicht vom Druck-Block absetzen */
.syn-legend-title--wind {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Prominentes Readout des aktuellen Zeitpunkts ("Mo., 6. Juli · 12:00") */
.syn-readout {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}

.syn-readout-loading {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ── Timeline / Scrubber ────────────────────────────────────── */

.syn-timeline { position: relative; }

/* Skeleton vor dem Datenladen */
.syn-tl-skeleton {
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg,
    var(--color-bg) 25%, var(--color-primary-light) 50%, var(--color-bg) 75%);
  background-size: 200% 100%;
  animation: synShimmer 1.4s ease infinite;
}

@keyframes synShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Tageszeile: Label pro Tag, flex-grow = Anzahl Ticks des Tags (inline) */
.syn-tl-days {
  display: flex;
  margin-bottom: 2px;
}

.syn-tl-day-label {
  flex-basis: 0;
  min-width: 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
}

/* Track: Linie + Fortschritts-Fill + Tick-Buttons */
.syn-tl-track {
  position: relative;
  display: flex;
  height: 44px;
}

.syn-tl-line,
.syn-tl-fill {
  position: absolute;
  top: 11px;
  height: 3px;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.syn-tl-line {
  background: rgba(100, 116, 139, 0.28);
}

.syn-tl-fill {
  background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Waehrend der Wiedergabe laeuft der Fill quasi-kontinuierlich mit
   (Transition-Dauer ~ STEP_MS in synoptic-map.js, linear) */
.syn-timeline.is-playing .syn-tl-fill {
  transition: width 1.15s linear;
}

.syn-notransition { transition: none !important; }

.syn-tl-tick {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.syn-tl-tick:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-radius: var(--radius-sm); }

/* Feiner Tagestrenner am ersten Tick eines neuen Tages */
.syn-tl-tick.is-day-start::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 10px;
  width: 1px;
  background: rgba(100, 116, 139, 0.25);
}

/* Dot: fixe 16px-Box, innerer Kreis skaliert — Dot-Zentrum bleibt stabil
   (Linie/Fill sind darauf ausgerichtet: top 11px + 1.5px = 12.5 ~ 4 + 8) */
.syn-tl-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.syn-tl-dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-border-hover);
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.syn-tl-tick:hover .syn-tl-dot::after {
  border-color: var(--color-primary);
  transform: scale(1.15);
}

.syn-tl-tick.is-past .syn-tl-dot::after {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  opacity: 0.75;
}

.syn-tl-tick.is-active .syn-tl-dot::after {
  width: 15px;
  height: 15px;
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-glow);
}

.syn-tl-time {
  margin-top: 3px;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast);
}

.syn-tl-tick:hover .syn-tl-time { color: var(--color-primary); }

.syn-tl-tick.is-active .syn-tl-time {
  color: var(--color-primary);
  font-weight: 700;
}

/* ── Isobaren-Labels + H/T-Zentren (Leaflet divIcons) ───────── */

.syn-isobar-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  color: #475569;
  font-variant-numeric: tabular-nums;
  background: rgba(248, 250, 252, 0.88);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.14), 0 1px 2px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.syn-center-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
  pointer-events: none;
}

/* H/T-Badge: App-Schrift (Inter) statt Serifen, Glas-Kreis mit Farb-Ring */
.syn-center-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

.syn-center-value {
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Meteorologische Konvention: Hoch blau, Tief rot */
.syn-center-icon--hoch .syn-center-badge {
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2), 0 0 0 4px rgba(29, 78, 216, 0.16);
}

.syn-center-icon--tief .syn-center-badge {
  color: #dc2626;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2), 0 0 0 4px rgba(220, 38, 38, 0.16);
}

/* Zentrum ausserhalb des Kartenausschnitts (nur Briefing-Embed): an den Rand
   geheftet, damit es nicht verlorengeht. Der gestrichelte Ring sagt "die
   Position stimmt hier nicht, das Gebilde liegt weiter draussen" — ohne ihn
   waere das Badge eine falsche Ortsangabe. */
.syn-center-icon--offmap { opacity: 0.82; }

.syn-center-icon--offmap .syn-center-badge {
  border: 1.5px dashed currentColor;
  background: rgba(255, 255, 255, 0.82);
}

.syn-center-icon--offmap.syn-center-icon--hoch .syn-center-badge,
.syn-center-icon--offmap.syn-center-icon--tief .syn-center-badge {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.16);
}

/* ── Wetterlage: Tages-Karten (synchron zur Animation) ──────── */

.syn-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.syn-days[hidden] { display: none; }

.syn-day-card {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  animation: synCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes synCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Karte des laufenden Animations-Tags */
.syn-day-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px var(--color-primary-glow), var(--shadow-md);
  transform: translateY(-2px);
}

.syn-day-chip {
  display: inline-flex;
  margin-bottom: var(--space-2);
  padding: 3px 11px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary-vivid);
  background: var(--color-primary-light);
  border-radius: var(--radius-pill);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.syn-day-card.is-active .syn-day-chip {
  color: #fff;
  background: var(--color-primary);
}

.syn-day-text {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.syn-day-card.is-active .syn-day-text { color: var(--color-text); }

.syn-day-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.syn-day-hint svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-primary);
}

.syn-text-empty { color: var(--color-text-muted); margin: 0; }

/* ── Mobil ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .syn-map { height: 62vh; }
  .syn-map-bar { padding: 10px 14px 8px; }
  .syn-readout { font-size: 0.92rem; }
  .syn-legend { top: 8px; right: 8px; width: 148px; padding: 7px 10px 6px; }
}

@media (max-width: 560px) {
  .syn-heading { font-size: 1.3rem; }
  .syn-play { width: 40px; height: 40px; }
  .syn-wind-toggle { width: 40px; height: 40px; }
  /* Readout darf den Wind-Toggle nie aus der Zeile druecken */
  .syn-readout { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .syn-summary-text { font-size: var(--text-md); }
  /* Zwischenzeiten (06/18) nur am aktiven Tick beschriften — Layouthoehe
     bleibt erhalten (visibility statt display) */
  .syn-tl-tick[data-hour="06:00"]:not(.is-active) .syn-tl-time,
  .syn-tl-tick[data-hour="18:00"]:not(.is-active) .syn-tl-time {
    visibility: hidden;
  }
}

/* ── Reduzierte Bewegung ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .syn { animation: none; }
  .syn-day-card { animation: none; }
  .syn-fade-pane,
  .syn-tl-fill,
  .syn-tl-dot::after,
  .syn-play,
  .syn-wind-toggle,
  .syn-day-card,
  .syn-day-chip { transition: none !important; }
  .syn-tl-skeleton { animation: none; }
}