diff --git a/rhino/text_editor.py b/rhino/text_editor.py
index 9a9bb17..e1a8e79 100644
--- a/rhino/text_editor.py
+++ b/rhino/text_editor.py
@@ -148,7 +148,10 @@ class TextEditorBridge(panel_base.BaseBridge):
             te.Plane = plane
 
             # Rich-Text (Phase 2) wenn vorhanden + nicht-trivial, sonst Plain
-            rtf = _runs_to_rtf(runs, st.get("font") or "Helvetica") if runs else None
+            rtf = _runs_to_rtf(
+                runs,
+                st.get("font") or "Helvetica",
+                base_size_m=float(st.get("size") or 0.2)) if runs else None
             applied_rtf = False
             if rtf:
                 try:
@@ -282,9 +285,11 @@ def _rtf_escape(s):
     return "".join(out)
 
 
-def _runs_to_rtf(runs, default_font):
+def _runs_to_rtf(runs, default_font, base_size_m=0.20):
     """Konvertiert Format-Runs in Rhinos RTF-Dialekt. Runs ist Liste von
-    dicts mit Keys text/font/bold/italic/underline/sup/sub/color."""
+    dicts mit Keys text/font/bold/italic/underline/sup/sub/color/fontSizePx.
+    base_size_m: TextEntity.TextHeight (in m). Frontend rendert 1m = 100px,
+    also entspricht base_size_m * 100 dem "Standard" \\fs20 in RTF."""
     if not runs: return None
     # Triviale Runs (alle plain, ein Font) → kein RTF noetig
     nontrivial = False
@@ -322,8 +327,8 @@ def _runs_to_rtf(runs, default_font):
         parts.append("}")
     parts.append("\\pard")
 
-    # Editor Default-Font-Size in px (siehe TextEditorApp Editor-div: 14px)
-    BASE_PX = 14
+    # Frontend rendert 1m = 100px; Standard-Run-Size ist base_size_m * 100
+    BASE_PX = max(1.0, base_size_m * 100.0)
     for run in runs:
         codes = []
         codes.append("\\f{}".format(font_idx(run.get("font") or default_font)))
diff --git a/src/TextEditorApp.jsx b/src/TextEditorApp.jsx
index e0836b3..052b49e 100644
--- a/src/TextEditorApp.jsx
+++ b/src/TextEditorApp.jsx
@@ -20,10 +20,11 @@ const SIZE_PRESETS = [0.05, 0.10, 0.15, 0.20, 0.25, 0.30, 0.50, 0.70, 1.00]
 
 const BAR_H = 22
 
-function Pill({ children, onClick, active, disabled, title, style }) {
+function Pill({ children, onClick, onMouseDown, active, disabled, title, style }) {
   return (
     <button
       onClick={onClick}
+      onMouseDown={onMouseDown}
       disabled={disabled}
       title={title}
       onMouseEnter={(e) => {
@@ -216,6 +217,63 @@ export default function TextEditorApp() {
   const [symbolsOpen, setSymbolsOpen] = useState(false)
   const [styles, setStyles] = useState([])
   const editorRef = useRef(null)
+  const savedRangeRef = useRef(null)
+
+  // 1m model = 100px im Editor (= "richtungsweisende" Optik). Pro-Run
+  // Pixel werden ans Backend als fontSizePx geschickt; das mappt sie
+  // zurueck zu \fs in der RTF mit base = settings.size * 100.
+  const sizeToPx = (sizeM) => Math.max(8, Math.round(sizeM * 100))
+
+  // Aktuelle Selection im Editor merken (selectionchange Event). Wenn
+  // User dann ausserhalb des Editors klickt (z.B. Toolbar-Dropdown),
+  // koennen wir die Selection wieder herstellen bevor wir Aenderungen
+  // applizieren.
+  useEffect(() => {
+    const onSelChange = () => {
+      const sel = window.getSelection()
+      if (!sel || sel.rangeCount === 0) return
+      const ed = editorRef.current
+      if (!ed) return
+      if (ed.contains(sel.anchorNode)) {
+        try { savedRangeRef.current = sel.getRangeAt(0).cloneRange() }
+        catch (e) {}
+      }
+    }
+    document.addEventListener('selectionchange', onSelChange)
+    // styleWithCSS aktivieren — execCommand inline statt deprecated <font>
+    try { document.execCommand('styleWithCSS', false, true) } catch (e) {}
+    return () => document.removeEventListener('selectionchange', onSelChange)
+  }, [])
+
+  const restoreSelection = () => {
+    if (!savedRangeRef.current) return
+    const sel = window.getSelection()
+    sel.removeAllRanges()
+    try { sel.addRange(savedRangeRef.current) } catch (e) {}
+  }
+
+  // Wrap aktuelle Selektion in ein <span> mit gegebenem CSS-Property
+  const applyInlineStyleToSelection = (styleProp, value) => {
+    restoreSelection()
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0) return
+    const range = sel.getRangeAt(0)
+    if (range.collapsed) return
+    const span = document.createElement('span')
+    span.style.setProperty(styleProp, value)
+    try {
+      const contents = range.extractContents()
+      span.appendChild(contents)
+      range.insertNode(span)
+      // Neue Selektion auf das eingefuegte Span legen
+      const newRange = document.createRange()
+      newRange.selectNodeContents(span)
+      sel.removeAllRanges()
+      sel.addRange(newRange)
+      // Saved-Range updaten damit Folge-Operationen wirken
+      savedRangeRef.current = newRange.cloneRange()
+    } catch (e) { console.error('applyInlineStyle', e) }
+  }
 
   useEffect(() => {
     onMessage('INIT', (data) => {
@@ -244,16 +302,25 @@ export default function TextEditorApp() {
 
   const exec = (cmd, value) => {
     try {
+      restoreSelection()
       document.execCommand(cmd, false, value)
       editorRef.current?.focus()
     } catch (e) { console.error('execCommand', cmd, e) }
   }
   const insertText = (s) => {
     try {
+      restoreSelection()
       document.execCommand('insertText', false, s)
       editorRef.current?.focus()
     } catch (e) { console.error('insertText', e) }
   }
+  // Mouse-Down-Guard fuer Toolbar-Buttons: preventDefault verhindert
+  // dass der Button-Klick den Focus aus dem Editor stiehlt (sonst
+  // verschwindet die Selektion bevor execCommand laufen kann).
+  const onBtnMouseDown = (fn) => (e) => {
+    e.preventDefault()
+    fn()
+  }
 
   const toggleBold = () => { setBold(b => !b); exec('bold') }
   const toggleItalic = () => { setItalic(b => !b); exec('italic') }
@@ -342,16 +409,28 @@ export default function TextEditorApp() {
               <option key={s.id} value={s.id}>{s.name}</option>
             )),
           ]} />
-        <Dropdown value={font} onChange={(v) => { setFont(v); exec('fontName', v) }}
-          width={150} title="Schrift"
+        <Dropdown value={font}
+          onChange={(v) => {
+            setFont(v)
+            // Auf Selektion applizieren: span-Wrap mit font-family
+            applyInlineStyleToSelection('font-family', v)
+            editorRef.current?.focus()
+          }}
+          width={150} title="Schrift — wenn nichts ausgewählt: gilt für ganzen Text als Default"
           options={
             fonts.length === 0
               ? <option value="">— Fonts laden —</option>
               : fonts.map(f => <option key={f} value={f}>{f}</option>)
           } />
         <Dropdown value={String(size)}
-          onChange={(v) => setSize(parseFloat(v))}
-          width={90} title="Texthöhe (m)"
+          onChange={(v) => {
+            const n = parseFloat(v)
+            setSize(n)
+            // Auf Selektion applizieren via span-Wrap
+            applyInlineStyleToSelection('font-size', sizeToPx(n) + 'px')
+            editorRef.current?.focus()
+          }}
+          width={90} title="Texthöhe (m) — wenn nichts ausgewählt: gilt für ganzen Text"
           options={SIZE_PRESETS.map(s => (
             <option key={s} value={String(s)}>{s.toFixed(2)} m</option>
           ))}
@@ -371,30 +450,33 @@ export default function TextEditorApp() {
         <Pill onClick={clearColor} title="Layer-Farbe verwenden">Layer</Pill>
       </div>
 
-      {/* Toolbar Row 2: B I U + Align + Sup/Sub */}
+      {/* Toolbar Row 2: B I U + Align + Sup/Sub
+          onMouseDown preventDefault verhindert dass Buttons den Focus
+          aus dem Editor stehlen → Selection bleibt erhalten → execCommand
+          wirkt richtig auf den markierten Text. */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-        <Pill active={bold} onClick={toggleBold} title="Fett">
+        <Pill active={bold} onMouseDown={onBtnMouseDown(toggleBold)} title="Fett">
           <Icon name="format_bold" size={13} />
         </Pill>
-        <Pill active={italic} onClick={toggleItalic} title="Kursiv">
+        <Pill active={italic} onMouseDown={onBtnMouseDown(toggleItalic)} title="Kursiv">
           <Icon name="format_italic" size={13} />
         </Pill>
-        <Pill active={underline} onClick={toggleUnderline} title="Unterstrichen">
+        <Pill active={underline} onMouseDown={onBtnMouseDown(toggleUnderline)} title="Unterstrichen">
           <Icon name="format_underlined" size={13} />
         </Pill>
         <div style={{ width: 6 }} />
-        <Pill active={align === 'left'} onClick={() => doAlign('left')} title="Links">
+        <Pill active={align === 'left'} onMouseDown={onBtnMouseDown(() => doAlign('left'))} title="Links">
           <Icon name="format_align_left" size={13} />
         </Pill>
-        <Pill active={align === 'center'} onClick={() => doAlign('center')} title="Mittig">
+        <Pill active={align === 'center'} onMouseDown={onBtnMouseDown(() => doAlign('center'))} title="Mittig">
           <Icon name="format_align_center" size={13} />
         </Pill>
-        <Pill active={align === 'right'} onClick={() => doAlign('right')} title="Rechts">
+        <Pill active={align === 'right'} onMouseDown={onBtnMouseDown(() => doAlign('right'))} title="Rechts">
           <Icon name="format_align_right" size={13} />
         </Pill>
         <div style={{ width: 6 }} />
-        <Pill onClick={doSup} title="Hochstellen (x²)" style={{ fontFamily: 'serif' }}>x²</Pill>
-        <Pill onClick={doSub} title="Tiefstellen (x₂)" style={{ fontFamily: 'serif' }}>x₂</Pill>
+        <Pill onMouseDown={onBtnMouseDown(doSup)} title="Hochstellen (x²)" style={{ fontFamily: 'serif' }}>x²</Pill>
+        <Pill onMouseDown={onBtnMouseDown(doSub)} title="Tiefstellen (x₂)" style={{ fontFamily: 'serif' }}>x₂</Pill>
       </div>
 
       {/* Toolbar Row 3: Frame / Rotation / Mask / Horizontal-to-view / Symbole */}
@@ -459,7 +541,9 @@ export default function TextEditorApp() {
         </div>
       </div>
 
-      {/* WYSIWYG Editor */}
+      {/* WYSIWYG Editor — kein state-getriebenes fontFamily/fontSize hier
+          (sonst ueberschreiben die Container-Styles die per-Span-Styles).
+          white-space pre-wrap preserves Newlines + Spaces. */}
       <div
         ref={editorRef}
         contentEditable
@@ -472,11 +556,12 @@ export default function TextEditorApp() {
           color: 'var(--text-primary)',
           border: '1px solid var(--border)',
           borderRadius: 6,
-          fontFamily: font,
-          fontSize: 14, lineHeight: 1.5,
+          fontFamily: 'Helvetica, sans-serif',
+          fontSize: 20, lineHeight: 1.5,
           outline: 'none',
           overflowY: 'auto',
           textAlign: align,
+          whiteSpace: 'pre-wrap',
         }}
       />