.native-control auch fuer Buttons — View-Toggle + BarButton system-nativ

User-Screenshot: dropdowns waren native, aber View-Toggle (Top/Front/...)
und die Icon-Buttons (Camera/Gear/Zoom/etc.) sahen weiterhin custom aus.

Grund: globales `button { border: none; background: none; }` strippt das
System-Push-Button-Styling fuer alle <button>s. `.native-control` deckte
nur select + input ab.

Fix:
- `.native-control` erweitert auf `button.native-control`: revert auf
  alle Button-Reset-Properties → WebKit rendert macOS-Push-Button-Chrome
- `.is-active`-Modifier: bold + accent-Tint fuer Toggle-Active-State
  (macOS-Native hat keinen "pressed-Toggle"-Look fuer normale Buttons)
- BarButton: className="native-control" + active=true → is-active
- View-Toggle (Top/Front/Right/Iso/Persp): pill-Container weg,
  individuelle native buttons mit is-active wenn matchView() true

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/OberleisteApp.jsx

@@ -117,21 +117,19 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children })
   )
 }
 
-// BarButton: ebenfalls system-nativer Look — bare <button> mit Default-
+// BarButton: bare <button class="native-control"> — macOS Push-Button
-// Chrome, kein eigener Background/Border. macOS rendert sein Push-Button
+// Look (gewölbt, rounded). active=true setzt is-active fuer Bold-Text
-// Styling. `active` setzt die accent-Farbe via accent-color (CSS).
+// und Icon-Tint.
 function BarButton({ icon, onClick, title, disabled, active }) {
   return (
-    <button onClick={onClick} disabled={disabled} title={title}
+    <button
+      className={`native-control${active ? ' is-active' : ''}`}
+      onClick={onClick} disabled={disabled} title={title}
       style={{
-        height: BAR_H, minWidth: BAR_H,
+        height: BAR_H,
-        padding: '0 6px',
         fontSize: 11,
         colorScheme: 'dark',
-        accentColor: active ? 'var(--accent)' : undefined,
         flexShrink: 0,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
       }}>
       <Icon name={icon} size={13}
             style={{ color: active ? 'var(--accent)' : undefined,
@@ -319,31 +317,25 @@ export default function OberleisteApp() {
       </button>
       <div style={sep} />
       {/* ====== VIEW (Top/Front/Right/Iso/Persp + Kamera) ======
-          Pill-foermige Toggle-Gruppe, kein Group-Label. */}
+          Individuelle native Push-Buttons. Active-State via is-active
-      <div style={{ display: 'inline-flex', gap: 0,
+          (Bold + Icon-Tint). Kein Pill-Container. */}
-                     border: '1px solid var(--border-light)', borderRadius: 999,
+      {VIEWS.map(v => (
-                     overflow: 'hidden', flexShrink: 0 }}>
-        {VIEWS.map((v, idx) => (
         <button
           key={v.value}
+          className={`native-control${matchView(v.value) ? ' is-active' : ''}`}
           onClick={() => setView(v.value)}
           title={`Ansicht ${v.label}`}
           style={{
-              height: BAR_H, padding: '0 10px',
+            height: BAR_H, fontSize: 11,
-              background: matchView(v.value) ? 'var(--accent)' : 'var(--bg-input)',
+            colorScheme: 'dark', flexShrink: 0,
-              color: matchView(v.value) ? 'var(--bg-panel)' : 'var(--text-primary)',
-              border: 'none',
-              borderLeft: idx > 0 ? '1px solid var(--border-light)' : 'none',
-              cursor: 'pointer',
-              display: 'flex', alignItems: 'center', gap: 4,
-              fontSize: 10,
           }}
         >
-            <Icon name={v.icon} size={13} />
+          <Icon name={v.icon} size={13}
-            <span>{v.label}</span>
+                style={{ verticalAlign: 'middle', marginRight: 4,
+                          color: matchView(v.value) ? 'var(--accent)' : undefined }} />
+          {v.label}
         </button>
       ))}
-      </div>
       <BarButton icon="videocam" onClick={() => openKameraPanel()}
                   title="Kamera-Einstellungen (Position, Target, Linse, Presets)" />
 

src/index.css

@@ -198,9 +198,11 @@ select:hover {
 
 /* Opt-out: System-native Chrome (Oberleiste). Setzt die globalen
    pill/appearance:none Overrides zurueck und ueberlaesst WebKit das
-   Rendering — Standard-macOS-Combobox + Native-Popup-Menue. */
+   Rendering — Standard-macOS-Combobox + Native-Popup-Menue. Gilt auch
+   fuer <button> die im globalen button{} alles abgestreift kriegen. */
 select.native-control,
-input.native-control {
+input.native-control,
+button.native-control {
   appearance: auto;
   -webkit-appearance: auto;
   background: revert;
@@ -211,17 +213,26 @@ input.native-control {
   font: revert;
   letter-spacing: revert;
   box-shadow: none;
+  transition: none;
+  color: revert;
 }
 select.native-control:hover,
-input.native-control:hover {
+input.native-control:hover,
+button.native-control:hover {
   background: revert;
   border-color: revert;
 }
 select.native-control:focus,
-input.native-control:focus {
+input.native-control:focus,
+button.native-control:focus {
   box-shadow: revert;
   border-color: revert;
 }
+/* Default-Push-Button-Variante fuer aktive Toggles. macOS rendert das
+   als geful­ltes blaues Pulsing-Button — wir tinten es via accent-color. */
+button.native-control.is-active {
+  font-weight: 600;
+}
 
 /* Utility */
 .label-xs {