Styles

public/app.js

@@ -122,6 +122,10 @@ function setupServiceButtons() {
             } catch(e) {
                 console.error('Event log failed', e);
             }
+            
+            document.querySelectorAll("nav button").forEach(b => b.classList.remove("active"));
+            btn.classList.add("active");
+
             openService(svc);
         };
         nav.appendChild(btn);

public/index.html

@@ -16,11 +16,9 @@
 </header>
 
 <main>
-  <h1>server.schooltech.ch    -    Service Portal</h1>
-
   <!-- iFrame für Services -->
-  <iframe id="service-frame" style="width:100%;height:80vh;display:none;"></iframe>
-
+  <iframe id="service-frame" style="display:none;"></iframe>
+  
   <!-- Login Modal -->
   <div id="login-modal" style="display:none;">
     <label>User: <input type="text" id="username"/></label>

public/style.css

@@ -8,20 +8,18 @@ body {
   background: #f5f6f8;
 }
 
+
 header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 64px;
+  height: 48px; 
   display: flex;
   align-items: center;
-  gap: 20px;
-  padding: 0 24px;
+  gap: 16px;
+  padding: 0 20px;
   backdrop-filter: blur(6px);
   background: rgba(0,0,0,0.35);
-  color: white;
-  z-index: 1000;
+
+  /* NEU – hochwertiger Shadow */
+  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
 }
 
 .logo {
@@ -41,8 +39,23 @@ nav button:hover {
   border-radius: 6px;
 }
 
-main {
-  padding: 80px 4px;
+main { 
+  background: transparent; /* NEU */
+}
+
+
+
+iframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: calc(100vh - 48px); /* exakt der Bereich unter dem Header */
+}
+
+
+nav button.active {
+  background: rgba(255,255,255,0.35);
+  border-radius: 6px;
 }
 
 #service-grid {