diff --git a/frontend/src/app.css b/frontend/src/app.css
index 50dd191..956501d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -33,7 +33,28 @@
 html, body, #root { height: 100%; }
 body { font-family: var(--font); background: var(--bg); color: var(--text1); -webkit-text-size-adjust: 100%; }
 
-.app-shell { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; max-width: 600px; margin: 0 auto; }
+/* Mobile / Web-App: keine horizontale Seiten-Scroll-Leiste; volle Gerätebreite (<1024px) */
+@media (max-width: 1023px) {
+  html {
+    overflow-x: clip;
+  }
+  body,
+  #root {
+    overflow-x: clip;
+    max-width: 100%;
+  }
+}
+
+/* Telefon & Tablet hochkant: volle Breite wie eine native App (kein 600px-Säulen-Layout) */
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  min-height: 100dvh;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
 .app-header {
   height: var(--header-h); display: flex; align-items: center; padding: 0 16px;
   background: var(--surface); border-bottom: 1px solid var(--border);
@@ -53,6 +74,9 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 /* unten: Tab-Leiste + Abstand nach oben zur Leiste + Home-Indicator (iPhone) */
 .app-main {
   flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: clip;
   overflow-y: auto;
   padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px) max(16px, env(safe-area-inset-left, 0px));
 }
@@ -60,10 +84,10 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 .bottom-nav {
   position: fixed;
   bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: 600px;
+  left: 0;
+  right: 0;
+  width: auto;
+  max-width: none;
   display: flex;
   align-items: center;
   background: var(--surface);
@@ -1548,7 +1572,7 @@ a.analysis-split__nav-item {
 }
 
 .exercise-filter-modal.admin-modal-sheet {
-  max-width: min(920px, calc(100vw - 16px));
+  max-width: min(920px, calc(100dvw - 16px));
 }
 .exercise-filter-modal .admin-modal-sheet__body.exercise-filter-modal__scroll {
   flex: 1;
@@ -1625,7 +1649,7 @@ a.analysis-split__nav-item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: min(260px, 88vw);
+  max-width: min(260px, 100%);
 }
 .exercise-filter-chip__x {
   flex-shrink: 0;
@@ -2045,6 +2069,8 @@ a.analysis-split__nav-item {
   display: flex;
   flex-direction: column;
   flex: 1;
+  width: 100%;
+  max-width: 100%;
   min-width: 0;
   min-height: 0;
 }
@@ -2180,17 +2206,6 @@ a.analysis-split__nav-item {
   background: rgba(216, 90, 48, 0.08);
 }
 
-@media (max-width: 1023px) {
-  .app-shell {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    min-height: 100dvh;
-    max-width: 600px;
-    margin: 0 auto;
-  }
-}
-
 @media (min-width: 1024px) {
   .app-shell {
     display: block;
@@ -2804,6 +2819,7 @@ a.analysis-split__nav-item {
 
 /* Horizontaler Überblick: äußerer Scroll‑Container (Zuverlässigkeit in Flex/Grid‑Eltern) */
 .framework-slots-board-outer {
+  container-type: inline-size;
   width: 100%;
   max-width: 100%;
   min-width: 0;
@@ -2830,10 +2846,11 @@ a.analysis-split__nav-item {
   scroll-snap-type: x proximity;
 }
 
+/* Kartenbreite an den Scroll-Container koppeln (100vw wäre oft breiter als .app-main → horizontales Wischen der ganzen Seite) */
 .framework-slots-board .framework-slot-card {
-  flex: 0 0 min(300px, calc(100vw - 56px));
-  width: min(300px, calc(100vw - 56px));
-  min-width: min(300px, calc(100vw - 56px));
+  flex: 0 0 min(300px, calc(100vw - 72px));
+  width: min(300px, calc(100vw - 72px));
+  min-width: min(300px, calc(100vw - 72px));
   height: min(520px, 72vh);
   max-height: min(520px, 72vh);
   display: flex;
@@ -2845,6 +2862,11 @@ a.analysis-split__nav-item {
   scroll-snap-align: start;
   box-sizing: border-box;
 }
+.framework-slots-board .framework-slot-card {
+  flex: 0 0 min(300px, calc(100cqw - 24px));
+  width: min(300px, calc(100cqw - 24px));
+  min-width: min(300px, calc(100cqw - 24px));
+}
 
 .framework-slot-card__head {
   display: flex;