/* city-forecast.css — Stadt-Forecast-Panel für start.php.
   Basis-Stile portiert aus assets/v3.0/css/web.css (.station-panel/.station-card …),
   Positionierung für die v4-Map angepasst (oben rechts unter dem Header). */

.station-panel{
  position: absolute;
  right: 16px;
  bottom: 126px;
  z-index: 720;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100% - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  /* Hintergrund IDENTISCH zur Detailseite (base.css: html[data-theme] body) —
     vorher rgba(8,38,54,.92), ein fast deckendes Dunkelblau aus der Zeit vor der
     Lagune-Palette. Darauf sahen die Glaskarten stumpf aus statt wie auf forecast.php. */
  background: linear-gradient(180deg, #1391b0 0%, #0e6288 42%, #0a415d 100%);
  /* Kein Rahmen — der box-shadow trennt das Panel von der Karte (User 2026-07-21:
     die 1px-Rundum-Border las sich als Linie oben/unten). */
  border: 0;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}

.forecast-panel{
  right: 392px;
}

@media (max-width: 1180px){
  .forecast-panel{
    right: 16px;
    bottom: auto;
    top: 16px;
  }
}

.station-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.station-panel-kicker{
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.station-panel-title{
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}

.station-panel-close{
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.station-panel-close:hover{ background: rgba(255,255,255,.24); }

.station-panel-body{
  overflow-y: auto;
  padding: 7px 16px 16px;
}

/* ── Lade-Skelett: Kontur des kommenden Panels statt nacktem Spinner ────────
   Schimmernde Platzhalter für Geo-Zeile, Jetzt-Block, Stundenstreifen, 3 Tage
   und Button. Fühlt sich schneller an und zeigt die Struktur. */
.fc-skel{ display:flex; flex-direction:column; gap:12px; padding:2px 0 4px; }
.fc-skel-line,
.fc-skel-hero,
.fc-skel-hours span,
.fc-skel-days span,
.fc-skel-btn{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.05) 25%,
      rgba(255,255,255,.15) 37%,
      rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  border-radius: 8px;
  animation: fc-skel-shimmer 1.4s ease infinite;
}
.fc-skel-geo{ width:58%; height:12px; }
.fc-skel-hero{ height:92px; border-radius:14px; }
.fc-skel-hours{ display:flex; gap:6px; }
.fc-skel-hours span{ flex:1 1 0; height:64px; }
.fc-skel-days{ display:flex; gap:8px; }
.fc-skel-days span{ flex:1 1 0; height:72px; border-radius:12px; }
.fc-skel-btn{ height:40px; width:100%; border-radius:12px; }
@keyframes fc-skel-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion: reduce){
  .fc-skel-line, .fc-skel-hero, .fc-skel-hours span, .fc-skel-days span, .fc-skel-btn{ animation:none; }
}

.station-panel-empty{
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.45;
}

.station-card{
  margin-bottom: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  background: #0a415d;
  border: 1px solid rgba(255,255,255,.06);
}

.station-card:last-child{
  margin-bottom: 0;
}

.station-card-title{
  margin: 0 0 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.station-history-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.station-history-head .station-card-title{
  margin: 0;
}

.station-history-toggle{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.station-history-toggle-btn{
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.station-history-toggle-btn.is-active{
  background: var(--accent, #f4a932);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.station-identity{
  display: grid;
  gap: 4px;
  color: rgba(255,255,255,.84);
  font-size: 11px;
  line-height: 1.4;
}

.station-identity strong{
  color: #fff;
  font-size: 13px;
}

.station-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.station-metric{
  padding: 7px 8px;
  border-radius: 11px;
  background: rgba(0,0,0,.16);
}

.station-metric span{
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 600;
}

.station-metric strong{
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.forecast-days{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.forecast-day-card{
  padding: 8px 9px;
  border-radius: 11px;
  background: rgba(0,0,0,.16);
}

.forecast-day-label{
  margin-bottom: 3px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.forecast-day-temp{
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}

.forecast-day-range,
.forecast-day-meta{
  margin-top: 2px;
  color: rgba(255,255,255,.8);
  font-size: 10px;
  line-height: 1.35;
}

.forecast-strip{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(68px, 1fr);
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.forecast-strip-item{
  padding: 7px 8px;
  border-radius: 11px;
  background: rgba(0,0,0,.16);
}

.forecast-strip-item span{
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.forecast-strip-item strong{
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.station-meta-row{
  margin-top: 10px;
  color: rgba(255,255,255,.76);
  font-size: 11px;
}

.station-history-wrap{
  overflow-x: auto;
}

/* Vorher voellig ungestylt → nackte Browser-Tabelle, in der die Einheiten
   umbrachen. Jetzt: Einheiten im Kopf (kleine 2. Zeile), Zahlen rechtsbuendig
   mit tabular-nums, nichts bricht um, dezente Zeilentrenner. */
.station-history-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.station-history-table th,
.station-history-table td{
  padding: 6px 6px;
  white-space: nowrap;
  text-align: right;
}
.station-history-table th:first-child,
.station-history-table td:first-child{ text-align: left; }
.station-history-table thead th{
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}
/* Einheit als leise 2. Kopfzeile — nimmt den Zellen die Breite weg. */
.station-history-table thead th small{
  display: block;
  margin-top: 1px;
  color: rgba(255,255,255,.42);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
}
.station-history-table tbody td{
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
  font-weight: 600;
}
.station-history-table tbody tr:last-child td{ border-bottom: 0; }
/* Zeit gedaempft — sie ist der Anker, nicht der Messwert. */
.station-history-table td.sht-time{
  color: rgba(255,255,255,.62);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.station-chart-card{
  padding: 10px 0 0;
  background: transparent;
  border: 0;
}

.station-chart-card + .station-chart-card{
  margin-top: 10px;
}

.station-chart-title{
  margin: 0 0 8px;
  padding: 0 13px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
}

.station-chart{
  display: block;
  width: 100%;
  height: 120px;
  overflow: visible;
}

.station-chart-grid{
  fill: none;
  stroke: rgba(255,255,255,.14);
  stroke-width: 1;
}

.station-chart-line{
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

.station-chart-axis{
  display: flex;
  justify-content: space-between;
  padding: 0 13px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  font-weight: 600;
}

/* ── Kombiniertes Verlaufs-Chart (alle Größen in einem Bild + Hover-Tooltip) ── */
.combo-legend{
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  margin: 2px 0 10px;
}
.combo-leg{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.82);
}
.combo-leg i{ width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.combo-wrap{ position: relative; }
.combo-chart{ display: block; width: 100%; height: auto; touch-action: none; }
.combo-grid{ fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.combo-line{
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.20));
}
/* Führungslinie folgt dem Cursor; sitzt außerhalb, bis gehovt wird (x=-10). */
.combo-guide{ stroke: rgba(255,255,255,.45); stroke-width: 1; stroke-dasharray: 3 3; }
.combo-dot{ stroke: #0e2230; stroke-width: 1.4; }

/* Ein Tooltip für ALLE vier Werte am selben Zeitpunkt. */
.combo-tip{
  position: absolute; top: 4px; z-index: 3;
  min-width: 118px; max-width: 78%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--map-control-bg, rgba(10,34,48,.94));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.42);
  pointer-events: none;
}
.combo-tip[hidden]{ display: none; }
.combo-tip-time{
  margin-bottom: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}
.combo-tip-row{ display: flex; align-items: center; gap: 7px; line-height: 1.6; }
.combo-tip-sw{ width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.combo-tip-lab{ flex: 1; font-size: 11px; color: rgba(255,255,255,.82); }
.combo-tip-val{ font-size: 11.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* .forecast-actions / .forecast-more-button (orange Vollflaechen-CTA) sind am
   2026-07-20 entfallen — alle Panels nutzen jetzt .fcp-cta. Letzter Nutzer war
   next.php, die zusammen damit vom Server geloescht wurde. */

@media (max-width: 520px){
  .station-metrics,
  .forecast-days{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Teaser: Jetzt-Hero ── */
.fc-hero{
  border-color: rgba(244,169,50,.28);
}
.fc-hero-time{
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: right;
}
.fc-hero-main{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 8px;
}
.fc-hero-icon{ font-size: 40px; line-height: 1; display: inline-flex; }
/* SVG-Wettericons (Set ~/wettericons). Hero groß, Tabellen-Zelle klein. */
.wx-icon { display: block; object-fit: contain; user-select: none; }
.wx-icon--hero { width: 56px; height: 56px; }
.wx-icon--cell { width: 22px; height: 22px; margin: 0 auto; }
.wx-icon--day  { width: 34px; height: 34px; margin: 0 auto; }
/* Wellen-Panel: kleine Beschriftung unter der großen Wellenhöhe. */
.fc-hero-sub { font-size: 12px; opacity: .7; margin-left: 6px; align-self: flex-end; padding-bottom: 6px; }
.forecast-day-ico { display: flex; justify-content: center; margin: 2px 0; }
.fc-hero-temp{
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}
.fc-hero-metrics{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: rgba(255,255,255,.9);
  font-size: 12.5px;
}
.fc-hero-metrics b{ color: rgba(255,255,255,.6); font-weight: 700; margin-right: 3px; }
.fc-wind-arrow{
  display: inline-block;
  font-weight: 800;
  color: var(--accent, #f4a932);
}

/* ── Warnungen im Panel (Stadt-Klick bei aktivem Warnungen-Layer) ── */
.fc-warn-alert{ padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.fc-warn-alert:first-of-type{ border-top: 0; padding-top: 2px; }
.fc-warn-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-warn-haz{ color: #fff; font-size: 13px; font-weight: 700; }
.fc-warn-badge{ font-size: 10.5px; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 999px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.fc-warn-time{ margin-top: 3px; color: rgba(255,255,255,.6); font-size: 11px; }
.fc-warn-headline{ margin-top: 3px; color: rgba(255,255,255,.88); font-size: 12px; line-height: 1.4; }
.fc-warn-src{ margin-top: 3px; color: rgba(255,255,255,.5); font-size: 10.5px; }
.fc-warn-foreign{ margin-top: 4px; color: rgba(255,255,255,.55); font-size: 10.5px; }
.fc-warn-desc{ margin-top: 5px; }
.fc-warn-desc > summary{ cursor: pointer; color: rgba(255,255,255,.7); font-size: 11px; list-style: none; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.fc-warn-desc > summary::-webkit-details-marker{ display: none; }
.fc-warn-desc > summary::before{ content: "▸"; font-size: 9px; transition: transform .15s ease; }
.fc-warn-desc[open] > summary::before{ transform: rotate(90deg); }
.fc-warn-desc-body{ margin-top: 4px; color: rgba(255,255,255,.78); font-size: 11.5px; line-height: 1.45; white-space: pre-line; }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-src{ color: rgba(8,49,69,.5); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-foreign{ color: rgba(8,49,69,.55); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-desc > summary{ color: rgba(8,49,69,.7); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-desc-body{ color: rgba(8,49,69,.8); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-haz{ color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-time{ color: rgba(8,49,69,.6); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-headline{ color: rgba(8,49,69,.85); }
html[data-theme="light"] .station-panel.forecast-panel .fc-warn-alert{ border-color: rgba(8,49,69,.1); }

/* Farbiges Kategorie-Label (AQI heute / UV) */
.fc-cat-pill{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: middle;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}

/* ── CAMS: Luftqualitäts-Hero ── */
.fc-aqi-hero{ background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }
.fc-aqi-row{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.fc-aqi-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px;
  font-size:26px; font-weight:800; line-height:1;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.fc-aqi-meta{ display:flex; flex-direction:column; gap:2px; }
.fc-aqi-meta strong{ color:#fff; font-size:15px; font-weight:800; }
.fc-aqi-meta span{ color:rgba(255,255,255,.7); font-size:11.5px; }
html[data-theme="light"] .station-panel.forecast-panel .fc-aqi-meta strong{ color:rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .fc-aqi-meta span{ color:rgba(8,49,69,.7); }

/* ── Teaser: Heute ── */
.fc-today-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.fc-today-temp{ color: #fff; font-size: 15px; font-weight: 800; }

/* ── CTA-Hinweis ── */
.forecast-more-hint{
  margin: 7px 2px 0;
  color: rgba(255,255,255,.6);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

/* Light-Theme */
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-time{ color: rgba(8,49,69,.66); }
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-temp,
html[data-theme="light"] .station-panel.forecast-panel .fc-today-temp{ color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-metrics{ color: rgba(8,49,69,.9); }
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-metrics b{ color: rgba(8,49,69,.6); }
html[data-theme="light"] .station-panel.forecast-panel .fc-today-row{ color: rgba(8,49,69,.85); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-more-hint{ color: rgba(8,49,69,.6); }
html[data-theme="light"] .station-panel.forecast-panel .fc-hero{
  background: linear-gradient(150deg, rgba(244,169,50,.22), rgba(8,49,69,.03));
}

/* ── Halo-Punkt am exakten Abfrage-Punkt + Leader-Linie zum Popup ── */
/* Pin selbst pointer-transparent (Halo/Ping duerfen Map-Klicks nicht blocken),
   nur der Dot ist interaktiv: draggable = Abfragepunkt verschieben. */
.fc-pin{ width: 0; height: 0; pointer-events: none; }
.fc-pin-dot{
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent, #f4a932);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  pointer-events: auto;
  cursor: grab;
}
/* Unsichtbare Greif-/Touchflaeche ~30px um den Dot. */
.fc-pin-dot::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}
.fc-pin-halo{
  position: absolute; left: -20px; top: -20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,169,50,.42), rgba(244,169,50,0) 68%);
}
.fc-pin-ping{
  position: absolute; left: -7px; top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent, #f4a932);
  animation: fc-ping 1.5s ease-out 2 forwards;   /* 2× pulsen, dann still */
}
@keyframes fc-ping{
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(3.4); opacity: 0; }
}
.fc-leader-line{
  stroke: var(--accent, #f4a932);
  stroke-width: 2;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  opacity: .9;
}

/* ── Karten-Klick Wert-Popup (MapLibre Popup) ── */
/* Optik wie die Map-Controls (.map-btn): gleicher Himmel-zu-Meer-Verlauf, gleiches
   Glas, weisse Schrift. Die Tokens sind bewusst NICHT theme-abhaengig — der Popup
   sieht daher in hell wie dunkel gleich aus (wie die Controls). */
.fc-value-popup .maplibregl-popup-content{
  padding: 8px 10px 9px;
  border-radius: 12px;
  background: var(--map-control-bg);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 32px rgba(0,0,0,.32);
  -webkit-backdrop-filter: var(--map-control-blur);
  backdrop-filter: var(--map-control-blur);
  color: var(--map-control-ink);
}
.fc-value-popup .maplibregl-popup-tip{ display:none; }
.fc-value-popup .maplibregl-popup-close-button{
  color: rgba(255,255,255,.7); font-size: 17px; padding: 2px 6px;
}
.fc-pop-head{
  color: rgba(255,255,255,.6);
  font-size: 10px; font-weight: 600; letter-spacing:.03em;
  margin-bottom: 4px;
}
.fc-pop-val{ display:flex; flex-direction:column; gap:1px; }
.fc-pop-label{ color: rgba(255,255,255,.7); font-size: 11px; font-weight:600; }
.fc-pop-num{ color:#fff; font-size: 19px; font-weight: 800; line-height:1.05; }
.fc-pop-loading,
.fc-pop-time{ color: rgba(255,255,255,.55); font-size: 10.5px; margin-top:3px; }
.fc-pop-note{ color: rgba(255,255,255,.78); font-size: 12px; line-height:1.4; margin-bottom:2px; }
/* "Mehr" — Brand-Orange wie die aktiven Tabs (statt Blau; Detail-CTA gibt's
   schon prominent im rechten Panel). */
.fc-pop-more{
  display:block; width:100%; margin-top:7px;
  border:0; padding:5px 10px; border-radius:999px; cursor:pointer;
  background: linear-gradient(180deg, var(--brand-sun, #f4a932), var(--brand-sun-2, #f29400));
  color: var(--accent-ink, #ffffff); font-size:11.5px; font-weight:700;
}
.fc-pop-more:hover{ filter:brightness(1.07); }

/* KEINE Light-Theme-Overrides mehr: der Popup traegt jetzt die Map-Control-Optik
   (blauer Verlauf + weisse Schrift) und sieht in beiden Themes gleich aus — wie
   die Controls daneben. Frueher stand hier eine helle Variante mit dunkler Schrift;
   die wuerde jetzt unlesbar auf dem Verlauf liegen. */

/* ── Positionierung für start.php (oben rechts, unter Header) ── */
.station-panel.forecast-panel {
  position: absolute;
  top: 62px;
  right: 68px;
  bottom: auto;
  left: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 140px);
  z-index: 40;
}
.station-panel[hidden] { display: none !important; }

/* Heller Modus: Glas-Look (analog next.php) */
html[data-theme="light"] .station-panel.forecast-panel {
  background: rgba(255, 255, 255, 0.72);
  border: 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  color: rgb(8, 49, 69);
  box-shadow: 0 14px 38px rgba(8, 49, 69, 0.18);
}
html[data-theme="light"] .station-panel.forecast-panel .station-panel-kicker { color: rgba(8,49,69,.6); }
html[data-theme="light"] .station-panel.forecast-panel .station-panel-title,
html[data-theme="light"] .station-panel.forecast-panel .station-panel-body,
html[data-theme="light"] .station-panel.forecast-panel .station-metric strong { color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .station-card { background: rgba(8,49,69,.05); }
/* Generische station-* Inhalte im Light-Mode lesbar machen (CAMS-/Forecast-Panel) */
html[data-theme="light"] .station-panel.forecast-panel .station-card-title { color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .station-identity { color: rgba(8,49,69,.78); }
html[data-theme="light"] .station-panel.forecast-panel .station-identity strong { color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .station-panel-empty { color: rgba(8,49,69,.7); }
html[data-theme="light"] .station-panel.forecast-panel .station-metric { background: rgba(8,49,69,.06); }
html[data-theme="light"] .station-panel.forecast-panel .station-metric span { color: rgba(8,49,69,.62); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-strip-item { background: rgba(8,49,69,.06); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-strip-item span { color: rgba(8,49,69,.62); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-strip-item strong { color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-card { background: rgba(8,49,69,.06); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-label,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-range,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-meta { color: rgba(8,49,69,.7); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-temp { color: rgb(8,49,69); }

/* ── CAMS-Luftqualitäts-Panel: Mehrtage-Streifen + Tages-Max + 3-h-Tabelle ── */
.fc-cams-panel { display: contents; }

.fc-cams-days-card { padding-top: 8px; padding-bottom: 8px; }
.fc-cams-days { display: flex; gap: 4px; }
.fc-cams-day {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 3px 7px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; cursor: pointer; color: rgba(255,255,255,0.6);
  font: 600 10.5px/1 var(--font-sans, system-ui);
  white-space: nowrap;
}
.fc-cams-day:hover { background: rgba(255,255,255,0.08); }
.fc-cams-day.is-active { border-color: var(--accent, #f4a932); color: #fff; background: rgba(244,169,50,0.10); }
.fc-cams-day-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 12px/1 var(--font-sans, system-ui);
}

.fc-cams-maxlist { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; row-gap: 6px; column-gap: 8px; }
.fc-cams-max { display: contents; }
.fc-cams-max-name { font: 600 12.5px/1.2 var(--font-sans, system-ui); color: #fff; }
.fc-cams-max-val  { font: 700 12.5px/1.2 var(--font-sans, system-ui); color: #fff; white-space: nowrap; text-align: right; }
.fc-cams-max-peak { font: 500 10.5px/1 var(--font-sans, system-ui); color: rgba(255,255,255,0.6); white-space: nowrap; min-width: 46px; text-align: right; }

.fc-cams-tablewrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.fc-cams-table { border-collapse: separate; border-spacing: 2px; font: 600 11px/1 var(--font-sans, system-ui); }
.fc-cams-table th, .fc-cams-table td { min-width: 26px; height: 24px; padding: 0 4px; text-align: center; border-radius: 5px; white-space: nowrap; }
.fc-cams-table thead th { color: rgba(255,255,255,0.6); font-weight: 600; background: transparent; }
.fc-cams-table td { color: #fff; background: rgba(255,255,255,0.08); }
.fc-cams-table .fc-cams-cnr {
  position: sticky; left: 0; z-index: 1; text-align: left; min-width: 54px; padding-right: 6px;
  background: #083145; color: #fff; font-weight: 700;
}
.fc-cams-table .is-now { outline: 2px solid var(--accent, #f4a932); outline-offset: -2px; }
.fc-cams-table thead .is-now { color: var(--accent, #f4a932); outline: none; font-weight: 800; }

/* CAMS-Panel im Light-Theme (weißes Glas) lesbar — dunkle Schrift.
   EAQI-Zellen haben Inline-Farben (background+color) → bleiben unberührt. */
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-day { color: rgba(8,49,69,.62); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-day:hover { background: rgba(8,49,69,.06); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-day.is-active { color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-name,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-val { color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-peak { color: rgba(8,49,69,.6); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table thead th { color: rgba(8,49,69,.6); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table td { color: rgb(8,49,69); background: rgba(8,49,69,.06); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table .fc-cams-cnr { background: rgba(8,49,69,.08); color: rgb(8,49,69); }

/* Close-Button im Light-Theme: grauer Kreis + dunkles X (sonst weiß-auf-weiß). */
html[data-theme="light"] .station-panel.forecast-panel .station-panel-close { background: rgba(8,49,69,.10); color: rgb(8,49,69); }
html[data-theme="light"] .station-panel.forecast-panel .station-panel-close:hover { background: rgba(8,49,69,.18); }

/* ============================================================================
   BLAUGLAS-VARIANTE (Light-Theme) — Blau-800-Glas wie Prognose-Panel im Dark/Blue
   + weiße Schrift. EIN Block, leicht entfernbar (löschen = zurück zu Weißglas).
   ============================================================================ */
html[data-theme="light"] .station-panel.forecast-panel{
  background: rgba(8, 38, 54, .92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 42px rgba(4,39,58,.34);
  color: #fff;
}
/* Volle weiße Schrift */
html[data-theme="light"] .station-panel.forecast-panel .station-panel-title,
html[data-theme="light"] .station-panel.forecast-panel .station-panel-body,
html[data-theme="light"] .station-panel.forecast-panel .station-card-title,
html[data-theme="light"] .station-panel.forecast-panel .station-identity strong,
html[data-theme="light"] .station-panel.forecast-panel .station-metric strong,
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-temp,
html[data-theme="light"] .station-panel.forecast-panel .fc-today-temp,
html[data-theme="light"] .station-panel.forecast-panel .fc-aqi-meta strong,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-temp,
html[data-theme="light"] .station-panel.forecast-panel .forecast-strip-item strong,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-name,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-val,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-day.is-active{ color:#fff; }
/* Gedämpfte weiße Schrift */
html[data-theme="light"] .station-panel.forecast-panel .station-panel-kicker,
html[data-theme="light"] .station-panel.forecast-panel .station-identity,
html[data-theme="light"] .station-panel.forecast-panel .station-panel-empty,
html[data-theme="light"] .station-panel.forecast-panel .station-metric span,
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-time,
html[data-theme="light"] .station-panel.forecast-panel .fc-today-row,
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-metrics,
html[data-theme="light"] .station-panel.forecast-panel .fc-hero-metrics b,
html[data-theme="light"] .station-panel.forecast-panel .forecast-more-hint,
html[data-theme="light"] .station-panel.forecast-panel .fc-aqi-meta span,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-label,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-range,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-meta,
html[data-theme="light"] .station-panel.forecast-panel .forecast-strip-item span,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-day,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-peak,
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table thead th{ color: rgba(255,255,255,.74); }
/* Karten-/Zellen-Hintergründe auf Petrol */
html[data-theme="light"] .station-panel.forecast-panel .station-card{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
html[data-theme="light"] .station-panel.forecast-panel .station-metric,
html[data-theme="light"] .station-panel.forecast-panel .forecast-strip-item,
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-card{ background: rgba(0,0,0,.16); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table td{ color:#fff; background: rgba(255,255,255,.10); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table .fc-cams-cnr{ background: rgba(0,0,0,.20); color:#fff; }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-day:hover{ background: rgba(255,255,255,.08); }
/* Close-Button hell auf Petrol */
html[data-theme="light"] .station-panel.forecast-panel .station-panel-close{ background: rgba(255,255,255,.14); color:#fff; }
html[data-theme="light"] .station-panel.forecast-panel .station-panel-close:hover{ background: rgba(255,255,255,.24); }
/* Hero-Verlauf auf Petrol */

/* Tagesverlauf: Header-Eck-Zelle (über „AQI") ohne Hintergrund */
.fc-cams-table thead .fc-cams-cnr { background: transparent; }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-table thead .fc-cams-cnr { background: transparent; }

/* Eigener, dezenter Scrollbalken — Tagesverlauf-Tabelle (horizontal) + Panel-Body (vertikal) */
.fc-cams-tablewrap { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.30) transparent; }
.fc-cams-tablewrap::-webkit-scrollbar { height: 8px; }
.fc-cams-tablewrap::-webkit-scrollbar-track { background: transparent; }
.fc-cams-tablewrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 5px; }
.fc-cams-tablewrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.46); }
.station-panel-body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; }
.station-panel-body::-webkit-scrollbar { width: 8px; }
.station-panel-body::-webkit-scrollbar-track { background: transparent; }
.station-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 5px; }
.station-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.40); }


/* ── Pollen-Index-Zeilen (Tages-Höchstwerte): farbiger Index-Kreis + Stufe ── */
.fc-cams-idx {
  justify-self: end;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: 800 12px/1 var(--font-sans, system-ui);
}
.fc-cams-max-stufe { font: 600 11px/1.2 var(--font-sans, system-ui); color: rgba(255,255,255,0.75); }
html[data-theme="light"] .station-panel.forecast-panel .fc-cams-max-stufe { color: rgba(8,49,69,0.7); }

/* ── Pollen-Arten als Chip-Reihe (Optik der Tages-Chips, nicht klickbar) ── */
.fc-cams-species { flex-wrap: nowrap; }
.fc-cams-species-chip { cursor: default; }
.fc-cams-species-chip:hover { background: transparent; }
.fc-cams-species .fc-cams-day-lab {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* ── Forecast-Panel v2: Kennzahlen-Grid + Aktiver-Layer-Zeile + Tag/Strip ── */
.fc-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 10px;
}
.fc-metric { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.fc-metric b { font-weight: 600; opacity: 0.7; }

.fc-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--accent, #f4a932);
}
.fc-extra-label { font: 600 12.5px/1.2 var(--font-sans, system-ui); }
.fc-extra strong { font: 800 15px/1 var(--font-sans, system-ui); margin-left: auto; }
.fc-extra-hint { font-size: 10px; opacity: 0.55; }

.forecast-day-card[data-fc-day] { cursor: pointer; border: 1px solid transparent; }
.forecast-day-card[data-fc-day]:hover { border-color: rgba(255,255,255,0.25); }
.forecast-day-card.is-active { border-color: var(--accent, #f4a932); }
html[data-theme="light"] .station-panel.forecast-panel .forecast-day-card[data-fc-day]:hover { border-color: rgba(8,49,69,0.3); }

.fc-strip-icon { font-size: 14px; line-height: 1; }
.forecast-strip-item.is-now { outline: 1.5px solid var(--accent, #f4a932); border-radius: 8px; }

/* Tagesverlauf-Tabelle (Forecast v2): Einheiten-Fußzeile */
.fc-tbl-units { margin-top: 6px; font-size: 9.5px; opacity: 0.55; }

/* Die Detail-Karte (.fc-detail-card, 2026-06-12) ist am 2026-07-19 komplett
   entfallen — CTA + Herkunftsangabe stecken jetzt in .fcp-cta und .fcp-meta,
   auch in den Wellen- und Ozean-Panels. */


/* ===== Mobil (<=720px): Prognose-Panel als Bottom-Sheet ===== */
@media (max-width: 1024px) {
  .station-panel.forecast-panel {
    /* An den SICHTBAREN Viewport-Boden heften, NICHT an die große .start-stage
       (die als 100vh-Box hinter die Browserleiste/Notch reicht). Sonst wächst
       das Sheet mit `85vh` nach oben über den Schirm hinaus und der Kopf mit
       Name/Favorit/X sitzt oberhalb des sichtbaren Bereichs — genau der
       Abschnitt, der „bei manchen Geräten" fehlte. */
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%;
    max-height: 85vh;                                            /* Fallback ohne dvh */
    /* dvh = SICHTBARE Viewporthöhe (schrumpft, wenn die URL-Leiste erscheint);
       zusätzlich unter dem Header und einem kleinen Rand deckeln, damit der Kopf
       immer im Bild bleibt. */
    max-height: min(85dvh, calc(100dvh - var(--header-height, 56px) - 8px));
    border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  /* Letzte Inhaltszeile über dem Home-Indicator freihalten. */
  .station-panel.forecast-panel .station-panel-body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* Griff oben mittig */
  .station-panel.forecast-panel::before {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
    z-index: 3;
    pointer-events: none;
  }
  .station-panel.forecast-panel .station-panel-head { padding-top: 20px; }
}

/* ================= Panel-Neubau 2026-07-19 =================
   Kurzer Überblick statt schmaler Kopie der Detailseite:
   Kopf → Jetzt-Block (geteilte .fc-mode-Klassen aus fc-blocks.css) →
   48 Stunden → 3 Tage → Button. */

/* Kopf: Region · Land · Höhe */
.fcp-geo{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);
  margin-bottom:10px;line-height:1.4}

/* 48-Stunden-Streifen — feste Beschriftungsspalte links, Stunden waagerecht
   scrollbar. Zeilen: Zeit, Icon, Temp, Wind, Böen, Richtung, Regen (+ aktiver Layer). */
.fcp-hwrap{display:flex;gap:8px;align-items:flex-start}
.fcp-hours{display:flex;gap:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding-bottom:4px;flex:1 1 auto;min-width:0}
.fcp-h{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:40px;padding:7px 4px;border-radius:9px;background:rgba(255,255,255,.05)}
.fcp-h.is-now{background:rgba(104,194,227,.16);box-shadow:inset 0 0 0 1px var(--brand-cyan)}
/* Beschriftungsspalte: gleiche Zeilenhoehen, aber linksbuendig und ohne Flaeche. */
.fcp-h--labels{background:none;padding-left:0;padding-right:0;align-items:flex-start;min-width:52px}
.fcp-h--labels span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fcp-h-t{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);line-height:16px}
.fcp-h-i{width:24px;height:24px;display:flex;align-items:center}
.fcp-h-i .wx-icon{width:24px;height:24px;display:block}
.fcp-h-v{font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums;line-height:18px}
.fcp-h-n{font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--text-dim);line-height:16px}
.fcp-h-r{color:#68c2e3}
.fcp-h-x{color:var(--accent)}
.fcp-h-d{line-height:16px;height:16px;display:flex;align-items:center}
.fcp-h-arr{display:inline-block;font-size:13px;color:var(--brand-cyan);line-height:1}
.fcp-units{margin-top:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}

/* Drei Tage — je eine Zeile */
.fcp-days{display:flex;flex-direction:column}
.fcp-d{display:grid;grid-template-columns:1fr 26px auto 62px;align-items:center;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--line)}
.fcp-d:last-child{border-bottom:0}
.fcp-d-n{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.fcp-d-i{width:26px;height:26px}
.fcp-d-i .wx-icon{width:26px;height:26px;display:block}
.fcp-d-t{font-family:var(--font-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.fcp-d-t .lo{color:var(--muted)}
.fcp-d-r{font-family:var(--font-mono);font-size:12px;color:#68c2e3;text-align:right}

/* Weiterführung */
.fcp-cta{display:block;margin-top:12px;padding:12px 14px;border-radius:10px;text-align:center;
  font-size:13.5px;font-weight:600;text-decoration:none;
  color:#3a2600;background:var(--accent);transition:filter var(--t) var(--ease)}
.fcp-cta:hover{filter:brightness(1.06)}

/* ---------- Optik wie forecast.php (nur die neu gebauten Bloecke) ----------
   Die uebrigen Panel-Modi (Warnungen/CAMS/Wellen/Ozean) behalten bewusst die
   alte .station-card-Optik — sie wurden nicht umgebaut. */
.station-card.fc-pc{background:var(--fc-glass-2);border:1px solid var(--line);border-radius:12px;
  padding:14px 14px 12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Titel in der Stimme der Detailseite: normal geschrieben statt Versalien,
   Gewicht 600 statt 800 — nur kleiner, weil die Spalte schmal ist. */
.fc-pc .station-card-title{font-size:13px;font-weight:600;letter-spacing:.01em;text-transform:none;
  color:var(--text);margin:0 0 10px}
/* Weiterfuehrung wie der „mehr"-Button der Detailseite: Glas + gestrichelt + Tuerkis,
   nicht als orange Vollflaeche. */
.fcp-cta{display:block;margin-top:12px;padding:12px 14px;border-radius:10px;text-align:center;
  font-size:13px;font-weight:600;text-decoration:none;color:var(--brand-cyan);
  background:var(--fc-glass-2);border:1px dashed var(--line);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.fcp-cta:hover{background:rgba(104,194,227,.10);border-color:var(--brand-cyan);border-style:solid}

/* In einer Glas-Karte duerfen die Tages-Kaertchen nicht schwarz unterlegt sein
   (Default .forecast-day-card = rgba(0,0,0,.16), Erbe der alten dunklen Karten) —
   sonst sitzt ein dunkler Kasten im hellen Glas. Gilt fuer Wellen + Ozean. */
.fc-pc .forecast-day-card{background:var(--fc-glass);border:1px solid var(--line);text-align:center;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.16)}
/* Der gewaehlte Tag steht vorn: Orange-Rand, kein eingelassener Schatten. */
.fc-pc .forecast-day-card.is-active{border-color:var(--accent,#f4a932);box-shadow:none}
/* Messwert-Kacheln der Stations-Panels: gleiches Erbe (rgba(0,0,0,.16)),
   gleiche Behandlung. Nicht waehlbar → kein is-active-Zustand. */
.fc-pc .station-metric{background:var(--fc-glass);border:1px solid var(--line);
  box-shadow:inset 0 1px 8px rgba(0,0,0,.16)}

/* Fusszeile: Hoehenbasis von Temp/Wind + Modell/Run. Bewusst leise (mono, klein,
   gedaempft) — Herkunftsangabe, kein Inhalt. */
.fcp-meta{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding:0 2px;
  font-family:var(--font-mono);font-size:10.5px;line-height:1.45;letter-spacing:.03em;
  color:rgba(255,255,255,.52)}

/* KEINE Light-Theme-Regel hier: weiter unten steht der ausdrueckliche Block
   „BLAUGLAS-VARIANTE (Light-Theme)" (`html[data-theme="light"] .station-panel.forecast-panel`),
   der das Panel im hellen Theme absichtlich dunkelblau mit weisser Schrift haelt und
   hoehere Spezifitaet hat. Eine helle Verlaufsregel waere hier wirkungslos.
   Soll das Panel auch hell dem Body von forecast.php folgen, muss dieser Block weg —
   samt der ~40 Weiss-Schrift-Ueberschreibungen, die dazugehoeren. */

/* Ortszeile ueber Kicker und Titel */
.station-panel-geo{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;
  color:rgba(255,255,255,.62);margin-bottom:3px;line-height:1.35}
.station-panel-geo:empty{display:none}

/* ── METAR-Regen: ehrlicher Hinweis + Link auf nächste Station mit Regenmenge ──
   METAR liefert keine Menge; regnet es (Wettercode), sagen wir das — und
   verlinken, falls im strengen Umkreis eine Fremdquelle eine echte mm-Zahl hat.
   Die Entfernung steht bewusst dabei: Regen ist lokal, die Zahl gilt DORT. */
.station-rain-note{
  margin-top:10px; padding:12px 14px; border-radius:12px;
  background:rgba(42,121,215,.14); border:1px solid rgba(42,121,215,.34);
}
.station-rain-note[hidden]{ display:none; }
.srn-head{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:#fff; }
.srn-drop{ font-size:15px; }
.srn-sub{ margin-top:3px; font-size:12px; color:rgba(255,255,255,.7); }
.srn-link{
  display:flex; flex-direction:column; gap:1px;
  margin-top:10px; padding:9px 11px; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  transition:background .15s ease;
}
.srn-link:hover{ background:rgba(255,255,255,.14); }
.srn-mm{ font-weight:800; font-size:16px; color:#fff; }
.srn-where{ font-size:11px; color:rgba(255,255,255,.7); }

/* Weg vom Stations-Panel auf die eigene Stationsseite (meteo-station.js). */
.station-identity .station-page-link {
  display: inline-block; margin-top: 4px;
  color: var(--brand-cyan); text-decoration: none; font-weight: 600;
}
.station-identity .station-page-link:hover { text-decoration: none; }
html[data-theme="light"] .station-panel.forecast-panel .station-page-link { color: var(--brand-deep); }

/* ===== „Zur Stationsseite" — als Schaltfläche statt als Textzeile =====
   Wunsch Maren 16.08.2026: auffälliger, mit orange gestrichelter Linie außen.
   Gestrichelt statt durchgezogen, damit es sich vom gefüllten Premium-Knopf
   unterscheidet: hier geht es weiter zu mehr Inhalt, es wird nichts gekauft.
   Gold auf dem Panel-Grund ergibt Kontrast 5.48 (AA verlangt 4.5). */
.station-identity .station-page-link {
  display: block;
  margin-top: 12px;
  padding: 9px 14px;
  border: 2px dashed var(--brand-sun);   /* 1.5px rundet der Browser auf 1px ab */
  border-radius: 12px;
  color: var(--brand-sun);
  text-align: center;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease);
}
.station-identity .station-page-link:hover,
.station-identity .station-page-link:focus-visible {
  background: rgba(244, 169, 50, .14);
  border-color: #ffc65e;
  color: #ffd08a;
}
/* Das Panel ist in BEIDEN Themes dunkelblau (fester Verlauf), deshalb bleibt
   das Gold auch im hellen Thema richtig — die alte Sonderregel hätte hier
   Markenblau auf Blau gesetzt. */
html[data-theme="light"] .station-panel.forecast-panel .station-page-link { color: var(--brand-sun); }