Eigenes Meteogramm statt des eingebetteten von meteoblue

Das Widget von meteoblue war ein fremdes Dokument im iframe: es passte
farblich nicht, liess sich nicht aendern, wurde auf schmalen Schirmen als
Ganzes heruntergerechnet und konnte die eigenen Messwerte nicht zeigen.
Genau das kann das neue Modul - links vom Jetzt-Strich steht, was die
Wetterstation gemessen hat, rechts die Vorhersage.

Aufgebaut wie die uebrigen Anzeige-Module: meteogrammKatalog.js sagt, WAS
gezeigt wird, meteogramm.js nur, WIE. Der Renderer kennt kein Feld und keine
Spur beim Namen. Eine weitere Spur ist damit ein Objekt im Katalog und keine
Codeaenderung.

Ein einziges SVG ueber alle drei Felder, damit Zeitachse, Nachtstreifen,
Jetzt-Linie und Zeiger nur einmal existieren und ueberall gleich sitzen.

Zwei Entscheidungen, die man sonst sucht:

Das Wolkenband zeichnet je Schicht ein Rechteck mit waagerechtem
Farbverlauf. Ein Rechteck je Stunde war der erste Versuch und sah aus wie
Fernsehrauschen - zweihundert harte Kanten nebeneinander. Open-Meteo kennt
ohnehin nur drei Schichten statt eines Hoehenprofils.

Die Strahlung teilt sich das Feld mit der Temperatur, statt ein viertes zu
bekommen: gleicher Tagesrhythmus, gleiche Nacht-Schattierung, und ein
viertes Feld machte das Ganze am Handy hoeher als das externe Widget.

Die alte Einbindung bleibt vorerst und ist umschaltbar. mountMeteogram()
laeuft jetzt erst beim Umschalten - wer meteoblue nie ansieht, laedt es auch
nicht mehr.

Die Karte heisst "Wetter" statt "Forecast": darunter steht bereits eine
zweite Karte dieses Namens.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/solar.css

@@ -3958,6 +3958,83 @@ svg.anl-plan.anl-hoch { max-height: none; }
   .spk .spk-verlauf.neu .spk-linie { stroke-dashoffset: 0; }
 }
 
+/* ==========================================================================
+   Meteogramm (js/solar/meteogramm.js, Inhalt aus meteogrammKatalog.js).
+   Töne wie Übersicht, Anlage und Speicher. Datenfarben stehen im Katalog -
+   hier nur, was die Struktur trägt.
+
+   Alle Regeln tragen .mtg davor: solar.css lädt vor adminlte.min.css, und
+   bei gleicher Spezifität gewänne die spätere Regel.
+   ========================================================================== */
+.mtg { display: grid; gap: .6rem; }
+.mtg .mtg-meldung { border-radius: .7rem; padding: .5rem .9rem; font-size: .85rem; background: rgba(232, 163, 58, .12); color: #e8a33a; }
+.mtg .mtg-leer { color: var(--ton-schrift-3, #6f7a81); font-size: .85rem; margin: .8rem 0; }
+
+/* Live-Leiste: was die eigene Station gerade meldet. */
+.mtg .mtg-jetzt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
+.mtg .mtg-jetzt-titel { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ton-schrift-3, #6f7a81); }
+.mtg .mtg-wert { font-size: .92rem; font-weight: 600; color: var(--ton-schrift, #e8ede9); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .3rem; }
+.mtg .mtg-wert i { font-family: bootstrap-icons; font-style: normal; font-size: .9rem; font-weight: 400; color: var(--ton-schrift-2, #9aa6ad); }
+
+/* Die Tafel. position:relative traegt den Tooltip. */
+.mtg .mtg-bild { position: relative; min-height: 180px; }
+.mtg .mtg-tafel { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-tap-highlight-color: transparent; font-family: "Poppins", system-ui, sans-serif; }
+
+.mtg .mtg-nacht { fill: #0c0f11; fill-opacity: .35; }
+.mtg .mtg-vergangen { fill: #ffffff; fill-opacity: .025; pointer-events: none; }
+.mtg .mtg-gitter { stroke: var(--ton-linie, rgba(138, 148, 158, .2)); stroke-width: 1; }
+.mtg .mtg-tag { stroke: var(--ton-linie-satt, rgba(138, 148, 158, .38)); stroke-width: 1; }
+.mtg .mtg-jetztlinie { stroke: var(--ton-sonne, #f0b429); stroke-width: 1.5; stroke-dasharray: 3 3; }
+.mtg .mtg-zeiger { stroke: var(--ton-schrift-2, #9aa6ad); stroke-width: 1; pointer-events: none; }
+.mtg .mtg-fang { fill: transparent; }
+
+.mtg .mtg-achse { fill: var(--ton-schrift-3, #6f7a81); font-size: 10px; }
+.mtg .mtg-einheit { fill: var(--ton-schrift-3, #6f7a81); font-size: 9px; font-weight: 600; }
+.mtg .mtg-name { fill: var(--ton-schrift-2, #9aa6ad); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
+.mtg .mtg-tagname { fill: var(--ton-schrift-2, #9aa6ad); font-size: 11px; font-weight: 600; }
+.mtg .mtg-stunde { fill: var(--ton-schrift-3, #6f7a81); font-size: 9px; }
+.mtg .mtg-marke { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.mtg .mtg-wetter { font-family: bootstrap-icons; font-size: 15px; fill: var(--ton-schrift-2, #9aa6ad); }
+
+.mtg .mtg-linie { fill: none; stroke-linejoin: round; stroke-linecap: round; }
+.mtg .mtg-flaeche, .mtg .mtg-balken, .mtg .mtg-wolke { stroke: none; }
+.mtg .mtg-pfeil path { stroke: var(--ton-schrift-2, #9aa6ad); stroke-width: 1.3; fill: none; stroke-linecap: round; }
+.mtg .mtg-pfeil.mtg-schwach path { stroke-opacity: .35; }
+
+/* Zeitraumknoepfe in der Kartenkopfzeile, wie .spk-zeitraum. */
+.mtg-zeitraum { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ton-radius-klein, .5rem); background: var(--ton-grund, #191d20); }
+.mtg-zeitraum button { all: unset; box-sizing: border-box; cursor: pointer; padding: .2rem .7rem; border-radius: .4rem; font-size: .8rem; font-weight: 600; line-height: 1.5; color: var(--ton-schrift-2, #9aa6ad); }
+.mtg-zeitraum button.aktiv { background: var(--ton-flaeche-2, #2b3237); color: var(--ton-schrift, #e8ede9); }
+
+/* Legende und Fuss. */
+.mtg .mtg-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .9rem; }
+.mtg .mtg-legende { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .78rem; color: var(--ton-schrift-2, #9aa6ad); }
+.mtg .mtg-legende span { display: inline-flex; align-items: center; gap: .35rem; }
+.mtg .mtg-legende i, .mtg .mtg-tipp i { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; flex: none; }
+.mtg .mtg-band-probe { opacity: .5; }
+.mtg .mtg-fuss { font-size: .74rem; color: var(--ton-schrift-3, #6f7a81); }
+.mtg .mtg-fuss.mtg-alt { color: #e8a33a; }
+
+/* Tooltip als div ueber dem SVG - formatierbar, anders als <title>. */
+.mtg .mtg-tipp { position: absolute; top: 4px; pointer-events: none; z-index: 3; display: grid; gap: .1rem; min-width: 10rem; padding: .5rem .7rem; border-radius: .6rem; background: var(--ton-flaeche-2, #2b3237); border: 1px solid var(--ton-linie-satt, rgba(138, 148, 158, .38)); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); font-size: .78rem; color: var(--ton-schrift, #e8ede9); }
+.mtg .mtg-tipp b { font-size: .8rem; }
+.mtg .mtg-tipp .mtg-tipp-art { font-style: normal; font-size: .7rem; color: var(--ton-schrift-3, #6f7a81); margin-top: -.15rem; }
+.mtg .mtg-tipp .mtg-tipp-wetter { display: flex; align-items: center; gap: .35rem; color: var(--ton-schrift-2, #9aa6ad); margin-bottom: .15rem; }
+.mtg .mtg-tipp .mtg-tipp-wetter i { font-family: bootstrap-icons; font-style: normal; width: auto; height: auto; font-size: .95rem; background: none !important; }
+.mtg .mtg-tipp span { display: flex; align-items: center; gap: .35rem; }
+.mtg .mtg-tipp em { font-style: normal; font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
+
+@media (max-width: 575.98px) {
+  .mtg .mtg-jetzt { gap: .2rem .7rem; }
+  .mtg .mtg-wert { font-size: .85rem; }
+  .mtg .mtg-unten { flex-direction: column; align-items: flex-start; }
+}
+
+.mtg.mtg-pause *, .mtg-pause .mtg * { animation-play-state: paused !important; }
+@media (prefers-reduced-motion: reduce) {
+  .mtg *, .mtg *::after { animation: none !important; transition: none !important; }
+}
+
 /* ==========================================================================
    Anzeige-Modus (index.php?action=anzeige, js/solar/anzeige.js): die
    Solar-Seite auf einem festen Display, z.B. Raspberry Pi mit 800 x 480.