feat: Verschachtelung von Kabelstrecken-Checkbox unter TALAS hinzugefügt

- Die Checkbox für "Kabelstrecken" wird jetzt als Untermenü unter "TALAS" angezeigt.
- Dynamische Überprüfung von `system.name`, um die Hierarchie von Checkboxen zu definieren.
- Visuelle Einrückung (`ml-6`) implementiert, um die Untermenü-Struktur klar darzustellen.
- Anpassungen für eine klare und intuitive Benutzeroberfläche.

components/DataSheet.js

@@ -146,20 +146,39 @@ function DataSheet() {
           </div>
         </div>
 
-        {/* Checkboxen in einem gemeinsamen Container */}
+        {/* Checkboxen mit Untermenüs */}
         <div className="flex flex-col gap-2">
           {systemListing.map((system) => (
-            <div className="flex items-center" key={system.id}>
+            <div key={system.id} className="flex flex-col">
-              <input
+              <div className="flex items-center">
-                type="checkbox"
+                <input
-                checked={mapLayersVisibility[system.key] || false}
+                  type="checkbox"
-                onChange={(e) => handleCheckboxChange(system.key, e)}
+                  checked={mapLayersVisibility[system.key] || false}
-                id={`system-${system.id}`}
+                  onChange={(e) => handleCheckboxChange(system.key, e)}
-                disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
+                  id={`system-${system.id}`}
-              />
+                  disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
-              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                />
-                {system.name}
+                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-              </label>
+                  {system.name}
+                </label>
+              </div>
+
+              {/* Untermenü für TALAS */}
+              {system.name === "TALAS" && (
+                <div className="ml-6 flex flex-col gap-1">
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={polylineVisible} // Zustand für Kabelstrecken
+                      onChange={handlePolylineCheckboxChange}
+                      id="polyline-checkbox"
+                    />
+                    <label htmlFor="polyline-checkbox" className="text-sm ml-2">
+                      Kabelstrecken
+                    </label>
+                  </div>
+                </div>
+              )}
             </div>
           ))}
 
@@ -170,12 +189,6 @@ function DataSheet() {
             </label>
           </div>
 
-          <div className="flex items-center">
-            <input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
-            <label htmlFor="polyline-checkbox" className="text-sm ml-2">
-              Kabelstrecken
-            </label>
-          </div>
           {/* Bereiche */}
           <div className="flex items-center">
             <input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" disabled={editMode} />