feat(gui): netwerk tab netwerk layout grafisch

webui/html/index.html

@@ -128,6 +128,11 @@
         <div class="row gap" style="flex-wrap:wrap; align-items:center;">
           <input id="networksSearch" class="input" type="search" placeholder="Zoek netwerk, subnet of driver…" style="min-width:260px; flex:1;" />
 
+          <div class="segToggle" id="networksViewToggle" title="Weergave">
+            <button class="seg active" type="button" data-view="table">Tabel</button>
+            <button class="seg" type="button" data-view="map">Kaart</button>
+          </div>
+
           <label class="chip">
             <input id="networksFilterConnected" type="checkbox" />
             Alleen verbonden
@@ -149,6 +154,32 @@
             <option value="driver_asc">Sorteer: Driver (A→Z)</option>
           </select>
         </div>
+        <!-- Kaartweergave (STAP 3A-1: alleen UI/placeholder, geen D3) -->
+        <div id="networksMapWrap" style="display:none; margin:10px 14px 0 14px;">
+          <div class="toolbar" style="margin:0 0 10px 0;">
+            <div class="row gap" style="flex-wrap:wrap; align-items:center;">
+              <!-- Zoekveld is hetzelfde als tabel (networksSearch) -->
+              <button class="btn small" type="button" id="networksMapResetBtn">Reset view</button>
+              <button class="btn small" type="button" id="networksMapLayoutBtn">Auto-layout</button>
+              <button class="btn small ghost" type="button" id="networksMapLegendBtn">Legenda</button>
+              <span class="muted" id="networksMapStatus" style="margin-left:auto;">Kaartweergave (placeholder)</span>
+            </div>
+          </div>
+
+          <div id="networksMapHost" class="mapHost">
+            <div class="muted" style="padding:12px;">
+              Kaartweergave is actief. (STAP 3A-1: alleen layout/controls. D3 rendering komt in 3C.)
+            </div>
+          </div>
+
+          <div id="networksMapLegend" class="mapLegend" style="display:none;">
+            <div class="legendTitle">Legenda</div>
+            <div class="legendRow"><span class="legendSwatch net"></span> Netwerk</div>
+            <div class="legendRow"><span class="legendSwatch ctr"></span> Container</div>
+            <div class="legendRow"><span class="legendSwatch link"></span> Verbinding</div>
+            <div class="legendRow"><span class="legendSwatch shared"></span> Shared netns (stippellijn)</div>
+          </div>
+        </div>
       </div>
 
       <table class="table" id="networksTable">
@@ -166,7 +197,7 @@
       </table>
     </div>
 
-    <div class="card" style="margin-top:12px;">
+    <div class="card" id="networksRelationsCard" style="margin-top:12px;">
       <div class="cardHeader">
         <h2>Relaties</h2>
       </div>