fix: digitale Ein- und Ausgänge vollständig responsive – Tailwind Breakpoints für Icons und Textgrößen

- Anpassungen an laptop, xl, 2xl eingeführt
- Konsistente Darstellung bei Meldungseingängen und Schaltausgängen
- Offline-fähige lokale Icon-Imports für alle Symbole

components/main/einausgaenge/DigitalOutputs.tsx

@@ -1,4 +1,5 @@
-"use client"; // /components/main/einausgaenge/DigitalOutputs.tsx
+"use client";
+// /components/main/einausgaenge/DigitalOutputs.tsx
 import React from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "../../../redux/store";
@@ -14,11 +15,14 @@ export default function DigitalOutputs({ openOutputModal }) {
 
   return (
     <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
-      <h2 className="text-sm font-bold mb-3 flex items-center">
-        <Icon icon={outputIcon} className="text-littwin-blue mr-2 text-xl" />
+      <h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
+        <Icon
+          icon={outputIcon}
+          className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"
+        />
         Digitale Ausgänge
       </h2>
-      <table className="w-full text-xs border-collapse bg-white rounded-lg">
+      <table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse bg-white rounded-lg">
         <thead className="bg-gray-100 border-b">
           <tr>
             <th className="px-1 py-1 text-left">Ausgang</th>
@@ -33,15 +37,15 @@ export default function DigitalOutputs({ openOutputModal }) {
               <td className="flex items-center px-1 py-1">
                 <Icon
                   icon={outputIcon}
-                  className="text-gray-600 mr-1 text-base"
+                  className="text-gray-600 mr-1 text-base laptop:text-sm xl:text-base 2xl:text-lg"
                 />
                 {output.id}
               </td>
               <td className="px-1 py-1">{output.label}</td>
               <td className="px-1 py-1">
                 <Icon
-                  icon="ion:switch"
-                  className={`text-base ${
+                  icon={switchIcon}
+                  className={`text-base laptop:text-sm xl:text-base 2xl:text-lg ${
                     output.status
                       ? "text-littwin-blue"
                       : "text-gray-500 scale-x-[-1]"
@@ -51,7 +55,7 @@ export default function DigitalOutputs({ openOutputModal }) {
               <td className="px-1 py-1">
                 <Icon
                   icon={settingsIcon}
-                  className="text-gray-400 text-base cursor-pointer"
+                  className="text-gray-400 text-base laptop:text-sm xl:text-base 2xl:text-lg cursor-pointer"
                   onClick={() => openOutputModal(output)}
                 />
               </td>