Massstab in 2 Reihen + View-Toggle inaktiv ebenfalls dunkel

User-Wunsch: Massstab-Stack analog Preset-Block. Plus inaktive View-
Toggle-Buttons sollen denselben dunklen Hintergrund haben wie der
Preset-Block.

Massstab:
- Reihe 1 (oben): Buttons (%, fit_screen, center_focus_strong, print/edit)
- Reihe 2 (unten): Live-Zoom-Chip + Massstab-Dropdown (BarCombo statt
  BarSelect — dunklerer bg-input + zusammenhaengender Pill)
- Custom-Input ebenfalls auf bg-input

View-Toggle: inaktive Buttons bg-item → bg-input (konsistent dunkel mit
allen anderen Pills). Aktiv bleibt accent-fill.

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

src/OberleisteApp.jsx

@@ -418,7 +418,7 @@ export default function OberleisteApp() {
               title={`Ansicht ${v.label}`}
               style={{
                 height: BAR_H, padding: '0 10px',
-                background: isActive ? 'var(--accent)' : 'var(--bg-item)',
+                background: isActive ? 'var(--accent)' : 'var(--bg-input)',
                 color: isActive ? 'var(--bg-panel)' : 'var(--text-primary)',
                 border: '1px solid var(--border)',
                 borderLeft: isFirst ? '1px solid var(--border)' : 'none',
@@ -557,78 +557,91 @@ export default function OberleisteApp() {
 
       <div style={sep} />
 
-      {/* ====== MASSSTAB ====== */}
+      {/* ====== MASSSTAB 2-Reihen ======
-      {/* Live-Zoom Chip — pill, accent wenn Massstab anwendbar */}
+          Oben:  Buttons (%, fit, center, print/edit)
+          Unten: Live-Zoom-Chip + Dropdown
+      */}
       <div style={{
-        display: 'inline-flex', alignItems: 'center',
+        display: 'flex', flexDirection: 'column', gap: 4,
-        height: BAR_H, padding: '0 10px',
+        flexShrink: 0,
-        background: isPerspective ? 'var(--bg-input)' : 'var(--accent)',
+      }}>
-        color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
+        {/* Reihe 1: Buttons */}
-        border: '1px solid var(--border-light)',
+        <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-start' }}>
-        borderRadius: 999,
+          <BarButton icon="percent" onClick={apply100}
-        fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
+                      disabled={isPerspective || !appliedScale}
-        minWidth: 60, justifyContent: 'center', flexShrink: 0,
+                      title={appliedScale ? `Zoom auf 1:${appliedScale} snappen` : 'Erst einen Massstab wählen'} />
-      }} title="Live-Zoom">
+          <BarButton icon="fit_screen" onClick={zoomExtents}
-        {isPerspective ? '—' : fmtScale(scaleVal)}
+                      title="Auf gesamten Inhalt zoomen" />
-      </div>
+          <BarButton icon="center_focus_strong" onClick={zoomSelection}
-      {customMode ? (
+                      title="Auf Selektion zoomen" />
-        <input
+          <BarButton
-          ref={customInputRef}
+            icon={state.showLineweights ? 'print' : 'edit'}
-          disabled={isPerspective}
+            active={state.showLineweights}
-          type="text" placeholder="1:N"
+            onClick={() => setShowLineweights(!state.showLineweights)}
-          value={draft}
+            title={state.showLineweights
-          onChange={(e) => setDraft(e.target.value)}
+              ? 'Print-View aktiv — klick zum Ausschalten'
-          onKeyDown={(e) => {
+              : 'Strichstärken anzeigen (Print-View)'}
-            if (e.key === 'Enter') applyDraft()
+          />
-            else if (e.key === 'Escape') cancelDraft()
+        </div>
-          }}
+        {/* Reihe 2: Live-Zoom + Dropdown */}
-          onBlur={applyDraft}
+        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-          style={{
+          <div style={{
-            height: BAR_H, width: 100,
+            display: 'inline-flex', alignItems: 'center',
-            background: 'var(--bg-item)',
+            height: BAR_H, padding: '0 10px',
-            color: 'var(--text-primary)',
+            background: isPerspective ? 'var(--bg-input)' : 'var(--accent)',
-            border: '1px solid var(--border)',
+            color: isPerspective ? 'var(--text-muted)' : 'var(--bg-panel)',
+            border: '1px solid var(--border-light)',
             borderRadius: 999,
-            padding: '0 12px', fontSize: 11,
+            fontFamily: 'DM Mono, monospace', fontSize: 11, fontWeight: 600,
-            fontFamily: 'DM Mono, monospace',
+            minWidth: 60, justifyContent: 'center', flexShrink: 0,
-            outline: 'none',
+          }} title="Live-Zoom">
-          }}
+            {isPerspective ? '—' : fmtScale(scaleVal)}
-          title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
+          </div>
-        />
+          {customMode ? (
-      ) : (
+            <input
-        <BarSelect
+              ref={customInputRef}
-          icon="straighten"
+              disabled={isPerspective}
-          value={dropdownValue}
+              type="text" placeholder="1:N"
-          onChange={(v) => applyDropdown(v)}
+              value={draft}
-          disabled={isPerspective}
+              onChange={(e) => setDraft(e.target.value)}
-          width={140}
+              onKeyDown={(e) => {
-          title="Gesetzter Massstab"
+                if (e.key === 'Enter') applyDraft()
-        >
+                else if (e.key === 'Escape') cancelDraft()
-          <option value="__none__">—</option>
+              }}
-          {PRESETS.map(p => (
+              onBlur={applyDraft}
-            <option key={p.value} value={String(p.value)}>{p.label}</option>
+              style={{
-          ))}
+                height: BAR_H, width: 100,
-          {appliedScale != null && !PRESETS.some(p => p.value === appliedScale) && (
+                background: 'var(--bg-input)',
-            <option value={String(appliedScale)}>1:{appliedScale}</option>
+                color: 'var(--text-primary)',
+                border: '1px solid var(--border)',
+                borderRadius: 999,
+                padding: '0 12px', fontSize: 11,
+                fontFamily: 'DM Mono, monospace',
+                outline: 'none',
+              }}
+              title="Massstab eingeben (Enter = uebernehmen, Esc = abbrechen)"
+            />
+          ) : (
+            <BarCombo
+              icon="straighten"
+              value={dropdownValue}
+              onChange={(v) => applyDropdown(v)}
+              disabled={isPerspective}
+              width={140}
+              title="Gesetzter Massstab"
+            >
+              <option value="__none__">—</option>
+              {PRESETS.map(p => (
+                <option key={p.value} value={String(p.value)}>{p.label}</option>
+              ))}
+              {appliedScale != null && !PRESETS.some(p => p.value === appliedScale) && (
+                <option value={String(appliedScale)}>1:{appliedScale}</option>
+              )}
+              <option value="__custom__">Eigener…</option>
+            </BarCombo>
           )}
-          <option value="__custom__">Eigener…</option>
+        </div>
-        </BarSelect>
+      </div>
-      )}
-      <BarButton icon="percent" onClick={apply100}
-                  disabled={isPerspective || !appliedScale}
-                  title={appliedScale ? `Zoom auf 1:${appliedScale} snappen` : 'Erst einen Massstab wählen'} />
-      <BarButton icon="fit_screen" onClick={zoomExtents}
-                  title="Auf gesamten Inhalt zoomen" />
-      <BarButton icon="center_focus_strong" onClick={zoomSelection}
-                  title="Auf Selektion zoomen" />
-      <BarButton
-        icon={state.showLineweights ? 'print' : 'edit'}
-        active={state.showLineweights}
-        onClick={() => setShowLineweights(!state.showLineweights)}
-        title={state.showLineweights
-          ? 'Print-View aktiv — klick zum Ausschalten'
-          : 'Strichstärken anzeigen (Print-View)'}
-      />
 
       {/* Snap-Toggles (Ortho/Grid/OSnap) sind in Rhinos eigener Footer-Bar
           schon vorhanden — hier rausgenommen um Doppelung zu vermeiden. */}