diff --git a/TESTING.md b/TESTING.md
index 6433512..1b1d8f8 100644
--- a/TESTING.md
+++ b/TESTING.md
@@ -1356,6 +1356,26 @@ Geprüft auf 1280×900 und 412×915:
 - [ ] Windows-Weg auf einem echten Windows durchspielen – die 50-MB-Grenze und
       der Registry-Pfad stammen aus der Dokumentation, nicht aus einem Versuch
 
+## Kachelraster auf schmalen Geräten (24.08.2026)
+
+Ein Galaxy Z Flip 7 (360px aufgeklappt) zeigte **eine** Spalte statt zwei:
+Bei 160px Mindestbreite und 20px Innenrand brauchen zwei Spalten 332px, da
+waren aber nur 320px. Schmal jetzt 132px Mindestbreite, 10px Abstand und
+12px Innenrand.
+
+| Breite | Spalten | Kachel | Innenrand | Querlauf |
+|---|---|---|---|---|
+| 316 (Deckelschirm) | 2 | 141px | 12px | nein |
+| 360 (Flip 7) | 2 | 163px | 12px | nein |
+| 412 (übliches Handy) | 2 | 189px | 12px | nein |
+| 768 | 3 | 161px | 20px | nein |
+| 1280 | 6 | 160px | 20px | nein |
+
+Raster und Innenrand stehen jetzt als Klassen in `index.css`; inline gesetzt
+hätte keine Media-Query sie erreicht.
+
+- [ ] Auf dem Flip 7 selbst gegenprüfen, auf beiden Schirmen
+
 ## Automatisiert geprüft (22.08.2026)
 
 Diese Punkte hat Claude per API/`curl` gegen Wegwerf-Konten durchgespielt; sie
diff --git a/frontend/src/components/FileViews.tsx b/frontend/src/components/FileViews.tsx
index aa73765..312ddd8 100644
--- a/frontend/src/components/FileViews.tsx
+++ b/frontend/src/components/FileViews.tsx
@@ -115,11 +115,10 @@ export default function GridView({ folders, files, onFolderOpen, onFolderMenu, o
   const highlightRef = useScrollToHighlight(highlightId)
   const coarse = useCoarsePointer()
   return (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
-      gap: 12,
-    }}>
+    // Raster und Abstände stehen in index.css (.aether-grid). Hier inline
+    // gesetzt wären sie auf dem Handy nicht zu ändern: Ein Inline-Stil schlägt
+    // jede Media-Query – daran ist die Kopfleiste schon zweimal gescheitert.
+    <div className="aether-grid">
       {folders.map(folder => {
         const isOver = dragOverFolder === folder.id
         // Ein Gruppenordner lässt sich nicht verschieben – ihn ziehbar zu
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 134d636..3dd449b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -80,3 +80,37 @@ body {
 ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
 
 ::selection { background: var(--color-primary); color: #fff; }
+
+/* ── Kachelansicht ────────────────────────────────────────────────────────────
+   Als Klasse und nicht als Inline-Stil, damit die Media-Query überhaupt greift:
+   Ein Inline-Stil schlägt jede Klassenregel, und genau daran ist die
+   Kopfleiste schon zweimal gescheitert.
+
+   Die Zahlen sind gerechnet, nicht geschätzt. Zwei Spalten brauchen
+   2 × Mindestbreite + Abstand, und der Platz ist die Fensterbreite minus dem
+   Innenrand des Inhaltsbereichs:
+
+     Gerät                   Breite   nutzbar   2 Spalten brauchen
+     Flip 7 aufgeklappt      360px    336px     274px  ✔ (vorher 332 > 320 ✘)
+     Flip 7 Deckelschirm     316px    292px     274px  ✔
+     übliches Handy          412px    388px     274px  ✔ (drei bräuchten 416)
+
+   Bei 160px Mindestbreite und 20px Innenrand fielen 360px-Geräte auf **eine**
+   Spalte zurück – zwei hätten 332px gebraucht, da waren nur 320px. */
+.aether-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+.aether-content { padding: 20px; }
+
+@media not all and (min-width: 720px) {
+  .aether-grid {
+    gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  }
+  /* Schmal ist Rand verschenkte Fläche – 12px genügen, um die Kacheln nicht
+     an der Kante kleben zu lassen. */
+  .aether-content { padding: 12px; }
+}
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index f5017d9..d8d49fe 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -41,7 +41,7 @@ export default function AdminPage() {
         meta="Users, groups, appearance and activity"
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
       <Tabs tabs={tabs} active={tab} onChange={setTab} />
 
       {tab === 'users' && <UsersTab />}
diff --git a/frontend/src/pages/FileBrowser.tsx b/frontend/src/pages/FileBrowser.tsx
index e5add0c..6a0138c 100644
--- a/frontend/src/pages/FileBrowser.tsx
+++ b/frontend/src/pages/FileBrowser.tsx
@@ -850,7 +850,7 @@ export default function FileBrowser({
       </PageHeader>
 
       {/* Content */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
             <div style={{
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 2edbfed..da924e2 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -274,7 +274,7 @@ export default function ProfilePage({ user, onUserChanged }: Props) {
         meta="Your account, devices and appearance"
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
       <div style={{ maxWidth: 560 }}>
 
         <Tabs tabs={tabs} active={tab} onChange={setTab} />
diff --git a/frontend/src/pages/SharedPage.tsx b/frontend/src/pages/SharedPage.tsx
index e5a7c52..6c614a6 100644
--- a/frontend/src/pages/SharedPage.tsx
+++ b/frontend/src/pages/SharedPage.tsx
@@ -56,7 +56,7 @@ export default function SharedPage() {
         meta={links.length > 0 ? `${links.length} link${links.length !== 1 ? 's' : ''}` : undefined}
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
             <div style={{ width: 24, height: 24, border: '2px solid var(--color-primary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
diff --git a/frontend/src/pages/SharedWithMePage.tsx b/frontend/src/pages/SharedWithMePage.tsx
index 1b9f89b..7fd8199 100644
--- a/frontend/src/pages/SharedWithMePage.tsx
+++ b/frontend/src/pages/SharedWithMePage.tsx
@@ -37,7 +37,7 @@ export default function SharedWithMePage({ onOpenFolder }: Props) {
         meta="Files and folders other people gave you access to"
       />
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
 
       {loading ? (
         <p style={{ fontSize: 13, color: 'var(--color-text-muted)' }}>Loading…</p>
diff --git a/frontend/src/pages/TagsPage.tsx b/frontend/src/pages/TagsPage.tsx
index 44b1a75..a4ebb25 100644
--- a/frontend/src/pages/TagsPage.tsx
+++ b/frontend/src/pages/TagsPage.tsx
@@ -109,7 +109,7 @@ export default function TagsPage({ tagId, correspondentId, onOpenFolder }: Props
         )}
       </PageHeader>
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <p style={{ color: 'var(--color-text-muted)', fontSize: 13 }}>Loading…</p>
         )}
diff --git a/frontend/src/pages/TrashPage.tsx b/frontend/src/pages/TrashPage.tsx
index 62cd98f..a7661e9 100644
--- a/frontend/src/pages/TrashPage.tsx
+++ b/frontend/src/pages/TrashPage.tsx
@@ -73,7 +73,7 @@ export default function TrashPage({ onUserChanged }: Props) {
         )}
       </PageHeader>
 
-      <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
+      <div className="aether-content" style={{ flex: 1, overflowY: 'auto' }}>
         {loading && (
           <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}>
             <div style={{ width: 24, height: 24, border: '2px solid var(--color-primary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />