Improved structure by moving CSS to into individual files.

src/display/components/fancyscrollbar.css

+.fancy-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    background-color: #f5f5f5;
+}
+
+.fancy-scrollbar::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #f5f5f5;
+}
+
+.fancy-scrollbar::-webkit-scrollbar-thumb {
+    background-color: darkgray;
+}

src/display/components/fancyscrollbar.tsx

 import React from "react";
 
+import "./fancyscrollbar.css";
+
 interface FancyScrollbarProps {
     children?: React.ReactNode | React.ReactNode[];
 }

src/display/components/nodeinfo/mediaarea.css

+.media-area {
+    width: 100%;
+    margin-top: 15px;
+    padding: 10px;
+}
+
+.media-area-description {
+    display: block;
+    margin-top: 10px;
+    padding-left: 25px;
+    padding-right: 30px;
+    /*padding-bottom: 130px;*/
+}
+
+.media-area-video {
+    object-fit: scale-down;
+    width: 100%;
+    height: auto;
+    margin-top: 10px;
+    padding-left: 25px;
+    padding-right: 30px;
+}
+
+.media-area-references {
+    display: block;
+    margin-top: 25px;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+.media-area-spacer {
+    height: 120px;
+    width: 100%;
+}
\ No newline at end of file

src/display/components/nodeinfo/mediaarea.tsx

 import React from "react";
+
+import "./mediaarea.css";
 import References from "./references";
 
 interface MediaAreaProps {
@@ -10,25 +12,25 @@ interface MediaAreaProps {
 
 function MediaArea({ description, image, video, references }: MediaAreaProps) {
     return (
-        <div className={"detail-view-media-area"}>
+        <div className={"media-area"}>
             {image && <img src={image} />}
-            <p className={"detail-view-text-area"}>{description}</p>
+            <p className={"media-area-description"}>{description}</p>
 
             {video && (
                 <video
                     controls={true}
-                    className={"detail-view-video"}
+                    className={"media-area-video"}
                     src={video}
                 />
             )}
 
             {references && (
-                <div className={"detail-view-link-area"}>
+                <div className={"media-area-references"}>
                     <h6>Weiterführende Links</h6>
                     <References references={references} />
                 </div>
             )}
-            <div className={"detail-view-spacer"}></div>
+            <div className={"media-area-spacer"}></div>
         </div>
     );
 }

src/display/components/nodeinfo/nodeinfobar.css

+.node-info-bar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20%;
+    min-width: 300px;
+    background-color: whitesmoke;
+    z-index: 20;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+}
+
+.node-info-bar-close-button {
+    pointer-events: all;
+    z-index: 99;
+    cursor: pointer;
+    right: 20px;
+    top: 5px;
+    position: absolute;
+    font-size: 20px;
+}
+
+.node-info-bar-info-area {
+    overflow-y: auto;
+    height: 100%;
+}
\ No newline at end of file

src/display/components/nodeinfo/nodeinfobar.tsx

 import React from "react";
+
+import "./nodeinfobar.css";
 import { NodeData } from "../../graph";
 import TitleArea from "./titlearea";
 import FancyScrollbar from "../fancyscrollbar";
@@ -21,16 +23,15 @@ function NodeInfoBar({
     nodeClickedCallback,
 }: InfoBarProps) {
     return (
-        <div id={"infoOverlay"} className={"detail-view"} style={{ height }}>
+        <div className={"node-info-bar"} style={{ height }}>
             <div
-                className={"close-button"}
-                id={"infoOverlayCloseButton"}
+                className={"node-info-bar-close-button"}
                 onClick={nodeClosedCallback}
             >
                 <p>&#10006;</p>
             </div>
 
-            <div className={"detail-view-info-area"}>
+            <div className={"node-info-bar-info-area"}>
                 <FancyScrollbar>
                     <TitleArea name={node.name} image={node.banner} />
                     <MediaArea

src/display/components/nodeinfo/titlearea.css

+.title-area {
+    position: relative;
+    width: 100%;
+    overflow: auto;
+    text-align: center;
+    padding: 10px;
+}
+
+.title-area-image {
+    width: 125px;
+    height: 125px;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    border-radius: 50%;
+    display: inline;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.title-area-headline {
+    font-weight: bold;
+    /*text-align: center;*/
+    font-family: CuratorRegular, Helvetica Neue, Helvetica, Arial, sans-serif;
+    word-wrap: break-word;
+    hyphens: auto;
+    font-size: 1.6vw;
+    padding-left: 5px;
+    padding-right: 5px;
+}
\ No newline at end of file

src/display/components/nodeinfo/titlearea.tsx

 import React from "react";
 
+import "./titlearea.css";
+
 interface TitleAreaProps {
     name: string;
     image?: string;
@@ -8,17 +10,9 @@ interface TitleAreaProps {
 function TitleArea({ name, image }: TitleAreaProps) {
     const marginTop = image ? 0 : 25;
     return (
-        <div className={"detail-view-title-area"} style={{ marginTop }}>
-            {image && (
-                <img
-                    id={"infoOverlayImage"}
-                    src={image}
-                    className={"detail-view-image"}
-                />
-            )}
-            <h2 id={"infoOverlayHeadline"} className={"detail-view-headline"}>
-                {name}
-            </h2>
+        <div className={"title-area"} style={{ marginTop }}>
+            {image && <img src={image} className={"title-area-image"} />}
+            <h2 className={"title-area-headline"}>{name}</h2>
         </div>
     );
 }

src/display/display.css

@@ -2,38 +2,6 @@
     display: flex;
 }
 
-.fancy-scrollbar::-webkit-scrollbar {
-    width: 6px;
-    background-color: #f5f5f5;
-}
-
-.fancy-scrollbar::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    background-color: #f5f5f5;
-}
-
-.fancy-scrollbar::-webkit-scrollbar-thumb {
-    background-color: darkgray;
-}
-
-.node-container {
-    pointer-events: none;
-}
-
-.node-label {
-    font-size: 14px;
-    color: white;
-    font-weight: bold;
-    /*text-align: center;*/
-    padding: 1px 4px;
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.7);
-    user-select: none;
-    z-index: 1;
-    pointer-events: none;
-    cursor: default;
-}
-
 .no-select {
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
@@ -44,17 +12,7 @@
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.close-button {
-    pointer-events: all;
-    z-index: 99;
-    cursor: pointer;
-    right: 20px;
-    top: 5px;
-    position: absolute;
-    font-size: 20px;
-}
-
-.fullscreen-button {
+.display-fullscreen-button {
     pointer-events: all;
     z-index: 99;
     cursor: pointer;
@@ -63,198 +21,3 @@
     position: absolute;
     font-size: 30px;
 }
-
-.detail-view {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20%;
-    min-width: 300px;
-    background-color: whitesmoke;
-    z-index: 20;
-    overflow: hidden;
-    transition: height 0.3s ease-in-out;
-}
-
-/*.detail-view {*/
-/*    background-color: whitesmoke;*/
-/*    overflow: hidden;*/
-/*    transition: height 1s ease-in-out;*/
-/*}*/
-
-.detail-view-image {
-    width: 125px;
-    height: 125px;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    border-radius: 50%;
-    display: inline;
-    margin-top: 10px;
-    margin-bottom: 20px;
-}
-
-.detail-view-info-area {
-    overflow-y: auto;
-    height: 100%;
-}
-
-.detail-view-title-area {
-    position: relative;
-    width: 100%;
-    overflow: auto;
-    text-align: center;
-    padding: 10px;
-}
-
-.detail-view-text-area {
-    display: block;
-    margin-top: 10px;
-    padding-left: 25px;
-    padding-right: 30px;
-    /*padding-bottom: 130px;*/
-}
-
-.detail-view-link-area {
-    display: block;
-    margin-top: 25px;
-    padding-left: 25px;
-    padding-right: 25px;
-}
-
-.detail-view-headline {
-    font-weight: bold;
-    /*text-align: center;*/
-    font-family: CuratorRegular, Helvetica Neue, Helvetica, Arial, sans-serif;
-    word-wrap: break-word;
-    hyphens: auto;
-    font-size: 1.6vw;
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-.detail-view-media-area {
-    width: 100%;
-    margin-top: 15px;
-    padding: 10px;
-}
-
-.detail-view-video {
-    object-fit: scale-down;
-    width: 100%;
-    height: auto;
-    margin-top: 10px;
-    padding-left: 25px;
-    padding-right: 30px;
-}
-
-.detail-view-spacer {
-    height: 120px;
-    width: 100%;
-}
-
-/*New Section */
-
-.neighbor-collapsible-title {
-    background-color: #ffffff;
-    color: #444;
-    cursor: pointer;
-    padding: 9px 9px 9px 0;
-    width: 100%;
-    display: flex;
-    font-weight: bold;
-    text-align: left;
-    font-size: 20px;
-    opacity: 100%;
-    border: 2px solid white;
-    outline: none;
-    flex-direction: column;
-    position: relative;
-}
-
-.neighbor-collapsible-section {
-    background-color: #ffffff;
-    color: #444;
-    cursor: pointer;
-    padding: 9px 9px 9px 9px;
-    width: 100%;
-    border: 2px solid white;
-    text-align: left;
-    outline: none;
-    font-size: 15px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    font-weight: bold;
-    opacity: 80%;
-}
-
-.activation-hover-title, .neighbor-collapsible-title:hover {
-    background-color: #ccc;
-}
-
-.activation-hover-section, .neighbor-collapsible-section:hover {
-    background-color: #ccc;
-}
-
-.neighbor-content-tabs {
-    padding: 0 18px;
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-    background-color: #ffffff;
-    flex-direction: column;
-    margin-bottom: 10px;
-}
-
-.neighbor-content-linksection {
-    padding-top: 0;
-    padding-left: 5px;
-    display: flex;
-    background-color: #ffffff;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.neighbor-content-list {
-    margin: 0;
-    padding: 0 0 0 20px;
-}
-
-.activation-hover {
-    color: red;
-}
-
-.neighbor-collapsible-marker-div {
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    border: 1px solid red;
-    bottom: 0;
-    left: 0;
-}
-
-.neighbor-collapsible-open-status-marker {
-    position: absolute;
-    right: 20px;
-    font-size: 26px;
-    color: #595858;
-    top: 2px;
-    bottom: 2px;
-}
-
-.neighbor-tab-open-status-marker {
-    position: absolute;
-    right: 20px;
-    font-size: 15px;
-    color: #595858;
-    top: 10px;
-    bottom: 10px;
-}
-
-.neighbor-collapsible-wrapper {
-    transition:height 0.3s ease-out;
-    height:0;
-    overflow:hidden;
-}
-

src/display/display.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import screenfull from "screenfull";
 import PropTypes, { InferType } from "prop-types";
 
+import "./display.css";
 import { GraphNode, GraphRenderer } from "./renderer";
 import * as Helpers from "./helpers";
 import Graph, { NodeData } from "./graph";
@@ -109,7 +110,7 @@ class Display extends React.Component<
                 ref={this.fullscreenRef}
             >
                 <div
-                    className={"fullscreen-button no-select"}
+                    className={"display-fullscreen-button no-select"}
                     title={"Vollbild"}
                     onClick={this.toggleFullscreen.bind(this)}
                 >

src/frontend.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 
 import * as Config from "./config";
-import "./display/display.css";
 import "./display/display";
 import Display from "./display/display";