Feat: Optimiert Navbar mit Mobile-Menü, passt Margin-Styles für <main> an und ergänzt CSS-Kommentare

assets/styles/app.scss

@@ -593,3 +593,12 @@ pre {
     white-space: nowrap;
     direction: ltr;
 }
+
+// =============================================================================
+// CSS Settings
+// =============================================================================
+
+main {
+    margin-top: 64px;
+    margin-bottom: 45px;
+}

assets/styles/root/root.css

@@ -2,6 +2,11 @@ body {
     height: 100vh;
 }
 
+main {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
 /* Scanline sweep */
 .scanline {
     position: absolute;

templates/widgets/nav_bar.html.twig

@@ -3,22 +3,49 @@
      aria-label="Hauptnavigation">
     <div class="container d-flex justify-content-between align-items-center">
 
-        {# Links: Logo + CTDRA (als Block zusammengefasst) #}
+        {# Links: Logo + CTDRA #}
         <a href="/" id="nav-site-name" class="d-flex align-items-center gap-2 text-decoration-none">
             <img src="{{ asset('images/logo.png') }}"
                  alt="CTDRA Logo"
-                 id="nav-brand-logo">
+                 id="nav-brand-logo"
+                 style="height: 40px; width: auto;">
             <span class="fw-bold text-white">CTDRA</span>
         </a>
 
-        {# Mitte: Links zentriert mit mx-auto #}
+        {# Mitte: Desktop-Links zentriert #}
         <div class="d-none d-md-flex align-items-center gap-4 mx-auto">
             <a href="#" class="text-label-sm text-decoration-none nav-link-ds">News</a>
-            <a href="#" class="text-decoration-none nav-link-ds">Projects</a>
+            <a href="#" class="text-label-sm text-decoration-none nav-link-ds">Projects</a>
-            <a href="#" class="text-decoration-none nav-link-ds">About Me</a>
+            <a href="#" class="text-label-sm text-decoration-none nav-link-ds">About Me</a>
         </div>
 
-        {# Rechts: Platzhalter #}
+        {# Rechts: Hamburger-Button (nur Mobile) + Platzhalter für Desktop #}
-        <div>&nbsp;</div>
+        <div class="d-flex align-items-center">
+            {# Hamburger Button für Mobile mit Material Icon #}
+            <button class="navbar-toggler d-md-none border-0 text-white p-0"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#mobile-menu"
+                    aria-controls="mobile-menu"
+                    aria-expanded="false"
+                    aria-label="Navigation umschalten">
+                <span class="material-symbols-outlined">menu</span>
+            </button>
+
+            {# Platzhalter für Desktop (hält Balance) #}
+            <div class="d-none d-md-block">&nbsp;</div>
+        </div>
+
+    </div>
+
+    {# Mobile Menu Container (Collapsible) #}
+    <div class="collapse d-md-none" id="mobile-menu">
+        <div class="container py-3">
+            <div class="d-flex flex-column gap-3">
+                <a href="#" class="text-label-sm text-decoration-none text-white fs-6">News</a>
+                <a href="#" class="text-label-sm text-decoration-none text-white fs-6">Projects</a>
+                <a href="#" class="text-label-sm text-decoration-none text-white fs-6">About Me</a>
+            </div>
+        </div>
     </div>
 </nav>