diff --git a/the_works/static/the_works.css b/the_works/static/the_works.css
index c039c46..0e9ec54 100644
--- a/the_works/static/the_works.css
+++ b/the_works/static/the_works.css
@@ -115,15 +115,28 @@ summary:empty::before {
   color: var(--pico-background-color);
   font-size: .8em;
   padding: calc(var(--pico-form-element-spacing-vertical) * .5) calc(var(--pico-form-element-spacing-horizontal) * .5);
-  margin: auto calc(var(--pico-spacing) * .25);
+  margin: calc(var(--pico-spacing) * .25);
   cursor: default;
+  text-wrap: nowrap;
+  position: relative;
 }
 
 .dropdown-badge-close {
   cursor: pointer;  
+  font-size: 1.5em;
+  position: relative;
+  vertical-align: sub;
 }
 
 form:not([novalidate]) input:user-valid[type="search"] {
   border-color: inherit;
   background-image: none;
-}
\ No newline at end of file
+}
+
+/* style for Klappentext tooltips */
+[data-tooltip][data-placement="bottom"]::after, 
+[data-tooltip][data-placement="bottom"]::before  {
+  white-space: pre-line;
+  max-width: 400px;
+}
+
diff --git a/the_works/static/the_works.js b/the_works/static/the_works.js
index 191d075..7c7fdf3 100644
--- a/the_works/static/the_works.js
+++ b/the_works/static/the_works.js
@@ -146,7 +146,7 @@ function updateDropdownSelected(that, summary) {
     // add closing X to badge
     let badgeX = document.createElement("span");
     badgeX.classList.add("dropdown-badge-close");
-    badgeX.innerHTML = "✖";
+    badgeX.innerHTML = "×";
     badge.appendChild(badgeX);
     badgeX.addEventListener("click", removeDropdownBadge);
   } else {
@@ -162,3 +162,29 @@ function removeDropdownBadge(event) {
   this.parentNode.remove();
   event.stopPropagation();
 }
+
+// initializes all dropdown selects on the page 
+function initAllDropdownSelects() {
+  // initialize each dropdown individually
+  let dropdowns = document.querySelectorAll("form details.dropdown");
+  dropdowns.forEach((d) => initDropdownSelect(d));
+  // now it's time to set the z-indices 
+  // get the_works style sheet
+  let sheet = [...document.styleSheets].filter((s) => s.ownerNode.getAttribute("href").includes("the_works"))[0];
+  const initialZ = 20;
+  // set z-index on dropdowns in reverse order  
+  for ( let i = 0; i < dropdowns.length; i++ ) {
+    sheet.insertRule(`#${dropdowns[dropdowns.length-i-1].id} { z-index: ${initialZ + i*3};}`, sheet.cssRules.length);
+    sheet.insertRule(`#${dropdowns[dropdowns.length-i-1].id} .dropdown-badge { z-index: ${initialZ+1+i*3};}`, sheet.cssRules.length);
+    sheet.insertRule(`#${dropdowns[dropdowns.length-i-1].id} .dropdown-badge-close { z-index: ${initialZ+2+i*3};}`, sheet.cssRules.length);
+  }
+  // event handler for summary elements (see below)
+  function summaryClick(event, that) {
+    if ( event.target != that && that.contains(event.target) ) {
+      event.preventDefault();
+    }
+  }
+  // add event handler to summary elements preventing default behavior (toggling the details element) if the click actually targeted a badge
+  document.querySelectorAll("form details.dropdown summary").forEach((summary) => summary.addEventListener("click", (event) => summaryClick(event, summary), true)); 
+}
+
diff --git a/the_works/templates/views/text_detail.html b/the_works/templates/views/text_detail.html
index 82034dc..5cd8de2 100644
--- a/the_works/templates/views/text_detail.html
+++ b/the_works/templates/views/text_detail.html
@@ -93,6 +93,6 @@ Text bearbeiten
 {% block script %}
 <script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
-  window.onload = () => initDropdownSelect(document.getElementById("form_Genre_dropdown"));
+  window.onload = () => initAllDropdownSelects();
 </script>
 {% endblock script %}
diff --git a/the_works/templates/views/werk_detail.html b/the_works/templates/views/werk_detail.html
index dcfa195..5f76c91 100644
--- a/the_works/templates/views/werk_detail.html
+++ b/the_works/templates/views/werk_detail.html
@@ -159,9 +159,6 @@ Werk bearbeiten
 {% block script %}
 <script src="{{ url_for('static', filename='the_works.js') }}"></script>
 <script>
-  window.onload = () => {
-    initDropdownSelect(document.getElementById("form_Genre_dropdown"));
-    initDropdownSelect(document.getElementById("form_Herausgeber_dropdown"));
-  }
+  window.onload = () => initAllDropdownSelects();
 </script>
 {% endblock script %}