diff --git a/src/components/OpenwbPageNavbar.vue b/src/components/OpenwbPageNavbar.vue
index 175d0b22d..df541b738 100644
--- a/src/components/OpenwbPageNavbar.vue
+++ b/src/components/OpenwbPageNavbar.vue
@@ -175,6 +175,14 @@
             >
               Lastmanagement
             </router-link>
+            <router-link
+              v-if="accessAllowed('ForecastConfiguration')"
+              to="/ForecastConfiguration"
+              class="dropdown-item"
+              active-class="active disabled"
+            >
+              PV-Prognose
+            </router-link>
             <router-link
               v-if="accessAllowed('ChargePointInstallation')"
               to="/ChargePointInstallation"
diff --git a/src/components/forecast/ForecastConfigMixin.vue b/src/components/forecast/ForecastConfigMixin.vue
new file mode 100644
index 000000000..d9ecbd867
--- /dev/null
+++ b/src/components/forecast/ForecastConfigMixin.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  props: {
+    forecast: { type: Object, required: true },
+  },
+  emits: ["update:configuration"],
+  methods: {
+    updateConfiguration(event, path = undefined) {
+      this.$emit("update:configuration", { value: event, object: path });
+    },
+  },
+};
+</script>
diff --git a/src/components/forecast/OpenwbForecastConfigFallback.vue b/src/components/forecast/OpenwbForecastConfigFallback.vue
new file mode 100644
index 000000000..280092a26
--- /dev/null
+++ b/src/components/forecast/OpenwbForecastConfigFallback.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="forecast-fallback">
+    <openwb-base-alert
+      v-if="Object.keys(forecast.configuration || {}).length == 0"
+      subtype="info"
+    >
+      Der Anbieter "{{ forecast.name }}" bietet keine Einstellungen.
+    </openwb-base-alert>
+    <div v-else>
+      <openwb-base-alert subtype="warning">
+        Es wurde keine Konfigurationsseite für den Anbieter "{{ forecast.name }}" gefunden. Die Einstellungen können als
+        JSON direkt bearbeitet werden.
+      </openwb-base-alert>
+      <openwb-base-textarea
+        title="Konfiguration"
+        subtype="json"
+        :model-value="forecast.configuration"
+        @update:model-value="updateConfiguration($event, 'configuration')"
+      >
+        <template #help> Bitte prüfe, ob die Eingaben richtig interpretiert werden. </template>
+      </openwb-base-textarea>
+      <openwb-base-alert subtype="info">
+        <pre>{{ JSON.stringify(forecast.configuration, undefined, 2) }}</pre>
+      </openwb-base-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import ForecastConfigMixin from "./ForecastConfigMixin.vue";
+
+export default {
+  name: "OpenwbForecastConfigFallback",
+  mixins: [ForecastConfigMixin],
+};
+</script>
diff --git a/src/components/forecast/OpenwbForecastProxy.vue b/src/components/forecast/OpenwbForecastProxy.vue
new file mode 100644
index 000000000..ca920eae3
--- /dev/null
+++ b/src/components/forecast/OpenwbForecastProxy.vue
@@ -0,0 +1,94 @@
+<template>
+  <openwb-base-heading> Einstellungen für Modul "{{ forecast.name }}" </openwb-base-heading>
+  <component
+    :is="forecastComponent"
+    :forecast="forecast"
+    @update:configuration="updateConfiguration($event)"
+  />
+</template>
+
+<script>
+import { defineAsyncComponent, markRaw } from "vue";
+import OpenwbForecastConfigFallback from "./OpenwbForecastConfigFallback.vue";
+
+const FORECAST_COMPONENT_MODULES = import.meta.glob("./*/forecast.vue");
+
+export default {
+  name: "OpenwbForecastProxy",
+  props: {
+    forecast: { type: Object, required: true },
+  },
+  emits: ["update:configuration"],
+  data() {
+    return {
+      providerComponentCache: {},
+    };
+  },
+  computed: {
+    providerComponentLoaders() {
+      return Object.entries(FORECAST_COMPONENT_MODULES).reduce((loaders, [path, loader]) => {
+        const match = path.match(/^\.\/([^/]+)\/forecast\.vue$/);
+        if (!match) {
+          return loaders;
+        }
+        return {
+          ...loaders,
+          [match[1]]: loader,
+        };
+      }, {});
+    },
+    normalizedProviderType() {
+      const rawType =
+        typeof this.forecast?.type === "string" && this.forecast.type.trim().length > 0
+          ? this.forecast.type
+          : this.forecast?.name;
+      if (typeof rawType !== "string") {
+        return null;
+      }
+      const trimmed = rawType.trim();
+      if (!trimmed) {
+        return null;
+      }
+      const loaderTypes = Object.keys(this.providerComponentLoaders);
+      if (loaderTypes.includes(trimmed)) {
+        return trimmed;
+      }
+      const lowered = trimmed.toLowerCase();
+      if (loaderTypes.includes(lowered)) {
+        return lowered;
+      }
+      const simplified = lowered.replace(/[^a-z0-9]/g, "");
+      return (
+        loaderTypes.find((providerType) => providerType.toLowerCase().replace(/[^a-z0-9]/g, "") === simplified) || null
+      );
+    },
+    forecastComponent() {
+      const providerType = this.normalizedProviderType;
+      if (!providerType) {
+        return OpenwbForecastConfigFallback;
+      }
+      const loader = this.providerComponentLoaders[providerType];
+      if (!loader) {
+        return OpenwbForecastConfigFallback;
+      }
+      return this.getProviderComponent(providerType, loader);
+    },
+  },
+  methods: {
+    getProviderComponent(providerType, loader) {
+      if (!this.providerComponentCache[providerType]) {
+        this.providerComponentCache[providerType] = markRaw(
+          defineAsyncComponent({
+            loader,
+            errorComponent: OpenwbForecastConfigFallback,
+          }),
+        );
+      }
+      return this.providerComponentCache[providerType];
+    },
+    updateConfiguration(event) {
+      this.$emit("update:configuration", event);
+    },
+  },
+};
+</script>
diff --git a/src/components/forecast/forecastsolar/forecast.vue b/src/components/forecast/forecastsolar/forecast.vue
new file mode 100644
index 000000000..6f14b4e1b
--- /dev/null
+++ b/src/components/forecast/forecastsolar/forecast.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <openwb-base-alert subtype="info">
+      Forecast.Solar wird von der Community gepflegt. Ohne API Key sind 12 Anfragen pro Stunde möglich.
+    </openwb-base-alert>
+    <openwb-base-alert subtype="warning">
+      <strong>Hinweis zur kostenlosen API:</strong> Die kostenlose API zeigt nur noch die verbleibenden Stunden des aktuellen Tages.
+      Bei mehrfachen Abfragen pro Tag verringert sich daher der Prognosewert kontinuierlich. Mit einem kostenpflichtigen API-Key 
+      erhält man die vollständige Tageshistorie und dieser Effekt tritt nicht auf.
+    </openwb-base-alert>
+    <openwb-base-number-input
+      title="Breitengrad"
+      :step="0.000001"
+      required
+      :model-value="forecast.configuration.latitude"
+      @update:model-value="updateConfiguration($event, 'configuration.latitude')"
+    >
+      <template #help> Dezimalgrad, z.B. 51.123456 </template>
+    </openwb-base-number-input>
+    <openwb-base-number-input
+      title="Längengrad"
+      :step="0.000001"
+      required
+      :model-value="forecast.configuration.longitude"
+      @update:model-value="updateConfiguration($event, 'configuration.longitude')"
+    >
+      <template #help> Dezimalgrad, z.B. 7.654321 </template>
+    </openwb-base-number-input>
+    <openwb-base-text-input
+      title="API Key (optional)"
+      subtype="password"
+      :model-value="forecast.configuration.api_key"
+      @update:model-value="updateConfiguration($event || null, 'configuration.api_key')"
+    >
+      <template #help>
+        Optional: API Key für einen bezahlten Forecast.Solar Account. Ohne Key gelten die Limits des Free Tiers.
+      </template>
+    </openwb-base-text-input>
+    <openwb-base-alert subtype="info">
+      Jede Dachfläche muss einzeln erfasst werden, auch wenn es nur eine Dachfläche gibt.
+    </openwb-base-alert>
+    <openwb-base-alert
+      v-if="stringRows.length >= 6"
+      subtype="warning"
+    >
+      Maximal 6 Dachflächen sind erlaubt.
+    </openwb-base-alert>
+    <openwb-base-alert
+      v-if="stringRows.length === 0"
+      subtype="secondary"
+    >
+      Noch keine Dachflächen konfiguriert.
+    </openwb-base-alert>
+    <openwb-base-card
+      v-for="(row, index) in stringRows"
+      :key="`fs-string-${index}`"
+      :title="row.name && row.name.trim() ? row.name : `Dachfläche ${index + 1}`"
+      class="mb-2"
+    >
+      <openwb-base-text-input
+        title="Name der Dachfläche"
+        :model-value="row.name"
+        @update:model-value="updateStringField(index, 'name', $event)"
+      />
+      <openwb-base-number-input
+        title="Leistung Dachfläche/String"
+        unit="kWp"
+        :min="0"
+        :step="0.01"
+        required
+        :model-value="row.peak_power_kw"
+        @update:model-value="updateStringField(index, 'peak_power_kw', $event)"
+      />
+      <openwb-base-number-input
+        title="Dachneigung"
+        unit="Grad"
+        :min="0"
+        :max="90"
+        :step="1"
+        required
+        :model-value="row.tilt"
+        @update:model-value="updateStringField(index, 'tilt', $event)"
+      />
+      <openwb-base-number-input
+        title="Ausrichtung"
+        unit="Grad"
+        :min="-180"
+        :max="180"
+        :step="1"
+        required
+        :model-value="row.azimuth"
+        @update:model-value="updateStringField(index, 'azimuth', $event)"
+      />
+      <openwb-base-alert subtype="info">
+        Ausrichtung: 0&deg; = S&uuml;den | -90&deg; = Osten | 90&deg; = Westen | 180&deg; = Norden
+      </openwb-base-alert>
+      <div class="d-flex justify-content-end">
+        <button
+          type="button"
+          class="btn btn-danger btn-sm"
+          title="Dachfläche entfernen"
+          @click="removeStringRow(index)"
+        >
+          <font-awesome-icon :icon="['fas', 'trash']" />
+        </button>
+      </div>
+    </openwb-base-card>
+    <button
+      type="button"
+      class="btn btn-success btn-sm mb-2"
+      :disabled="stringRows.length >= 6"
+      title="Dachfläche hinzufügen"
+      @click="addStringRow"
+    >
+      <font-awesome-icon :icon="['fas', 'plus']" />
+      Dachfläche hinzufügen
+    </button>
+  </div>
+</template>
+
+<script>
+import ForecastConfigMixin from "../ForecastConfigMixin.vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlus as fasPlus, faTrash as fasTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(fasPlus, fasTrash);
+
+export default {
+  name: "ForecastSolarForecastConfig",
+  components: { FontAwesomeIcon },
+  mixins: [ForecastConfigMixin],
+  computed: {
+    stringRows() {
+      return Array.isArray(this.forecast.configuration.strings) ? this.forecast.configuration.strings : [];
+    },
+  },
+  methods: {
+    addStringRow() {
+      if (this.stringRows.length >= 6) {
+        return;
+      }
+      const next = [
+        ...this.stringRows,
+        {
+          name: `Ausrichtung ${this.stringRows.length + 1}`,
+          peak_power_kw: this.forecast.configuration.peak_power_kw || 1,
+          tilt: this.forecast.configuration.tilt ?? 30,
+          azimuth: this.forecast.configuration.azimuth ?? 0,
+        },
+      ];
+      this.updateConfiguration(next, "configuration.strings");
+    },
+    removeStringRow(index) {
+      const next = this.stringRows.filter((_, rowIndex) => rowIndex !== index);
+      this.updateConfiguration(next, "configuration.strings");
+    },
+    updateStringField(index, key, value) {
+      const next = this.stringRows.map((row, rowIndex) => {
+        if (rowIndex !== index) {
+          return row;
+        }
+        return {
+          ...row,
+          [key]: value,
+        };
+      });
+      this.updateConfiguration(next, "configuration.strings");
+    },
+  },
+};
+</script>
diff --git a/src/components/forecast/openmeteo/forecast.vue b/src/components/forecast/openmeteo/forecast.vue
new file mode 100644
index 000000000..106ba79f9
--- /dev/null
+++ b/src/components/forecast/openmeteo/forecast.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <openwb-base-alert subtype="info">
+      Open-Meteo wird von der Community gepflegt. Es wird kein Account und kein API Key benötigt.
+    </openwb-base-alert>
+    <openwb-base-number-input
+      title="Breitengrad"
+      :step="0.000001"
+      required
+      :model-value="forecast.configuration.latitude"
+      @update:model-value="updateConfiguration($event, 'configuration.latitude')"
+    >
+      <template #help> Dezimalgrad, z.B. 51.123456 </template>
+    </openwb-base-number-input>
+    <openwb-base-number-input
+      title="Längengrad"
+      :step="0.000001"
+      required
+      :model-value="forecast.configuration.longitude"
+      @update:model-value="updateConfiguration($event, 'configuration.longitude')"
+    >
+      <template #help> Dezimalgrad, z.B. 7.654321 </template>
+    </openwb-base-number-input>
+    <openwb-base-text-input
+      title="Zeitzone"
+      required
+      :model-value="forecast.configuration.timezone"
+      @update:model-value="updateConfiguration($event, 'configuration.timezone')"
+    >
+      <template #help>
+        IANA-Zeitzone, z.B. Europe/Berlin. Liste: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+      </template>
+    </openwb-base-text-input>
+    <openwb-base-number-input
+      title="Systemverlust"
+      :min="0"
+      :max="0.95"
+      :step="0.01"
+      required
+      :model-value="forecast.configuration.system_loss"
+      @update:model-value="updateConfiguration($event, 'configuration.system_loss')"
+    >
+      <template #help>
+        Verlustfaktor als Dezimalzahl. Typischer Startwert: 0.14 (14%). Übliche Spanne: 0.10 bis 0.20.
+      </template>
+    </openwb-base-number-input>
+    <openwb-base-alert subtype="info">
+      Jede Dachfläche muss einzeln erfasst werden, auch wenn es nur eine Dachfläche gibt.
+    </openwb-base-alert>
+    <openwb-base-alert
+      v-if="stringRows.length >= 6"
+      subtype="warning"
+    >
+      Maximal 6 Dachflächen sind erlaubt.
+    </openwb-base-alert>
+    <openwb-base-alert
+      v-if="stringRows.length === 0"
+      subtype="secondary"
+    >
+      Noch keine Dachflächen konfiguriert.
+    </openwb-base-alert>
+    <openwb-base-card
+      v-for="(row, index) in stringRows"
+      :key="`om-string-${index}`"
+      :title="row.name && row.name.trim() ? row.name : `Dachfläche ${index + 1}`"
+      class="mb-2"
+    >
+      <openwb-base-text-input
+        title="Name der Dachfläche"
+        :model-value="row.name"
+        @update:model-value="updateStringField(index, 'name', $event)"
+      />
+      <openwb-base-number-input
+        title="Leistung Dachfläche/String"
+        unit="kWp"
+        :min="0"
+        :step="0.01"
+        required
+        :model-value="row.peak_power_kw"
+        @update:model-value="updateStringField(index, 'peak_power_kw', $event)"
+      />
+      <openwb-base-number-input
+        title="Dachneigung"
+        unit="Grad"
+        :min="0"
+        :max="90"
+        :step="1"
+        required
+        :model-value="row.tilt"
+        @update:model-value="updateStringField(index, 'tilt', $event)"
+      />
+      <openwb-base-number-input
+        title="Ausrichtung"
+        unit="Grad"
+        :min="-180"
+        :max="180"
+        :step="1"
+        required
+        :model-value="row.azimuth"
+        @update:model-value="updateStringField(index, 'azimuth', $event)"
+      />
+      <openwb-base-alert subtype="info">
+        Ausrichtung: 0&deg; = S&uuml;den | -90&deg; = Osten | 90&deg; = Westen | 180&deg; = Norden
+      </openwb-base-alert>
+      <div class="d-flex justify-content-end">
+        <button
+          type="button"
+          class="btn btn-danger btn-sm"
+          title="Dachfläche entfernen"
+          @click="removeStringRow(index)"
+        >
+          <font-awesome-icon :icon="['fas', 'trash']" />
+        </button>
+      </div>
+    </openwb-base-card>
+    <button
+      type="button"
+      class="btn btn-success btn-sm mb-2"
+      :disabled="stringRows.length >= 6"
+      title="Dachfläche hinzufügen"
+      @click="addStringRow"
+    >
+      <font-awesome-icon :icon="['fas', 'plus']" />
+      Dachfläche hinzufügen
+    </button>
+  </div>
+</template>
+
+<script>
+import ForecastConfigMixin from "../ForecastConfigMixin.vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlus as fasPlus, faTrash as fasTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(fasPlus, fasTrash);
+
+export default {
+  name: "OpenMeteoForecastConfig",
+  components: { FontAwesomeIcon },
+  mixins: [ForecastConfigMixin],
+  computed: {
+    stringRows() {
+      return Array.isArray(this.forecast.configuration.strings) ? this.forecast.configuration.strings : [];
+    },
+  },
+  methods: {
+    addStringRow() {
+      if (this.stringRows.length >= 6) {
+        return;
+      }
+      const next = [
+        ...this.stringRows,
+        {
+          name: `Ausrichtung ${this.stringRows.length + 1}`,
+          peak_power_kw: this.forecast.configuration.peak_power_kw || 1,
+          tilt: this.forecast.configuration.tilt ?? 30,
+          azimuth: this.forecast.configuration.azimuth ?? 0,
+        },
+      ];
+      this.updateConfiguration(next, "configuration.strings");
+    },
+    removeStringRow(index) {
+      const next = this.stringRows.filter((_, rowIndex) => rowIndex !== index);
+      this.updateConfiguration(next, "configuration.strings");
+    },
+    updateStringField(index, key, value) {
+      const next = this.stringRows.map((row, rowIndex) => {
+        if (rowIndex !== index) {
+          return row;
+        }
+        return {
+          ...row,
+          [key]: value,
+        };
+      });
+      this.updateConfiguration(next, "configuration.strings");
+    },
+  },
+};
+</script>
diff --git a/src/components/forecast/pvnode/forecast.vue b/src/components/forecast/pvnode/forecast.vue
new file mode 100644
index 000000000..6f7875e45
--- /dev/null
+++ b/src/components/forecast/pvnode/forecast.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <openwb-base-alert subtype="info">
+      PVNode wird von der Community gepflegt und liefert die Prognosewerte direkt aus der API-Response. Bitte richte
+      vorher Standort und PV-Flächen auf https://pvnode.com ein und erstelle dort einen Account.
+    </openwb-base-alert>
+    <openwb-base-alert subtype="info">
+      <strong>API-Limits:</strong> Bei kostenlosen Accounts ist nur 1 Prognoseabruf pro Tag möglich. Weitere Abrufe
+      werden vom API gecacht und zählen nicht gegen das Limit. Bei kostenpflichtigen Tarifen sind mehr Abrufe pro Tag
+      möglich.
+    </openwb-base-alert>
+    <openwb-base-text-input
+      title="Plant ID"
+      required
+      :model-value="forecast.configuration.plant_id"
+      @update:model-value="updateConfiguration($event, 'configuration.plant_id')"
+    />
+    <openwb-base-text-input
+      title="API Key"
+      subtype="password"
+      required
+      :model-value="forecast.configuration.api_key"
+      @update:model-value="updateConfiguration($event, 'configuration.api_key')"
+    />
+  </div>
+</template>
+
+<script>
+import ForecastConfigMixin from "../ForecastConfigMixin.vue";
+
+export default {
+  name: "PvNodeForecastConfig",
+  mixins: [ForecastConfigMixin],
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index 89f33ac7e..9248abd45 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -105,6 +105,15 @@ const routes = [
     },
     component: () => import("../views/LoadManagementConfiguration.vue"),
   },
+  {
+    path: "/ForecastConfiguration",
+    name: "ForecastConfiguration",
+    meta: {
+      heading: "Konfiguration - PV-Prognose",
+      checkPermissions: true,
+    },
+    component: () => import("../views/ForecastConfiguration.vue"),
+  },
   {
     path: "/ChargePointInstallation",
     name: "ChargePointInstallation",
diff --git a/src/store/index.js b/src/store/index.js
index f712c6f3b..0875fdb1f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -126,7 +126,7 @@ export default createStore({
       const setPath = (object, path, value) =>
         path.split(".").reduce((o, p, i) => (o[p] = path.split(".").length === i + 1 ? value : o[p] || {}), object);
 
-      if (message.topic in state.mqtt || !(message.topic in state.examples)) {
+      if (message.topic in state.mqtt || !state.examples || !(message.topic in state.examples)) {
         if (message.objectPath != undefined) {
           setPath(state.mqtt[message.topic], message.objectPath, message.payload);
         } else {
diff --git a/src/views/DebugConfiguration.vue b/src/views/DebugConfiguration.vue
index 67e7f971f..2a5b3d7e5 100644
--- a/src/views/DebugConfiguration.vue
+++ b/src/views/DebugConfiguration.vue
@@ -75,6 +75,10 @@ export default {
           title: "MQTT-Log",
           fileName: "/openWB/ramdisk/mqtt.log",
         },
+        {
+          title: "Forecast-Log",
+          fileName: "/openWB/ramdisk/forecast.log",
+        },
         {
           title: "SoC-Log",
           fileName: "/openWB/ramdisk/soc.log",
diff --git a/src/views/ForecastConfiguration.vue b/src/views/ForecastConfiguration.vue
new file mode 100644
index 000000000..9eaef990d
--- /dev/null
+++ b/src/views/ForecastConfiguration.vue
@@ -0,0 +1,600 @@
+<template>
+  <div class="forecastConfig">
+    <form name="forecastConfigForm">
+      <openwb-base-card title="PV-Prognose">
+        <openwb-base-alert subtype="info">
+          Wähle einen Forecast-Anbieter und hinterlege die erforderlichen Zugangsdaten bzw. Standortparameter.
+        </openwb-base-alert>
+
+        <openwb-base-select-input
+          title="Anbieter"
+          :options="providerOptions"
+          :model-value="selectedProviderType"
+          @update:model-value="updateProviderType"
+        />
+
+        <div v-if="currentForecastProvider.type">
+          <openwb-forecast-proxy
+            :forecast="currentForecastProvider"
+            @update:configuration="updateConfiguration('openWB/optional/forecast/provider', $event)"
+          />
+        </div>
+        <openwb-base-alert
+          v-else
+          subtype="warning"
+        >
+          Es ist derzeit kein Forecast-Anbieter aktiv.
+        </openwb-base-alert>
+
+        <hr />
+
+        <div class="row justify-content-center mb-1 w-100">
+          <div class="col-md-4 d-flex py-1 justify-content-center">
+            <button
+              type="button"
+              class="btn btn-success btn-block btn-sm"
+              @click="$emit('save', mqttTopicsToPublish)"
+            >
+              Einstellungen Speichern
+            </button>
+          </div>
+          <div class="col-md-4 d-flex py-1 justify-content-center">
+            <button
+              type="button"
+              class="btn btn-danger btn-block btn-sm"
+              @click="resetProviderAndForecastData"
+            >
+              Anbieter entfernen und Prognose zurücksetzen
+            </button>
+          </div>
+        </div>
+      </openwb-base-card>
+
+      <openwb-base-card title="Prognose-Info">
+        <openwb-base-alert subtype="info">
+          Aktuelle Prognose: Heute
+          {{ formatNumber($store.state.mqtt["openWB/optional/forecast/get/today_kwh"], 2, 2) || "0.00" }}
+          kWh, morgen:
+          {{ formatNumber($store.state.mqtt["openWB/optional/forecast/get/tomorrow_kwh"], 2, 2) || "0.00" }}
+          kWh
+        </openwb-base-alert>
+        <openwb-base-text-input
+          title="Letzte Aktualisierung"
+          readonly
+          :model-value="lastUpdateTimeText"
+        />
+        <openwb-base-text-input
+          title="Nächste Aktualisierung"
+          readonly
+          :model-value="nextQueryTimeText"
+        >
+          <template #help>
+            Die Prognose wird automatisch um 05:00, 08:00, 11:00, 14:00, 17:00 und 20:00 Uhr aktualisiert.
+          </template>
+        </openwb-base-text-input>
+        <openwb-base-text-input
+          title="Status"
+          readonly
+          :model-value="faultStatusText"
+        />
+        <div class="row justify-content-center mb-1 w-100">
+          <div class="col-md-4 d-flex py-1 justify-content-center">
+            <button
+              type="button"
+              class="btn btn-outline-primary btn-block btn-sm"
+              @click="triggerForecastUpdate"
+            >
+              Prognose aktualisieren
+            </button>
+          </div>
+        </div>
+        <openwb-base-alert subtype="warning">
+          Je nach Anbieter ist die Anzahl der API-Aufrufe pro Stunde begrenzt (z.B. Forecast.Solar: 12 Aufrufe/Stunde).
+          Ein manuelles Aktualisieren kann daher fehlschlagen, wenn das Limit bereits erreicht wurde.
+        </openwb-base-alert>
+      </openwb-base-card>
+
+      <openwb-base-card title="Prognose-Verlauf (Leistung)">
+        <div class="d-flex justify-content-center mb-2">
+          <div class="btn-group btn-group-sm">
+            <button
+              :class="['btn', forecastDayFilter === 'both' ? 'btn-primary' : 'btn-outline-primary']"
+              type="button"
+              @click="forecastDayFilter = 'both'"
+            >
+              Heute + Morgen
+            </button>
+            <button
+              :class="['btn', forecastDayFilter === 'today' ? 'btn-primary' : 'btn-outline-primary']"
+              type="button"
+              @click="forecastDayFilter = 'today'"
+            >
+              Heute
+            </button>
+            <button
+              :class="['btn', forecastDayFilter === 'tomorrow' ? 'btn-primary' : 'btn-outline-primary']"
+              type="button"
+              @click="forecastDayFilter = 'tomorrow'"
+            >
+              Morgen
+            </button>
+          </div>
+        </div>
+        <openwb-base-alert
+          v-if="!hasForecastValues"
+          subtype="info"
+        >
+          Noch keine Prognose-Werte vorhanden. Führe ggf. "Prognose aktualisieren" aus.
+        </openwb-base-alert>
+        <div
+          v-else
+          class="openwb-chart"
+        >
+          <chartjs-line
+            :data="forecastChartData"
+            :options="forecastChartOptions"
+          />
+        </div>
+      </openwb-base-card>
+
+      <openwb-base-submit-buttons
+        form-name="forecastConfigForm"
+        @save="$emit('save', mqttTopicsToPublish)"
+        @reset="$emit('reset')"
+      />
+    </form>
+  </div>
+</template>
+
+<script>
+import ComponentState from "../components/mixins/ComponentState.vue";
+import OpenwbForecastProxy from "../components/forecast/OpenwbForecastProxy.vue";
+import { Line as ChartjsLine } from "vue-chartjs";
+import "chartjs-adapter-luxon";
+import {
+  Chart,
+  Tooltip,
+  Legend,
+  LineController,
+  LineElement,
+  PointElement,
+  LinearScale,
+  TimeScale,
+  Filler,
+} from "chart.js";
+
+Chart.register(Tooltip, Legend, LineController, LineElement, PointElement, LinearScale, TimeScale, Filler);
+
+export default {
+  name: "OpenwbForecastConfiguration",
+  components: {
+    OpenwbForecastProxy,
+    ChartjsLine,
+  },
+  mixins: [ComponentState],
+  emits: ["save", "reset"],
+  data() {
+    return {
+      mqttTopics: [
+        { topic: "openWB/system/configurable/forecasts", writeable: false },
+        { topic: "openWB/optional/forecast/configured", writeable: false },
+        { topic: "openWB/optional/forecast/provider", writeable: true },
+        { topic: "openWB/optional/forecast/get/values", writeable: false },
+        { topic: "openWB/optional/forecast/get/today_values", writeable: false },
+        { topic: "openWB/optional/forecast/get/tomorrow_values", writeable: false },
+        { topic: "openWB/optional/forecast/get/daily_kwh", writeable: false },
+        { topic: "openWB/optional/forecast/get/today_kwh", writeable: false },
+        { topic: "openWB/optional/forecast/get/tomorrow_kwh", writeable: false },
+        { topic: "openWB/optional/forecast/get/fault_state", writeable: false },
+        { topic: "openWB/optional/forecast/get/fault_str", writeable: false },
+        { topic: "openWB/optional/forecast/get/next_query_time", writeable: false },
+        { topic: "openWB/optional/forecast/get/last_update_time", writeable: false },
+      ],
+      providerConfigCache: {},
+      forecastDayFilter: "both",
+    };
+  },
+  computed: {
+    configurableForecasts() {
+      const options = this.$store.state.mqtt["openWB/system/configurable/forecasts"];
+      return Array.isArray(options) ? options : [];
+    },
+    providerDefinitionByType() {
+      return this.configurableForecasts.reduce((definitions, option) => {
+        if (!option || typeof option !== "object" || typeof option.value !== "string") {
+          return definitions;
+        }
+        return {
+          ...definitions,
+          [option.value]: option,
+        };
+      }, {});
+    },
+    providerOptions() {
+      const options = this.configurableForecasts.map((option) => {
+        const isEmpty = option?.value === null || option?.value === undefined || option?.value === "";
+        return {
+          value: isEmpty ? "" : option.value,
+          text: option?.text || (isEmpty ? "Kein Anbieter" : option.value),
+        };
+      });
+      const selectedType = this.selectedProviderType;
+      if (selectedType && !options.some((option) => option.value === selectedType)) {
+        options.unshift({
+          value: selectedType,
+          text: `Unbekannter Anbieter (${selectedType})`,
+        });
+      }
+      if (options.some((option) => option.value === "")) {
+        return options;
+      }
+      return [{ value: "", text: "Kein Anbieter" }, ...options];
+    },
+    currentForecastProviderRaw() {
+      return this.$store.state.mqtt["openWB/optional/forecast/provider"];
+    },
+    currentForecastProvider() {
+      const provider = this.currentForecastProviderRaw;
+      if (provider && typeof provider === "object") {
+        return this.normalizeProviderObject(provider);
+      }
+      if (typeof provider === "string") {
+        const normalizedType = this.normalizeProviderType(provider);
+        if (normalizedType) {
+          return this.createProviderByType(normalizedType);
+        }
+      }
+      return { type: null, configuration: {} };
+    },
+    selectedProviderType() {
+      if (typeof this.currentForecastProviderRaw === "string") {
+        return this.normalizeProviderType(this.currentForecastProviderRaw) || this.currentForecastProviderRaw || "";
+      }
+      const currentType = this.currentForecastProvider?.type;
+      return this.normalizeProviderType(currentType) || currentType || "";
+    },
+    forecastValues() {
+      const values = this.$store.state.mqtt["openWB/optional/forecast/get/values"];
+      return values && typeof values === "object" ? values : {};
+    },
+    forecastValues48h() {
+      const todayStart = new Date();
+      todayStart.setHours(0, 0, 0, 0);
+      const todayStartSec = todayStart.getTime() / 1000;
+      const tomorrowStartSec = todayStartSec + 86400;
+      const dayAfterStartSec = tomorrowStartSec + 86400;
+      return Object.fromEntries(
+        Object.entries(this.forecastValues).filter(([timestamp]) => {
+          const ts = Number(timestamp);
+          if (!Number.isFinite(ts)) return false;
+          if (this.forecastDayFilter === "today") return ts >= todayStartSec && ts < tomorrowStartSec;
+          if (this.forecastDayFilter === "tomorrow") return ts >= tomorrowStartSec && ts < dayAfterStartSec;
+          return ts >= todayStartSec && ts < dayAfterStartSec;
+        }),
+      );
+    },
+    hasForecastValues() {
+      return Object.keys(this.forecastValues48h).length > 0;
+    },
+    forecastChartData() {
+      const points = Object.entries(this.forecastValues48h)
+        .map(([timestamp, value]) => ({
+          x: Number(timestamp) * 1000,
+          y: Number(value) / 1000,
+        }))
+        .filter((item) => Number.isFinite(item.x) && Number.isFinite(item.y))
+        .sort((a, b) => a.x - b.x);
+
+      return {
+        datasets: [
+          {
+            label: "Prognose Leistung",
+            borderColor: "#28a745",
+            backgroundColor: "rgba(40, 167, 69, 0.2)",
+            fill: true,
+            pointRadius: 0,
+            pointHoverRadius: 3,
+            borderWidth: 2,
+            tension: 0.2,
+            data: points,
+          },
+        ],
+      };
+    },
+    forecastChartOptions() {
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        parsing: false,
+        interaction: {
+          mode: "index",
+          intersect: false,
+        },
+        plugins: {
+          legend: { display: true },
+          tooltip: {
+            callbacks: {
+              title: (items) =>
+                items[0]
+                  ? new Date(items[0].parsed.x).toLocaleString([], { dateStyle: "short", timeStyle: "short" })
+                  : "",
+              label: (item) => ` ${item.parsed.y.toFixed(2)} kW`,
+            },
+          },
+        },
+        scales: {
+          x: {
+            type: "time",
+            time: {
+              tooltipFormat: "dd.MM.yyyy HH:mm",
+              displayFormats: {
+                hour: "dd.MM HH:mm",
+              },
+            },
+            title: {
+              display: true,
+              text: "Zeit",
+            },
+          },
+          y: {
+            title: {
+              display: true,
+              text: "Leistung (kW)",
+            },
+          },
+        },
+      };
+    },
+    lastUpdateTimeText() {
+      const timestamp = this.$store.state.mqtt["openWB/optional/forecast/get/last_update_time"];
+      if (!timestamp) return "-";
+      return new Date(Number(timestamp) * 1000).toLocaleString();
+    },
+    nextQueryTimeText() {
+      const timestamp = this.$store.state.mqtt["openWB/optional/forecast/get/next_query_time"];
+      if (!timestamp) {
+        return "-";
+      }
+      return new Date(Number(timestamp) * 1000).toLocaleString();
+    },
+    faultStatusText() {
+      const faultText = this.$store.state.mqtt["openWB/optional/forecast/get/fault_str"];
+      if (!faultText || faultText.length === 0) {
+        return "OK";
+      }
+      const nextQueryTime = this.$store.state.mqtt["openWB/optional/forecast/get/next_query_time"];
+      if (nextQueryTime) {
+        const timeStr = new Date(Number(nextQueryTime) * 1000).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        });
+        return `${faultText} Nächster Versuch: ${timeStr} Uhr.`;
+      }
+      return faultText;
+    },
+  },
+  watch: {
+    currentForecastProviderRaw() {
+      this.cacheProviderConfiguration(this.currentForecastProviderRaw);
+      this.normalizeProviderTopic();
+    },
+  },
+  mounted() {
+    this.normalizeProviderTopic();
+  },
+  methods: {
+    areProvidersEqual(a, b) {
+      if (!a || !b || typeof a !== "object" || typeof b !== "object") {
+        return a === b;
+      }
+      const aConfig = a.configuration && typeof a.configuration === "object" ? a.configuration : {};
+      const bConfig = b.configuration && typeof b.configuration === "object" ? b.configuration : {};
+      return (
+        (a.type || null) === (b.type || null) &&
+        (a.name || null) === (b.name || null) &&
+        Boolean(a.official) === Boolean(b.official) &&
+        JSON.stringify(aConfig) === JSON.stringify(bConfig)
+      );
+    },
+    normalizeProviderType(type) {
+      if (typeof type !== "string") {
+        return null;
+      }
+      const trimmed = type.trim();
+      if (!trimmed) {
+        return null;
+      }
+      if (this.providerDefinitionByType[trimmed]) {
+        return trimmed;
+      }
+      const lowered = trimmed.toLowerCase();
+      const knownTypes = Object.keys(this.providerDefinitionByType);
+      if (knownTypes.includes(lowered)) {
+        return lowered;
+      }
+      const simplified = lowered.replace(/[^a-z0-9]/g, "");
+      const match = knownTypes.find(
+        (providerType) => providerType.toLowerCase().replace(/[^a-z0-9]/g, "") === simplified,
+      );
+      return match || trimmed;
+    },
+    normalizeProviderObject(provider) {
+      if (!provider || typeof provider !== "object") {
+        return { type: null, configuration: {} };
+      }
+      const normalizedType = this.normalizeProviderType(provider.type || provider.name);
+      if (!normalizedType) {
+        return provider;
+      }
+      const definition = this.providerDefinitionByType[normalizedType];
+      return {
+        ...provider,
+        name: provider.name || definition?.text || normalizedType,
+        type: normalizedType,
+        official: typeof provider.official === "boolean" ? provider.official : definition?.official,
+        configuration: this.ensureProviderConfiguration(normalizedType, provider.configuration || {}),
+      };
+    },
+    publishForecastProvider(providerConfig) {
+      this.$root.doPublish("openWB/set/optional/forecast/provider", providerConfig);
+    },
+    resetProviderAndForecastData() {
+      this.providerConfigCache = {};
+      const resetProvider = { type: null, configuration: {} };
+      this.updateState("openWB/optional/forecast/provider", resetProvider);
+      this.publishForecastProvider(resetProvider);
+      this.updateState("openWB/optional/forecast/configured", false);
+      this.updateState("openWB/optional/forecast/get/values", {});
+      this.updateState("openWB/optional/forecast/get/today_values", {});
+      this.updateState("openWB/optional/forecast/get/tomorrow_values", {});
+      this.updateState("openWB/optional/forecast/get/daily_kwh", {});
+      this.updateState("openWB/optional/forecast/get/today_kwh", 0);
+      this.updateState("openWB/optional/forecast/get/tomorrow_kwh", 0);
+      this.updateState("openWB/optional/forecast/get/next_query_time", null);
+      this.updateState("openWB/optional/forecast/get/fault_state", 0);
+      this.updateState("openWB/optional/forecast/get/fault_str", "Kein Fehler.");
+      this.$emit("save", this.mqttTopicsToPublish);
+    },
+    cacheProviderConfiguration(provider) {
+      if (!provider || typeof provider !== "object") {
+        return;
+      }
+      const normalizedType = this.normalizeProviderType(provider.type || provider.name);
+      if (!normalizedType) {
+        return;
+      }
+      this.providerConfigCache[normalizedType] = {
+        ...provider,
+        type: normalizedType,
+        configuration:
+          provider.configuration && typeof provider.configuration === "object" ? { ...provider.configuration } : {},
+      };
+    },
+    ensureProviderConfiguration(type, configuration = {}) {
+      const nextConfiguration = {
+        ...configuration,
+      };
+      const hasStringsKey = Object.prototype.hasOwnProperty.call(nextConfiguration, "strings");
+      if (hasStringsKey) {
+        const hasStrings = Array.isArray(nextConfiguration.strings) && nextConfiguration.strings.length > 0;
+        if (!hasStrings) {
+          nextConfiguration.strings = [
+            {
+              name: "Ausrichtung 1",
+              peak_power_kw: nextConfiguration.peak_power_kw || 1,
+              tilt: nextConfiguration.tilt ?? 30,
+              azimuth: nextConfiguration.azimuth ?? 0,
+            },
+          ];
+        }
+      }
+      return nextConfiguration;
+    },
+    createProviderByType(type, configuration = undefined) {
+      const definition = this.providerDefinitionByType[type];
+      const cachedProvider = this.providerConfigCache[type];
+      const cachedConfiguration =
+        cachedProvider && cachedProvider.configuration && typeof cachedProvider.configuration === "object"
+          ? cachedProvider.configuration
+          : {};
+      if (!definition) {
+        return {
+          name: type,
+          type,
+          official: false,
+          configuration: this.ensureProviderConfiguration(type, {
+            ...cachedConfiguration,
+            ...(configuration && typeof configuration === "object" ? configuration : {}),
+          }),
+        };
+      }
+      const defaults =
+        definition.defaults && typeof definition.defaults === "object"
+          ? JSON.parse(JSON.stringify(definition.defaults))
+          : { type, configuration: {} };
+      return {
+        ...defaults,
+        name: defaults.name || definition.text || type,
+        type,
+        official: typeof defaults.official === "boolean" ? defaults.official : Boolean(definition.official),
+        configuration: this.ensureProviderConfiguration(type, {
+          ...(defaults.configuration && typeof defaults.configuration === "object" ? defaults.configuration : {}),
+          ...cachedConfiguration,
+          ...(configuration && typeof configuration === "object" ? configuration : {}),
+        }),
+      };
+    },
+    normalizeProviderTopic() {
+      const provider = this.currentForecastProviderRaw;
+      if (typeof provider === "string") {
+        const normalizedType = this.normalizeProviderType(provider);
+        if (normalizedType) {
+          this.updateState("openWB/optional/forecast/provider", this.createProviderByType(normalizedType));
+        }
+        return;
+      }
+      const normalizedProvider = this.normalizeProviderObject(provider);
+      this.cacheProviderConfiguration(normalizedProvider);
+      if (provider && !this.areProvidersEqual(normalizedProvider, provider)) {
+        this.updateState("openWB/optional/forecast/provider", normalizedProvider);
+      }
+    },
+    ensureEditableProviderTopic() {
+      const topic = "openWB/optional/forecast/provider";
+      const provider = this.$store.state.mqtt[topic];
+      if (provider && typeof provider === "object") {
+        return;
+      }
+      const fallbackType =
+        this.selectedProviderType ||
+        (typeof this.currentForecastProviderRaw === "string" ? this.currentForecastProviderRaw : null);
+      const normalizedType = this.normalizeProviderType(fallbackType);
+      if (!normalizedType) {
+        return;
+      }
+      this.updateState(topic, this.createProviderByType(normalizedType));
+    },
+    updateProviderType(type) {
+      this.cacheProviderConfiguration(this.currentForecastProviderRaw);
+      if (!type) {
+        // Ignore empty initialization events from the select component.
+        // A real user-triggered reset only happens when a provider was selected before.
+        if (!this.selectedProviderType) {
+          return;
+        }
+        const resetProvider = { type: null, configuration: {} };
+        this.updateState("openWB/optional/forecast/provider", resetProvider);
+        this.publishForecastProvider(resetProvider);
+        return;
+      }
+      const normalizedType = this.normalizeProviderType(type);
+      if (!normalizedType) {
+        return;
+      }
+      const existing = this.currentForecastProvider;
+      const nextProvider = this.createProviderByType(
+        normalizedType,
+        existing.type === normalizedType ? existing.configuration : {},
+      );
+      this.updateState("openWB/optional/forecast/provider", nextProvider);
+      // Persist provider switch immediately to avoid race conditions with retained state.
+      this.publishForecastProvider(nextProvider);
+    },
+    updateConfiguration(topic, event) {
+      if (topic === "openWB/optional/forecast/provider" && event?.object) {
+        this.ensureEditableProviderTopic();
+      }
+      this.updateState(topic, event.value, event.object);
+    },
+    triggerForecastUpdate() {
+      this.$root.doPublish("openWB/set/optional/forecast/get/force_update", true, false);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.openwb-chart {
+  min-height: 420px;
+}
+</style>