refactor academia section; restructure course data and improve collapsible component

.pugrc

@@ -155,24 +155,6 @@
 			]
 		},
 		"academia": {
-			"courseInstitutions": {
-				"dhbw": "Lectures at Duale Hochschule Baden-Württemberg (DHBW)",
-				"lfh": "Lectures at Leibniz Fachhochschule (LFH)"
-			},
-			"courses": {
-				"dhbw": [
-					"2025 „Einführung in die Webentwicklung“ (Introduction to Web Development)",
-					"2025 „Einführung in die Webentwicklung II“ (Introduction to Web Development)",
-					"2024 „Einführung in die Webentwicklung II“ (Introduction to Web Development)"
-				],
-				"lfh": [
-					"2023 „Social Engineering“",
-					"2023 „Mobile Medien (Mobile Media)“",
-					"2022 „Social Engineering“",
-					"2022 „Mobile Medien (Mobile Media)“",
-					"2021 „Social Engineering“"
-				]
-			},
 			"computerScience": {
 				"title": "Didac&shy;tics and the <wbr/><nobr>Es&shy;sence of Learn&shy;ing</nobr>",
 				"subtitle": "Motivation generates Motivation",
@@ -183,6 +165,44 @@
 					"In my role as a lecturer for Web Development at <a href=\"https://dhbw-stuttgart.de\" target=\"_blank\">DHBW Stuttgart</a>, I lead students through an immersive exploration of modern web technologies, frameworks, and software architecture concepts. My teaching philosophy centers on fostering a deep understanding of foundational principles while keeping pace with the rapidly evolving tech ecosystem. Through hands-on projects and real-world case studies, I challenge students to think critically about scalability, performance, and user experience – skills that are invaluable in today's competitive tech industry."
 				]
 			},
+			"institutions": [
+				{
+					"category": "dhbw courses",
+					"summary": "Lectures at Duale Hochschule Baden-Württemberg (DHBW)",
+					"items": [
+						{
+							"text": "2025 „Einführung in die Webentwicklung \" (Introduction to Web Development)"
+						},
+						{
+							"text": "2025 „Einführung in die Webentwicklung II \" (Advanced Web Development)"
+						},
+						{
+							"text": "2024 „Einführung in die Webentwicklung II \" (Advanced Web Development)"
+						}
+					]
+				},
+				{
+					"category": "lfh courses",
+					"summary": "Lectures at Leibniz Fachhochschule (LFH)",
+					"items": [
+						{
+							"text": "2023 „Social Engineering\""
+						},
+						{
+							"text": "2023 „Mobile Medien (Mobile Media)\""
+						},
+						{
+							"text": "2022 „Social Engineering\""
+						},
+						{
+							"text": "2022 „Mobile Medien (Mobile Media)\""
+						},
+						{
+							"text": "2021 „Social Engineering\""
+						}
+					]
+				}
+			],
 			"expertise": {
 				"title": "Software Engineer&shy;ing <wbr/>and set&shy;ting <wbr/>the right Priori&shy;ties",
 				"intro": [

index.pug

@@ -1,5 +1,5 @@
 doctype html
-html.scroll-smooth(lang=lang)
+html.scroll-smooth(lang=head.lang)
 	include src/components/Head
 
 	body.m-0.p-0

src/components/Academia.pug

@@ -34,24 +34,8 @@ section#academia
 						p(class=`text-slate-700 dark:text-slate-300 ${additionalClasses}`) !{paragraph}
 			// endregion
 
-			// region Courses
+			// region Academic Courses
 			.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
-				div
-					details.mb-4
-						summary.rounded-sm.text-nls-black.transition.underline-offset-2.mb-2.cursor-pointer(
-							class="dark:text-white focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-black dark:focus:ring-white focus:bg-nls-black focus:text-white dark:focus:bg-white dark:focus:text-nls-black focus:no-underline",
-							onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
-						)= academia.courseInstitutions.dhbw
-						ul.list-disc.list-inside
-							each course in academia.courses.dhbw
-								li= course
-				div
-					details.mb-4
-						summary.rounded-sm.text-md.text-nls-black.transition.underline-offset-2.mb-2.cursor-pointer(
-							class="sm:text-lg dark:text-white focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-black dark:focus:ring-white focus:bg-nls-black focus:text-white dark:focus:bg-white dark:focus:text-nls-black focus:no-underline",
-							onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
-						)= academia.courseInstitutions.lfh
-						ul.list-disc.list-inside
-							each course in academia.courses.lfh
-								li= course
-			// endregion
+				each institution in academia.institutions
+					+Collapsable("academia", institution)
+			// endregion

src/components/Collapsable.pug

@@ -1,12 +1,12 @@
 mixin Collapsable(name, data, open)
 	- const isExpanded = open || false;
-	- const color = data.color || "nls-text-black dark:nls-text-white";
+	- const color = data.color ? `focus:ring-nls-${data.color} text-nls-${data.color} focus:text-nls-${data.color} dark:focus:text-nls-${data.color}` : "nls-text-black dark:nls-text-white ring-nls-black dark:ring-nls-white/50 focus:text-black dark:focus:text-white";
 	- const category = data.category || "default";
 	- const linkEventName = "external link clicked";
 
 	details.mb-4(open=isExpanded, name=name)
 		summary(
-			class=`rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black dark:focus:text-white focus:no-underline`,
+			class=`${color} rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg focus:outline-none focus:z-10 focus:ring-4 focus:no-underline`,
 			onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
 		)= data.summary
 		.text-slate-600(class="dark:text-stone-300")

src/components/Footer.pug

@@ -5,7 +5,7 @@ mixin Link(href, label, target, rel)
 	- const eventCategory = "footer";
 	- const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}', visitDuration: getVisitDuration() })`;
 
-	a.transition-colors.text-nls-black(href=href, class="dark:text-white hover:text-amber-300", target=target, rel=rel, onclick=onclick, aria-label=label, title=label)
+	a.transition-colors.text-nls-black.rounded.ring-offset-2(href=href, class="dark:text-white hover:ring-2 ring-nls-black dark:ring-nls-white", target=target, rel=rel, onclick=onclick, aria-label=label, title=label)
 		block
 
 mixin Svg
@@ -44,9 +44,9 @@ footer#footer
 								style="fill: currentColor"
 							)
 
-					a.transition-colors.text-nls-black.uppercase.font-semibold(
+					a.transition-colors.text-nls-black.uppercase.font-semibold.rounded.ring-offset-2(
 						href=footer.emailLink,
-						class="dark:text-white hover:text-amber-300",
+						class="dark:text-white hover:ring-2 ring-nls-black dark:ring-nls-white",
 						rel="noopener noreferrer",
 						title=footer.emailText,
 						aria-label=footer.emailText,