diff --git a/public/modules/electricity_pricing/flexible_tariffs/naturstrom/naturstrom.php b/public/modules/electricity_pricing/flexible_tariffs/naturstrom/naturstrom.php
new file mode 100644
index 000000000..c4a7f6cde
--- /dev/null
+++ b/public/modules/electricity_pricing/flexible_tariffs/naturstrom/naturstrom.php
@@ -0,0 +1,171 @@
+<?php
+header("Content-type: application/json");
+
+function naturstrom_connect($url, $returntransfer = 1, $referer = "", $http_header = "", $post = "", $need_header = 0, $cookies = "", $timeout = 10)
+{
+  if (!empty($post)) {
+    $cpost = 1;
+  } else {
+    $cpost = 0;
+  }
+  if (is_array($http_header)) {
+    $chheader = 1;
+  } else {
+    $chheader = 0;
+  }
+
+  $ch = curl_init();
+  curl_setopt($ch, CURLOPT_URL, $url);
+  curl_setopt($ch, CURLOPT_RETURNTRANSFER, $returntransfer);
+  curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
+  curl_setopt($ch, CURLOPT_HEADER, $need_header);
+  curl_setopt($ch, CURLOPT_POST, $cpost);
+  curl_setopt($ch, CURLOPT_FRESH_CONNECT, 0);
+  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
+  curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
+  if (defined('CURL_SSLVERSION_MAX_TLSv1_2')) curl_setopt($ch, CURLOPT_SSLVERSION, CURL_SSLVERSION_MAX_TLSv1_2); // FM - force tls1.2
+  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
+
+  if (!empty($referer)) {
+    curl_setopt($ch, CURLOPT_REFERER, $referer);
+  }
+
+  if ($chheader == 1) {
+    curl_setopt($ch, CURLOPT_HTTPHEADER, $http_header);
+  }
+
+  if ($cpost == 1) {
+    curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
+  }
+
+  if (!empty($cookies)) {
+    curl_setopt($ch, CURLOPT_COOKIE, $cookies);
+  }
+
+  $response = curl_exec($ch);
+  $header = curl_getinfo($ch);
+  curl_close($ch);
+
+  return array("response" => $response, "header" => $header);
+}
+
+
+function return_msg($code, $msg, $exit = false)
+{
+  http_response_code($code);
+  echo $msg;
+  if ($exit) {
+    exit;
+  }
+}
+
+
+function exchange_token($oauth_base_url, $data, $user_agent)
+{
+  $token_url = rtrim($oauth_base_url, "/") . "/api/public-auth/oauth2/token";
+
+  $grant_type = isset($data["grant_type"]) ? $data["grant_type"] : "authorization_code";
+  $client_id = isset($data["client_id"]) ? $data["client_id"] : "";
+  $code = isset($data["code"]) ? $data["code"] : "";
+  $code_verifier = isset($data["code_verifier"]) ? $data["code_verifier"] : "";
+  $redirect_uri = isset($data["redirect_uri"]) ? $data["redirect_uri"] : "";
+
+  if (empty($client_id) || empty($code) || empty($code_verifier) || empty($redirect_uri)) {
+    return_msg(400, json_encode(array("error" => "missing_fields", "message" => "client_id, code, code_verifier und redirect_uri sind erforderlich.")), true);
+  }
+
+  $http_header = array(
+    'Content-Type: application/x-www-form-urlencoded',
+    'Accept: application/json',
+    'User-Agent: ' . $user_agent,
+  );
+  $post = http_build_query(array(
+    "grant_type" => $grant_type,
+    "client_id" => $client_id,
+    "code" => $code,
+    "code_verifier" => $code_verifier,
+    "redirect_uri" => $redirect_uri,
+  ));
+
+  $response = naturstrom_connect($token_url, 1, "", $http_header, $post, 0);
+  if ($response["header"]["http_code"] >= 400) {
+    return_msg($response["header"]["http_code"], $response["response"], true);
+  }
+
+  $raw_response = $response["response"];
+  $tokens = json_decode($raw_response, true);
+
+  if (!is_array($tokens)) {
+    return_msg(502, json_encode(array(
+      "error" => "invalid_token_response",
+      "message" => "Token-Antwort ist kein gültiges JSON.",
+      "raw_response" => $raw_response,
+    )), true);
+  }
+
+  if (empty($tokens['access_token'])) {
+    return_msg(500, json_encode(array(
+      "error" => "token_issue",
+      "message" => "Token-Antwort enthält kein access_token.",
+      "provider_response" => $tokens,
+      "raw_response" => $raw_response,
+    )), true);
+  }
+
+  $now = new DateTime();
+  $tokens["created_at"] = $now->getTimestamp();
+
+  return_msg(200, json_encode($tokens));
+}
+
+function fetch_accounts($oauth_base_url, $data, $user_agent)
+{
+  $access_token = isset($data["access_token"]) ? $data["access_token"] : "";
+  if (empty($access_token)) {
+    return_msg(400, json_encode(array("error" => "missing_fields", "message" => "access_token ist erforderlich.")), true);
+  }
+
+  $accounts_url = rtrim($oauth_base_url, "/") . "/api/public/accounts";
+  
+  $http_header = array(
+    'Accept: application/json',
+    'Authorization: Bearer ' . $access_token,
+    'User-Agent: ' . $user_agent,
+  );
+
+  $response = naturstrom_connect($accounts_url, 1, "", $http_header, "", 0);
+
+  if ($response["header"]["http_code"] >= 400) {
+    return_msg($response["header"]["http_code"], $response["response"], true);
+  }
+
+  $raw_response = $response["response"];
+  $decoded = json_decode($raw_response, true);
+  if (!is_array($decoded)) {
+    return_msg(502, json_encode(array(
+      "error" => "invalid_accounts_response",
+      "message" => "Accounts-Antwort ist kein gültiges JSON.",
+      "raw_response" => $raw_response,
+    )), true);
+  }
+
+  return_msg(200, json_encode($decoded), true);
+}
+
+$post_data = json_decode(file_get_contents('php://input'), true);
+$oauth_base_url = isset($post_data["url"]) ? $post_data["url"] : "";
+$data = isset($post_data["data"]) ? $post_data["data"] : array();
+$user_agent = isset($post_data["user_agent"]) ? $post_data["user_agent"] : "openwb-ui-settings";
+$action = isset($post_data["action"]) ? $post_data["action"] : "token";
+
+if (empty($oauth_base_url) || !is_array($data)) {
+  return_msg(400, json_encode(array("error" => "invalid_request", "message" => "Ungültiger Request-Body.")), true);
+}
+
+if ($action === "token") {
+  exchange_token($oauth_base_url, $data, $user_agent);
+} elseif ($action === "accounts") {
+  fetch_accounts($oauth_base_url, $data, $user_agent);
+} else {
+  return_msg(400, json_encode(array("error" => "unsupported_action", "message" => "Unbekannte action.")), true);
+}
diff --git a/src/components/electricity_pricing/flexible_tariffs/naturstrom/flexible_tariff.vue b/src/components/electricity_pricing/flexible_tariffs/naturstrom/flexible_tariff.vue
new file mode 100644
index 000000000..14fa9261d
--- /dev/null
+++ b/src/components/electricity_pricing/flexible_tariffs/naturstrom/flexible_tariff.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="flexible-tariff-naturstrom">
+    <openwb-base-alert subtype="info">
+      Über die Naturstrom-Authentifizierung kannst Du Deine Stromtarif-Daten für die Ladeplanung nutzen. Nach der
+      Anmeldung bei Naturstrom wird ein Access- und Refresh-Token angezeigt, welche Du hier einfügen musst.
+    </openwb-base-alert>
+
+    <openwb-base-button-input
+      title="1. Bei Naturstrom anmelden"
+      button-text="Bei Naturstrom Anmelden"
+      subtype="success"
+      @button-clicked="() => naturstrom_login_window()"
+    >
+      <template #help>
+        Es wird ein neues Browserfenster geöffnet, in dem du Dich bei Naturstrom mit Deinen Zugangsdaten anmelden
+        kannst.
+      </template>
+    </openwb-base-button-input>
+
+    <openwb-base-text-input
+      title="2. JSON-Code nach Login"
+      subtype="json"
+      :model-value="oauthCallbackCode"
+      @update:model-value="oauthCallbackCode = $event"
+    >
+      <template #help>
+        Kopiere den kompletten JSON-Code aus dem Login-Popup nach erfolgreicher Anmeldung und füge ihn hier ein.
+      </template>
+    </openwb-base-text-input>
+
+    <openwb-base-button-input
+      title="3. JSON-Code prüfen und Token holen"
+      button-text="Anmeldecode verarbeiten"
+      subtype="success"
+      :disabled="!oauthCallbackCode"
+      @button-clicked="processOAuthCallbackCode"
+    >
+      <template #help> Der JSON-Code wird verwendet um das Access- und Refresh-Token abgefragt. </template>
+    </openwb-base-button-input>
+
+    <openwb-base-text-input
+      title="Access-Token"
+      required
+      :disabled="true"
+      pattern="^ory_at_.*$"
+      :model-value="flexibleTariff.configuration.token?.access_token || ''"
+      @update:model-value="updateConfiguration($event, 'configuration.token.access_token')"
+    >
+      <template #help>
+        Das Access-Token wird nach erfolgreicher Verarbeitung des Anmeldecodes automatisch gesetzt.
+      </template>
+    </openwb-base-text-input>
+
+    <openwb-base-text-input
+      title="Refresh-Token"
+      required
+      pattern="^ory_rt_.*$"
+      :disabled="true"
+      :model-value="flexibleTariff.configuration.token?.refresh_token || ''"
+      @update:model-value="updateConfiguration($event, 'configuration.token.refresh_token')"
+    >
+      <template #help>
+        Das Refresh-Token wird nach erfolgreicher Verarbeitung des Anmeldecodes automatisch gesetzt.
+      </template>
+    </openwb-base-text-input>
+
+    <openwb-base-button-input
+      title="4. Accounts abrufen"
+      button-text="Accounts laden"
+      subtype="info"
+      :disabled="!flexibleTariff.configuration.token?.access_token"
+      @button-clicked="fetch_accounts"
+    >
+      <template #help>
+        Mit dem Access-Token wird automatisch die zugehörige Account-Information von Naturstrom abgerufen.
+      </template>
+    </openwb-base-button-input>
+
+    <openwb-base-select-input
+      title="Accounts"
+      :options="accountsOptions"
+      :model-value="flexibleTariff.configuration.account_id"
+      @update:model-value="updateSelectedAccount"
+    >
+      <template #help>
+        Wähle einen der verfügbaren Accounts aus. Dieser wird für den Zugriff auf die Tarif-Daten benötigt.
+      </template>
+    </openwb-base-select-input>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import FlexibleTariffConfigMixin from "../FlexibleTariffConfigMixin.vue";
+
+const OAUTH_BASE_URL = "https://smart.naturstrom.de";
+const CLIENT_ID = "exnaton-public";
+const REDIRECT_URI = "https://naturstrom.openwb.de/naturstrom-callback.php";
+const SCOPE = "email profile";
+const OAUTH_MAX_AGE_MS = 10 * 60 * 1000;
+const LOCAL_NATURSTROM_ENDPOINT = `${location.protocol}//${location.host}/openWB/web/settings/modules/electricity_pricing/flexible_tariffs/naturstrom/naturstrom.php`;
+
+export default {
+  name: "FlexibleTariffNaturstrom",
+  mixins: [FlexibleTariffConfigMixin],
+  data() {
+    return {
+      accounts: [],
+      oauthCallbackCode: undefined,
+    };
+  },
+  computed: {
+    accountsOptions() {
+      const options = this.accounts.map((account) => ({
+        value: account.id,
+        text: account.name,
+      }));
+
+      // Fallback: Wenn keine Optionen vorhanden sind, aber eine Account-ID in der Config existiert
+      if (options.length === 0 && this.flexibleTariff.configuration.account_id) {
+        options.push({
+          value: this.flexibleTariff.configuration.account_id,
+          text: this.flexibleTariff.configuration.account_name || this.flexibleTariff.configuration.account_id,
+        });
+      }
+
+      return options;
+    },
+  },
+  methods: {
+    updateSelectedAccount(accountId) {
+      this.updateConfiguration(accountId, "configuration.account_id");
+
+      const selectedAccount = this.accounts.find((account) => account.id === accountId);
+      if (selectedAccount?.name) {
+        this.updateConfiguration(selectedAccount.name, "configuration.account_name");
+      }
+    },
+
+    clearOAuthSession() {
+      sessionStorage.removeItem("oauth_state");
+      sessionStorage.removeItem("pkce_code_verifier");
+      sessionStorage.removeItem("oauth_started_at");
+    },
+
+    async naturstrom_login_window() {
+      // Open popup immediately to avoid popup blocker
+      const naturstromLogin = window.open(
+        "about:blank",
+        "NaturstromLogin",
+        "width=800,height=600,status=yes,scrollbars=yes,resizable=yes",
+      );
+      if (!naturstromLogin) {
+        this.$root.postClientMessage(
+          "Popup konnte nicht geöffnet werden. Bitte erlaube Popups für diese Seite.",
+          "danger",
+        );
+        return;
+      }
+      naturstromLogin.focus();
+
+      // Build OAuth URL locally and redirect the popup
+      try {
+        const authUrl = await this.startOAuth();
+        naturstromLogin.location.href = authUrl;
+      } catch (error) {
+        naturstromLogin.close();
+        console.error("Fehler beim Erstellen des Naturstrom-Links:", error);
+        this.$root.postClientMessage(
+          "Fehler beim Erstellen der Naturstrom-Authentifizierung: " + (error.response?.data?.message || error.message),
+          "danger",
+        );
+      }
+    },
+
+    async fetch_accounts() {
+      if (!this.flexibleTariff.configuration.token?.access_token) {
+        this.$root.postClientMessage("Kein Access-Token vorhanden.", "warning");
+        return;
+      }
+
+      try {
+        const requestPayload = {
+          action: "accounts",
+          url: OAUTH_BASE_URL,
+          user_agent: navigator.userAgent,
+          data: {
+            access_token: this.flexibleTariff.configuration.token?.access_token,
+          },
+        };
+
+        // Call the local Naturstrom PHP endpoint to get accounts
+        const response = await axios.post(LOCAL_NATURSTROM_ENDPOINT, JSON.parse(JSON.stringify(requestPayload)), {
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+        });
+
+        const rawData = response?.data;
+        const parsedData = typeof rawData === "string" ? JSON.parse(rawData) : rawData;
+        const accounts = parsedData?.data ?? [];
+        const normalizedAccounts = accounts
+          .filter((account) => account && account.id)
+          .map((account) => ({
+            id: account.id,
+            name: account.name,
+          }));
+
+        if (normalizedAccounts.length > 0) {
+          // Speichere alle Accounts für die Auswahlliste
+          this.accounts = normalizedAccounts;
+
+          // Wenn mehrere Accounts vorhanden sind, den ersten verwenden
+          const firstAccount = normalizedAccounts[0];
+          this.updateConfiguration(firstAccount.id, "configuration.account_id");
+          this.updateConfiguration(firstAccount.name, "configuration.account_name");
+
+          if (normalizedAccounts.length > 1) {
+            this.$root.postClientMessage(
+              `${normalizedAccounts.length} Accounts gefunden. Erster Account ausgewählt: ${firstAccount.name}. Du kannst einen anderen Account aus der Liste wählen.`,
+              "success",
+            );
+          } else {
+            this.$root.postClientMessage("Account erfolgreich abgerufen: " + firstAccount.name, "success");
+          }
+        } else {
+          const responsePreview =
+            typeof parsedData === "object" ? JSON.stringify(parsedData).slice(0, 300) : String(parsedData);
+          this.$root.postClientMessage(
+            "Keine Accounts in der Antwort gefunden. Antwort (gekürzt): " + responsePreview,
+            "warning",
+          );
+        }
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Accounts:", error);
+        this.$root.postClientMessage(
+          "Fehler beim Abrufen der Accounts: " + (error.response?.data?.message || error.message),
+          "danger",
+        );
+      }
+    },
+
+    async processOAuthCallbackCode() {
+      try {
+        if (!this.oauthCallbackCode) {
+          this.$root.postClientMessage("Bitte füge zuerst den Anmeldecode ein.", "warning");
+          return;
+        }
+
+        const code = this.oauthCallbackCode.code;
+        const returnedState = this.oauthCallbackCode.state;
+
+        if (!code) {
+          this.$root.postClientMessage("Im Anmeldecode wurde kein Feld 'code' gefunden.", "warning");
+          return;
+        }
+
+        const codeVerifier = sessionStorage.getItem("pkce_code_verifier");
+        const expectedState = sessionStorage.getItem("oauth_state");
+        const startedAt = Number(sessionStorage.getItem("oauth_started_at"));
+
+        if (expectedState && returnedState && expectedState !== returnedState) {
+          this.clearOAuthSession();
+          this.$root.postClientMessage("OAuth-Status ungültig. Bitte neu anmelden.", "danger");
+          return;
+        }
+
+        if (Number.isFinite(startedAt) && startedAt > 0) {
+          const ageMs = Date.now() - startedAt;
+          if (ageMs > OAUTH_MAX_AGE_MS) {
+            this.clearOAuthSession();
+            this.$root.postClientMessage("OAuth-Session ist abgelaufen. Bitte neu anmelden.", "warning");
+            return;
+          }
+        }
+
+        const requestPayload = {
+          action: "token",
+          url: OAUTH_BASE_URL,
+          user_agent: navigator.userAgent,
+          data: {
+            grant_type: "authorization_code",
+            code,
+            redirect_uri: REDIRECT_URI,
+            client_id: CLIENT_ID,
+            code_verifier: codeVerifier,
+          },
+        };
+
+        const tokenResponse = await axios.post(LOCAL_NATURSTROM_ENDPOINT, JSON.parse(JSON.stringify(requestPayload)), {
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+        });
+
+        console.log("Token-Antwort:", tokenResponse);
+
+        const rawTokenData = tokenResponse?.data;
+        const parsedTokenData = typeof rawTokenData === "string" ? JSON.parse(rawTokenData) : rawTokenData;
+        const tokenData =
+          parsedTokenData?.data && typeof parsedTokenData.data === "object" ? parsedTokenData.data : parsedTokenData;
+
+        const accessToken = tokenData?.access_token;
+        const refreshToken = tokenData?.refresh_token;
+
+        if (!accessToken) {
+          throw new Error("Token-Antwort enthält kein Access-Token. Response: " + JSON.stringify(parsedTokenData));
+        }
+
+        this.updateConfiguration(accessToken, "configuration.token.access_token");
+        if (refreshToken) {
+          this.updateConfiguration(refreshToken, "configuration.token.refresh_token");
+        }
+
+        this.clearOAuthSession();
+        this.oauthCallbackCode = undefined;
+        if (refreshToken) {
+          this.$root.postClientMessage(
+            "OAuth erfolgreich abgeschlossen. Access- und Refresh-Token wurden gesetzt.",
+            "success",
+          );
+        } else {
+          this.$root.postClientMessage(
+            "OAuth erfolgreich abgeschlossen. Access-Token wurde gesetzt (kein Refresh-Token in der Antwort).",
+            "warning",
+          );
+        }
+      } catch (error) {
+        console.error("Fehler beim Verarbeiten des Anmeldecodes:", error);
+        this.$root.postClientMessage(
+          "Fehler beim Verarbeiten des Anmeldecodes: " + (error.response?.data?.error_description || error.message),
+          "danger",
+        );
+      }
+    },
+
+    toBase64Url(bytes) {
+      return btoa(String.fromCharCode(...bytes))
+        .replace(/\+/g, "-")
+        .replace(/\//g, "_")
+        .replace(/=+$/, "");
+    },
+
+    randomString(length = 64) {
+      const bytes = new Uint8Array(length);
+      crypto.getRandomValues(bytes);
+      return this.toBase64Url(bytes).slice(0, length);
+    },
+
+    async sha256(input) {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(input);
+
+      // In manchen Dev-Setups ist crypto.subtle nicht verfügbar (z. B. non-HTTPS context).
+      if (globalThis.crypto?.subtle?.digest) {
+        const hashBuffer = await globalThis.crypto.subtle.digest("SHA-256", data);
+        return new Uint8Array(hashBuffer);
+      }
+
+      const { createHash } = await import("crypto");
+      const hash = createHash("sha256").update(data).digest();
+      return new Uint8Array(hash);
+    },
+
+    async startOAuth() {
+      try {
+        const state = this.randomString(64);
+        const codeVerifier = this.randomString(96);
+        const codeChallenge = this.toBase64Url(await this.sha256(codeVerifier));
+
+        sessionStorage.setItem("oauth_state", state);
+        sessionStorage.setItem("pkce_code_verifier", codeVerifier);
+        sessionStorage.setItem("oauth_started_at", String(Date.now()));
+
+        const params = new URLSearchParams({
+          client_id: CLIENT_ID,
+          response_type: "code",
+          scope: SCOPE,
+          redirect_uri: REDIRECT_URI,
+          state,
+          code_challenge: codeChallenge,
+          code_challenge_method: "S256",
+        });
+
+        const authUrl = `${OAUTH_BASE_URL}/api/public-auth/oauth2/auth?${params.toString()}`;
+        return authUrl;
+      } catch (err) {
+        console.error("OAuth Start fehlgeschlagen:", err);
+        throw err;
+      }
+    },
+  },
+};
+</script>
diff --git a/vite.config.js b/vite.config.js
index db4b29cf5..97d2b5cbe 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -28,6 +28,10 @@ export default defineConfig(({ command, mode }) => {
             target: "ws://localhost:9003",
             ws: true,
           },
+          "^/.+\\.php$": {
+            target: "http://localhost",
+            changeOrigin: true,
+          },
         },
       };
     }