Refine workshop UI navigation and hardening guidance

proxy/html/index.html

@@ -58,6 +58,8 @@
       }
 
       code {
+        font-family: "JetBrains Mono", "Fira Code", "Consolas", "Liberation Mono", monospace;
+        font-size: 0.92em;
         background: #0d1f31;
         border: 1px solid #2d4f6e;
         border-radius: 6px;
@@ -68,7 +70,7 @@
         color: var(--accent);
       }
 
-      .links {
+      .top-links {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
@@ -105,12 +107,13 @@
           Basis läuft mit HTTP. Ziel im Workshop: Reverse Proxy verstehen und HTTPS/TLS manuell
           aufbauen.
         </p>
-        <div class="links">
-          <a class="pill" href="/service/a">Backend A</a>
-          <a class="pill" href="/service/b">Backend B</a>
+        <div class="top-links">
+          <a class="pill" href="/">Startseite</a>
           <a class="pill" href="/challenges.html">Challenges</a>
           <a class="pill" href="/hints.html">Hints</a>
           <a class="pill" href="/solutions.html">Solutions</a>
+          <a class="pill" href="/service/a">Backend A</a>
+          <a class="pill" href="/service/b">Backend B</a>
         </div>
       </section>