From 7156ce0983c775966b002a1ad2f7a35e72845536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20Lauk=C3=B6tter?=
 <malte.laukoetter@digitalservice.bund.de>
Date: Mon, 12 Aug 2024 12:18:04 +0200
Subject: [PATCH 1/5] Update design for selecting akn elements

RISDEV-4460
---
 frontend/src/components/RisModForm.vue | 258 ++++++++++++++++---------
 1 file changed, 162 insertions(+), 96 deletions(-)

diff --git a/frontend/src/components/RisModForm.vue b/frontend/src/components/RisModForm.vue
index 1a45f9ee7..9d80b7c04 100644
--- a/frontend/src/components/RisModForm.vue
+++ b/frontend/src/components/RisModForm.vue
@@ -476,206 +476,272 @@ const sentryTraceId = useSentryTraceId()
 </template>
 
 <style scoped>
-:deep([class^="akn-"]):before,
-:deep([class^="akn-"]):after {
-  @apply border border-solid border-gray-500 bg-gray-300 px-2;
-}
+/* block elements */
+:deep(
+    :is(
+        .akn-article,
+        .akn-attachment,
+        .akn-attachments,
+        .akn-block,
+        .akn-blockContainer,
+        .akn-blockList,
+        .akn-body,
+        .akn-book,
+        .akn-caption,
+        .akn-chapter,
+        .akn-citation,
+        .akn-citations,
+        .akn-collectionBody,
+        .akn-component,
+        .akn-componentRef,
+        .akn-components,
+        .akn-conclusions,
+        .akn-content,
+        .akn-docAuthority,
+        .akn-docDate,
+        .akn-docNumber,
+        .akn-docProponent,
+        .akn-docStage,
+        .akn-docTitle,
+        .akn-docType,
+        .akn-foreign,
+        .akn-formula,
+        .akn-hcontainer,
+        .akn-heading,
+        .akn-intro,
+        .akn-item,
+        .akn-li,
+        .akn-list,
+        .akn-listIntroduction,
+        .akn-listWrapUp,
+        .akn-longTitle,
+        .akn-mainBody,
+        .akn-mod,
+        .akn-ol,
+        .akn-p,
+        .akn-paragraph,
+        .akn-part,
+        .akn-point,
+        .akn-preamble,
+        .akn-preface,
+        .akn-quotedStructure,
+        .akn-recital,
+        .akn-recitals,
+        .akn-section,
+        .akn-signature,
+        .akn-source,
+        .akn-subchapter,
+        .akn-subsection,
+        .akn-subtitle,
+        .akn-table,
+        .akn-tblock,
+        .akn-td,
+        .akn-th,
+        .akn-title,
+        .akn-toc,
+        .akn-tocItem,
+        .akn-tr,
+        .akn-ul,
+        .akn-wrapUp
+      )
+  ) {
+  @apply block rounded border border-dashed border-highlight-quotedStructure-selected-border p-8;
+
+  /* has a next child, aka a gap-8 for a non grid element */
+
+  :deep(&:has(+ *)) {
+    @apply mb-8;
+  }
+
+  :deep(&):before {
+    @apply block px-2 font-font-family-condensed text-[#4E596A];
+    font-size: medium;
+  }
+
+  :deep(&.selected) {
+    @apply -mx-1 border-2 border-solid border-black bg-[#B0EFFE];
+
+    :deep(&):before {
+      @apply font-bold text-black;
+    }
+  }
 
-:deep([class^="akn-"]):before {
-  border-radius: 0.375rem 0 0 0.375rem;
-  border-right: none;
+  :deep(&):hover:not(:has([class^="akn-"]:hover)):not(.selected) {
+    @apply -mx-1 border-2 border-[#004B76] bg-[#D6F7FE];
+  }
 }
 
-:deep([class^="akn-"]):after {
-  border-radius: 0 0.375rem 0.375rem 0;
-  border-left: none;
+/* inline elements */
+:deep(
+    :is(
+        .akn-a,
+        .akn-abbr,
+        .akn-affectedDocument,
+        .akn-authorialNote,
+        .akn-b,
+        .akn-br,
+        .akn-date,
+        .akn-documentRef,
+        .akn-eol,
+        .akn-eop,
+        .akn-i,
+        .akn-img,
+        .akn-inline,
+        .akn-location,
+        .akn-marker,
+        .akn-mod,
+        .akn-num,
+        .akn-organization,
+        .akn-person,
+        .akn-quotedText,
+        .akn-ref,
+        .akn-relatedDocument,
+        .akn-role,
+        .akn-rref,
+        .akn-session,
+        .akn-shortTitle,
+        .akn-span,
+        .akn-sub,
+        .akn-sup,
+        .akn-u
+      )
+  ) {
+  @apply inline border border-[#004B76] bg-[#D6F7FE];
 }
 
-:deep(.akn-longTitle):before,
-:deep(.akn-longTitle):after {
+:deep(.akn-longTitle):before {
   content: "long title";
 }
 
-:deep(.akn-citations):before,
-:deep(.akn-citations):after {
+:deep(.akn-citations):before {
   content: "citations";
 }
 
-:deep(.akn-recitals):before,
-:deep(.akn-recitals):after {
+:deep(.akn-recitals):before {
   content: "recitals";
 }
 
-:deep(.akn-recital):before,
-:deep(.akn-recital):after {
+:deep(.akn-recital):before {
   content: "recital";
 }
 
-:deep(.akn-blockContainer):before,
-:deep(.akn-blockContainer):after {
+:deep(.akn-blockContainer):before {
   content: "block container";
 }
 
-:deep(.akn-book):before,
-:deep(.akn-book):after {
+:deep(.akn-book):before {
   content: "book";
 }
 
-:deep(.akn-part):before,
-:deep(.akn-part):after {
+:deep(.akn-part):before {
   content: "part";
 }
 
-:deep(.akn-chapter):before,
-:deep(.akn-chapter):after {
+:deep(.akn-chapter):before {
   content: "chapter";
 }
 
-:deep(.akn-subchapter):before,
-:deep(.akn-subchapter):after {
+:deep(.akn-subchapter):before {
   content: "subchapter";
 }
 
-:deep(.akn-section):before,
-:deep(.akn-section):after {
+:deep(.akn-section):before {
   content: "section";
 }
 
-:deep(.akn-subsection):before,
-:deep(.akn-subsection):after {
+:deep(.akn-subsection):before {
   content: "subsection";
 }
 
-:deep(.akn-title):before,
-:deep(.akn-title):after {
+:deep(.akn-title):before {
   content: "title";
 }
 
-:deep(.akn-subtitle):before,
-:deep(.akn-subtitle):after {
+:deep(.akn-subtitle):before {
   content: "subtitle";
 }
 
-:deep(.akn-article):before,
-:deep(.akn-article):after {
+:deep(.akn-article):before {
   content: "article";
 }
 
-:deep(.akn-paragraph):before,
-:deep(.akn-paragraph):after {
+:deep(.akn-paragraph):before {
   content: "paragraph";
 }
 
-:deep(.akn-list):before,
-:deep(.akn-list):after {
+:deep(.akn-list):before {
   content: "list";
 }
 
-:deep(.akn-documentRef):before,
-:deep(.akn-documentRef):after {
+:deep(.akn-documentRef):before {
   content: "document ref";
 }
 
-:deep(.akn-componentRef):before,
-:deep(.akn-componentRef):after {
+:deep(.akn-componentRef):before {
   content: "component ref";
 }
 
-:deep(.akn-point):before,
-:deep(.akn-point):after {
+:deep(.akn-point):before {
   content: "point";
 }
 
-:deep(.akn-wrapUp):before,
-:deep(.akn-wrapUp):after {
+:deep(.akn-wrapUp):before {
   content: "wrap up";
 }
 
-:deep(.akn-foreign):before,
-:deep(.akn-foreign):after {
+:deep(.akn-foreign):before {
   content: "foreign";
 }
 
-:deep(.akn-tblock):before,
-:deep(.akn-tblock):after {
+:deep(.akn-tblock):before {
   content: "tblock";
 }
 
-:deep(.akn-toc):before,
-:deep(.akn-toc):after {
+:deep(.akn-toc):before {
   content: "toc";
 }
 
-:deep(.akn-tocItem):before,
-:deep(.akn-tocItem):after {
+:deep(.akn-tocItem):before {
   content: "toc item";
 }
 
-:deep(.akn-p):before,
-:deep(.akn-p):after {
+:deep(.akn-p):before {
   content: "p";
 }
 
-:deep(.akn-block):before,
-:deep(.akn-block):after {
+:deep(.akn-block):before {
   content: "block";
 }
 
-:deep(.akn-num):before,
-:deep(.akn-num):after {
+:deep(.akn-num):before {
   content: "num";
 }
 
-:deep(.akn-heading):before,
-:deep(.akn-heading):after {
+:deep(.akn-heading):before {
   content: "heading";
 }
 
-:deep(.akn-td):before,
-:deep(.akn-td):after {
+:deep(.akn-td):before {
   content: "td";
 }
 
-:deep(.akn-th):before,
-:deep(.akn-th):after {
+:deep(.akn-th):before {
   content: "th";
 }
 
-:deep(.akn-tr):before,
-:deep(.akn-tr):after {
+:deep(.akn-tr):before {
   content: "tr";
 }
 
-:deep(.akn-ol):before,
-:deep(.akn-ol):after {
+:deep(.akn-ol):before {
   content: "ol";
 }
 
-:deep(.akn-ul):before,
-:deep(.akn-ul):after {
+:deep(.akn-ul):before {
   content: "ul";
 }
 
-:deep(.akn-table):before,
-:deep(.akn-table):after {
+:deep(.akn-table):before {
   content: "table";
 }
-
-:deep([class^="akn-"]:hover):not(:has([class^="akn-"]:hover)) {
-  @apply border-highlight-quotedStructure-hover-border bg-highlight-quotedStructure-hover-background;
-}
-
-:deep([class^="akn-"]:hover):not(:has([class^="akn-"]:hover)):before,
-:deep([class^="akn-"]:hover):not(:has([class^="akn-"]:hover)):after {
-  @apply border-highlight-quotedStructure-hover-innerHover-border bg-highlight-quotedStructure-hover-innerHover-background;
-}
-
-:deep([class^="akn-"].selected) {
-  @apply border-highlight-quotedStructure-hover-border bg-highlight-quotedStructure-selected-content;
-}
-
-:deep([class^="akn-"].selected):before,
-:deep([class^="akn-"].selected):after {
-  @apply border-highlight-quotedStructure-selected-pseudo-border bg-highlight-quotedStructure-selected-pseudo-background;
-}
 </style>

From 6c5697c6ecfa4ed26098919c1078cf7c43add15e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20Lauk=C3=B6tter?=
 <malte.laukoetter@digitalservice.bund.de>
Date: Mon, 12 Aug 2024 14:07:02 +0200
Subject: [PATCH 2/5] Add special layout for akn:num in headlines

RISDEV-4460
---
 frontend/src/components/RisModForm.vue | 38 +++++++++++++++++---------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/RisModForm.vue b/frontend/src/components/RisModForm.vue
index 9d80b7c04..f6a5a10a6 100644
--- a/frontend/src/components/RisModForm.vue
+++ b/frontend/src/components/RisModForm.vue
@@ -476,9 +476,13 @@ const sentryTraceId = useSentryTraceId()
 </template>
 
 <style scoped>
-/* block elements */
+:deep(.akn-akomaNtoso :has(+ *)) {
+  @apply mb-8;
+}
+
 :deep(
     :is(
+        /* block elements + akn:num */
         .akn-article,
         .akn-attachment,
         .akn-attachments,
@@ -517,6 +521,7 @@ const sentryTraceId = useSentryTraceId()
         .akn-longTitle,
         .akn-mainBody,
         .akn-mod,
+        .akn-num,
         .akn-ol,
         .akn-p,
         .akn-paragraph,
@@ -547,22 +552,31 @@ const sentryTraceId = useSentryTraceId()
   ) {
   @apply block rounded border border-dashed border-highlight-quotedStructure-selected-border p-8;
 
-  /* has a next child, aka a gap-8 for a non grid element */
-
-  :deep(&:has(+ *)) {
-    @apply mb-8;
+  :deep(&):before {
+    @apply ds-label-03-reg block px-2 pb-8 text-start font-[monospace] text-[#4E596A];
   }
 
-  :deep(&):before {
-    @apply block px-2 font-font-family-condensed text-[#4E596A];
-    font-size: medium;
+  /**
+   * Special styling to place akn:num and akn:heading in same row
+   */
+
+  :deep(& :is(h1, h2, h3, h4, h5):has(.akn-num):has(.akn-heading)) {
+    @apply grid grid-cols-[max-content,1fr] gap-8;
+
+    :deep(& .akn-heading) {
+      @apply h-full;
+    }
+
+    :deep(& .akn-num) {
+      @apply h-full;
+    }
   }
 
   :deep(&.selected) {
     @apply -mx-1 border-2 border-solid border-black bg-[#B0EFFE];
 
     :deep(&):before {
-      @apply font-bold text-black;
+      @apply ds-label-03-bold text-black;
     }
   }
 
@@ -571,9 +585,9 @@ const sentryTraceId = useSentryTraceId()
   }
 }
 
-/* inline elements */
 :deep(
     :is(
+        /* inline elements without akn:num */
         .akn-a,
         .akn-abbr,
         .akn-affectedDocument,
@@ -589,8 +603,6 @@ const sentryTraceId = useSentryTraceId()
         .akn-inline,
         .akn-location,
         .akn-marker,
-        .akn-mod,
-        .akn-num,
         .akn-organization,
         .akn-person,
         .akn-quotedText,
@@ -605,7 +617,7 @@ const sentryTraceId = useSentryTraceId()
         .akn-sup,
         .akn-u
       )
-  ) {
+  ):not(:empty) {
   @apply inline border border-[#004B76] bg-[#D6F7FE];
 }
 

From 8fa4dc160b91a0a28e6977a8637cc7d2a37c639d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20Lauk=C3=B6tter?=
 <malte.laukoetter@digitalservice.bund.de>
Date: Mon, 12 Aug 2024 14:41:35 +0200
Subject: [PATCH 3/5] Synchronize akn-element lists

RISDEV-4460
---
 frontend/src/components/RisModForm.vue | 60 ++++----------------------
 1 file changed, 8 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/RisModForm.vue b/frontend/src/components/RisModForm.vue
index f6a5a10a6..ed1f4d79a 100644
--- a/frontend/src/components/RisModForm.vue
+++ b/frontend/src/components/RisModForm.vue
@@ -342,8 +342,6 @@ const sentryTraceId = useSentryTraceId()
           akn:article-aria-label="article"
           akn:paragraph-aria-label="paragraph"
           akn:list-aria-label="list"
-          akn:document-ref-aria-label="document ref"
-          akn:component-ref-aria-label="component ref"
           akn:point-aria-label="point"
           akn:wrap-up-aria-label="wrap up"
           akn:foreign-aria-label="foreign"
@@ -376,8 +374,6 @@ const sentryTraceId = useSentryTraceId()
           @click:akn:subtitle="handleAknElementClick"
           @click:akn:article="handleAknElementClick"
           @click:akn:paragraph="handleAknElementClick"
-          @click:akn:document-ref="handleAknElementClick"
-          @click:akn:component-ref="handleAknElementClick"
           @click:akn:point="handleAknElementClick"
           @click:akn:wrap-up="handleAknElementClick"
           @click:akn:foreign="handleAknElementClick"
@@ -482,59 +478,25 @@ const sentryTraceId = useSentryTraceId()
 
 :deep(
     :is(
-        /* block elements + akn:num */
         .akn-article,
-        .akn-attachment,
-        .akn-attachments,
         .akn-block,
         .akn-blockContainer,
-        .akn-blockList,
-        .akn-body,
         .akn-book,
-        .akn-caption,
         .akn-chapter,
-        .akn-citation,
         .akn-citations,
-        .akn-collectionBody,
-        .akn-component,
-        .akn-componentRef,
-        .akn-components,
-        .akn-conclusions,
-        .akn-content,
-        .akn-docAuthority,
-        .akn-docDate,
-        .akn-docNumber,
-        .akn-docProponent,
-        .akn-docStage,
-        .akn-docTitle,
-        .akn-docType,
         .akn-foreign,
-        .akn-formula,
-        .akn-hcontainer,
         .akn-heading,
-        .akn-intro,
-        .akn-item,
-        .akn-li,
         .akn-list,
-        .akn-listIntroduction,
-        .akn-listWrapUp,
         .akn-longTitle,
-        .akn-mainBody,
-        .akn-mod,
         .akn-num,
         .akn-ol,
         .akn-p,
         .akn-paragraph,
         .akn-part,
         .akn-point,
-        .akn-preamble,
-        .akn-preface,
-        .akn-quotedStructure,
         .akn-recital,
         .akn-recitals,
         .akn-section,
-        .akn-signature,
-        .akn-source,
         .akn-subchapter,
         .akn-subsection,
         .akn-subtitle,
@@ -556,11 +518,10 @@ const sentryTraceId = useSentryTraceId()
     @apply ds-label-03-reg block px-2 pb-8 text-start font-[monospace] text-[#4E596A];
   }
 
-  /**
-   * Special styling to place akn:num and akn:heading in same row
-   */
-
   :deep(& :is(h1, h2, h3, h4, h5):has(.akn-num):has(.akn-heading)) {
+    /**
+     * Special styling to place akn:num and akn:heading in same row
+     */
     @apply grid grid-cols-[max-content,1fr] gap-8;
 
     :deep(& .akn-heading) {
@@ -596,6 +557,7 @@ const sentryTraceId = useSentryTraceId()
         .akn-br,
         .akn-date,
         .akn-documentRef,
+        .akn-componentRef,
         .akn-eol,
         .akn-eop,
         .akn-i,
@@ -617,8 +579,10 @@ const sentryTraceId = useSentryTraceId()
         .akn-sup,
         .akn-u
       )
-  ):not(:empty) {
-  @apply inline border border-[#004B76] bg-[#D6F7FE];
+  ) {
+  :deep(&):not(:empty) {
+    @apply inline border border-[#004B76] bg-[#D6F7FE];
+  }
 }
 
 :deep(.akn-longTitle):before {
@@ -685,14 +649,6 @@ const sentryTraceId = useSentryTraceId()
   content: "list";
 }
 
-:deep(.akn-documentRef):before {
-  content: "document ref";
-}
-
-:deep(.akn-componentRef):before {
-  content: "component ref";
-}
-
 :deep(.akn-point):before {
   content: "point";
 }

From 45c1551eb3a0fc092423d827682960a70c571011 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20Lauk=C3=B6tter?=
 <malte.laukoetter@digitalservice.bund.de>
Date: Mon, 12 Aug 2024 15:45:45 +0200
Subject: [PATCH 4/5] Improve num positioning

RISDEV-4460
---
 frontend/src/components/RisModForm.vue | 36 ++++++++++++++++----------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/RisModForm.vue b/frontend/src/components/RisModForm.vue
index ed1f4d79a..aa14d94ad 100644
--- a/frontend/src/components/RisModForm.vue
+++ b/frontend/src/components/RisModForm.vue
@@ -472,10 +472,6 @@ const sentryTraceId = useSentryTraceId()
 </template>
 
 <style scoped>
-:deep(.akn-akomaNtoso :has(+ *)) {
-  @apply mb-8;
-}
-
 :deep(
     :is(
         .akn-article,
@@ -514,27 +510,41 @@ const sentryTraceId = useSentryTraceId()
   ) {
   @apply block rounded border border-dashed border-highlight-quotedStructure-selected-border p-8;
 
+  :deep(&:not(:is(:last-child))) {
+    @apply mb-8;
+  }
+
   :deep(&):before {
     @apply ds-label-03-reg block px-2 pb-8 text-start font-[monospace] text-[#4E596A];
   }
 
-  :deep(& :is(h1, h2, h3, h4, h5):has(.akn-num):has(.akn-heading)) {
+  :deep(&:has(> :is(.akn-num))),
+  :deep(& > :is(h1, h2, h3, h4, h5):has(> :is(.akn-num))) {
     /**
-     * Special styling to place akn:num and akn:heading in same row
+     * Special styling to place akn:num and the element following it in the same row.
+     * Sometimes the akn:num and a akn:heading are placed within a h1,h2,h3,...-tag. We also want to place them in the same row.
      */
-    @apply grid grid-cols-[max-content,1fr] gap-8;
+    @apply grid grid-cols-[min-content,1fr] gap-8;
+
+    :deep(&):before {
+      @apply col-span-full;
+    }
+
+    :deep(& > :nth-child(1)) {
+      @apply col-span-1 col-start-1 h-full;
+    }
 
-    :deep(& .akn-heading) {
-      @apply h-full;
+    :deep(& > :nth-child(2)) {
+      @apply col-span-1 col-start-2 h-full;
     }
 
-    :deep(& .akn-num) {
-      @apply h-full;
+    :deep(& *) {
+      @apply col-span-full;
     }
   }
 
   :deep(&.selected) {
-    @apply -mx-1 border-2 border-solid border-black bg-[#B0EFFE];
+    @apply border-2 border-solid border-black bg-[#B0EFFE];
 
     :deep(&):before {
       @apply ds-label-03-bold text-black;
@@ -542,7 +552,7 @@ const sentryTraceId = useSentryTraceId()
   }
 
   :deep(&):hover:not(:has([class^="akn-"]:hover)):not(.selected) {
-    @apply -mx-1 border-2 border-[#004B76] bg-[#D6F7FE];
+    @apply border-2 border-[#004B76] bg-[#D6F7FE];
   }
 }
 

From 654f934a18cb1ae5dd263165d10ef1218a277ff0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malte=20Lauk=C3=B6tter?=
 <malte.laukoetter@digitalservice.bund.de>
Date: Tue, 13 Aug 2024 08:30:58 +0200
Subject: [PATCH 5/5] Improve documentation

RISDEV-4460
---
 frontend/src/components/RisModForm.vue | 36 ++++++++++++++++----------
 frontend/tailwind.config.js            | 13 ++++++++++
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/RisModForm.vue b/frontend/src/components/RisModForm.vue
index aa14d94ad..8c91269cc 100644
--- a/frontend/src/components/RisModForm.vue
+++ b/frontend/src/components/RisModForm.vue
@@ -508,51 +508,61 @@ const sentryTraceId = useSentryTraceId()
         .akn-wrapUp
       )
   ) {
-  @apply block rounded border border-dashed border-highlight-quotedStructure-selected-border p-8;
-
-  :deep(&:not(:is(:last-child))) {
-    @apply mb-8;
-  }
+  @apply block min-w-min rounded border border-dashed border-highlight-elementSelect-default-border p-8;
 
   :deep(&):before {
     @apply ds-label-03-reg block px-2 pb-8 text-start font-[monospace] text-[#4E596A];
   }
 
+  /**
+   * Special styling to place akn:num and the element following it in the same row.
+   * Sometimes the akn:num and a akn:heading are placed within a h1,h2,h3,...-tag. We also want to place them in the same row.
+   *
+   * The selector selects all elements that have a akn:num as first child.
+   */
   :deep(&:has(> :is(.akn-num))),
   :deep(& > :is(h1, h2, h3, h4, h5):has(> :is(.akn-num))) {
-    /**
-     * Special styling to place akn:num and the element following it in the same row.
-     * Sometimes the akn:num and a akn:heading are placed within a h1,h2,h3,...-tag. We also want to place them in the same row.
-     */
     @apply grid grid-cols-[min-content,1fr] gap-8;
 
+    /* before part of the element that includes the akn:num */
     :deep(&):before {
       @apply col-span-full;
     }
 
+    /* the akn:num element */
     :deep(& > :nth-child(1)) {
       @apply col-span-1 col-start-1 h-full;
     }
 
+    /* the part directly after the akn:num element, typically a akn:heading */
     :deep(& > :nth-child(2)) {
       @apply col-span-1 col-start-2 h-full;
     }
 
-    :deep(& *) {
+    /* all direct child elements */
+
+    :deep(& > *) {
       @apply col-span-full;
     }
   }
 
   :deep(&.selected) {
-    @apply border-2 border-solid border-black bg-[#B0EFFE];
+    @apply border-2 border-solid border-highlight-elementSelect-selected-border bg-highlight-elementSelect-selected-background;
 
     :deep(&):before {
       @apply ds-label-03-bold text-black;
     }
   }
 
+  /* The most deeply nested element that is currently hovered and not selected */
   :deep(&):hover:not(:has([class^="akn-"]:hover)):not(.selected) {
-    @apply border-2 border-[#004B76] bg-[#D6F7FE];
+    @apply border-2 border-highlight-elementSelect-hover-border bg-highlight-elementSelect-hover-background;
+  }
+
+  /* Add a small gap behind all elements that are not the last child element of their parent */
+
+  :deep(:is(&, & > :is(h1, h2, h3, h4, h5)):not(:is(:last-child))) {
+    @apply mb-8 mr-0;
   }
 }
 
@@ -591,7 +601,7 @@ const sentryTraceId = useSentryTraceId()
       )
   ) {
   :deep(&):not(:empty) {
-    @apply inline border border-[#004B76] bg-[#D6F7FE];
+    @apply inline border border-highlight-elementSelect-hover-border bg-highlight-elementSelect-hover-background;
   }
 }
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 34842de47..5c3baf717 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -85,6 +85,19 @@ module.exports = {
               },
             },
           },
+          elementSelect: {
+            default: {
+              border: "#004b76",
+            },
+            selected: {
+              background: "#B0EFFE",
+              border: "#000",
+            },
+            hover: {
+              background: "#D6F7FE",
+              border: "#004B76",
+            },
+          },
         },
       },
     },