diff --git a/src/_layouts/components/tocTools.11ty.js b/src/_layouts/components/tocTools.11ty.js
index 5d77f2ed7b..2227873d97 100644
--- a/src/_layouts/components/tocTools.11ty.js
+++ b/src/_layouts/components/tocTools.11ty.js
@@ -29,9 +29,10 @@ exports.getPageTOC = (obj) => {
   const createToc = (collection) => {
 
     const tocItems = collection.filter(item => item.data.level <= maxLevel).map((item) => {
+      const id = eleventy.slugify(item.data.title);
       return `
-        <li>
-          <a href="#${eleventy.slugify(item.data.title)}">${item.data.title}</a><span class="icon">navigate_next</span>
+        <li data-scrollspy-target="${id}">
+          <a href="#${id}">${item.data.title}</a>
         </li>
       `;
     });
@@ -43,7 +44,8 @@ exports.getPageTOC = (obj) => {
   }
 
   return `
-    <nav class="inline-navigation">
+    <nav class="inline-navigation" data-js-scrollspy>
+      <h2 class="navigation-title">Inhalt</h2>
       ${createToc(collection)}
     </nav>
   `;
diff --git a/src/_layouts/kurzbericht.11ty.js b/src/_layouts/kurzbericht.11ty.js
index 5182e5e82f..2c13445422 100644
--- a/src/_layouts/kurzbericht.11ty.js
+++ b/src/_layouts/kurzbericht.11ty.js
@@ -27,6 +27,15 @@ module.exports = {
 
 		return `
       <div class="content-wrap">
+        <aside>
+          <nav>
+            ${tocTools.getPageTOC({
+              eleventy: this,
+              collection: data.collections.itemsKurzbericht,
+              maxLevel: 2
+            })}
+          </nav>
+        </aside>
 			  <main>
 			    <section class="cover">
 			    	<header>
@@ -44,15 +53,6 @@ module.exports = {
             ${kurzberichtList.join("\n")}
           </section>
 			  </main>
-        <aside>
-          <nav>
-            ${tocTools.getPageTOC({
-              eleventy: this,
-              collection: data.collections.itemsKurzbericht,
-              maxLevel: 2
-            })}
-          </nav>
-        </aside>
       </div>
 		`;
 	}
diff --git a/src/assets/scripts/main.js b/src/assets/scripts/main.js
index 695564c030..6cabd66bbf 100644
--- a/src/assets/scripts/main.js
+++ b/src/assets/scripts/main.js
@@ -228,6 +228,42 @@ const addScrollToTop = () => {
   };
 };
 
+/* Scrollspy
+############################################################################ */
+
+const addScrollSpy = () => {
+
+  const inlineNavigation = document.querySelector("[data-js-scrollspy]");
+  if(!inlineNavigation) return;
+
+  let scrollSpyActiveElement = false;
+  const sections = document.querySelectorAll("h2[id], h3[id]");
+    
+  const intersectionCallback = (entries, observer) => {
+    if (entries[0].intesectionRatio <= 0) return;
+
+    if (entries[0].intersectionRatio > 0 || entries[0].intersectionRatio < 0.2) {
+
+      if(scrollSpyActiveElement) scrollSpyActiveElement.classList.remove('is-active');
+
+      const {id} = entries[0].target;
+      const activeElement = inlineNavigation.querySelector(`[data-scrollspy-target="${id}"]`).querySelector("a");
+      activeElement.classList.add('is-active');
+
+      scrollSpyActiveElement = activeElement;
+    }
+  };
+  
+  const intersectionOptions = {};
+  const intersectionObserver = new IntersectionObserver(intersectionCallback, intersectionOptions);
+  
+  sections.forEach((section) => {
+    intersectionObserver.observe(section);
+  });
+
+  
+};
+
 /* Main
 ############################################################################ */
 
@@ -238,4 +274,5 @@ document.addEventListener("DOMContentLoaded", () => {
   addDynamicHyperlinks();
   addGalleryInteractions();
   addScrollToTop();
+  addScrollSpy();
 });
diff --git a/src/assets/styles/scss/components/navigation.scss b/src/assets/styles/scss/components/navigation.scss
index e8a0256c28..07ab9a2d03 100644
--- a/src/assets/styles/scss/components/navigation.scss
+++ b/src/assets/styles/scss/components/navigation.scss
@@ -2,6 +2,12 @@
 ############################################################################ */
 
 .inline-navigation{
+
+  .navigation-title{
+    font-size: var(--m);
+    padding-top: 0;
+  }
+
   li{
     line-height: var(--lh-tight);
     position: relative;
@@ -14,30 +20,11 @@
       transition: padding var(--tr-fast);
       padding-right: var(--fluid-space-s);
 
-      &:hover{
+      &:hover, &.is-active{
         padding-left: var(--half);
         padding-right: var(--fluid-space-xs);
-        
-      }
-    }
-
-    & > .icon{
-      transition: all var(--tr-fast);
-      position: absolute;
-      top: 0;
-      right: -20px;
-      bottom: 0;
-      line-height: var(--l);
-      vertical-align: bottom;
-      font-weight: var(--fw-bold);
-      opacity: 0;
-      color: var(--color-accent);
-    }
-
-    &:hover{
-      .icon{
-        opacity: 1;
-        right: var(--quat);
+        border-left: solid var(--border-width-m) var(--color-accent);
+        background-color: var(--darken);
       }
     }
   }
diff --git a/src/assets/styles/scss/composition.scss b/src/assets/styles/scss/composition.scss
index 28909975b4..04c71cad04 100644
--- a/src/assets/styles/scss/composition.scss
+++ b/src/assets/styles/scss/composition.scss
@@ -33,18 +33,24 @@ table{
 
 @media screen and (min-width: 160ch){
   .content-wrap:has(aside){
-    display: grid;
+    display: flex;
     gap: var(--fluid-space-m);
-    grid-template-columns: 1fr var(--max-width-navigation);
+    flex-direction: row-reverse;
 
     aside{
       padding-right: var(--xl);
       font-size: var(--s);
+      max-width: var(--max-width-aside);
+      
       nav{
         position: sticky;
         top: calc(var(--fluid-space-l) * 1.5);
       }
     }
+
+    main{
+      flex-grow: 2;
+    }
   }
 }
 
diff --git a/src/assets/styles/scss/global/_base.scss b/src/assets/styles/scss/global/_base.scss
index 580540ebb3..74dd944362 100755
--- a/src/assets/styles/scss/global/_base.scss
+++ b/src/assets/styles/scss/global/_base.scss
@@ -40,6 +40,7 @@ h2 {
   padding-top: var(--fluid-space-s);
   margin-bottom: var(--fluid-space-s);
   font-size: var(--xl);
+
 }
 
 h3 {
@@ -47,6 +48,7 @@ h3 {
   font-size: var(--l);
   margin-bottom: var(--fluid-space-xs);
   color: var(--darkest);
+  font-weight: var(--fw-medium);
 }
 
 h4,
@@ -55,7 +57,11 @@ h6 {
   font-size: var(--m);
   padding-top: var(--fluid-space-xs);
   margin-bottom: var(--half);
-  color: var(--darkest);
+}
+
+h5,
+h6 {
+  padding-top: var(--xs);
 }
 
 p,
@@ -105,6 +111,13 @@ ul + h4{
   margin-top: var(--fluid-space-s);
 }
 
+p + h5,
+p + h6,
+ul + h5,
+ul + h6{
+  margin-top: var(--half);
+}
+
 hr{
   margin-top: var(--fluid-space-l);
   margin-bottom: var(--fluid-space-l);
diff --git a/src/assets/styles/scss/global/_variables.scss b/src/assets/styles/scss/global/_variables.scss
index 6d4c2281bb..94e50b3f91 100755
--- a/src/assets/styles/scss/global/_variables.scss
+++ b/src/assets/styles/scss/global/_variables.scss
@@ -23,6 +23,7 @@
   --max-width-image-l: calc(var(--m) * 15);
   --max-width-image-s: calc(var(--m) * 5);
   --max-width-navigation: calc(var(--m) * 20);
+  --max-width-aside: calc(var(--m) * 25);
   --mi-lila: #9313ce;
   --mi-gruen: #00ad2f;
   --mi-orange: #F58700;
diff --git a/src/kurzbericht/110-curriculumwerkstatt.md b/src/kurzbericht/110-curriculumwerkstatt.md
index 264cda406d..17a390641b 100644
--- a/src/kurzbericht/110-curriculumwerkstatt.md
+++ b/src/kurzbericht/110-curriculumwerkstatt.md
@@ -8,14 +8,13 @@ meta:
   reviewers: cn, mb
   comments: 
     - ">rgr: keine Ahnung, ob das Teilkapitel hier in der Form gedacht ist oder nicht. Die Beschreibung im Web ist auch anders als auf dem pdf (beide im Absatz oben verlinkt). Wenn ich was ändern soll, gebt Bescheid."
+    - "<!-- Input Susanne: Damit ist eine zusammenfassende Beschreibung dazu gemeint, wer wann (und ggf. wie) zu welchen Schritten / Meilensteinen gearbeitet hat. (Gibt es dazu einen guten Begriff in Projektsprache?)  Also den Ablauf und die beteiligten Akteure: Wer war das Entwicklungsteam, wie habt ihr euch Feedback der anderen geholt. Das kann sogar eine Tabelle mit Terminen, Meilenstein und ggf. Fotos sein. Reicht das als Info? Ansonsten können wir auch gerne dazu sprechen? (ich habe auch nochmal den Ablauf angehängt) -->"
   purpose: | 
     Wann (genaue Datumsangaben) wurde die Curriculumwerkstatt durchgeführt? Hinweis: Diese Angaben werden für die Eintragung der Akkreditierung in der Datenbank des Akkreditierungsrates verwendet. 
 ---
 
 
-<!-- Input Susanne: Damit ist eine zusammenfassende Beschreibung dazu gemeint, wer wann (und ggf. wie) zu welchen Schritten / Meilensteinen gearbeitet hat. (Gibt es dazu einen guten Begriff in Projektsprache?)  Also den Ablauf und die beteiligten Akteure:
-Wer war das Entwicklungsteam, wie habt ihr euch Feedback der anderen geholt. Das kann sogar eine Tabelle mit Terminen, Meilenstein und ggf. Fotos sein.
-Reicht das als Info? Ansonsten können wir auch gerne dazu sprechen? (ich habe auch nochmal den Ablauf angehängt) -->
+
 
 Die Reakkreditierung der Studiengänge Medieninformatik Bachelor und Master erfolgte anhand des Entwicklungsprozesses der Curriculumwerkstatt der TH Köln (Stand 25.09.2018, Autoren ZLE / Referat 4). In jedem der sechs Schritten stellt der Prozess Konzepte für die Studiengangsentwicklung in den Fokus (siehe Aufzählung unten). Zu jedem der Konzepte sind zu erarbeitende Artefakte und Aufgaben definiert, siehe [Visualisierung der Schritte der Curriculumwerkstatt TH Köln](https://www.th-koeln.de/mam/downloads/deutsch/hochschule/profil/lehre/curriculumswerkstatt.pdf). Die im Folgenden beschriebene Gliederung orientiert sich an den [Erläuterungen des Zentrums für Lehrentwicklung (ZLE) zur Curriculumwerkstatt](https://www.th-koeln.de/hochschule/studiengangs--und-curriculumsentwicklung_49326.php)
 
@@ -47,12 +46,12 @@ Konkret wurden die [Erkenntnisse/Insights](/insights/) auch genutzt um die fünf
 
 Im Zuge dieser Entwicklungsphasen wurden auch die bestehenden Curricula der beiden Medieninformatikstudiengänge herangezogen, besonders um die Notwendigkeit der jeweiligen Modulen zu hinterfragen. Ausgerichtet auf die [Handlungsfelder](/handlungsfelder/) wurden dann die Learning Outcomes und Prüfungsformen erarbeitet und abgestimmt. Hierzu wurde auch für jedes Modul abgefragt und justiert, inwieweit das Modul auf die konkreten Kompetenzen der Handlungsfelder einzahlt und auf welche Kompetenzen es aufbaut.
 
-**Medieninformatik Bachelor**
+##### Medieninformatik Bachelor
 - [Kompetenzen der Module im Bachelor](/medieninformatik-bachelor/kompetenzen-der-module-bpo5/)
 - [Modulmatrix Bachelor](/medieninformatik-bachelor/modulmatrix-bpo5/)
 - [Modulhandbuch Bachelor](/medieninformatik-bachelor/modulhandbuch-bpo5/)
 
-**Medieninformatik Master**
+##### Medieninformatik Master
 - [Kompetenzen der Module im Master](/medieninformatik-master/kompetenzen-der-module-mpo5/)
 - [Modulmatrix Master](/medieninformatik-master/modulmatrix-mpo5/)
 - [Modulhandbuch Master](/medieninformatik-master/modulhandbuch-mpo5/)