/* fc-blocks.css — geteilte Bausteine der Wetter-Darstellung.
 *
 * Herausgeloest aus pages/forecast.css, damit die Detailseite (forecast.php) und
 * das Stadt-Panel auf der Karte (start.php) DIESELBEN Bausteine benutzen statt
 * zweier Kopien. Wer hier etwas aendert, aendert beide Orte — genau das ist der Zweck.
 *
 * Enthaelt derzeit den „Jetzt"-Block:
 *   .fc-mode / .fc-mode-tag / .fc-mode-big / .fc-mode-temp / .fc-mode-cond
 *   .fc-mv-grid / .fc-mv / .fc-mv-k / .fc-mv-v
 *   .fc-prov (Herkunftszeile)
 *
 * Setzt tokens.css + base.css voraus (Variablen --line, --text, --muted, --bg …).
 */

.fc-mode { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fc-mode-head { margin-bottom: 14px; }
.fc-mode-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; color: var(--muted);
}
.fc-mode-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fc-mode--measured .fc-mode-tag { color: var(--accent); }
.fc-mode--measured .fc-mode-tag::before { box-shadow: 0 0 0 3px var(--accent-soft-bg); }

.fc-mode-big { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Nur-Messwerte-Hero: links Temperatur mit Farbskala darunter, rechts die
   uebrigen Messwerte in zwei Zeilen — statt eine grosse Zahl ins Leere laufen
   zu lassen. */
.fc-mode-body { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.fc-mode-left { flex: 0 0 auto; }
.fc-mode-left .fc-mode-scale { margin-top: 12px; max-width: 280px; }
.fc-mode-scale .fc-airsc { margin: 0; }
/* Windrichtung als kleiner Pfeil in der Wind-Kachel (statt „aus Südsüdost"). */
.fc-mv-warr { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-left: 8px; }
.fc-mv-warr svg { display: block; width: 100%; height: 100%; }
/* Kachelblock haelt sich zurueck: feste Wunschbreite, waechst NICHT auf die
   volle Zeile — der Freiraum rechts ist gewollt. */
.fc-mode-body .fc-mv-grid--side {
  flex: 0 1 620px; margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .fc-mode-body .fc-mv-grid--side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Schmaler Schirm: das Kachelraster passt nicht mehr neben die Temperatur und
   bricht darunter um. Die Temperaturspalte blieb dabei `flex: 0 0 auto`, also so
   schmal wie ihr Inhalt — auf dem Handy 90 px. Sichtbar war das an der Farbskala:
   auf die Breite der Zahl gequetscht, waehrend die Kacheln darunter die ganze
   Zeile fuellten.

   `flex-basis: 100%` REAGIERT nicht auf den Umbruch, es erzwingt ihn — dadurch
   gibt es kein Zwischenband, in dem beide nebeneinander stehen und die Spalte
   trotzdem waechst. Die Medienabfrage ist Pflicht: dieselbe Regel ohne sie laesst
   die Spalte auch NEBEN dem Raster wachsen und schiebt es an den rechten Rand,
   obwohl der Freiraum dort gewollt ist (s. Kommentar oben). Gemessen bei 1280 px:
   Raster sprang von x=218 auf x=613.

   Nur im Messwerte-Block, nicht im Prognose-Block: `.fc-mode--measured` ist die
   einzige Auspraegung mit dieser zweispaltigen Aufteilung. Gilt fuer forecast.php
   und die Stationsseiten gleichermassen — beide bauen dasselbe Markup. */
@media (max-width: 860px) {
  .fc-mode--measured .fc-mode-body .fc-mode-left { flex: 1 1 100%; }
  .fc-mode--measured .fc-mode-body .fc-mode-left .fc-mode-scale { max-width: none; }
}
.fc-mode-icon { width: 72px; height: 72px; flex: 0 0 auto; }
.fc-mode-icon .wx-icon { display: block; width: 100%; height: 100%; }
.fc-mode-temp {
  font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(54px, 8.5vw, 82px); line-height: .82;
  letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums;
}
.fc-mode-temp .fc-mode-unit {
  font-size: .42em; font-weight: 500; color: var(--muted);
  margin-left: .1em; letter-spacing: 0;
}

.fc-mv-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; margin-top: 22px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
}
.fc-mv { background: var(--bg); padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; }
.fc-mv-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fc-mv-v { font-family: var(--font-mono); font-size: 16px; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.fc-prov {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .02em;
}
.fc-prov b { color: var(--text); font-weight: 600; }
.fc-prov .fc-src { color: var(--accent); font-weight: 700; letter-spacing: .08em; }
.fc-prov-sep { opacity: .5; }

/* Sprung zum Station-Reiter aus der Herkunftszeile heraus. */
.fc-prov-more {
  margin-left: auto; background: none; border: 0; cursor: pointer; padding: 2px 0;
  font: inherit; color: var(--brand-cyan); letter-spacing: .02em;
}
.fc-prov-more:hover { text-decoration: none; }


/* Weiss-Glas fuer die Kacheln (galt vorher nur auf der Detailseite, gehoert zum Block). */
.fc-mv{background:rgba(255,255,255,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Im schmalen Panel: kein Trennstrich nach oben, kleinere Typo, engere Kacheln.
   Der Block ist auf der Detailseite eine Fortsetzung des Kopfes, im Panel steht
   er fuer sich. */
.fc-panel .fc-mode{margin-top:0;padding-top:0;border-top:0}
.fc-panel .fc-mode-icon{width:56px;height:56px}
.fc-panel .fc-mode-temp{font-size:44px}
.fc-panel .fc-mode-big{gap:14px}
.fc-panel .fc-mv-grid{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));margin-top:14px}
.fc-panel .fc-mv{padding:9px 11px}
.fc-panel .fc-mv-v{font-size:14px}

/* ---------- Glas-Flaechen ----------
   Gelten fuer die Detailseite UND das Karten-Panel, damit beide dieselben
   Flaechen benutzen. Vorher nur auf .fc-shell definiert → im Panel undefiniert. */
.fc-shell,[data-forecast-panel]{--fc-glass:rgba(255,255,255,.07);--fc-glass-2:rgba(255,255,255,.05)}
html[data-theme="light"] .fc-shell,
html[data-theme="light"] [data-forecast-panel]{--fc-glass:rgba(255,255,255,.72);--fc-glass-2:rgba(255,255,255,.58)}