diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 798853a..224ff62 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -84,14 +84,10 @@ const pillSelect = {
   fontSize: 10,
 }
 
-// BarSelect: Icon roh links + komplett system-natives <select>.
-// Kein Background, kein Border, kein Border-Radius — WebKit/macOS rendert
-// seinen eigenen Combobox-Look auch im Ruhezustand (gewölbtes Feld mit
-// Caret-Indikator rechts). `colorScheme: dark` triggert die Dark-Variante.
-//
-// joinedRight bleibt als Prop drin aber als no-op — native Felder koennen
-// nicht visuell mit unseren Custom-Buttons verkettet werden.
-function BarSelect({ icon, value, onChange, title, disabled, width, children }) {
+// BarSelect: Icon roh links + custom-pill <select>. Vectorworks-Stil —
+// dunkler Pill-Container, Caret rechts, joinedRight macht die rechte Kante
+// flach fuer die Verkettung mit BarButton.
+function BarSelect({ icon, value, onChange, title, disabled, width, children, joinedRight }) {
   return (
     <div title={title} style={{
       display: 'inline-flex', alignItems: 'center', gap: 5,
@@ -102,38 +98,53 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children })
               style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
       )}
       <select
-        className="native-control"
         value={value || ''}
         disabled={disabled}
         onChange={(e) => onChange(e.target.value)}
         style={{
           height: BAR_H, width,
-          fontSize: 11,
-          colorScheme: 'dark',
-          flexShrink: 0,
+          background: 'var(--bg-item)',
+          color: 'var(--text-primary)',
+          border: '1px solid var(--border)',
+          borderTopLeftRadius: 999, borderBottomLeftRadius: 999,
+          borderTopRightRadius: joinedRight ? 0 : 999,
+          borderBottomRightRadius: joinedRight ? 0 : 999,
+          borderRight: joinedRight ? 'none' : '1px solid var(--border)',
+          padding: '0 26px 0 12px',
+          fontSize: 11, fontFamily: 'var(--font)',
+          appearance: 'none', WebkitAppearance: 'none',
+          backgroundImage: 'var(--select-arrow)',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'right 10px center',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          flexShrink: 0, outline: 'none',
+          letterSpacing: 0,
         }}
       >{children}</select>
     </div>
   )
 }
 
-// BarButton: bare <button class="native-control"> — macOS Push-Button
-// Look (gewölbt, rounded). active=true setzt is-active fuer Bold-Text
-// und Icon-Tint.
-function BarButton({ icon, onClick, title, disabled, active }) {
+// BarButton: pill-foermiger Icon-Button im selben Stil wie BarSelect.
+// joinedLeft = linke Kante flach (dockt rechts an einen BarSelect-joinedRight).
+function BarButton({ icon, onClick, title, disabled, active, joinedLeft }) {
   return (
-    <button
-      className={`native-control${active ? ' is-active' : ''}`}
-      onClick={onClick} disabled={disabled} title={title}
+    <button onClick={onClick} disabled={disabled} title={title}
       style={{
-        height: BAR_H,
-        fontSize: 11,
-        colorScheme: 'dark',
-        flexShrink: 0,
+        height: BAR_H, width: BAR_H,
+        background: active ? 'var(--accent)' : 'var(--bg-item)',
+        border: '1px solid var(--border)',
+        borderTopLeftRadius: joinedLeft ? 0 : 999,
+        borderBottomLeftRadius: joinedLeft ? 0 : 999,
+        borderTopRightRadius: 999, borderBottomRightRadius: 999,
+        borderLeft: joinedLeft ? 'none' : '1px solid var(--border)',
+        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.5 : 1, flexShrink: 0,
+        padding: 0,
       }}>
       <Icon name={icon} size={13}
-            style={{ color: active ? 'var(--accent)' : undefined,
-                      verticalAlign: 'middle' }} />
+            style={{ color: active ? 'var(--bg-panel)' : 'var(--text-muted)' }} />
     </button>
   )
 }
@@ -317,25 +328,38 @@ export default function OberleisteApp() {
       </button>
       <div style={sep} />
       {/* ====== VIEW (Top/Front/Right/Iso/Persp + Kamera) ======
-          Individuelle native Push-Buttons. Active-State via is-active
-          (Bold + Icon-Tint). Kein Pill-Container. */}
-      {VIEWS.map(v => (
-        <button
-          key={v.value}
-          className={`native-control${matchView(v.value) ? ' is-active' : ''}`}
-          onClick={() => setView(v.value)}
-          title={`Ansicht ${v.label}`}
-          style={{
-            height: BAR_H, fontSize: 11,
-            colorScheme: 'dark', flexShrink: 0,
-          }}
-        >
-          <Icon name={v.icon} size={13}
-                style={{ verticalAlign: 'middle', marginRight: 4,
-                          color: matchView(v.value) ? 'var(--accent)' : undefined }} />
-          {v.label}
-        </button>
-      ))}
+          Segmented-Pill-Gruppe analog Vectorworks. Active = accent fill. */}
+      <div style={{ display: 'inline-flex', flexShrink: 0 }}>
+        {VIEWS.map((v, idx) => {
+          const isFirst = idx === 0
+          const isLast = idx === VIEWS.length - 1
+          const isActive = matchView(v.value)
+          return (
+            <button
+              key={v.value}
+              onClick={() => setView(v.value)}
+              title={`Ansicht ${v.label}`}
+              style={{
+                height: BAR_H, padding: '0 10px',
+                background: isActive ? 'var(--accent)' : 'var(--bg-item)',
+                color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
+                border: '1px solid var(--border)',
+                borderLeft: isFirst ? '1px solid var(--border)' : 'none',
+                borderTopLeftRadius: isFirst ? 999 : 0,
+                borderBottomLeftRadius: isFirst ? 999 : 0,
+                borderTopRightRadius: isLast ? 999 : 0,
+                borderBottomRightRadius: isLast ? 999 : 0,
+                display: 'inline-flex', alignItems: 'center', gap: 4,
+                fontSize: 10, fontWeight: isActive ? 600 : 500,
+                cursor: 'pointer', flexShrink: 0,
+              }}
+            >
+              <Icon name={v.icon} size={13} />
+              <span>{v.label}</span>
+            </button>
+          )
+        })}
+      </div>
       <BarButton icon="videocam" onClick={() => openKameraPanel()}
                   title="Kamera-Einstellungen (Position, Target, Linse, Presets)" />
 
@@ -393,7 +417,6 @@ export default function OberleisteApp() {
       {customMode ? (
         <input
           ref={customInputRef}
-          className="native-control"
           disabled={isPerspective}
           type="text" placeholder="1:N"
           value={draft}
@@ -405,9 +428,13 @@ export default function OberleisteApp() {
           onBlur={applyDraft}
           style={{
             height: BAR_H, width: 100,
-            fontSize: 11,
+            background: 'var(--bg-item)',
+            color: 'var(--text-primary)',
+            border: '1px solid var(--border)',
+            borderRadius: 999,
+            padding: '0 12px', fontSize: 11,
             fontFamily: 'DM Mono, monospace',
-            colorScheme: 'dark',
+            outline: 'none',
           }}
           title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
         />