diff --git a/src/OberleisteApp.jsx b/src/OberleisteApp.jsx
index 12b571a..b398843 100644
--- a/src/OberleisteApp.jsx
+++ b/src/OberleisteApp.jsx
@@ -84,8 +84,12 @@ const pillSelect = {
   fontSize: 10,
 }
 
-// BarSelect: Icon roh links (kein Container) + pill-shaped Native-Select.
-// joinedRight: rechte Pill-Kante flach, fuer Verkettung mit BarButton.
+// BarSelect: Icon roh links + System-natives <select>. Kein appearance:none,
+// kein eigener Caret — WebKit/macOS rendert sein eigenes Drop-Caret und
+// oeffnet das Popup-Menue im OS-Style (wie Vectorworks).
+//
+// `colorScheme: 'dark'` triggert die macOS-Dark-Mode-Variante des nativen
+// Controls. joinedRight bleibt erhalten fuer Verkettung mit BarButton.
 function BarSelect({ icon, value, onChange, title, disabled, width, children, joinedRight }) {
   return (
     <div title={title} style={{
@@ -96,35 +100,25 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children, jo
         <Icon name={icon} size={13}
               style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
       )}
-      <div style={{
-        position: 'relative',
-        height: BAR_H, width,
-        background: 'var(--bg-input)',
-        border: '1px solid var(--border-light)',
-        borderTopLeftRadius: 999, borderBottomLeftRadius: 999,
-        borderTopRightRadius: joinedRight ? 0 : 999,
-        borderBottomRightRadius: joinedRight ? 0 : 999,
-        borderRight: joinedRight ? 'none' : '1px solid var(--border-light)',
-        overflow: 'hidden', flexShrink: 0,
-      }}>
-        <select
-          value={value || ''}
-          disabled={disabled}
-          onChange={(e) => onChange(e.target.value)}
-          style={{
-            width: '100%', height: '100%', minWidth: 0,
-            background: 'transparent', border: 'none', outline: 'none',
-            padding: '0 22px 0 12px',
-            fontSize: 11, color: 'var(--text-primary)',
-            appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-          }}
-        >{children}</select>
-        <Icon name="arrow_drop_down" size={14}
-              style={{ position: 'absolute', right: 6, top: '50%',
-                       transform: 'translateY(-50%)',
-                       color: 'var(--text-muted)', pointerEvents: 'none' }} />
-      </div>
+      <select
+        value={value || ''}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value)}
+        style={{
+          height: BAR_H, width,
+          fontSize: 11, color: 'var(--text-primary)',
+          background: 'var(--bg-input)',
+          border: '1px solid var(--border-light)',
+          borderTopLeftRadius: 999, borderBottomLeftRadius: 999,
+          borderTopRightRadius: joinedRight ? 0 : 999,
+          borderBottomRightRadius: joinedRight ? 0 : 999,
+          borderRight: joinedRight ? 'none' : '1px solid var(--border-light)',
+          padding: '0 8px 0 10px',
+          colorScheme: 'dark',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          outline: 'none', flexShrink: 0,
+        }}
+      >{children}</select>
     </div>
   )
 }
diff --git a/src/index.css b/src/index.css
index 998b49b..e022e42 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,6 +20,10 @@
 }
 
 :root {
+  /* Native OS-Controls (selects, scrollbars) sollen dem aktuellen Theme
+     folgen. Wert wird im prefers-color-scheme: dark Block ueberschrieben. */
+  color-scheme: light;
+
   /* === LIGHT MODE (RAPPORT cream + olive + deep green) === */
   --bg-base:       #e0dbd4;
   --bg-panel:      #e0dbd4;
@@ -75,6 +79,7 @@
 /* === DARK MODE (Rhino-tonig) === */
 @media (prefers-color-scheme: dark) {
   :root {
+    color-scheme: dark;
     --bg-base:       #2a2a2a;
     --bg-panel:      #2a2a2a;
     --bg-section:    #2a2a2a;