/* sun-path.css — Sonnenbahn + Mondphase (Komponente zu meteo-sun-path.js).
   Klassen `msp-*`, analog zu `msv-*` der Stationswerte. Selbsttragend: die
   Panels bringen ihren eigenen Himmel mit, die Seite muss nichts beisteuern. */

.msp { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: 12px; overflow: hidden; }
/* Allein stehende Sonnenbahn NICHT ueber die volle Breite ziehen: das SVG ist
   3:1, die Breite bestimmt also die Hoehe — auf 1200 px waere das Panel 400 px
   hoch. Im Paar mit dem Mond greift die Grenze nicht (je halbe Spalte). */
.msp--sun { grid-template-columns: 1fr; max-width: 560px; }
.msp-panel + .msp-panel { border-left: 1px solid rgba(255, 255, 255, .10); }

.msp-panel { position: relative; display: flex; flex-direction: column; background: #0e6288; }
.msp-svg { width: 100%; height: auto; display: block; }

/* Bahn, Fuehrungslinien, Berge, Punkte, Sonne */
.msp-curve { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 2.5; stroke-linecap: round; }
.msp-guide { stroke: rgba(255, 255, 255, .32); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.msp-mtn   { fill: #0a4a63; }
.msp-dot   { stroke: #0a4a63; stroke-width: 2.5; }
.msp-dot.dawn { fill: #ffd27a; }
.msp-dot.dusk { fill: #dfe6ee; }
.msp-sun   { fill: #ffd23f; }
.msp-ray   { stroke: #ffd23f; stroke-width: 2.6; stroke-linecap: round; }

/* Ecklabels ueber dem Himmel: Aufgang links, Titel Mitte, Untergang rechts. */
.msp-top { position: absolute; top: 0; left: 0; right: 0; display: flex;
  justify-content: space-between; align-items: flex-start; padding: 14px 16px;
  z-index: 2; pointer-events: none; gap: 8px; }
.msp-top--center { justify-content: center; }
.msp-t { display: flex; flex-direction: column; gap: 1px; }
.msp-t span { font-size: 11px; color: rgba(255, 255, 255, .6); letter-spacing: .02em; }
.msp-t b { font-size: 17px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.msp-tr { text-align: right; }
.msp-mid { text-align: center; align-items: center; }
.msp-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.msp-name svg { width: 14px; height: 14px; }
.msp-mid b { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .8); }

/* Fusszeile: Daemmerung/Hoechststand bzw. Auf-/Untergang mit Farbbalken. */
.msp-bot { display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(0, 0, 0, .14); border-top: 1px solid rgba(255, 255, 255, .08); }
.msp-bot--2 { grid-template-columns: repeat(2, 1fr); }
.msp-bot--4 { grid-template-columns: repeat(4, 1fr); }
.msp-b { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 6px 13px; }
.msp-b span { font-size: 10.5px; color: rgba(255, 255, 255, .55); letter-spacing: .02em; text-align: center; }
.msp-b b { font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.msp-b::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 3px; border-radius: 3px 3px 0 0; }
.msp-b.dawn::after, .msp-b.rise::after { background: #5ab4e6; }
.msp-b.noon::after { background: #f4a932; }
.msp-b.dusk::after, .msp-b.set::after { background: #a86ad4; }
/* Tageslänge ist eine Dauer, kein Zeitpunkt — neutraler Balken statt Tagesfarbe. */
.msp-b.len::after { background: rgba(255, 255, 255, .45); }

/* Polartag/-nacht: schlichte Zeilen statt Bahn. */
.msp-plain { padding: 16px 18px 18px; gap: 6px; }
.msp-plain-h { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.msp-row { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.msp-row strong { color: #fff; font-weight: 700; }

@media (max-width: 720px) {
  .msp { grid-template-columns: 1fr; }
  /* Sichtbarer Trenner zwischen gestapelter Sonne und Mond. */
  .msp-panel + .msp-panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
  /* Mond-Kopf (Name + Phase) NICHT mehr über die Scheibe legen, sondern darüber
     stellen — sonst liegt die Schrift auf dem Mond. */
  .msp-panel--moon .msp-top { position: static; }
}
/* Vier Fusszellen werden nebeneinander schnell zu eng — dann 2x2. */
@media (max-width: 460px) {
  .msp-bot--4 { grid-template-columns: repeat(2, 1fr); }
  .msp-bot--4 .msp-b:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
}