diff --git a/package-lock.json b/package-lock.json
index 8890d1d..8546710 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
+        "@types/d3-brush": "^3.0.1",
         "bulma": "^0.9.4",
         "core-js": "^3.8.3",
         "d3": "^7.0.0",
@@ -2199,7 +2200,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
       "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
-      "dev": true,
       "dependencies": {
         "@types/d3-selection": "*"
       }
@@ -2346,8 +2346,7 @@
     "node_modules/@types/d3-selection": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
-      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==",
-      "dev": true
+      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
     },
     "node_modules/@types/d3-shape": {
       "version": "3.1.0",
@@ -14436,7 +14435,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
       "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
-      "dev": true,
       "requires": {
         "@types/d3-selection": "*"
       }
@@ -14583,8 +14581,7 @@
     "@types/d3-selection": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
-      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==",
-      "dev": true
+      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
     },
     "@types/d3-shape": {
       "version": "3.1.0",
diff --git a/package.json b/package.json
index 3d287f1..7306c00 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^3.0.0-4",
+    "@types/d3-brush": "^3.0.1",
     "bulma": "^0.9.4",
     "core-js": "^3.8.3",
     "d3": "^7.0.0",
diff --git a/src/components/NetworkMap.vue b/src/components/NetworkMap.vue
index f03fc63..9bb5a68 100644
--- a/src/components/NetworkMap.vue
+++ b/src/components/NetworkMap.vue
@@ -86,7 +86,7 @@
       <tspan x="0" dy="2em">die Position festzulegen</tspan>
     </text>
 
-    <g id="marks">
+    <g id="marksBackgroundLayer">
       <g v-for="mark in alteriMarks" :key="'shadow' + mark.d.id">
         <circle
           v-if="mark.selected"
@@ -119,16 +119,6 @@
           :y2="mark.y"
           :filter="mark.d.edgeType == 2 ? 'url(#dilate-and-xor)' : undefined"
         />
-        <use
-          :href="'#' + mark.shape"
-          :x="mark.x"
-          :y="mark.y"
-          class="mark clickAble"
-          width="4"
-          height="4"
-          transform="translate(-2,-2)"
-          @click.stop="clickAlter(mark.d)"
-        />
         <text
           v-if="alteriNames && useTextBG"
           class="textbg"
@@ -167,6 +157,21 @@
         transform="translate(-2,-2)"
       />
     </g>
+    <g class="brushParent"></g>
+    <g class="marksForegroundLayer">
+      <use
+        v-for="mark in alteriMarks"
+        :key="mark.d.id"
+        :href="'#' + mark.shape"
+        :x="mark.x"
+        :y="mark.y"
+        class="mark clickAble"
+        width="4"
+        height="4"
+        transform="translate(-2,-2)"
+        @click.stop="clickAlter(mark.d)"
+      />
+    </g>
 
     <!-- a foreground rect is necessary so that the whole display is clickable -->
     <!-- a foreground rect is useful to prevent text selection -->
@@ -179,10 +184,58 @@
       height="220"
     />
   </svg>
+  <div id="brushBtns" ref="brushBtns">
+    <!-- <button
+      id="btnClusterMove"
+      class="button is-small"
+      type="button"
+      title="gemeinsam verschieben"
+      disabled
+    >
+      <span class="icon is-small">
+        <font-awesome-icon icon="arrows-alt" />
+      </span>
+    </button> -->
+    <button
+      id="btnClusterConnect"
+      class="button is-small"
+      type="button"
+      title="komplett verbinden (Clique erzeugen)"
+      @click="clusterConnect"
+      v-if="!isClusterFullyConnected"
+      :disabled="!isClusterConnectPossible"
+    >
+      <span class="icon is-small">
+        <font-awesome-icon icon="link" />
+      </span>
+    </button>
+    <button
+      id="btnClusterUnConnect"
+      class="button is-small"
+      type="button"
+      title="alle Beziehungen lösen"
+      @click="clusterDisconnect"
+      v-else
+    >
+      <span class="icon is-small">
+        <font-awesome-icon icon="unlink" />
+      </span>
+    </button>
+    <button
+      class="button is-small"
+      type="button"
+      title="Auswahlrechteck schließen"
+      @click="clearBrush"
+    >
+      <span class="icon is-small">
+        <font-awesome-icon icon="times" />
+      </span>
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted } from "vue";
+import { defineComponent, computed, onMounted, ref, watch } from "vue";
 import { useStore } from "@/store";
 
 import * as d3 from "d3";
@@ -193,6 +246,7 @@ import { shapeByGender } from "@/data/Gender";
 import { TAB_BASE, TAB_CONNECTIONS } from "@/store/viewOptionsModule";
 import { SYMBOL_DECEASED } from "@/assets/utils";
 import { getRoleAbbrev } from "../data/Roles";
+import { D3BrushEvent } from "d3";
 
 interface AlterMark {
   d: Alter;
@@ -217,6 +271,7 @@ interface ConnectionMark {
 
 export default defineComponent({
   components: {},
+  emits: ["map-click"],
 
   setup: function (props, { emit }) {
     const store = useStore();
@@ -246,29 +301,196 @@ export default defineComponent({
       // d3.mouse only works if the event is registered using D3 .on
       const g = d3.select("#nwkmap");
 
+      let clickBackgroundTimeoutId: number | null = null;
       g.on("click", (event) => {
         const posPol = getPositionPolar(event);
-        if (isEditMode.value) {
-          const payload = {
-            index: store.state.view.editIndex,
-            changes: posPol,
-          };
-          store.commit("editAlter", payload);
-          // } else {
-          //   store.commit("view/clearSelectedAlters");
+        if (clickBackgroundTimeoutId == null) {
+          // first click -> start timer
+          clickBackgroundTimeoutId = setTimeout(() => {
+            // timeout expired -> simple click
+            clickBackgroundTimeoutId = null;
+
+            if (isEditMode.value) {
+              const payload = {
+                index: store.state.view.editIndex,
+                changes: posPol,
+              };
+              store.commit("editAlter", payload);
+              // } else {
+              //   store.commit("view/clearSelectedAlters");
+            }
+            emit("map-click", posPol);
+          }, 500); //tolerance in ms
+        } else {
+          // 2nd click -> double click
+          clearTimeout(clickBackgroundTimeoutId);
+          clickBackgroundTimeoutId = null;
+
+          if (isEditMode.value) {
+            store.commit("editAndCloseAlterForm", { changes: posPol });
+          } else {
+            store.commit("addAlter", posPol);
+          }
+          emit("map-click", posPol);
         }
-        emit("map-click", posPol);
       });
 
-      g.on("dblclick", (event) => {
-        if (!isEditMode.value) {
-          const posPol = getPositionPolar(event);
-          store.commit("addAlter", posPol);
-          // setPosition(event);
-        }
-      });
+      initBrushBehavior();
     });
 
+    // disable brush as long as in edit or connect mode
+    watch(
+      () => isEditMode.value || isConnectMode.value,
+      (newIsSomeMode: boolean) => {
+        if (newIsSomeMode) {
+          d3.select("#nwkmap #brush").remove();
+          if (brushBtns.value) {
+            brushBtns.value.style.visibility = "hidden";
+          }
+        } else {
+          initBrushBehavior();
+        }
+      }
+    );
+
+    const brush = d3.brush().extent([
+      [-105, -105],
+      [105, 105],
+    ]);
+
+    function initBrushBehavior() {
+      brush
+        .on("start", () => {
+          // when brush is changed (e.g. resized) -> hide buttons
+          if (brushBtns.value) {
+            brushBtns.value.style.visibility = "hidden";
+          }
+        })
+        .on("end", afterBrushChanged);
+
+      d3.select("#nwkmap g.brushParent")
+        .append("g")
+        .attr("class", "brush")
+        .attr("id", "brush")
+        .call(brush);
+
+      d3.select("#nwkmap")
+        .select("#brush > .selection")
+        .style("fill", "steelblue")
+        .style("opacity", "0.4")
+        .style("stroke-width", "0.5");
+    }
+
+    /** resets the brush to a null selection */
+    const clearBrush = () => {
+      if (brush) {
+        brush.clear(d3.select("#nwkmap .brush"));
+      }
+    };
+
+    let markIdsInExtent: number[] = [];
+    let connectableIdsInExtent: number[] = [];
+
+    // we need a DOM ref in order to focus
+    const brushBtns = ref<InstanceType<typeof HTMLDivElement> | null>(null);
+
+    const isClusterConnectPossible = ref(false);
+    const isClusterFullyConnected = ref(false);
+
+    function afterBrushChanged(event: D3BrushEvent<unknown>) {
+      // console.log(event);
+
+      if (event.selection) {
+        const extent = event.selection as [[number, number], [number, number]];
+
+        const marksInExtent = alteriMarks.value.filter((am) =>
+          isInBrushExtent(am, extent)
+        );
+        markIdsInExtent = marksInExtent.map((am) => am.d.id);
+        store.commit("view/selectAlters", markIdsInExtent);
+
+        // check if cluster connect is possible (more than 1 connectable alter)
+        connectableIdsInExtent = marksInExtent
+          .filter((am) => isConnectable(am.d))
+          .map((am) => am.d.id);
+        isClusterConnectPossible.value = connectableIdsInExtent.length >= 2;
+        isClusterFullyConnected.value =
+          isClusterConnectPossible.value &&
+          clusterConnected(connectableIdsInExtent);
+
+        // move buttons relative to selection box as SVG element
+        // <https://stackoverflow.com/questions/26049488/how-to-get-absolute-coordinates-of-object-inside-a-g-group>
+        const divChart = document.querySelector("div#chart");
+        const svgExtent = document.querySelector("#brush > .selection");
+        if (divChart && svgExtent) {
+          // console.log(svgExtent);
+          const chartRect = divChart.getBoundingClientRect();
+          const selRect = svgExtent.getBoundingClientRect();
+          // console.log(chartRect);
+          // console.log(selRect);
+          if (brushBtns.value) {
+            brushBtns.value.style.visibility = "visible";
+            brushBtns.value.style.top = selRect.y - chartRect.y + "px";
+            brushBtns.value.style.right =
+              chartRect.right - selRect.x + 4 + "px";
+          }
+        } else {
+          console.warn("Brush rect not found");
+        }
+      } else {
+        console.log("Brush selection inactive");
+        if (store.state.view.selected.size > 0) {
+          store.commit("view/clearSelectedAlters");
+        }
+        if (brushBtns.value) {
+          brushBtns.value.style.visibility = "hidden";
+        }
+      }
+    }
+
+    function isInBrushExtent(
+      mark: AlterMark,
+      extent: [[number, number], [number, number]]
+    ) {
+      return (
+        mark.x >= extent[0][0] &&
+        mark.x <= extent[1][0] &&
+        mark.y >= extent[0][1] &&
+        mark.y <= extent[1][1]
+      );
+    }
+
+    function clusterConnect() {
+      store.commit("addClusterConnections", connectableIdsInExtent);
+      isClusterFullyConnected.value = true;
+    }
+
+    function clusterDisconnect() {
+      store.commit("removeClusterConnections", connectableIdsInExtent);
+      isClusterFullyConnected.value = false;
+    }
+
+    function clusterConnected(markIds: number[]) {
+      for (let i = 0; i < markIds.length; i++) {
+        const connectedAlterIds = computed(() => {
+          const myId = markIds[i];
+          const id1s = store.state.nwk.connections
+            .filter((d) => d.id2 == myId)
+            .map((d) => d.id1);
+          const id2s = store.state.nwk.connections
+            .filter((d) => d.id1 == myId)
+            .map((d) => d.id2);
+          return [...id1s, ...id2s];
+        });
+        for (let x = i + 1; x < markIds.length; x++) {
+          if (!connectedAlterIds.value.includes(markIds[x])) {
+            return false;
+          }
+        }
+      }
+      return true;
+    }
+
     const getRoleShort = (role: string) => {
       return getRoleAbbrev(role);
     };
@@ -373,6 +595,12 @@ export default defineComponent({
       alteriNames: computed(() => store.state.view.alteriNames),
       showHorizons: computed(() => store.state.view.horizons),
       connections: computed(() => store.state.view.connections),
+      brushBtns,
+      isClusterConnectPossible,
+      isClusterFullyConnected,
+      clusterConnect,
+      clusterDisconnect,
+      clearBrush,
       Sectors,
       SYMBOL_DECEASED,
       // TODO browser detection b/c vector-effect seems not to work in Safari only as of 14 Dec 2021
@@ -448,6 +676,8 @@ line.select {
 
 .mark {
   fill: rgb(54, 54, 54);
+  stroke: white;
+  stroke-width: 0.2;
 }
 
 #sectors text {
@@ -460,4 +690,15 @@ line.select {
   font-size: 1em;
   font-weight: bold;
 }
+
+#brushBtns {
+  position: absolute;
+  visibility: hidden;
+  // display: flex;
+  // flex-direction: column;
+}
+#brushBtns > button {
+  display: block;
+  margin-bottom: 0.5rem;
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
index 2605daa..115966f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,6 +42,9 @@ import {
   faFilePdf,
   faArrowLeft,
   faInfo,
+  faLink,
+  faUnlink,
+  faArrowsAlt,
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faBars,
@@ -74,7 +77,10 @@ library.add(
   faCheck,
   faFilePdf,
   faArrowLeft,
-  faInfo
+  faInfo,
+  faLink,
+  faUnlink,
+  faArrowsAlt
 );
 
 // Vue.component("font-awesome-icon", FontAwesomeIcon);
diff --git a/src/store/index.ts b/src/store/index.ts
index f20531e..3e6e8a7 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -11,7 +11,7 @@ import {
 import { applyAdaptiveNWKDefaults } from "./adaptiveNWKDefaults";
 
 import { IUnReDoState, localStoragePlugin } from "./localStoragePlugin";
-import { nwkModule } from "./nwkModule";
+import { editAlter, nwkModule } from "./nwkModule";
 import { pseudonymPlugin, PseudonymState } from "./pseudonymPlugin";
 import {
   TAB_BASE,
@@ -92,6 +92,24 @@ const mutations = {
     state.view.editIndex = index;
     state.view.editTab = payload.tab ? payload.tab : TAB_BASE;
   },
+  editAndCloseAlterForm(
+    state: IStoreState,
+    payload: { changes: Partial<Alter> }
+  ): void {
+    const index = state.view.editIndex;
+
+    editAlter(state.nwk, index, payload.changes);
+
+    if (
+      index == null ||
+      (state.nwk.alteri[index].name.trim().length > 0 &&
+        state.nwk.alteri[index].distance > 0)
+    ) {
+      // only close if the alter is valid (esp. has name)
+      state.view.editIndex = null;
+      state.view.editTab = "";
+    }
+  },
 };
 
 const plugins =
diff --git a/src/store/nwkModule.ts b/src/store/nwkModule.ts
index 51fae04..99f87fc 100644
--- a/src/store/nwkModule.ts
+++ b/src/store/nwkModule.ts
@@ -32,28 +32,7 @@ const mutations = {
     state: NWK,
     payload: { index: number; changes: Partial<Alter> }
   ): void {
-    // based oen vuex\examples\composition\todomvc\store\mutations.js
-    // const index = state.alteri.indexOf(payload.alter);
-
-    // lookup does not work for 2 parallel mutations (form change & map click)
-    if (
-      payload.index != null &&
-      payload.index >= 0 &&
-      payload.index < state.alteri.length
-    ) {
-      // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>
-      const changedAlter = {
-        ...state.alteri[payload.index],
-        ...payload.changes,
-      };
-      applyAdaptiveNWKDefaults(changedAlter, payload.changes);
-      if (!isConnectable(changedAlter)) {
-        removeAllConnections(state, payload.index);
-      }
-      state.alteri.splice(payload.index, 1, changedAlter);
-    } else {
-      console.warn("alter index out of bounds: " + payload.index);
-    }
+    editAlter(state, payload.index, payload.changes);
   },
 
   editAlterById(
@@ -62,16 +41,7 @@ const mutations = {
   ): void {
     const index = state.alteri.findIndex((a) => a.id === payload.id);
     // const index = state.alteri.map((a) => a.id).indexOf(payload.id);
-    if (index >= 0) {
-      const changedAlter = {
-        ...state.alteri[index],
-        ...payload.changes,
-      };
-      applyAdaptiveNWKDefaults(changedAlter, payload.changes);
-      state.alteri.splice(index, 1, changedAlter);
-    } else {
-      console.warn("alter id not found: " + payload.id);
-    }
+    editAlter(state, index, payload.changes);
   },
 
   removeAlter(state: NWK, alterIndex: number): void {
@@ -86,6 +56,17 @@ const mutations = {
     state.connections.push(payload);
   },
 
+  addClusterConnections(state: NWK, payload: number[]): void {
+    for (let i = 0; i < payload.length - 1; i++) {
+      for (let x = i + 1; x < payload.length; x++) {
+        state.connections.push({
+          id1: payload[i],
+          id2: payload[x],
+        });
+      }
+    }
+  },
+
   removeConnection(state: NWK, payload: { id1: number; id2: number }): void {
     state.connections = state.connections.filter(
       (c) => c.id1 != payload.id1 || c.id2 != payload.id2
@@ -95,6 +76,12 @@ const mutations = {
     );
   },
 
+  removeClusterConnections(state: NWK, payload: number[]): void {
+    state.connections = state.connections.filter(
+      (c) => !(payload.includes(c.id1) && payload.includes(c.id2))
+    );
+  },
+
   toggleConnection(state: NWK, payload: { id1: number; id2: number }): void {
     const index = state.connections.findIndex(
       (c) => c.id1 === payload.id1 && c.id2 === payload.id2
@@ -114,6 +101,33 @@ const mutations = {
   },
 };
 
+export function editAlter(
+  state: NWK,
+  alterIndex: number | null,
+  changes: Partial<Alter>
+): void {
+  // lookup does not work for 2 parallel mutations (form change & map click)
+  if (
+    alterIndex != null &&
+    alterIndex >= 0 &&
+    alterIndex < state.alteri.length
+  ) {
+    // based on vuex\examples\composition\todomvc\store\mutations.js
+    // using spread to merge objects <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals>
+    const changedAlter = {
+      ...state.alteri[alterIndex],
+      ...changes,
+    };
+    applyAdaptiveNWKDefaults(changedAlter, changes);
+    if (!isConnectable(changedAlter)) {
+      removeAllConnections(state, alterIndex);
+    }
+    state.alteri.splice(alterIndex, 1, changedAlter);
+  } else {
+    console.warn("alter index invalid or out of bounds: " + alterIndex);
+  }
+}
+
 /**
  * removes all connections to and from an alter
  */
diff --git a/src/store/viewOptionsModule.ts b/src/store/viewOptionsModule.ts
index ff21cb8..1d7a97a 100644
--- a/src/store/viewOptionsModule.ts
+++ b/src/store/viewOptionsModule.ts
@@ -86,6 +86,10 @@ const mutations = {
   ): void {
     state.editIndex = payload.alterIndex;
     state.editTab = payload.tab ? payload.tab : TAB_BASE;
+
+    // intended side-effect: clearSelectedAlters
+    state.selected.clear();
+    // TODO nice to select opened alter (but index to id mapping missing)
   },
 
   closeAlterForm(state: ViewOptionsState): void {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 5fee374..92eb37c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -121,6 +121,7 @@ export default defineComponent({
 #chart {
   width: 97vmin;
   height: 100vmin;
+  position: relative;
   /* background: aqua; */
 }