Light und Darkmodus in global.css eingestellt, in andere components text-black in root div

app/globals.css

@@ -26,3 +26,19 @@ body {
     text-wrap: balance;
   }
 }
+
+@media (prefers-color-scheme: light) {
+  input {
+    background-color: #333 !important; /* Dunkler Hintergrund im Darkmode */
+    color: #fff !important; /* Weißer Text im Darkmode */
+    border: 1px solid #555; /* Optional: etwas hellerer Rahmen */
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  input {
+    background-color: white !important; /* Heller Hintergrund im Lightmode */
+    color: black !important; /* Schwarzer Text im Lightmode */
+    border: 1px solid #ccc; /* Optional: heller Rahmen */
+  }
+}

app/kabelueberwachung/page.jsx

@@ -84,7 +84,7 @@ function Kabelueberwachung() {
   }, []);
 
   return (
-    <div className="bg-gray-100 flex-1 p-6">
+    <div className="bg-gray-100 flex-1 p-6 text-black">
       <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
 
       <div className="mb-4">

components/Footer.jsx

@@ -90,7 +90,7 @@ function Footer() {
   }, [showSlider]);
 
   return (
-    <footer className="relative bg-gray-300 p-4 overflow-hidden">
+    <footer className="relative bg-gray-300 p-4 overflow-hidden text-black">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2">
           <Icon

components/Header.jsx

@@ -135,7 +135,7 @@ function Header() {
   if (!isClient) return null; // Rendere die Komponente nicht, bis sie clientseitig ausgeführt wird
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
         <Image
           src="/images/Logo.png"

components/modales/KueModal.jsx

@@ -166,6 +166,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         overlay: {
           backgroundColor: "rgba(0, 0, 0, 0.5)",
           zIndex: 100,
+          text: "black",
         },
         content: {
           top: "50%",
@@ -202,7 +203,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       </div>
 
       {/* ID und Modulname anzeigen */}
-      <div className="p-2 mb-4">
+      <div className="p-2 mb-4 text-black">
         {/* 
            <div className="mb-2">
           <label className="font-bold">ID:</label>
@@ -215,8 +216,8 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         </div>
         */}
 
-        <div className="mb-2">
-          <label className="font-bold">Kabelbezeichnung:</label>
+        <div className="mb-2 ">
+          <label className="font-bold ">Kabelbezeichnung:</label>
           <input
             type="text"
             className="border rounded p-1 w-full text-sm"
@@ -227,7 +228,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       </div>
 
       {/* Modal Body */}
-      <div className="p-2">
+      <div className="p-2 text-black">
         <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
         <table className="w-full text-left border-collapse mb-4">
           <thead className="bg-gray-100">