/* forecast.css — Stadt-Detailseite (forecast.php).
   v4-Tokens, theme-aware. Reihenfolge: tokens.css → base.css → pages/forecast.css.
   Sektionen: Hero · Stunden-Streifen · Tages-Kacheln · Detail-Charts · Astro. */

.fc-shell {
  /* feste v4-Breite (wie .container in base.css) */
  width: min(var(--container), calc(100% - 32px));
  margin-inline: auto;
  padding: 22px 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* Kinder dürfen NICHT breiter werden → kein H-Overflow */
  gap: 18px;
}

/* ---------- gemeinsame Karte ---------- */
.fc-card {
  min-width: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.fc-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 0;
}
.fc-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.fc-card-sub { font-size: 12px; color: var(--muted); }

/* ---------- Küsten-Badge (ID-Streifen) ---------- */
.fc-sea-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--fc-glass, rgba(255,255,255,.08));
  border: 1px solid var(--line); color: var(--text);
}
.fc-sea-badge svg { width: 13px; height: 13px; opacity: .85; flex: 0 0 auto; }
.fc-sea-badge.is-coastal {
  color: #cbe9f4;                        /* Lagune 100 — hell, klar auf Blau */
  border-color: rgba(104, 194, 227, .45);
  background: rgba(104, 194, 227, .16);
}
.fc-sea-badge.is-coastal svg {
  width: 17px; height: 17px; opacity: 1; color: #7fd4ef;   /* größer + heller Türkis */
  stroke-width: 2.4;
  filter: drop-shadow(0 1px 1.5px rgba(3, 26, 38, .6));     /* dunkler Schatten → klare Kontur */
}
html[data-theme="light"] .fc-sea-badge.is-coastal svg {
  color: #0e6288;                                           /* dunkelblau auf hellem Pill */
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .6));
}
html[data-theme="light"] .fc-sea-badge.is-coastal { color: #0e6288; }

/* ---------- Kopf v2: Identität + „Gemessen ODER Prognose · jetzt" (minimal, technisch) ---------- */
.fc-top { position: relative; padding: 6px 2px 2px; }

/* Ortszeit-Uhr oben rechts im Glas-Kasten. Einzeln = Ort==User; sonst zwei Zeilen. */
.fc-clock {
  position: absolute; top: 6px; right: 2px; z-index: 2;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 9px 13px; border-radius: 12px; pointer-events: none;
  background: var(--fc-glass, rgba(255, 255, 255, .07));
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fc-clock-time {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--text); line-height: 1;
  font-size: 22px; letter-spacing: .01em; margin-left: auto;
}
.fc-clock--dual .fc-clock-time { font-size: 17px; }
.fc-clock-row { display: flex; align-items: center; gap: 14px; }
.fc-clock-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: rgba(234, 247, 252, .82);
}
html[data-theme="light"] .fc-clock-lbl { color: rgba(8, 49, 69, .68); }
.fc-clock-ico { color: var(--accent, #f4a932); flex: none; opacity: 1; }
@media (max-width: 520px) {
  /* Mobil steht die Uhr NICHT mehr absolut ueber dem Kopf, sondern als eigene
     rechtsbuendige Zeile darueber. Grund: die Pille ist 190px breit (dual noch
     mehr), die Reserve war 128px → sie lag auf „SPANIEN · ANDALUSIEN". Eine feste
     Reserve muss man raten und raet bei jeder Sprache/Zeitzone neu falsch; im
     Fluss kann sie prinzipiell nicht mehr ueberlappen. Der Geo-Streifen bekommt
     dafuer die volle Breite zurueck und braucht dadurch weniger Zeilen. */
  .fc-clock {
    position: static; width: max-content; max-width: 100%;
    margin: 0 0 10px auto;
    padding: 7px 10px; gap: 4px;
  }
  .fc-clock-time { font-size: 18px; }
  .fc-clock--dual .fc-clock-time { font-size: 14px; }
  /* Einzel-Uhr braucht das Wort nicht — das Zifferblatt-Icon traegt die Bedeutung
     und der Kasten wird deutlich schmaler. Im Dual-Fall bleiben „Vor Ort"/„Deine
     Zeit" stehen, dort unterscheiden die Labels die beiden Zeilen. */
  .fc-clock:not(.fc-clock--dual) .fc-clock-lbl { font-size: 0; gap: 0; }
}

.fc-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-right: 170px; }
.fc-place { padding-right: 170px; }
/* Uhr liegt hier im Fluss (s. o.) → keine Reserve mehr noetig. */
@media (max-width: 520px) { .fc-id, .fc-place { padding-right: 0; } }
.fc-id > span:not(.fc-id-sep):not(.fc-sea-badge) {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
}
/* Breadcrumb Land·Region·Stadt = Lead, etwas präsenter als Koordinaten/Höhe.
   Spezifität muss die generische Strip-Regel (0,3,1) schlagen → gleiche Form + Tie via Quellreihenfolge. */
.fc-id > span.fc-id-geo:not(.fc-id-sep) { color: var(--text); }
.fc-id > span.fc-id-elev:not(.fc-id-sep):not(.fc-sea-badge) { text-transform: none; }
.fc-id-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .5; }
.fc-id .fc-sea-badge { margin-top: 0; }   /* im ID-Streifen ohne Extra-Abstand */

.fc-place {
  margin: 12px 0 0; font-weight: 800;
  font-size: clamp(32px, 5.2vw, 52px); line-height: .98;
  letter-spacing: -.04em; color: var(--text); text-wrap: balance;
}

/* ---------- Favoriten-Leiste (unter der H1) ---------- */
.fc-fav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 2px; }
.fc-fav-toggle, .fc-fav-open {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--fc-glass-2, rgba(255, 255, 255, .05)); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
}
.fc-fav-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fc-fav-toggle:hover, .fc-fav-open:hover { border-color: var(--accent); }
.fc-fav-toggle.is-on { color: var(--accent); border-color: var(--accent-soft-border, rgba(244,169,50,.4));
  background: var(--accent-soft-bg, rgba(244,169,50,.14)); }
.fc-fav-toggle.is-on svg { fill: var(--accent); stroke: var(--accent); }
.fc-fav-open b { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: 2px; }
.fc-fav-wrap { position: relative; }
.fc-fav-menu {
  /* über der Sticky-Reiterleiste (z-index 1100), sonst liegt das Menü dahinter. */
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1150;
  min-width: 240px; max-width: 340px; max-height: 340px; overflow: auto; padding: 6px;
  /* SOLIDER Untergrund — --bg-elev ist Glas (halbdurchsichtig) und der Text
     wäre über dem Seiteninhalt schwer lesbar. --surface ist deckend (hell/dunkel). */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .40);
}
.fc-fav-menu[hidden] { display: none; }
.fc-fav-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--muted); }
.fc-fav-items { list-style: none; margin: 0; padding: 0; }
.fc-fav-item { display: flex; align-items: center; gap: 4px; border-radius: 7px; }
.fc-fav-item:hover { background: rgba(255, 255, 255, .05); }
.fc-fav-item.is-here { background: var(--accent-soft-bg, rgba(244,169,50,.12)); }
.fc-fav-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  padding: 9px 10px; text-decoration: none; color: var(--text); }
.fc-fav-nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-fav-co { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.fc-fav-x { flex: none; width: 30px; height: 30px; margin-right: 4px; border: 0; background: none;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; }
.fc-fav-x:hover { background: rgba(255, 255, 255, .08); color: var(--accent-alt, #e11d74); }

/* Jetzt-Block (.fc-mode/.fc-mv/.fc-prov) → components/fc-blocks.css (geteilt mit dem Karten-Panel) */


/* ---------- Sektions-Gerüst (minimal, ersetzt Karten schrittweise) ---------- */
.fc-sec { padding: 24px 2px 8px; border-top: 1px solid var(--line); }
.fc-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
/* Abschnitts-Ueberschriften (9 Stueck, u.a. „Stuendliche Wettervorhersage" und
   „<n>-Tage-Wetterprognose"). Bewusst gemeinsam angehoben: im Ueberblick stehen
   mehrere davon untereinander, eine einzelne groesser waere ein Bruch. */
.fc-sec-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--text); }
@media(max-width:640px){ .fc-sec-h h2 { font-size: 15.5px; } }
.fc-sec-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* Stat-Reihe */
.fc-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 18px;
}
.fc-stat {
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
}
.fc-stat-label {
  display: block; margin-bottom: 5px; color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.fc-stat-value {
  color: var(--text); font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 7px;
}

/* „Weitere Werte"-Karte: Grid aus kompakten Wert-Kacheln (wie fc-stat) */
.fc-cond-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.fc-cond {
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
}
.fc-cond-label {
  display: block; margin-bottom: 5px; color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.fc-cond-val {
  color: var(--text); font-size: 17px; font-weight: 800; letter-spacing: -.02em;
}

/* Wind-Kompass-Pfeil */
.fc-compass { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.fc-compass svg { width: 100%; height: 100%; display: block; transition: transform var(--t) var(--ease); }


/* Modell-Auswahl als Leiste am Seitenende */
/* flex-wrap + min(): Label (55px) + Auswahl (min-width 240px) + Abstand +
   Innenabstand ergaben 343px und sprengten auf einem 320px-Schirm die Seite
   (horizontaler Scroll der GANZEN Seite, gemessen 367px). Eine feste
   Mindestbreite muss immer gegen 100 % gedeckelt sein — dieselbe Falle wie bei
   auto-fit-Rastern. */
.fc-modelbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
}
.fc-modelbar-label {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.fc-modelbar .fc-model-select { width: auto; min-width: min(240px, 100%); max-width: 100%; }

.fc-model-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 9px 32px 9px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
  background-size: 16px;
  color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.fc-model-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* (alte Stunden-Streifen- + Tages-Kacheln-Styles entfernt — ersetzt durch Meteogramm + .fc-days2) */

/* ---------- Charts ---------- */
.fc-charts { display: grid; gap: 14px; }
.fc-chart-card { padding-bottom: 14px; }
.fc-chart { width: 100%; height: 150px; display: block; padding: 8px 4px 0; }
.fc-chart-axis {
  display: flex; justify-content: space-between;
  padding: 4px 18px 0; font-size: 10.5px; color: var(--muted);
}
.fc-grid-line { stroke: var(--line); stroke-width: 1; }
.fc-axis-label { fill: var(--muted); font-size: 10px; }
.fc-series-temp { stroke: #f0883e; }
.fc-series-wind { stroke: #2bb673; }
.fc-series-gust { stroke: var(--accent-alt); stroke-dasharray: 4 3; }
.fc-bar-rain { fill: #3b9fe0; }
.fc-series-cumrain { stroke: #1e6fa8; stroke-dasharray: 3 3; fill: none; }
.fc-chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fc-chart-dot { transition: r var(--t) var(--ease); }

/* Tooltip/Cursor der Stunden-Charts (Temp/Regen/Wind), analog zum Vergleichs-Chart */
/* touch-action:pan-y — sonst deutet der Browser das horizontale Wischen als
   Scrollen, bricht die Pointer-Verfolgung mit pointercancel ab und der Tooltip
   springt sofort auf den Default zurück (Handy). pan-y laesst vertikales Scrollen
   der Seite zu, horizontales Wischen verfolgt den Chart-Zeiger. */
.fc-chart-plot { position: relative; touch-action: pan-y; }
.fc-chart-cursor { position: absolute; inset: 0; pointer-events: none; }
.fc-chart-cursor[hidden] { display: none; }
.fc-chart-vline { position: absolute; top: 8px; bottom: 18px; width: 1px; transform: translateX(-.5px); background: rgba(255,255,255,.4); }
.fc-chart-dots { position: absolute; inset: 0; pointer-events: none; }
.fc-chart-dot[class*="fc-chart-dot--"] { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(8,49,69,.85); }
.fc-chart-dot--temp{background:#f0883e}.fc-chart-dot--wind{background:#2bb673}
.fc-chart-dot--gust{background:var(--accent-alt)}.fc-chart-dot--rain{background:#3b9fe0}.fc-chart-dot--cumrain{background:#1e6fa8}
.fc-chart-tip { position: absolute; top: 6px; min-width: 120px; padding: 8px 11px; border-radius: 8px;
  background: rgba(8,49,69,.96); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.45);
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline; white-space: nowrap; z-index: 4; }
.fc-chart-tip.is-right { transform: translateX(10px); }
.fc-chart-tip:not(.is-right) { transform: translateX(-100%) translateX(-10px); }
.fc-chart-tip-t { grid-column: 1/-1; margin-bottom: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.fc-chart-tip-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.fc-chart-tip-k i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.fc-chart-sw--temp{background:#f0883e}.fc-chart-sw--wind{background:#2bb673}
.fc-chart-sw--gust{background:var(--accent-alt)}.fc-chart-sw--rain{background:#3b9fe0}.fc-chart-sw--cumrain{background:#1e6fa8}
.fc-chart-tip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fc-legend { display: flex; gap: 16px; padding: 0 18px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.fc-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ---------- Astro ---------- */

/* ---------- Luftqualität (CAMS / EAQI) ---------- */
#fc-aqi-slot:empty { display: none; } /* keine Grid-Lücke während des Ladens */
.fc-aqi-now { display: flex; align-items: center; gap: 16px; padding: 14px 18px 6px; }
.fc-aqi-badge {
  width: 60px; height: 60px; border-radius: 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
}
.fc-aqi-info { min-width: 0; }
.fc-aqi-label { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.fc-aqi-metrics { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.fc-aqi-metric { font-size: 12.5px; }
.fc-aqi-metric span { color: var(--muted); margin-right: 5px; }
.fc-aqi-metric strong { color: var(--text); font-weight: 700; }
.fc-aqi-metric i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle; }
/* Ausführlicher Reiter */
.fc-aqi-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.fc-aqi-glabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px 0 6px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Zeitbezug rechts in der Gruppenzeile — ohne Versalien, damit er sich als Angabe
   und nicht als weitere Rubrik liest. */
.fc-glabel-meta { text-transform: none; letter-spacing: .02em; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.fc-aqi-detail .fc-aqi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fc-aqi-detail .fc-aqi-grid .fc-aqi-metric { background: var(--fc-glass-2); padding: 10px 12px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.fc-aqi-detail .fc-aqi-grid .fc-aqi-metric span { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.fc-aqi-detail .fc-aqi-grid .fc-aqi-metric strong { font-family: var(--font-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
/* Der Streifen fuellt jetzt die volle Breite (wie der Pollen-Streifen) — vorher
   feste 10px je Zelle, waehrend die Tagesachse darunter PROZENTUAL positioniert
   wird: beide liefen auseinander, „Di/Mi/Do" standen im Leeren. */
.fc-aqi-strip-wrap { padding: 6px 0 0; }
/* Durchgehend wie die Pollen-/Aerosol-Leisten: keine Luecken zwischen den
   Zeitschritten, Rundung nur aussen. Breite flexibel (`flex:1 1 0`), sonst
   laeuft die prozentual gesetzte Tagesachse davon. */
.fc-aqi-strip { display: flex; height: 16px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.fc-aqi-cell { flex: 1 1 0; min-width: 0; }

/* ---------- Loading / Error / Footer-Hinweis ---------- */
.fc-note {
  padding: 24px; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--muted); font-size: 14px; text-align: center;
}
.fc-note.is-error { color: var(--accent-alt); }
.fc-disclaimer { font-size: 11.5px; color: var(--muted); text-align: center; padding: 2px 0; }
.fc-disclaimer a { color: var(--accent); text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .fc-shell { width: calc(100% - 20px); }
  .fc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   „Lagune"-Port (2026-07-16): Himmel-zu-Meer-Verlauf als Grund,
   Glasflaechen, Stunden-Meteogramm im Zeilen-Layout.
   forecast.css ist seitenspezifisch → body{} hier ist sicher.
   ============================================================ */
body{background:linear-gradient(180deg,#1391b0 0%,#0e6288 42%,#0a415d 100%);background-attachment:fixed}
html[data-theme="light"] body{background:linear-gradient(180deg,#ffffff 0%,#eaf7fc 38%,#d3ebf7 100%);background-attachment:fixed}

/* Glas-Variablen stehen jetzt in components/fc-blocks.css (gelten auch im Panel).
   Nur --hcloud-rgb bleibt hier: das braucht ausschliesslich das Meteogramm. */
.fc-shell{--hcloud-rgb:240,246,252}
html[data-theme="light"] .fc-shell{--hcloud-rgb:96,142,176}

/* ---- Stunden-Meteogramm (Spalten = Stunden, Zeilen = Groessen) ---- */
.hrs{border:1px solid var(--line);border-radius:12px;overflow-x:auto;
  background:var(--fc-glass-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hgrid{width:max-content;min-width:100%;position:relative}
/* Tagesgrenze: durchgehende, kräftigere Linie über alle Zeilen (deutlicher als die 1px-Stundenlinien) */
.hdiv{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-1px);
  background:rgba(161,218,238,.45);pointer-events:none;z-index:1}
html[data-theme="light"] .hdiv{background:rgba(14,98,136,.34)}
.hrow{display:grid}
.hc{border-left:1px solid var(--line);text-align:center;padding:5px 0;min-width:0}
.hc:first-child{border-left:0}
.hdays .hc{border-left:0;text-align:left;padding:9px 0 7px 10px;font-size:12.5px;font-weight:700;color:var(--text)}
.hdays .hc.nd{border-left:1px solid var(--line)}
.htimes .hc{font-family:var(--font-mono);font-size:11px;color:var(--muted);padding:3px 0 6px}
.htimes .hc.now{color:var(--accent);font-weight:700}
.hicons .hc{padding:2px 0 6px}
.hicons .wx-icon,.hicons img,.hicons svg{width:26px;height:26px;display:block;margin:0 auto}
.hlab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:10px 0 3px 10px;border-top:1px solid var(--line)}
/* Der Text klebt am linken Rand, das <div> bleibt volle Breite (Trennlinie laeuft
   durch). Ohne das waren die Zeilen nach zwei Wischbreiten nicht mehr zuzuordnen:
   der Streifen ist mobil ~15× breiter als der Schirm. Eigener Hintergrund, damit
   die Beschriftung beim Vorbeiwischen nicht auf den Zahlen liegt. */
.hlab-in{position:sticky;left:0;display:inline-block;max-width:100%;
  padding:2px 10px 2px 0;margin-left:-10px;padding-left:10px;
  background:var(--fc-glass-2);border-radius:0 6px 6px 0}
.htemp{display:block;height:86px;color:var(--text)}
.hwind .hc svg{width:16px;height:16px;display:block;margin:0 auto 3px}
.hwind .hc .dd{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.04em}
.hwind .hc .sp{font-family:var(--font-mono);font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.hbft .hc{padding:6px 0 8px}
.hbft .b{width:19px;height:19px;border-radius:50%;display:inline-grid;place-items:center;
  font-family:var(--font-mono);font-size:10.5px;color:#06303d;font-weight:600}
.hgust .hc{padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:62px}
.hgust .bar{width:7px;border-radius:4px;margin-bottom:5px}
.hgust .gv{font-family:var(--font-mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hrain .hc{font-family:var(--font-mono);font-size:13px;color:var(--muted);opacity:.55;padding:6px 0 8px;font-variant-numeric:tabular-nums}
.hrain .hc.wet{color:#68c2e3;opacity:1}

/* Wolken-Höhenband: randlose, volle Kacheln (Dichte = Deckkraft, Farbe = Karten-Legende
   CLOUDS_SMOOTH via --hcloud-rgb). Drei Streifen oben=hoch … unten=tief. */
.hcloud .hc{border-left:0;padding:0;height:24px;display:flex;align-items:center;justify-content:center}
/* Drei Höhenstreifen als dichter Block mit feiner Trennlinie dazwischen */
.hlab-cloud{padding-top:5px;padding-bottom:2px;border-top:1px solid var(--line)}
.hrow.hcloud + .hlab-cloud{margin-top:0}
/* Zahl weiß mit dunkler Kontur (Offset-Outline) → lesbar auf dichter (weißer) wie
   sparsamer (blauer) Kachel, in Blue- und Light-Mode gleichermaßen. */
.hcloud .hcv{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:-0.6px -0.6px 0 rgba(3,26,38,.9), 0.6px -0.6px 0 rgba(3,26,38,.9),
    -0.6px 0.6px 0 rgba(3,26,38,.9), 0.6px 0.6px 0 rgba(3,26,38,.9), 0 0 2px rgba(3,26,38,.6)}
.hlab-sub{opacity:.62;font-weight:400}

/* Zahlen-Zeilen auf ~13px angleichen (Uhrzeit bleibt 11px). Generische Werte-Zeilen
   (Luftfeuchte abwärts) kleiner + mono, die Spezial-Zahlen etwas größer → treffen in der Mitte. */
.hval .hc{font-family:var(--font-mono);font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}

/* Meteogramm-Scrollbalken in Lagune (Tuerkis-Griff) */
.hrs{scrollbar-width:thin;scrollbar-color:#68c2e3 transparent}
.hrs::-webkit-scrollbar{height:10px}
.hrs::-webkit-scrollbar-track{background:transparent}
.hrs::-webkit-scrollbar-thumb{background:rgba(104,194,227,.5);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.hrs::-webkit-scrollbar-thumb:hover{background:rgba(104,194,227,.8);background-clip:padding-box}
html[data-theme="light"] .hrs{scrollbar-color:#0e75a0 transparent}
html[data-theme="light"] .hrs::-webkit-scrollbar-thumb{background:rgba(14,117,160,.45);background-clip:padding-box}
html[data-theme="light"] .hrs::-webkit-scrollbar-thumb:hover{background:rgba(14,117,160,.7);background-clip:padding-box}

/* 7-Tage — klickbare Haarlinien-Zeilen (Klick → Tages-Panel auf/zu) */
.fc-days2{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--fc-glass-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fc-day2-wrap{border-bottom:1px solid var(--line)}
.fc-day2-wrap:last-child{border-bottom:0}
/* Luft ueber die HOEHE, nicht ueber Abstaende zwischen den Zeilen: die Tage sind
   eine Liste mit Trennlinien — Luecken dazwischen zerschneiden den Rhythmus. */
.fc-day2{display:grid;grid-template-columns:104px 26px 1fr 96px 152px 50px 58px 18px;align-items:center;gap:14px;
  width:100%;text-align:left;padding:17px 14px;border:0;
  background:transparent;color:var(--text);cursor:pointer;font:inherit;transition:background var(--t) var(--ease)}
.fc-day2:hover{background:rgba(104,194,227,.08)}
/* Offener Tag: der GANZE Block (Zeile + Panel) bekommt einen Verlauf, der nach
   unten dunkler wird — sonst ist der aufgeklappte Tag kaum vom Rest der Liste zu
   unterscheiden. Die Zeile selbst bleibt transparent, damit der Verlauf durchläuft;
   sie behält nur den türkisen Akzentbalken links.
   Farben AUSSCHLIESSLICH aus der Lagune-Skala: 400 #37a8ce → 800 #0a415d (dark)
   bzw. 300 → 700 #0e6288 (light). Vorher stand hier ein selbst gewähltes #031420,
   das es im Token-System nicht gibt. */
.fc-day2-wrap.is-open{
  /* Zwei Ebenen: Lagune-Verlauf OBEN, weisse Glasschicht darunter — dadurch wirkt
     der offene Tag heller/milchiger als der Rest der Liste (die nur .05 Weiss hat). */
  background:
    linear-gradient(180deg,rgba(55,168,206,.14) 0%,rgba(10,65,93,.42) 100%),
    rgba(255,255,255,.10);
  border-radius:12px;border-bottom-color:transparent;
  box-shadow:inset 0 0 0 1px var(--line)}   /* nur die Haarlinie — Schatten sitzt am Panel */
html[data-theme="light"] .fc-day2-wrap.is-open{
  background:
    linear-gradient(180deg,rgba(55,168,206,.20) 0%,rgba(14,98,136,.16) 100%),
    rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px var(--line)}
/* Der Schatten sitzt am Panel, nicht am ganzen Block: die Kopfzeile (Heute + Werte)
   bleibt unangetastet, der eingelassene Eindruck entsteht ab „Wetterwarnungen".
   RUNDHERUM: Versatz und Spread auf 0 — ein Y-Versatz wuerde den Schatten nach unten
   schieben, ein negativer Spread ihn einschnueren, dann wirft nur die Oberkante.
   Schattenfarbe Lagune 900 (hell: Lagune 700, sonst wirkt es schmutzig). */
.fc-day2-wrap.is-open .fc-day2-panel{
  box-shadow:inset 0 0 26px rgba(8,49,69,.85)}
html[data-theme="light"] .fc-day2-wrap.is-open .fc-day2-panel{
  box-shadow:inset 0 0 26px rgba(14,98,136,.50)}
.fc-day2-wrap.is-open .fc-day2{background:transparent;box-shadow:inset 3px 0 0 var(--brand-cyan)}
/* Chevron rechts */
.fc-day2-chev{width:12px;height:12px;justify-self:center;position:relative;transition:transform var(--t) var(--ease)}
.fc-day2-chev::before{content:"";position:absolute;left:1px;top:2px;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.fc-day2-wrap.is-open .fc-day2-chev{transform:rotate(180deg)}
/* Aufklappbares Tages-Panel: 4 Abschnitte */
.fc-day2-panel{display:none;padding:2px 14px 14px}
.fc-day2-wrap.is-open .fc-day2-panel{display:block}
/* 4 Tagesabschnitte NEBENEINANDER (Karten), linksbündig */
/* Nicht fest vier Spalten: bei HEUTE fallen vergangene Abschnitte weg, dann sollen
   die verbleibenden Kacheln die Breite ausfuellen (auch wenn nur eine uebrig ist).
   auto-fit klappt leere Spuren zusammen, die Kacheln strecken sich auf 1fr. */
.fc-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;align-items:stretch}
.fc-seg{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:8px;padding:12px;
  background:var(--fc-glass-2);border:1px solid var(--line);border-radius:10px}
.fc-seg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.fc-seg-when{display:flex;flex-direction:column;gap:1px;min-width:0}
.fc-seg-lbl{font-size:13px;font-weight:700;color:var(--text)}
.fc-seg-time{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.02em;color:var(--muted)}
/* Großes Wetter-Icon oben rechts */
.fc-seg-i{width:38px;height:38px;flex:0 0 auto}
.fc-seg-i .wx-icon,.fc-seg-i img,.fc-seg-i svg{width:38px;height:38px;display:block}
/* Temp-Zeile: Temperatur links, Sonnenauf-/-untergang rechts (gleiche Zeile → gleiche Höhen) */
.fc-seg-trow{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.fc-seg-t{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-seg-t .lo{color:var(--muted);font-weight:400;margin-left:2px}
.fc-seg-sun{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11.5px;color:var(--text);white-space:nowrap;flex:0 0 auto}
.fc-seg-sunico{width:22px;height:22px;color:var(--brand-cyan);flex:0 0 auto}
/* Wind + Böen in einem Kasten (mit Windpfeil), Richtung ausgeschrieben darunter */
.fc-seg-wbox{background:var(--fc-glass);border:1px solid var(--line);border-radius:8px;padding:7px 9px;display:flex;flex-direction:column;gap:2px}
.fc-seg-wtop{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.fc-seg-wtop b{color:var(--text);font-weight:700}
.fc-seg-arr{width:13px;height:13px;flex:0 0 auto}
.fc-seg-wdir{font-size:11px;color:var(--muted);line-height:1.3}
/* Luftfeuchte + Regen: zwei gleich breite Kästen */
.fc-seg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fc-seg-cell{background:var(--fc-glass);border:1px solid var(--line);border-radius:8px;padding:6px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fc-seg-cell span{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.fc-seg-cell b{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.fc-seg-empty{padding:10px 4px;font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.fc-segs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.fc-segs{grid-template-columns:1fr}}
.fc-day2-n{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.fc-day2-i{width:22px;height:22px}
.fc-day2-i .wx-icon,.fc-day2-i img,.fc-day2-i svg{width:22px;height:22px;display:block}
.fc-day2-rng{position:relative;height:5px;border-radius:3px;background:var(--fc-glass-2);box-shadow:inset 0 0 0 1px var(--line)}
.fc-day2-rng i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#37a8ce,#68c2e3,#f4a932,#f0714f)}
.fc-day2-t{font-family:var(--font-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.fc-day2-t .lo{color:var(--muted)}
.fc-day2-w{font-family:var(--font-mono);font-size:12px;color:var(--text);
  display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fc-day2-warr{width:13px;height:13px;flex:0 0 auto}
.fc-day2-w .w-spd{font-weight:700}
.fc-day2-w .w-b{color:var(--muted)}
.fc-day2-w .w-lbl{font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.fc-day2-w .w-u{color:var(--muted)}
.fc-day2-r{font-family:var(--font-mono);font-size:12px;color:#68c2e3;text-align:right}
/* Datum: Langform am Desktop, Kompaktform mobil (beide im Markup, s. daysHtml) */
.fc-day2-n .d-short{display:none}

/* ---- Tagesliste mobil (umgebaut 2026-07-23, live gemessen bei 375px) --------
   Vorher: 78px 22px 1fr 80px 46px 18px. Die festen Spalten plus Gaps frassen
   294 von 325px — der Temperatur-Spannbalken (1fr) blieb mit 31px uebrig und
   war damit funktionslos, obwohl er die echte Legendenfarbe traegt. Gleichzeitig
   brach „35 °C 24 °C" in 80px zweizeilig um (mitten in „24 °C") und das Datum
   „Fr., 24.07." ebenfalls. Wind und Regen waren ganz ausgeblendet.
   Jetzt: kompaktes Datum, Temperatur kontrolliert zweizeilig (Max ueber Min,
   Einheit bleibt — MeteoUnits kann auf °F stehen), Wind reduziert auf Pfeil +
   Zahl. Der Balken bekommt den gewonnenen Platz. */
@media(max-width:640px){
  /* 78px in der Namensspalte: an gewarnten Tagen steht das Dreieck (13px + 3px)
     vor dem Datum (55px) — mit weniger Platz rutschte das Datum darunter und
     das Dreieck stand allein ueber dem Tag. Der engere Gap (6px) holt den
     Platz zurueck, der Balken gewinnt dabei sogar noch. */
  .fc-day2{grid-template-columns:78px 20px minmax(0,1fr) 46px 38px 30px 12px;gap:6px;padding:13px 12px}
  .fc-day2-n .d-long{display:none}
  .fc-day2-n .d-short{display:inline;white-space:nowrap}
  .fc-day2-warn{margin-right:3px}
  /* Wind und UV-Badge sind beide Mono-Zahlen und lasen sich sonst als „24UV". */
  .fc-day2-uv{padding-left:5px}
  .fc-day2-n{font-size:11px;letter-spacing:.02em;line-height:1.25}
  /* Max ueber Min statt nebeneinander: spart die halbe Spaltenbreite und bricht
     nie mehr innerhalb eines Wertes um. */
  .fc-day2-t{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-size:12px}
  .fc-day2-t .u{font-size:9px;opacity:.75;margin-left:1px}
  /* Wind bleibt sichtbar, aber nur Richtung + Geschwindigkeit. */
  .fc-day2-w{display:inline-flex;gap:4px;font-size:11px}
  .fc-day2-w .w-b,.fc-day2-w .w-u{display:none}
  .fc-day2-r{display:none}          /* Regen steht im aufgeklappten Tagespanel */
  .fc-day2-uv{justify-self:end}
}
/* Ganz schmale Geraete: Wind weicht, der Balken bleibt lesbar. */
@media(max-width:360px){
  .fc-day2{grid-template-columns:56px 20px minmax(0,1fr) 44px 28px 12px;gap:6px}
  .fc-day2-w{display:none}
}


/* Tages-Reiter ueber dem Meteogramm (Klick → scrollt an den Tag) */
.fc-daytabs{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px}
.fc-dtab{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--fc-glass-2);
  color:var(--muted);cursor:pointer;transition:color var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease)}
.fc-dtab:hover{color:var(--text)}
.fc-dtab.is-active{background:var(--accent);color:#3a2600;border-color:transparent;font-weight:700}

/* ===== Restliche Sektionen ins Glas/Haarlinie (2026-07-17) =====
   .fc-card (Weitere Werte, Luftqualität, Charts) → randlose Sektion wie .fc-sec. */
.fc-card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:26px 0 8px;margin-top:26px}
.fc-card-head{padding:0;margin-bottom:16px}
.fc-card-title{font-size:14px;font-weight:600;letter-spacing:.02em}
.fc-card-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}

/* Weitere Werte → Haarlinien-Raster mit Mono-Werten (wie Meteogramm) */
.fc-cond-grid{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fc-cond{background:var(--fc-glass-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:0;border-radius:0;padding:11px 13px}
.fc-cond-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fc-cond-val{font-family:var(--font-mono);font-size:16px;font-weight:400;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}

/* Luftqualität-Inhalt + Astro auf Glas */
.fc-aqi-now{padding:0 0 6px}
.fc-aqi-strip-wrap{padding:6px 0 0}
/* Astro-Karte: nur noch die Huelle — Sonne/Mond kommen aus der Komponente
   `msp` (components/sun-path.css), inkl. eigenem Raster. */
.fc-astro{background:var(--fc-glass-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;overflow:hidden}
.fc-astro-more{display:block;padding:12px 16px;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;border-top:1px solid var(--line)}
.fc-astro-more:hover{background:var(--accent-soft-bg)}
.fc-legend,.fc-chart-axis{padding-left:0;padding-right:0}

/* Top-Reiter (Ansicht-Navigation: Überblick / Stündlich / Tage / Luftqualität …) */
/* Sticky — ABER unterhalb der zwei bereits klebenden Leisten:
     .site-header    0–61px   (z-index 1200)
     .page-title-bar 61–85px  (z-index 1199, sticky, Hoehe 24px — base.css)
   Deshalb top:85px. Mit top:61px lagen Reiterleiste und Titelleiste exakt
   uebereinander. z-index bewusst unter 1199, damit die Titelleiste oben bleibt.
   Kein flex-wrap: mit Warnungen/Waldbrand/Station sind es bis zu 10 Reiter,
   die auf dem Handy nie nebeneinander passen → horizontal scrollen. */
.fc-tabs{display:flex;gap:3px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin:14px 0 8px;padding:5px 5px 0;position:sticky;top:85px;z-index:1100;
  background:var(--header-bg,rgba(6,34,52,.98));border-radius:12px 12px 0 0;border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* Auf kleinen Schirmen kompakter — sonst fressen drei klebende Leisten zu viel Hoehe. */
@media(max-width:640px){
  .fc-tabs{margin:10px 0 6px;padding:3px 4px 0}
  .fc-tab{font-size:12px;padding:7px 12px}
}
.fc-tabs::-webkit-scrollbar{display:none}
.fc-tab{white-space:nowrap;flex:0 0 auto}
html[data-theme="light"] .fc-tabs{background:rgba(14,98,136,.08)}
.fc-tab{font-size:13px;font-weight:600;padding:9px 16px;border:0;background:transparent;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;
  transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.fc-tab:hover{color:var(--text);background:rgba(255,255,255,.05)}
.fc-tab.is-active{color:var(--text);background:rgba(255,255,255,.07);border-bottom-color:var(--accent)}

/* Parameter-Picker (Stündlich): Chips für optionale Meteogramm-Zeilen */
.fc-params{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.fc-params-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.fc-pchip{font-family:var(--font-mono);font-size:11.5px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--fc-glass-2);color:var(--muted);cursor:pointer;transition:color var(--t) var(--ease),background var(--t) var(--ease)}
.fc-pchip:hover{color:var(--text)}
.fc-pchip.is-on{background:var(--accent);color:#3a2600;border-color:transparent;font-weight:700}
/* Mobil EINE wischbare Zeile statt drei umbrechender Reihen: die elf Chips
   nahmen 90px direkt unter der klebenden Reiterleiste ein — zusammen mit
   Kopf, Reitern und Tages-Reitern blieb kaum Platz fuers Meteogramm selbst.
   Gleiche Geste wie in der Reiterleiste, gleiche weiche Kante als Hinweis. */
@media (max-width:640px){
  .fc-params{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .fc-params::-webkit-scrollbar{display:none}
  .fc-params-lbl,.fc-pchip{flex:0 0 auto}
  /* Tages-Reiter darueber ebenfalls einzeilig — sonst wandert die Chip-Zeile
     bei sieben Tagen doch wieder nach unten. */
  .fc-daytabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .fc-daytabs::-webkit-scrollbar{display:none}
  .fc-dtab{flex:0 0 auto}
}


/* ---------- Modellvergleich ---------- */
.fc-mc-hint{margin:0 0 14px;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:72ch}
.fc-mcl{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px}
.fc-mcl-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text)}
.fc-mcl-item i{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.fc-mc-chart{position:relative;margin-bottom:16px}
.fc-mc-plot{position:relative}
.fc-mc-chart .fc-chart{width:100%;height:210px;display:block;cursor:crosshair}
.fc-mc-axis{position:relative;height:16px;margin-top:2px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}

/* Vertrauens-Badge */
/* Kopfzeile: Umschalter links, Vertrauens-Badge rechts. flex-wrap laesst den
   Badge auf schmalen Schirmen auf eine eigene Zeile rutschen. */
.fc-mc-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;margin:2px 0 12px}
.fc-mc-top .fc-mc-switch,.fc-mc-top .fc-mc-conf{margin:0}
.fc-mc-conf{display:flex;width:fit-content;align-items:center;gap:9px;margin:0 0 12px;padding:8px 14px;
  border:1px solid var(--line);border-left-width:3px;border-radius:8px;background:rgba(255,255,255,.04);
  font-size:13px;flex-wrap:wrap}
.fc-mc-conf-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.fc-mc-conf b{color:var(--text);font-weight:700}
.fc-mc-conf-t{color:var(--text);font-size:13px}

/* Fadenkreuz auf dem Vergleichs-Chart */
.fc-mc-dots{position:absolute;inset:0 0 16px 0;pointer-events:none}
.fc-mc-dot{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(4,26,38,.8)}
.fc-mc-cross{position:absolute;inset:0 0 16px 0;pointer-events:none}
.fc-mc-cross[hidden]{display:none}
.fc-mc-vline{position:absolute;top:0;bottom:0;width:1px;transform:translateX(-.5px);background:rgba(255,255,255,.45)}
.fc-mc-tip{position:absolute;top:6px;min-width:150px;padding:8px 11px;border-radius:8px;
  /* Lagune 900 (#083145) statt des frueheren, palettenfremden Fast-Schwarz. */
  background:rgba(8,49,69,.96);border:1px solid var(--line);box-shadow:0 8px 22px rgba(0,0,0,.45);
  display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:baseline;white-space:nowrap;z-index:3}
.fc-mc-tip.is-right{transform:translateX(10px)}
.fc-mc-tip:not(.is-right){transform:translateX(-100%) translateX(-10px)}
.fc-mc-tip-t{grid-column:1/-1;margin-bottom:3px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}
.fc-mc-tip-k{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.fc-mc-tip-k i{width:12px;height:3px;border-radius:2px}
.fc-mc-tip b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
/* Mobil steht die Werte-Box im FLUSS unter der Tages-Achse statt im Diagramm.
   Sie ist bewusst dauerhaft sichtbar (zeigt ohne Zutun die Jetzt-Werte) — auf
   351px verdeckte sie damit aber ein Drittel der Kurven. mountModelChart haengt
   sie dafuer ans Ende von .fc-mc-chart um; im Fluss braucht es keine Rechnerei
   mit ihrer Hoehe (die je nach Modellzahl schwankt). Das Innenleben bleibt.
   !important, weil `left` per Inline-Style und `transform` per is-right-Klasse
   der Zeigerposition folgen — die hier nicht mehr gilt. */
@media (max-width:640px){
  .fc-mc-chart > .fc-mc-tip{position:static;left:auto !important;transform:none !important;
    margin:12px auto 0;width:max-content;max-width:100%}
}

/* Erweiterte Tabelle */
.fc-mc-tblwrap{overflow-x:auto}
.fc-mc-akt{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--brand-cyan);color:#06232f;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.fc-mc-table tr.is-active td{background:rgba(104,194,227,.08)}
.fc-mc-table td b{display:block;font-weight:600;line-height:1.3}
.fc-mc-table td .lo{display:block;margin-left:0;font-size:11px;color:var(--muted);line-height:1.2}
.fc-mc-table{width:100%;border-collapse:collapse;font-size:13px}
.fc-mc-table th{text-align:left;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:6px 12px 6px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.fc-mc-table th:not(:first-child){text-align:right}
/* Alle Zellen mittig ausgerichtet — vorher war die erste Zelle flex-zentriert,
   die Temperatur-Zellen zweizeilig oben; das liess die Zeilen ungleich wirken. */
.fc-mc-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--text);vertical-align:middle}
.fc-mc-table td:first-child{text-align:left;font-family:var(--font-sans);font-size:12px;white-space:nowrap}
.fc-mc-table td:first-child i{display:inline-block;vertical-align:middle;margin-right:8px}
.fc-mc-table tr:last-child td{border-bottom:0}
.fc-mc-table td i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.fc-mc-table .lo{color:var(--muted);margin-left:3px}

/* ---------- Pollen ---------- */
.fc-pol-row{margin:0 0 14px}
.fc-pol-row.is-quiet{opacity:.5}
.fc-pol-row.is-quiet .fc-pol-now b{color:var(--muted)}
.fc-pol-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px}
.fc-pol-name{font-size:13px;font-weight:700;color:var(--text)}
/* KEIN text-transform:uppercase — Grossbuchstabe von „µ" (U+00B5) ist das
   griechische My „Μ" (U+039C) und sieht aus wie ein lateinisches M: aus
   „µg/m³" wurde optisch „MG/M³", also Milligramm statt Mikrogramm. */
.fc-pol-now{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.fc-pol-now b{font-size:14px;color:var(--text);margin-right:4px}
.fc-pol-strip{display:flex;height:16px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.fc-pol-cell{flex:1 1 0;min-width:0}
/* Tageswechsel als klare Trennlinie durch den ganzen Streifen (vorher kaum
   sichtbare 1px-Schattenkante). Gilt fuer Pollen-, Wellen- UND AQI-Streifen. */
.fc-pol-cell.nd,.fc-aqi-cell.is-newday{box-shadow:inset 2px 0 0 rgba(255,255,255,.7)}
html[data-theme="light"] .fc-pol-cell.nd,
html[data-theme="light"] .fc-aqi-cell.is-newday{box-shadow:inset 2px 0 0 rgba(8,49,69,.5)}
.fc-pol-cell.now{box-shadow:inset 0 0 0 1px var(--text)}
.fc-pol-axis{position:relative;height:18px;margin-top:4px;font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}

/* ---------- Waldbrandgefahr (FWI) ---------- */
.fc-fwi-now{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px}
.fc-fwi-badge{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.02em;color:#08202e;text-transform:uppercase}
.fc-fwi-idx{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:700}
.fc-fwi-hint{font-size:12px;color:var(--muted);flex:1 1 220px}
.fc-fwi-days{display:flex;gap:6px}
.fc-fwi-day{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.fc-fwi-barwrap{width:100%;height:56px;display:flex;align-items:flex-end;justify-content:center;background:var(--fc-glass-2);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.fc-fwi-bar{width:100%;border-radius:6px 6px 0 0;min-height:3px;transition:height var(--t) var(--ease)}
.fc-fwi-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.fc-fwi-d{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* ---------- Wellen & Meer ---------- */
.fc-wv-arr{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
/* Eigene, DECKENDE Spur statt halbtransparentem Weiss: die alte Spur liess den
   Seiten-Farbverlauf durch, dadurch war der Balken oben (dunkler Hintergrund)
   unsichtbar und erst weiter unten zu sehen. Der Fuellton bei ruhiger See ist
   inzwischen helles Cyan und traegt seinen Kontrast selbst — die Spur muss ihn
   nicht mehr herstellen und darf darum halbtransparent bleiben (weicher im Bild).
   Deckend war sie nur noetig, solange der Balken die dunkle Legendenfarbe hatte.
   Hoehe 18 -> 34 px, damit aus dem Farbband ein lesbares Profil wird. */
.fc-wv-strip{height:34px;border-radius:6px;overflow:hidden;border:1px solid var(--line);
  background:rgba(4,26,38,.38)}
html[data-theme="light"] .fc-wv-strip{background:rgba(10,40,58,.10)}

/* ---------- Wetterwarnungen (immer sichtbar, über den Reitern) ----------
   --wc = Level-Farbe (gelb/orange/rot), identisch zur Karte (meteo-warnings.js). */
/* KEIN Rahmen am Abschnitt: jede Karte traegt links ihren eigenen Levelbalken.
   Die aeussere Linie wiederholte nur das hoechste Level und lief zusaetzlich ueber
   Ueberschrift und Fusszeile, die gar keine Warnung sind. */
.fc-warn-list{display:flex;flex-direction:column;gap:10px}
.fc-warn-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;
  background:var(--fc-glass-2);border:1px solid var(--line);
  box-shadow:inset 3px 0 0 var(--wc,#9aa7b3)}
.fc-warn-card.is-upcoming{opacity:.86}
.fc-warn-ico{flex:0 0 auto;width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center}
.fc-warn-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:5px}
.fc-warn-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fc-warn-name{font-size:14px;font-weight:600;color:var(--text)}
.fc-warn-lvl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;padding:2px 7px;border-radius:999px}
.fc-warn-state{font-size:11px;color:var(--text-dim)}
.fc-warn-state.is-now{color:var(--wc,#9aa7b3);font-weight:600}
.fc-warn-time{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.fc-warn-hl{font-size:13px;line-height:1.45;color:var(--text)}
.fc-warn-det{font-size:12.5px}
.fc-warn-det summary{cursor:pointer;color:var(--brand-cyan);list-style:none;padding:2px 0}
.fc-warn-det summary::-webkit-details-marker{display:none}
.fc-warn-det summary::before{content:'▸ ';display:inline-block;transition:transform var(--t) var(--ease)}
.fc-warn-det[open] summary::before{content:'▾ '}
.fc-warn-desc{margin-top:4px;line-height:1.5;color:var(--text-dim);white-space:pre-line}
@media (max-width:560px){
  .fc-warn-ico{width:30px;height:30px}
  .fc-warn-card{padding:10px;gap:10px}
}

/* ---------- UV-Max in der Tages-Zeile ---------- */
.fc-day2-uv{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-height:18px}
.fc-day2-uvl{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fc-day2-uvv{min-width:20px;padding:1px 5px;border-radius:999px;text-align:center;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- Datenquellen / Attribution ---------- */
.fc-sources{margin:18px 0 0;font-size:12px}
.fc-sources summary{cursor:pointer;color:var(--muted);list-style:none;padding:4px 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.fc-sources summary::-webkit-details-marker{display:none}
.fc-sources summary::before{content:'▸ ';display:inline-block}
.fc-sources[open] summary::before{content:'▾ '}
.fc-src-body{padding:8px 0 2px;display:flex;flex-direction:column;gap:6px}
.fc-src-row{display:flex;flex-wrap:wrap;gap:4px 10px;line-height:1.4}
.fc-src-row span{flex:0 0 148px;color:var(--muted)}
.fc-src-row b{font-weight:500;color:var(--text)}
.fc-src-note{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--muted);line-height:1.5;font-size:11.5px}
@media(max-width:560px){.fc-src-row span{flex:1 1 100%}}

/* ---------- Luftqualität: Leitschadstoff, Legende, Jetzt-Marke ---------- */
.fc-aqi-dom{margin-top:6px;font-size:12.5px;color:var(--text-dim)}
.fc-aqi-dom b{color:var(--text);font-weight:600}
.fc-aqi-cell.is-now{outline:2px solid var(--text);outline-offset:-2px;z-index:1;position:relative}
.fc-aqi-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px}
.fc-aqi-lgi{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.fc-aqi-lgi i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}

/* ---------- Reiter-Punkt (Warnungen) ---------- */
.fc-tab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* ---------- Warn-Teaser (in jedem Reiter sichtbar) ---------- */
.fc-warnbar{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:11px 14px;
  text-align:left;cursor:pointer;font:inherit;color:var(--text);
  background:var(--fc-glass-2);border:1px solid var(--line);border-radius:12px;
  box-shadow:inset 3px 0 0 var(--wc,#9aa7b3);transition:background var(--t) var(--ease)}
.fc-warnbar:hover{background:rgba(255,255,255,.09)}
.fc-warnbar-i{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.fc-warnbar-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.fc-warnbar-tx b{font-size:13.5px;font-weight:600}
.fc-warnbar-tx span{font-size:12px;color:var(--text-dim)}
.fc-warnbar-go{flex:0 0 auto;font-size:12px;color:var(--brand-cyan);font-weight:600}
@media(max-width:520px){.fc-warnbar-go{display:none}}

/* ---------- Jetzt-Block unter den Reitern ---------- */
.fc-nowblock{display:block;margin-top:14px}

/* ---------- Überblick: 3-Tage-Kurzstreifen ---------- */
.fc-ovds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fc-ovd{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;cursor:pointer;
  font:inherit;color:var(--text);background:var(--fc-glass-2);border:1px solid var(--line);border-radius:12px;
  transition:background var(--t) var(--ease)}
.fc-ovd:hover{background:rgba(104,194,227,.10)}
.fc-ovd-n{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fc-ovd-i{width:30px;height:30px}
.fc-ovd-i .wx-icon,.fc-ovd-i svg,.fc-ovd-i img{width:30px;height:30px;display:block}
.fc-ovd-t{font-family:var(--font-mono);font-size:14px;font-variant-numeric:tabular-nums}
.fc-ovd-t .lo{color:var(--muted)}

/* ---------- Überblick: Einstiegs-Kacheln ---------- */
.fc-ovcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}
.fc-ovc{--ovc-accent:var(--brand-cyan);position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 15px;cursor:pointer;font:inherit;text-align:left;color:var(--text);overflow:hidden;
  background:var(--fc-glass-2);border:1px solid var(--line);border-radius:14px;
  transition:transform var(--t) var(--ease),background var(--t) var(--ease),
    border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
/* Akzentstreifen an der Kante — dezent, leuchtet beim Hover auf. */
.fc-ovc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ovc-accent);opacity:.5;transition:opacity var(--t) var(--ease)}
.fc-ovc:hover{transform:translateY(-2px);border-color:var(--ovc-accent);
  background:rgba(104,194,227,.08);box-shadow:0 8px 20px rgba(0,0,0,.20)}
.fc-ovc:hover::before{opacity:1}
.fc-ovc-ico{flex:0 0 auto;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;color:var(--ovc-accent);
  background:color-mix(in srgb,var(--ovc-accent) 15%,transparent);
  transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.fc-ovc-ico svg{width:21px;height:21px}
.fc-ovc:hover .fc-ovc-ico{background:var(--ovc-accent);color:#fff}
.fc-ovc-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.fc-ovc-t{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fc-ovc-v{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-ovc-open{font-weight:500;color:var(--brand-cyan)}
.fc-ovc-go{flex:0 0 auto;color:var(--ovc-accent);font-size:17px;transition:transform var(--t) var(--ease)}
.fc-ovc:hover .fc-ovc-go{transform:translateX(3px)}

/* ---------- Warn-Dreieck in der Tageszeile ---------- */
.fc-day2-warn{display:inline-block;width:13px;margin-right:5px;vertical-align:-2px}
.fc-day2-warn:empty{display:none}

/* ---------- „Mehr"-Button unter dem 48-h-Meteogramm im Überblick ---------- */
.fc-more{display:block;width:100%;margin-top:12px;padding:11px 14px;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;color:var(--brand-cyan);text-align:center;
  background:var(--fc-glass-2);border:1px dashed var(--line);border-radius:10px;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.fc-more:hover{background:rgba(104,194,227,.10);border-color:var(--brand-cyan);border-style:solid}

/* ---------- Trennlinie zwischen Tagesreitern und Parameter-Chips ----------
   Beide Leisten nutzen Orange als Aktiv-Farbe und verschwimmen sonst zu einer. */
.fc-hsep{height:1px;background:var(--line);margin:10px 0 12px}

/* ---------- Warn-Zeile im Meteogramm ---------- */
.fc-hrow.hwarn .hc,.hrow.hwarn .hc{display:flex;align-items:center;justify-content:center;min-height:22px}

/* ---------- Warnungen im Tagespanel ---------- */
.fc-dpwarn:empty{display:none}
.fc-dpwarn{margin:2px 0 14px}
.fc-dpwarn-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}

/* ---------- Kompakte Warn-Karte im Tagespanel (verlinkt in den Warn-Reiter) ---------- */
.fc-warnmini{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;cursor:pointer;
  font:inherit;text-align:left;color:var(--text);
  background:var(--fc-glass-2);border:1px solid var(--line);border-radius:10px;
  box-shadow:inset 3px 0 0 var(--wc,#9aa7b3);transition:background var(--t) var(--ease)}
.fc-warnmini:hover{background:rgba(255,255,255,.09)}
.fc-warnmini-i{flex:0 0 auto;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.fc-warnmini-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.fc-warnmini-tx b{font-size:13px;font-weight:600}
.fc-warnmini-tx span{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.fc-warnmini-go{flex:0 0 auto;font-size:11.5px;color:var(--brand-cyan);font-weight:600}
@media(max-width:520px){.fc-warnmini-go{display:none}}

/* ---------- Tagesliste im ÜBERBLICK: reine Vorschau, nichts klappt auf ----------
   Dieselbe Liste dient beiden Reitern; im Überblick sind die Panels deshalb
   ausgeblendet und der Pfeil zeigt nach rechts (führt in den Reiter „Tage")
   statt nach unten (klappt auf). ID-Selektor, damit er die .is-open-Regeln schlägt. */
#fc-app[data-view="overview"] .fc-day2-panel{display:none}
#fc-app[data-view="overview"] .fc-day2-chev{transform:rotate(-90deg)}
/* „Heute" traegt auch hier is-open (fuer den Reiter „Tage") — im Ueberblick darf das
   aber NICHT wie ein aufgeklappter Block aussehen: Verlauf/Rahmen/Balken abschalten,
   sonst wirkt eine Zeile hervorgehoben, obwohl nichts offen ist. */
#fc-app[data-view="overview"] .fc-day2-wrap.is-open{
  background:none;border-radius:0;box-shadow:none;border-bottom-color:var(--line)}
#fc-app[data-view="overview"] .fc-day2-wrap:last-child.is-open{border-bottom-color:transparent}
#fc-app[data-view="overview"] .fc-day2-wrap.is-open .fc-day2{box-shadow:none}

/* ---------- Warnungen: Pflichtangaben (Herausgeber, Abrufzeitpunkt) ---------- */
/* Pflichtangaben oben rechts in der Karte: zwei rechtsbuendige Zeilen
   (Herausgeber / Ausgabezeitpunkt). `margin-left:auto` schiebt sie im
   Flex-Kopf nach rechts; auf schmalen Schirmen brechen sie nach unten um. */
.fc-warn-src{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;
  gap:1px;text-align:right;font-size:11px;color:var(--muted);line-height:1.4}
@media(max-width:640px){
  .fc-warn-src{margin-left:0;align-items:flex-start;text-align:left;flex:1 1 100%}
}
.fc-warn-legal{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);line-height:1.5}
.fc-warn-legal b{color:var(--text-dim);font-weight:600}

/* ---------- Luftqualität: Schadstoffliste mit Teilindex-Balken ----------
   Nach Belastung sortiert, damit der Treiber des Gesamtindex oben steht. */
.fc-plist{display:flex;flex-direction:column;gap:1px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line)}
.fc-pl-row{display:grid;grid-template-columns:1fr auto 132px 118px;align-items:center;gap:14px;
  padding:11px 14px;background:var(--fc-glass-2)}
.fc-pl-row.is-dom{background:rgba(104,194,227,.10);box-shadow:inset 3px 0 0 var(--brand-cyan)}
.fc-pl-n{font-size:13px;display:flex;align-items:baseline;gap:8px;min-width:0}
.fc-pl-n em{font-style:normal;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-cyan);white-space:nowrap}
.fc-pl-v{font-family:var(--font-mono);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-pl-v small{font-size:10.5px;color:var(--muted)}
.fc-pl-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;height:8px}
.fc-pl-bar i{display:block;border-radius:2px;background:var(--fc-glass);box-shadow:inset 0 0 0 1px var(--line)}
.fc-pl-c{font-size:11.5px;color:var(--text-dim);text-align:right}
@media(max-width:720px){
  .fc-pl-row{grid-template-columns:1fr auto;gap:6px 12px}
  .fc-pl-bar{grid-column:1/3;height:6px}
  .fc-pl-c{grid-column:1/3;text-align:left}
}

/* ---------- Umwelt-Chips (UV / Saharastaub) in der 0–4-Skala ---------- */
.fc-envchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fc-envchip{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;
  background:var(--fc-glass-2);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--c,#9aa7b3)}
.fc-envchip-l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fc-envchip-v{font-size:19px;font-weight:600;color:var(--c,var(--text));line-height:1.2}
.fc-envchip-s{font-size:11.5px;color:var(--text-dim)}

/* ---------- Trennlinie zwischen den Verlaufsbloecken (EAQI ↔ Trübung) ---------- */
.fc-aqi-sep{height:1px;background:var(--line);margin:18px 0 2px}

/* ---------- Durchgehende Tageslinien ueber einen ganzen Verlaufsblock ----------
   Die frueheren Kanten sassen IN den Zellen und waren in den Abstaenden zwischen
   den Reihen unsichtbar. Das Overlay zieht die Linie von oben nach unten durch. */
.fc-vwrap{position:relative}
/* Wellen-/Pollen-Chart mit kombiniertem Tooltip: horizontales Wischen verfolgt
   den Zeiger, vertikales Scrollen bleibt. Ohne pan-y bricht der Browser die
   Pointer-Verfolgung am Handy ab (wie bei den Stunden-Charts). */
.fc-vwrap[data-wv-chart]{touch-action:pan-y}
/* Letzte Reihe im Wrapper ohne Bodenabstand → der Wrapper endet EXAKT an der
   Unterkante des letzten Streifens, die Linie kann bottom:0 nehmen. Vorher
   schnitt ein fester `bottom:18px` mitten in den letzten Streifen. */
.fc-vwrap > .fc-pol-row:last-child{margin-bottom:0}
.fc-vwrap .fc-aqi-strip-wrap{padding-top:0}
.fc-vday{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.42);
  pointer-events:none;z-index:2}
/* Feine Linie je Zeitschritt — gibt dem Block ein Raster, ohne den Tageswechsel
   zu ueberdecken (liegt eine Ebene tiefer und deutlich blasser). */
.fc-vstep{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.10);
  pointer-events:none;z-index:1}
html[data-theme="light"] .fc-vday{background:rgba(8,49,69,.28)}
html[data-theme="light"] .fc-vstep{background:rgba(8,49,69,.10)}

/* Achse: Tagesname kraeftig, Zwischen-Uhrzeit dezent */
.fc-pol-axis .ax-day{position:absolute;transform:translateX(2px);color:var(--text-dim);font-weight:600}
.fc-pol-axis .ax-h{position:absolute;transform:translateX(2px);color:var(--muted);opacity:.75;font-size:10.5px}

/* ---------- Kurz-Erklärungen (Wortlaut wie in der Karten-Layerliste) ---------- */
.fc-gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 18px;margin-top:12px}
.fc-gloss-i{display:flex;flex-direction:column;gap:1px;line-height:1.4}
.fc-gloss-i b{font-size:12.5px;font-weight:600;color:var(--text-dim)}
.fc-gloss-i span{font-size:11.5px;color:var(--muted)}

/* ---------- UV-Reiter ---------- */
.fc-uv-now{display:flex;align-items:center;gap:16px;margin-bottom:4px}
/* Zahl weiss mit Schatten. WICHTIG: auf den hellen Stufen (gruen/gelb) traegt
   allein der Schatten die Lesbarkeit — deshalb bewusst kraeftig und zweilagig. */
.fc-uv-badge{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;color:#fff;flex:0 0 auto;
  text-shadow:0 1px 2px rgba(6,26,38,.55), 0 2px 10px rgba(6,26,38,.40)}
.fc-uv-info{min-width:0}
.fc-uv-lvl{font-size:19px;font-weight:600;color:var(--text)}
.fc-uv-rat{font-size:12.5px;color:var(--text-dim);margin-top:2px;line-height:1.45}
.fc-uvdays{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.fc-uvday{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 8px;border-radius:10px;
  background:var(--fc-glass-2);border:1px solid var(--line)}
.fc-uvday-n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fc-uvday-v{min-width:34px;padding:2px 8px;border-radius:999px;text-align:center;
  font-family:var(--font-mono);font-size:15px;font-weight:700;color:#0b2430}
.fc-uvday-s{font-size:11px;color:var(--text-dim)}

/* ---------- UV: Hautschutz ---------- */
.fc-skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.fc-skin{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font:inherit;text-align:left;
  background:var(--fc-glass-2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.fc-skin:hover{background:rgba(104,194,227,.10)}
.fc-skin.is-on{border-color:var(--brand-cyan);background:rgba(104,194,227,.14);
  box-shadow:inset 3px 0 0 var(--brand-cyan)}
.fc-skin-ton{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.fc-skin-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.fc-skin b{font-size:13px;font-weight:600}
.fc-skin-tx > span{font-size:11px;color:var(--muted);line-height:1.35}
.fc-uv-burn{font-size:14px;line-height:1.5;color:var(--text);padding:12px 14px;border-radius:10px;
  background:var(--fc-glass-2);border:1px solid var(--line)}
.fc-uv-burn b{color:var(--accent);font-size:16px}
.fc-uv-hint{font-size:12.5px;color:var(--text-dim);padding:12px 14px;border-radius:10px;
  background:var(--fc-glass-2);border:1px dashed var(--line);line-height:1.5}
.fc-uv-win{margin-top:8px;font-size:12.5px;color:var(--text-dim);line-height:1.5}
.fc-uv-win b{color:var(--text)}
.fc-uv-care{margin-top:10px;font-size:12.5px;color:var(--text-dim);line-height:1.55}
.fc-uv-care b{color:var(--text)}
.fc-uv-fine{margin-top:6px;font-size:11px;color:var(--muted);line-height:1.5}

/* ---------- UV-Skala erklärt ---------- */
.fc-uvscale{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.fc-uvsc{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;
  background:var(--fc-glass-2);border:1px solid var(--line);border-top:4px solid var(--c,#9aa7b3)}
.fc-uvsc-r{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--c,var(--text));line-height:1.15}
.fc-uvsc-l{font-size:12.5px;font-weight:600;color:var(--text)}
.fc-uvsc-t{font-size:11.5px;color:var(--muted);line-height:1.45}

/* ---------- UV: Beschriftung + Skala mit Positionsmarke ---------- */
.fc-uv-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
.fc-uvbar{margin:14px 0 4px}
.fc-uvbar-track{position:relative;height:12px;border-radius:999px;
  background:linear-gradient(90deg,#22c55e 0%,#22c55e 18%,#ffd21a 32%,#ff9800 55%,#e11d74 78%,#a24bd0 100%)}
.fc-uvbar-dot{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 2px 6px rgba(6,26,38,.5)}
.fc-uvbar-ticks{display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}

/* ---------- Wellen & Meer ---------- */
.fc-wv-now{display:flex;align-items:center;gap:16px;margin-bottom:4px}
.fc-wv-badge{min-width:74px;height:66px;padding:0 12px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:2px;flex:0 0 auto;
  font-family:var(--font-mono);font-size:26px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px rgba(6,26,38,.55),0 2px 10px rgba(6,26,38,.40)}
.fc-wv-badge small{font-size:13px;font-weight:400;opacity:.85}
.fc-wv-info{min-width:0}

/* Zusammensetzung: Windsee / Dünung nebeneinander */
.fc-wv-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.fc-wv-part{padding:12px 14px;border-radius:10px;background:var(--fc-glass-2);border:1px solid var(--line)}
.fc-wv-part-h{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.fc-wv-part-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fc-wv-part-g > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fc-wv-part-g span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.fc-wv-part-g b{font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:3px;white-space:nowrap}
.fc-wv-part-g .fc-wv-arr{width:13px;height:13px;color:var(--brand-cyan);flex:0 0 auto}


/* ---------- Umschalter Temperatur/Niederschlag im Modellvergleich ---------- */
.fc-mc-switch { display: inline-flex; gap: 2px; padding: 2px; margin: 2px 0 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 999px; }
.fc-mc-sw {
  background: none; border: 0; cursor: pointer; padding: 7px 16px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); transition: background .15s ease, color .15s ease;
}
.fc-mc-sw:hover { color: var(--text); }
.fc-mc-sw.is-active { background: var(--brand-cyan); color: #06232f; font-weight: 700; }

/* ---------- Wassertemperatur (Reiter „Wellen & Meer") ----------
   Skala nach Vorbild der Cam-Seite (.lcw-gauge), Farben aus SST_OCEAN.
   Wellenband als Hintergrund — Dekoration hinter der Zahl, nie darueber. */
.fc-sea {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--fc-glass-2, rgba(255, 255, 255, .05));
}
.fc-sea-waves {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 74px;
  fill: var(--brand-cyan); pointer-events: none;
}
.fc-sea-waves path:first-child { opacity: .14; }
.fc-sea-waves path:last-child  { opacity: .09; }
/* Spalte als Flex-Saeule ueber die volle Zellenhoehe, Inhalt vertikal zentriert.
   Vorher klebte die Zahl oben und darunter stand eine leere Flaeche; ganz nach
   unten geschoben (margin-top:auto) sass die Skala dann zu tief. Zentriert
   verteilt sich der freie Raum gleichmaessig ueber und unter dem Paar. */
.fc-sea-body {
  position: relative; padding: 20px 22px 18px;
  display: flex; flex-direction: column; justify-content: center; min-height: 100%;
}

/* Zweispaltig, sobald ein Verlauf danebensteht. Die Zahl bekommt etwas mehr
   Platz als der Verlauf — sie ist der Blickfang, der Verlauf die Zugabe. */
.fc-sea--split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fc-sea--split .fc-sea-body { border-right: 1px solid var(--line); }
.fc-sea-trend { position: relative; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.fc-sea-trend-h {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fc-sea-days { display: flex; align-items: flex-end; gap: 8px; }
.fc-sea-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.fc-sea-daybar { width: 100%; max-width: 26px; border-radius: 3px 3px 1px 1px; }
.fc-sea-dayv {
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fc-sea-dayd {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
.fc-sea-air {
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.fc-sea-air b { color: var(--text); font-weight: 600; }

@media (max-width: 720px) {
  .fc-sea--split { grid-template-columns: 1fr; }
  .fc-sea--split .fc-sea-body { border-right: 0; border-bottom: 1px solid var(--line); }
}

.fc-sea-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fc-sea-val {
  font-family: var(--font-mono); font-size: 44px; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff;
}
.fc-sea-cap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fc-sea-tag {
  /* Textfarbe kommt aus dem JS (inkOn) — hell oder dunkel je nach Pillenfarbe.
     Das #fff hier ist nur der Rueckfall, falls die Farbe mal nicht auswertbar ist. */
  padding: 3px 9px; border-radius: 999px; color: #fff;
  font-weight: 700; letter-spacing: .06em;
}

.fc-sea-gauge { margin-top: 0; padding-top: 30px; }
.fc-sea-bar {
  position: relative; height: 8px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.fc-sea-knob {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--k); border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .18), 0 0 10px 1px var(--k);
}
.fc-sea-lbls {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .fc-sea-body { padding: 16px 16px 15px; }
  .fc-sea-val { font-size: 36px; }
}

/* ---------- Richtungsrose (ersetzt die Wellenkarte, 2026-07-20) ---------- */
/* Die Rose ist die linke Spalte des Paars „Richtungen & Zusammensetzung" —
   daher gestapelt (Rose oben, Legende darunter) statt nebeneinander. Ihre frueher
   volle Zeilenbreite mit 1fr-Legende hatte auf breiten Schirmen eine halbe
   Bildschirmbreite tote Flaeche erzeugt. */
.fc-rose {
  position: relative; overflow: hidden;   /* traegt das Wellenband im Hintergrund */
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 22px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--fc-glass-2, rgba(255, 255, 255, .05));
  /* Weicher Lichtkegel hinter der Rose — nimmt der Flaeche das Flache, ohne eine
     Kante zu setzen, an der das Auge haengenbleibt. */
  background-image: radial-gradient(circle at 50% 34%, rgba(104, 194, 227, .22), transparent 64%);
}
/* Das Band liegt hinter allem und darf die Pfeile nicht konkurrenzieren:
   groesser und blasser als im Wasserblock, damit es als Grund wirkt, nicht als
   zweite Grafik. Die Rosen-Elemente stehen per z-index davor. */
.fc-rose .fc-sea-waves { height: 108px; }
.fc-rose .fc-sea-waves path:first-child { opacity: .10; }
.fc-rose .fc-sea-waves path:last-child  { opacity: .06; }
.fc-rose-svg, .fc-rose-legend { position: relative; z-index: 1; }

/* Lichtnetze (Kaustiken) ganz hinten. Deckkraft der einzelnen Linien steckt im
   SVG; hier nur die Lage und ein Gesamtregler. */
.fc-caustics {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .85;
}
/* Im hellen Theme wuerden weisse Linien auf hellem Grund verschwinden — dort
   dieselbe Zeichnung dunkel und deutlich schwaecher. */
html[data-theme="light"] .fc-caustics { filter: invert(1) brightness(.4); opacity: .35; }
.fc-rose-svg { width: 100%; max-width: 250px; height: auto; }
.fc-rose-ring  { fill: none; stroke: var(--line); stroke-width: 1.5; }
/* Innenring: vorher var(--line) bei .55 — auf der texturierten Flaeche praktisch
   unsichtbar. Jetzt dieselbe Farbe wie die Teilstriche (die sich bewaehrt hat),
   kraeftiger und mit laengeren Strichen, damit er als Ring gelesen wird und nicht
   als Rauschen. */
.fc-rose-ring2 { fill: none; stroke: var(--muted); stroke-width: 1.3; opacity: .55; stroke-dasharray: 5 7; }
.fc-rose-tick { stroke: var(--muted); stroke-width: 1.2; opacity: .4; }
.fc-rose-tick.is-main { stroke-width: 1.8; opacity: .7; }
/* Bewusst NICHT die Monospace-Schrift: dort ist das O fuer Ost kaum von einer
   Null zu unterscheiden. In der Grotesk ist es klar runder und breiter. */
.fc-rose-c {
  fill: var(--text); font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 15px; font-weight: 700;
  text-anchor: middle; letter-spacing: .02em; opacity: .78;
}
.fc-rose-hub { fill: var(--text); opacity: .75; }

/* Duenung und Wind nebeneinander statt untereinander — vorher waren es sechs
   Zeilen fuer zwei Angaben. Der Text setzt links unter der Farbflaeche fort,
   nicht eingerueckt hinter dem Wort. auto-fit: bei zu schmaler Spalte fallen die
   beiden wieder untereinander, statt die Detailzeile umzubrechen. */
.fc-rose-legend { width: 100%; display: flex; flex-direction: column; gap: 14px; }
/* Zwei gleich breite Haelften, Inhalt jeweils mittig (User 2026-07-20).
   Vorbereitende Versuche — Eintraege einzeln zentriert, dann die Gruppe als
   Ganzes zentriert — wirkten beide unruhig, weil die unterschiedlich langen
   Texte keine gemeinsame Achse hatten. Mit fester Haelfte und Zentrierung hat
   jede Angabe ihre eigene Mitte, und die beiden Mitten liegen symmetrisch. */
.fc-rose-items {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px;
}
@media (max-width: 340px) { .fc-rose-items { grid-template-columns: 1fr; } }
/* Kein Raster mehr: Farbflaeche und Label stehen in EINER Zeile, Richtung und
   Detailzeile folgen darunter — alles auf der Mitte der jeweiligen Haelfte. */
.fc-rose-item { min-width: 0; text-align: center; }
.fc-rose-sw {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 7px; vertical-align: middle;
}
.fc-rose-k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fc-rose-v { display: block; margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--text); }
.fc-rose-s {
  display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11.5px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.fc-rose-hint {
  margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.fc-rose-hint b { color: var(--text); font-weight: 600; }

/* Paar-Layout: Rose links in fester Breite, Zusammensetzung rechts im Rest.
   Unter 860 px faellt die rechte Spalte unter die Rose. */
.fc-seagrid { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 18px; align-items: start; }
.fc-seagrid--norose { grid-template-columns: 1fr; }
.fc-seagrid-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-seagrid-r .fc-aqi-glabel { padding-top: 14px; }

@media (max-width: 860px) {
  .fc-seagrid { grid-template-columns: 1fr; }
  .fc-rose { padding: 20px 16px; }
}

/* Anteil ohne nennenswerte Hoehe: Satz statt Zahlenraster, dezenter gesetzt. */
.fc-wv-part--leer { opacity: .82; }
.fc-wv-part--leer .fc-uv-rat { margin-top: 6px; line-height: 1.5; }
/* Einordnung unter der Zusammensetzung. */
.fc-wv-fazit {
  margin-top: 12px; padding: 11px 14px;
  border-left: 2px solid var(--brand-cyan); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 255, 255, .04);
  font-size: 13px; line-height: 1.5; color: var(--text);
}

/* ---------- Verlauf: Zellen werden nur bis zur Werthoehe gefuellt ----------
   Der Farbverlauf kommt inline aus dem JS (background-image), die Spur hier —
   sonst wuerde die Inline-Kurzform `background` die Spur ueberschreiben. */
.fc-wv-strip .fc-pol-cell {
  background-color: transparent;   /* Spur kommt jetzt vom Streifen selbst */
  background-repeat: no-repeat;
}

/* ---------- WMO-Seegangsskala (aufklappbar) ---------- */
.fc-wmo { margin-top: 14px; }
.fc-wmo summary {
  cursor: pointer; display: inline-block; padding: 6px 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-cyan);
}
.fc-wmo summary:hover { text-decoration: none; }
.fc-wmo-body {
  margin-top: 10px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--fc-glass-2, rgba(255, 255, 255, .05));
}
.fc-wmo-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.fc-wmo-intro b { color: var(--text); font-weight: 600; }
.fc-wmo-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 18px;
}
.fc-wmo-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 5px 6px; border-radius: 5px;
}
.fc-wmo-row.is-now { background: rgba(255, 255, 255, .09); }
.fc-wmo-c {
  width: 24px; height: 20px; border-radius: 4px; color: #06232f;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fc-wmo-l { font-size: 13px; color: var(--text); }
.fc-wmo-row.is-now .fc-wmo-l { font-weight: 700; }
.fc-wmo-r {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Stations-Verlauf (letzte 24 h, Reiter „Station") ---------- */
.fc-sth { display: flex; flex-direction: column; gap: 6px; }
.fc-sth-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px;
}
.fc-sth-cap > span:first-child {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.fc-sth-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-sth-chart { position: relative; }
.fc-sth-chart svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(4, 26, 38, .32);
}
.fc-sth-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.fc-sth-temp { stroke: #f4a932; stroke-width: 2; }
.fc-sth-fill { fill: rgba(244, 169, 50, .10); stroke: none; }
.fc-sth-wind { stroke: #68c2e3; stroke-width: 1.8; }
.fc-sth-gust { stroke: rgba(104, 194, 227, .45); stroke-width: 1.3; }
.fc-sth-now { fill: #f4a932; stroke: rgba(4, 26, 38, .8); stroke-width: 1.5; }
.fc-sth-ax {
  position: relative; height: 14px; margin-top: 3px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.fc-sth-ax span { white-space: nowrap; }
.fc-sth-leg {
  display: flex; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.fc-sth-leg i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.fc-sth-sw-wind { background: #68c2e3; }
.fc-sth-sw-gust { background: rgba(104, 194, 227, .45); }

/* Fadenkreuz + Tooltip auf den Stations-Charts */
.fc-sth-plot { position: relative; }
.fc-sth-chart svg { cursor: crosshair; }
.fc-sth-cross { position: absolute; inset: 0; pointer-events: none; }
.fc-sth-vline {
  position: absolute; top: 0; bottom: 0; width: 1px; transform: translateX(-.5px);
  background: rgba(255, 255, 255, .5);
}
.fc-sth-cdot {
  position: absolute; left: 0; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff;
  box-shadow: 0 0 0 2px rgba(4, 26, 38, .8), 0 0 6px 1px rgba(255, 255, 255, .5);
}
.fc-sth-vline, .fc-sth-cdot { left: 0; }
.fc-sth-cross[hidden] { display: none; }
/* [hidden] muss gegen das display:grid unten gewinnen — sonst steht der Tooltip
   als leerer Kasten da, bevor man ihn per Hover/Tap füllt. */
.fc-sth-tip[hidden] { display: none; }
.fc-sth-tip {
  position: absolute; top: 8px; left: 0; transform: translateX(-50%);
  min-width: 116px; padding: 8px 11px; border-radius: 8px;
  background: rgba(6, 26, 38, .96); border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  white-space: nowrap; z-index: 3;
}
/* Tooltip auf die Seite mit mehr Platz kippen, damit er nicht aus dem Chart faellt. */
.fc-sth-tip { margin-left: -8px; }
.fc-sth-tip.is-right { transform: translateX(0); margin-left: 10px; }
.fc-sth-tip:not(.is-right) { transform: translateX(-100%); margin-left: -10px; }
.fc-sth-tip-t {
  grid-column: 1 / -1; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted);
}
.fc-sth-tip-k { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.fc-sth-tip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Lufttemperatur-Skala — sitzt in der Seitenspalte des msv-Hero, unter
   Luftfeuchte/Taupunkt. Balken bunt, KEINE eigene Gradzahl (die grosse Temperatur
   steht direkt daneben). Spaltenbreit, nicht ueber die ganze Karte. */
.fc-airsc { margin-top: 10px; width: 100%; }
.fc-airsc-bar {
  position: relative; height: 7px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
/* Knopf bewusst WEISS — nur der Balken soll bunt sein. */
.fc-airsc-knob {
  position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .28), 0 0 6px 1px rgba(255, 255, 255, .5);
}
.fc-airsc-lbls {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Teilen-Button (Wetterkarte als Bild) ---------- */
.fc-share-row { display: flex; justify-content: flex-end; margin: 8px 0 2px; }
/* Umschalter + Button zusammen in einem Kasten, rechtsbündig. */
.fc-share-box { display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
/* Format-Umschalter (4:5 / 1:1) */
.fc-fmt-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.fc-fmt-seg button {
  background: none; border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted);
  transition: background .15s ease, color .15s ease; }
.fc-fmt-seg button:hover { color: var(--text); }
.fc-fmt-seg button.is-active { background: var(--brand-cyan); color: #06232f; font-weight: 700; }
.fc-share-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--brand-cyan); background: rgba(104, 194, 227, .10);
  color: var(--brand-cyan); font: inherit; font-size: 13.5px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.fc-share-btn:hover { background: var(--brand-cyan); color: #06232f; }
.fc-share-btn:disabled { opacity: .6; cursor: default; }
.fc-share-btn svg { flex: none; }

/* ---------- Überblick-Karte (Basemap + ICON-Wetterlayer) ---------- */
.fc-ovmap{position:relative;height:420px;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--line);background:rgba(4,26,38,.4)}
.fc-ovmap .maplibregl-map{border-radius:var(--radius-sm)}
.fc-ovmap-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--muted)}
@media (max-width:560px){
  .fc-ovmap{height:380px}
  /* Bedienelemente auf schmalen Schirmen zusammenruecken: kleinere Zoom-Buttons
     geben der Chip-Leiste Platz, Legende und Chips werden kompakter. */
  .fc-ovm-zoom{top:6px;right:6px;gap:8px}
  .fc-ovm-btn{width:36px;height:36px;border-radius:10px}
  .fc-ovm-btn svg{width:19px;height:19px}
  .fc-ovm-bar{top:6px;left:6px;gap:6px;max-width:calc(100% - 56px)}
  .fc-ovm-pill{padding:6px 10px;font-size:11px;border-radius:10px}
  .fc-ovm-day{min-width:34px;padding:4px 6px;border-radius:10px}
  .fc-ovm-day .dt{font-size:10.5px}
  .fc-ovm-legend{left:6px;right:6px;bottom:6px;padding:7px 9px 8px;border-radius:10px}
  .fc-ovm-leg-head{font-size:10.5px;margin-bottom:5px}
  .fc-ovm-leg-bar{height:8px}
  .fc-ovm-leg-ticks{height:12px}
  .fc-ovm-leg-ticks span{font-size:9px}
}

/* Bedienelemente in der Map-Control-Optik der Startseite (.map-btn):
   derselbe Petrol-Verlauf + Glas-Blur + weiße Schrift, aktiv = Sonnen-Gradient.
   Basis-Look als gemeinsame Regel, damit Zoom, Pillen, Chips und Legende
   garantiert identisch aussehen. */
.fc-ovm-btn,.fc-ovm-pill,.fc-ovm-day,.fc-ovm-legend{
  background:var(--map-control-bg);
  -webkit-backdrop-filter:var(--map-control-blur);backdrop-filter:var(--map-control-blur);
  color:var(--map-control-ink);border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(4,39,58,.24)}
.fc-ovm-btn:hover,.fc-ovm-pill:hover,.fc-ovm-day:hover{background:var(--map-control-bg-hover)}
.fc-ovm-pill.is-active,.fc-ovm-day.is-active{
  background:linear-gradient(180deg,var(--brand-sun),var(--brand-sun-2));color:var(--accent-ink)}

/* Zoom +/− oben rechts — Maße wie .map-btn auf der Startseite. */
.fc-ovm-zoom{position:absolute;top:8px;right:8px;z-index:3;display:flex;flex-direction:column;gap:12px}
.fc-ovm-btn{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.fc-ovm-btn:hover{transform:translateY(-1px)}
.fc-ovm-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* Steuerleiste (Layer-Pillen + Tag-Chips) oben links, Legende unten. */
.fc-ovm-bar{position:absolute;top:8px;left:8px;z-index:3;display:flex;flex-direction:column;gap:8px;
  max-width:calc(100% - 74px)}
.fc-ovm-layers,.fc-ovm-days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.fc-ovm-layers::-webkit-scrollbar,.fc-ovm-days::-webkit-scrollbar{display:none}
.fc-ovm-pill{flex:0 0 auto;padding:8px 13px;font-size:12px;font-weight:700;border-radius:12px;
  cursor:pointer;white-space:nowrap;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.fc-ovm-pill:hover{transform:translateY(-1px)}
.fc-ovm-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:40px;
  padding:5px 8px;font-family:var(--font-mono);border-radius:12px;cursor:pointer;line-height:1.12;
  transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.fc-ovm-day:hover{transform:translateY(-1px)}
.fc-ovm-day .wd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fc-ovm-day .dt{font-size:11.5px;opacity:.85}
.fc-ovm-legend{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;padding:9px 12px 10px;
  border-radius:12px;pointer-events:none}
.fc-ovm-leg-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;font-size:11.5px}
.fc-ovm-leg-head .model{font-weight:700;color:var(--brand-sun,#f4a932)}
.fc-ovm-leg-head .unit{font-weight:700;opacity:.92}
.fc-ovm-leg-bar{height:9px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fc-ovm-leg-ticks{position:relative;height:13px;margin-top:4px}
.fc-ovm-leg-ticks span{position:absolute;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7)}


/* ========================================================================
   Mobil-Feinschliff (2026-07-23) — live gemessen bei 375x812.
   Vier kleinere Anschnitte, die am Desktop nicht auffallen.
   ======================================================================== */

/* 1) Zeitbezug in den Gruppenzeilen (z. B. „gleiche Skala fuer alle drei")
      hatte white-space:nowrap und ragte dadurch bis 396px bei 375px Viewport.
      Am Desktop steht er rechts neben der Ueberschrift und soll dort einzeilig
      bleiben — mobil rutscht er ohnehin in eine eigene Zeile. */
@media (max-width: 640px) {
  .fc-aqi-glabel { flex-wrap: wrap; }
  .fc-glabel-meta { white-space: normal; }
}

/* 2) Stationsliste im Reiter „Station": die Namensspalte (133px) schnitt die
      Namen einzeilig ab — „Málaga, Centro Meteorológico" und „Málaga, Centro
      Meteo" lasen sich BEIDE als „Málaga, Centro M…" und waren nicht mehr
      auseinanderzuhalten. Zwei Zeilen erlauben statt einer.
      Bewusst auf .fc-shell begrenzt: .msv-* ist die geteilte Stations-Komponente,
      /wetterstationen/ hat mehr Platz und bleibt unveraendert.
      Dazu die Quelle-Spalte auf 78px — „METEO365.ES" braucht 74px und klebte
      sonst an der Entfernung („METEO365.ES4.7 km"). */
@media (max-width: 600px) {
  .fc-shell .msv-tbl-name {
    white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    line-height: 1.25;
  }
  .fc-shell .msv-tbl-head, .fc-shell .msv-tbl-row {
    grid-template-columns: minmax(0, 1fr) 78px 66px 18px;
    align-items: start;
  }
  .fc-shell .msv-tbl-src, .fc-shell .msv-tbl-km { padding-top: 1px; }
}

/* 3) Reiterleiste: 10 Reiter ergeben 933px Inhalt bei 355px Sichtbreite. Ohne
      Hinweis sieht sie aus, als endete sie bei „Warnungen". Weiche Kante rechts
      als Signal „hier geht es weiter" — verschwindet am Scrollende (die Maske
      laeuft mit dem Inhalt, sobald nichts mehr folgt, ist nichts mehr zu
      verwischen). Nur wo die Leiste ueberhaupt scrollt. */
@media (max-width: 900px) {
  .fc-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
}

/* 4) Im Kopf-Streifen stand der Trennpunkt vor der Kuesten-Pille allein am
      Anfang der zweiten Zeile („· DIREKT AM MEER"), weil dort fast immer
      umbrochen wird. Die Pille hat einen eigenen Rahmen und braucht keinen
      Trenner — welcher das ist, weiss nur der Nachbar-Selektor.
      Ohne :has()-Unterstuetzung bleibt es beim Punkt, also ein reiner
      Schoenheitsverlust, kein Layoutfehler. */
@media (max-width: 640px) {
  .fc-id { row-gap: 6px; }
  .fc-id-sep:has(+ .fc-sea-badge) { display: none; }
}

/* Letzte Achsenmarke rechtsbuendig statt linksbuendig.
   Alle Zeitachsen setzen ihre Marken per `left:X%` und lassen den Text nach
   rechts laufen. Die letzte sitzt bei ~98,6 % — ihr Text ragte damit ueber den
   Rand (gemessen: „08h" bis 379px bei 375px Viewport, in Wellen- und
   Stations-Achse). An ihrer Position rechtsbuendig auszurichten ist genauso
   korrekt wie linksbuendig und kann prinzipiell nicht mehr ueberlaufen.
   Gilt fuer alle Achsen (.fc-pol-axis, .fc-sth-ax, .fc-mc-axis), weil sie
   dieselbe Mechanik nutzen; die bisherigen 2px Versatz bleiben erhalten.
   !important, weil ein Teil der Achsen (Stations-Chart, AQI-Streifen) ihr
   `transform:translateX(2px)` als INLINE-Style mitgibt — ohne das gewinnt der
   Inline-Wert und die Marke laeuft weiter ueber den Rand. */
.fc-chart-axis > span:last-child { transform: translateX(calc(-100% - 2px)) !important; }