Refine workshop UI navigation and hardening guidance

proxy/html/hints.html

@@ -74,6 +74,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;
@@ -84,8 +86,20 @@
         background: #0b2133;
         border: 1px solid #2b5578;
         border-radius: 10px;
-        padding: 0.7rem;
-        overflow: auto;
+        padding: 0.75rem 0.85rem;
+        overflow-x: auto;
+        margin: 0.65rem 0;
+      }
+
+      pre code {
+        display: block;
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        padding: 0;
+        font-size: 0.92rem;
+        line-height: 1.45;
+        white-space: pre;
       }
 
       .top-links {
@@ -116,7 +130,10 @@
         <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>
 
@@ -171,6 +188,15 @@ openssl s_client -connect localhost:8443 -servername localhost</code></pre>
             <p>Bei TLS-Haertung auf <code>Strict-Transport-Security</code> im Header achten.</p>
             <p>Komplettes TLS-Beispiel: <code>proxy/nginx.tls.example.conf</code></p>
           </article>
+          <article class="card">
+            <h3>Security Header Baseline</h3>
+            <pre><code>add_header X-Content-Type-Options "nosniff" always;
+add_header X-Frame-Options "DENY" always;
+add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
+add_header Cross-Origin-Opener-Policy "same-origin" always;
+add_header Cross-Origin-Resource-Policy "same-origin" always;</code></pre>
+          </article>
         </div>
       </section>