✅ Logik für Farbe abhängig von Status + Invertierung:

Anzeige ist rot wenn Status=1 ist. Die Farbe ist nicht abhängig von der Invertierung.
Status	Invertierung	Anzeige
1                1	            🔴 rot
1	             0	            🔴 rot
0	             1	           ✅ grün
0	             0             ✅ grün

components/main/einausgaenge/DigitalInputs.tsx

@@ -43,11 +43,12 @@ export default function DigitalInputs({ openInputModal, inputRange }: Props) {
               </td>
               <td className="px-1 py-1">
                 {input.status ? (
-                  <span className="text-green-500 text-xs">●</span>
-                ) : (
                   <span className="text-red-500 text-xs">✕</span>
+                ) : (
+                  <span className="text-green-500 text-xs">●</span>
                 )}
               </td>
+
               <td className="px-1 py-1">{input.label}</td>
               <td className="px-1 py-1">
                 <Icon

components/main/einausgaenge/modals/InputModal.tsx

@@ -1,20 +1,98 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+import { useAppDispatch } from "../../../../redux/store";
+import { updateInvertierung } from "../../../../redux/slices/digitalInputsSlice";
 
 export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
+  const dispatch = useAppDispatch();
+  const reduxInput = useSelector((state: RootState) =>
+    state.digitalInputsSlice.inputs.find(
+      (input) => input.id === Number(selectedInput.id)
+    )
+  );
+
+  const [invertiert, setInvertiert] = useState<boolean>(false);
+  const isDev = process.env.NODE_ENV === "development";
+
+  useEffect(() => {
+    if (selectedInput) {
+      if (isDev) {
+        const saved = localStorage.getItem(`invertierung_${selectedInput.id}`);
+        if (saved !== null) {
+          setInvertiert(parseInt(saved) === 1);
+        } else {
+          setInvertiert(selectedInput.invertierung);
+        }
+      } else {
+        setInvertiert(selectedInput.invertierung);
+      }
+    }
+  }, [selectedInput, isDev]);
+
   if (!isOpen || !selectedInput) return null;
 
+  const handleInvertierungToggle = async () => {
+    const neueInvertierung = !invertiert;
+
+    if (process.env.NODE_ENV === "development") {
+      dispatch(
+        updateInvertierung({
+          id: Number(selectedInput.id),
+          invertierung: neueInvertierung,
+        })
+      );
+
+      setInvertiert(neueInvertierung);
+    } else {
+      const url = `/CPL?/CPL/SERVICE/empty.acp&DEI${selectedInput.id}=${
+        neueInvertierung ? 1 : 0
+      }`;
+      try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error("Fehler beim Senden der Anfrage");
+
+        dispatch(
+          updateInvertierung({
+            id: Number(selectedInput.id),
+            invertierung: neueInvertierung,
+          })
+        );
+        setInvertiert(neueInvertierung);
+      } catch (error) {
+        console.error("Invertierung fehlgeschlagen:", error);
+        alert("Invertierung konnte nicht geändert werden.");
+      }
+    }
+  };
+  //---------------------------------
+
+  useEffect(() => {
+    if (reduxInput) {
+      setInvertiert(reduxInput.invertierung);
+    }
+  }, [reduxInput]);
+
+  //---------------------------------
   return (
     <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
       <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
-        <h2 className="text-xl font-semibold text-blue-500 mb-4 border-b pb-2">
+        <h2 className="text-xl font-semibold text-littwin-blue mb-4 border-b pb-2">
           Details für Eingang {selectedInput.id}
         </h2>
         <div className="grid grid-cols-2 gap-x-4 gap-y-2">
           <div>
             <strong>Status:</strong>
           </div>
-          <div>{selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}</div>
+          <div>
+            <strong>Status:</strong>
+          </div>
+          <div
+            className={reduxInput?.status ? "text-red-600" : "text-green-600"}
+          >
+            {reduxInput?.status ? "Inaktiv" : "Aktiv"}
+          </div>
 
           <div>
             <strong>Beschreibung:</strong>
@@ -26,10 +104,16 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
           </div>
           <div>{selectedInput.name}</div>
 
-          <div>
+          <div className="flex items-center gap-2 col-span-2">
             <strong>Invertierung:</strong>
+            <span>{invertiert ? "Ein" : "Aus"}</span>
+            <button
+              onClick={handleInvertierungToggle}
+              className="ml-auto px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
+            >
+              Umschalten
+            </button>
           </div>
-          <div>{selectedInput.invertierung ? "Ein" : "Aus"}</div>
 
           <div>
             <strong>Filterzeit:</strong>
@@ -56,9 +140,10 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
           </div>
           <div>{selectedInput.eingangOffline ? "Offline" : "Online"}</div>
         </div>
+
         <button
           onClick={closeInputModal}
-          className="mt-6 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition"
+          className="mt-6 px-4 py-2 bg-littwin-blue hover:bg-blue-600 text-white rounded-lg transition"
         >
           Schließen
         </button>