diff --git a/frontend/src/AppLayout.css b/frontend/src/AppLayout.css
index 6cee890..fd4c1ff 100644
--- a/frontend/src/AppLayout.css
+++ b/frontend/src/AppLayout.css
@@ -1,20 +1,18 @@
-/* Desktop-only layout:
-   - Left: fixed, no scroll
-   - Right: notes scroll only
-*/
-
 html, body, #root {
   height: 100%;
 }
 
 body {
-  overflow: hidden; /* prevent global scroll */
+  overflow: hidden;
 }
 
 .appRoot {
   height: 100vh;
   display: grid;
-  grid-template-columns: minmax(860px, 1fr) clamp(380px, 32vw, 520px);
+
+  /* Links: flexibel | Rechts: Notes clamp */
+  grid-template-columns: minmax(900px, 1fr) clamp(380px, 32vw, 520px);
+
   gap: 14px;
   padding: 14px;
   box-sizing: border-box;
@@ -26,28 +24,34 @@ body {
   overflow: hidden;
   min-width: 0;
   display: grid;
-  grid-template-rows: 72px minmax(340px, 1fr) 160px; /* top | main | player HUD */
+
+  /* Top | Main | HUD */
+  grid-template-rows: 68px minmax(360px, 1fr) 170px;
+
   gap: 14px;
 }
 
 .topBarRow {
   display: grid;
-  grid-template-columns: 1fr 1fr; /* User | Settings adjacent */
+  grid-template-columns: 1fr 1fr;
   gap: 14px;
   min-width: 0;
 }
 
-/* MIDDLE: Tools | Board | Player rail */
+/* MAIN: Tools | Board | PlayerRail */
 .mainRow {
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: minmax(220px, 300px) minmax(520px, 1fr) 92px;
+
+  /* Tools bewusst schmaler, Board bekommt Bühne */
+  grid-template-columns: 260px minmax(560px, 1fr) 92px;
+
   gap: 14px;
   min-width: 0;
 }
 
-/* Left of board: stack cards vertically (Hilfskarten deck over Dunkles Deck) */
+/* Tools left of board */
 .leftTools {
   min-width: 0;
   overflow: hidden;
@@ -57,7 +61,7 @@ body {
 
 .leftToolsRow {
   display: grid;
-  grid-template-columns: 1fr; /* vertical */
+  grid-template-columns: 1fr;
   gap: 14px;
   min-width: 0;
 }
@@ -78,19 +82,22 @@ body {
   right: 18px;
   width: 220px;
   pointer-events: none;
-  opacity: 0.95;
+  opacity: 0.98;
 }
 
-/* Player rail: right of board, before notes */
+/* Player rail: right of board, before notes (tight) */
 .playerRail {
   min-height: 0;
   overflow: hidden;
   border-radius: 22px;
+
   border: 1px solid rgba(255,255,255,0.08);
   background: rgba(0,0,0,0.18);
   backdrop-filter: blur(10px);
   box-shadow: 0 16px 50px rgba(0,0,0,0.35);
+
   padding: 10px 8px;
+
   display: grid;
   grid-template-rows: auto 1fr;
   justify-items: center;
@@ -113,23 +120,25 @@ body {
   padding-top: 4px;
 }
 
-/* Bottom: Player HUD (User | (Secret + My Help) | Points) */
+/* HUD */
 .playerHud {
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1.1fr 1.6fr 1.1fr;
+  grid-template-columns: 1.1fr 1.7fr 1.1fr;
   gap: 14px;
   min-width: 0;
 }
 
-/* Middle cell becomes a 2-column grid */
 .playerHudMiddle {
   min-width: 0;
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1fr 0.8fr; /* Geheimkarten | Meine Hilfkarte(n) */
+
+  /* Geheimkarten groß, Hilfkarte etwas kleiner */
+  grid-template-columns: 1fr 0.78fr;
+
   gap: 14px;
 }
 
@@ -148,10 +157,10 @@ body {
   padding-right: 4px;
 }
 
-/* graceful shrink */
+/* --- Responsive: shrink gracefully (no scroll outside notes) --- */
 @media (max-height: 860px) {
   .leftPane {
-    grid-template-rows: 64px minmax(280px, 1fr) 140px;
+    grid-template-rows: 64px minmax(300px, 1fr) 150px;
   }
   .diceOverlay {
     bottom: 10px;
@@ -160,20 +169,27 @@ body {
   }
 }
 
-@media (max-width: 1400px) {
+@media (max-width: 1440px) {
   .appRoot {
-    grid-template-columns: minmax(760px, 1fr) clamp(360px, 34vw, 480px);
+    grid-template-columns: minmax(820px, 1fr) clamp(360px, 34vw, 480px);
   }
   .mainRow {
-    grid-template-columns: minmax(210px, 280px) minmax(480px, 1fr) 88px;
+    grid-template-columns: 240px minmax(520px, 1fr) 88px;
   }
 }
 
-@media (max-width: 1220px) {
+@media (max-width: 1280px) {
   .appRoot {
     grid-template-columns: 1fr clamp(340px, 36vw, 460px);
   }
   .mainRow {
-    grid-template-columns: minmax(200px, 260px) minmax(420px, 1fr) 84px;
+    grid-template-columns: 220px minmax(480px, 1fr) 84px;
+  }
+}
+
+@media (max-width: 1180px) {
+  /* ab hier wird’s eng: tools noch schmäler */
+  .mainRow {
+    grid-template-columns: 200px minmax(440px, 1fr) 82px;
   }
 }