diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec07035..bf2cbfc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - Code-Blöcke in Notizen: Sprachauswahl (rund 50 Sprachen, bei Bedarf nachgeladen), Farben beim Tippen im Stil von VS Code Dark+/Light+ für alle Themes, „Kopieren“, Tab/Shift+Tab rückt ein und aus. `/code yaml` oder ```` ```yaml ```` legt die Sprache direkt fest.
 
 ### Changed
+- Notizen auf dem Handy: fast kein Seitenrand mehr, Einrückung 14 statt 22 px pro Ebene, Zoom- und Löschknopf belegen nur noch in der aktiven Zeile Platz. Sehr tief verschachtelte Punkte behalten eine lesbare Breite, die Notiz lässt sich dann seitlich verschieben statt den Text zu quetschen.
 - E-Mails zeigen einen Absendernamen: `SMTP_FROM_NAME` bzw. das neue Feld „Absender-Name“ in Administration → E-Mail (Standard „MindSift“), wenn die Absenderadresse keinen eigenen Namen enthält.
 - Slash-Befehle einheitlich englisch: `/image` statt `/bild` (`/bild` findet ihn weiterhin), kürzere Beschreibungen, breiteres Menü ohne Umbrüche.
 - `docker-compose.yml` enthält nur noch die Zuordnungen; alle Erklärungen zu den Variablen stehen in `.env.example`. Neu durchgereicht werden `TZ`, `TRUSTED_PROXIES`, `LOGIN_PROTECTION`, `DEMO_RESET_MINUTES` und `LEGAL_*_CONTENT`, die vorher in `.env` gesetzt wirkungslos blieben.
diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx
index 6eedceb..9eac611 100644
--- a/frontend/src/features/workspace/DocumentEditor.tsx
+++ b/frontend/src/features/workspace/DocumentEditor.tsx
@@ -883,7 +883,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
       )}
 
       {/* Main Content Area */}
-      <div className="w-full px-4 sm:px-8 py-5 flex-1">
+      {/* Phones: almost no side margin; very deep outlines scroll sideways (rows keep a minimum width) */}
+      <div className="w-full pl-2 pr-1 sm:px-8 py-5 flex-1 overflow-x-auto sm:overflow-x-visible [-webkit-overflow-scrolling:touch]">
         {zoomedBlock ? (
           /* =========================================================================
              FOKUS-MODUS & ZOOM-IN (HOISTED SUBTREE VIEW)
diff --git a/frontend/src/features/workspace/OutlinerBlock.tsx b/frontend/src/features/workspace/OutlinerBlock.tsx
index 8a89d00..f2cf7d6 100644
--- a/frontend/src/features/workspace/OutlinerBlock.tsx
+++ b/frontend/src/features/workspace/OutlinerBlock.tsx
@@ -754,7 +754,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
 
   return (
     <div
-      className={`group relative flex items-start gap-1 py-1 px-1.5 rounded-card transition-all duration-300 ${
+      className={`group relative flex items-start gap-1 py-1 px-0.5 sm:px-1.5 rounded-card transition-all duration-300 ${
         isDragTarget
           ? 'border-t-2 border-accent bg-accent/10'
           : isTargeted
@@ -762,7 +762,10 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           : ''
       } ${block.conflictOf ? 'border-l-2 border-status-warn bg-status-warn/5' : ''}`}
       style={{
-        paddingLeft: `${visualLevel * 22 + 4}px`,
+        // Indent per level and room kept for text come from CSS (narrower on phones, see index.css);
+        // deep rows get wider than the screen and the note scrolls sideways instead of squeezing them
+        paddingLeft: `calc(var(--outline-indent) * ${visualLevel} + 4px)`,
+        minWidth: `calc(var(--outline-indent) * ${visualLevel} + var(--outline-min-text))`,
       }}
       onDragOver={(e) => onDragOverBlock?.(e, index)}
       onDrop={() => onDropBlock?.(index)}
@@ -1252,7 +1255,8 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       <button
         type="button"
         onClick={() => onZoomBlock?.(block.id)}
-        className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity shrink-0"
+        // Phones zoom by tapping the bullet; the button would only take width from the text there
+        className="hidden sm:block opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity shrink-0"
         title="In diesen Ast hineinzoomen (Fokus-Modus)"
       >
         <Maximize2 className="w-3.5 h-3.5" />
@@ -1269,7 +1273,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         </span>
       )}
 
-      {/* Delete button on hover (Trash2 icon) */}
+      {/* Delete button on hover (Trash2 icon); on phones only in the row being edited */}
       {canEdit && (
         <button
           type="button"
@@ -1282,7 +1286,11 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
               onDeleteBlockRef.current(block.id, false);
             }
           }}
-          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer"
+          className={
+            activeFocus
+              ? 'opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer'
+              : 'hidden sm:block opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer'
+          }
           title="Block löschen"
         >
           <Trash2 className="w-3.5 h-3.5" />
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3b678d1..c413f42 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -549,3 +549,16 @@ fieldset:disabled :is(button, input, select, textarea) {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Outliner: indent per level and the width a row keeps for its text. Phones indent less and let very
+   deep rows run wider than the screen (the note then scrolls sideways) instead of squeezing the text. */
+:root {
+  --outline-indent: 14px;
+  --outline-min-text: 14rem;
+}
+@media (min-width: 640px) {
+  :root {
+    --outline-indent: 22px;
+    --outline-min-text: 0px;
+  }
+}