refactor: update navigation components and styles for improved consistency

- Replaced legacy .capture-shell with .app-subnav-shell and integrated PageSectionNav for a unified navigation experience across multiple pages. - Refactored AdminCatalogsPage, AdminMaturityModelsPage, ClubsPage, ExercisesListPage, MediaWikiImportPage, SkillsPage, and TrainingFrameworkProgramEditPage to utilize the new PageSectionNav component for tab navigation. - Enhanced CSS styles for better responsiveness and visual clarity in navigation elements. - Improved accessibility features with appropriate ARIA roles and attributes for better usability.
2026-05-06 12:49:35 +02:00 · 2026-05-06 12:49:35 +02:00 · db8af53652
commit db8af53652
parent 1e1fd80fb7
11 changed files with 243 additions and 451 deletions
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@ -980,132 +980,15 @@ a.analysis-split__nav-item {
  padding: 8px 10px;
 }

-/* Erfassung: Sub-Navigation — oben Chip-Zeile (alle Viewports); wie admin-page-subtabs */
-.capture-shell {
+/* Legacy .capture-shell entfällt — Sektionsnav: PageSectionNav → .admin-page-subtabs */
+.app-subnav-shell {
  width: 100%;
-}
-
-.capture-shell__layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
-  align-items: stretch;
 }
-
-.capture-shell__nav-wrap {
-  width: 100%;
+.app-subnav-shell__main {
  min-width: 0;
-  position: sticky;
-  top: var(--header-h);
-  z-index: 4;
-  background: var(--bg);
-  padding-bottom: 4px;
-  margin-bottom: 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.capture-shell__nav {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  overflow-x: auto;
-  padding-bottom: 6px;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.capture-shell__nav::-webkit-scrollbar {
-  display: none;
-}
-
-.capture-shell__nav-item {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 12px;
-  border-radius: 20px;
-  border: 1.5px solid var(--border2);
-  background: var(--surface);
-  color: var(--text2);
-  font-family: var(--font);
-  font-size: 13px;
-  font-weight: 500;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  box-sizing: border-box;
-}
-
-.capture-shell__nav-item:hover {
-  border-color: var(--accent);
-  color: var(--text1);
-}
-
-.capture-shell__nav-item--active {
-  border-color: var(--accent);
-  background: var(--accent);
-  color: white;
-}
-
-.capture-shell__nav-item--active:hover {
-  color: white;
-}
-
-.capture-shell__nav-item--highlight:not(.capture-shell__nav-item--active) {
-  border-color: #7f77dd88;
-  background: #7f77dd14;
-}
-
-.capture-shell__nav-icon {
-  font-size: 15px;
-  line-height: 1;
-}
-
-.capture-shell__nav-label {
-  line-height: 1.2;
-}
-
-.capture-shell__main {
-  min-width: 0;
-  flex: 1;
-}
-
-@media (min-width: 1024px) {
-  .capture-shell__layout {
-    gap: 20px;
-  }
-
-  .capture-shell__nav-wrap {
-    top: var(--header-h);
-    padding-top: 2px;
-    padding-bottom: 10px;
-  }
-
-  .capture-shell__nav {
-    flex-wrap: wrap;
-    overflow-x: visible;
-    padding-bottom: 0;
-    gap: 8px;
-  }
-
-  .capture-shell__nav-item {
-    padding: 9px 14px;
-    border-radius: 999px;
-    font-size: 13px;
-    font-weight: 600;
-  }
-}
-
-button.capture-shell__nav-item {
-  font-family: inherit;
-  text-align: left;
-  -webkit-tap-highlight-color: transparent;
-}
-.capture-shell__nav-item svg.capture-shell__nav-icon {
-  flex-shrink: 0;
 }

 /* Einstellungen: gleiche Split-Struktur wie Analyse/Admin */
@ -1262,46 +1145,6 @@ button.capture-shell__nav-item {
    border-radius: 7px;
  }

-  /* Capture-Shell / AppSubnavShell: kompakte Chips + Scroll-Snap */
-  .capture-shell__layout {
-    gap: 10px;
-  }
-
-  .capture-shell__nav-wrap {
-    width: 100%;
-    max-width: none;
-    margin-left: calc(-1 * max(12px, env(safe-area-inset-left, 0px)));
-    margin-right: calc(-1 * max(12px, env(safe-area-inset-right, 0px)));
-    padding-left: max(12px, env(safe-area-inset-left, 0px));
-    padding-right: max(12px, env(safe-area-inset-right, 0px));
-    box-sizing: border-box;
-  }
-
-  .capture-shell__nav {
-    gap: 5px;
-    padding-bottom: 4px;
-    scroll-snap-type: x proximity;
-    scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px));
-  }
-
-  .capture-shell__nav-item {
-    padding: 6px 11px;
-    min-height: 36px;
-    font-size: 12px;
-    font-weight: 600;
-    gap: 5px;
-    border-radius: 999px;
-    border-width: 1px;
-    scroll-snap-align: start;
-    box-sizing: border-box;
-  }
-
-  .capture-shell__nav-item svg {
-    width: 15px !important;
-    height: 15px !important;
-  }
-
-  /* Admin-Seitenleiste oben: dieselbe Chip-Idee wie Subnav */
  .admin-top-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
@ -1391,7 +1234,7 @@ button.capture-shell__nav-item {
    gap: 6px;
  }

-  .framework-edit__tabbar .planning-segment-group__btn {
+  .framework-edit__tabbar .admin-page-subtabs__btn {
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.25;
@ -1518,12 +1361,11 @@ button.capture-shell__nav-item {

 /* ---------- Navigations-Ebenen (Kurzreferenz) ----------
 * Hauptbereiche: Bottom-Nav / App-Header.
- * Sektionsumschalter auf einer Seite (2–n Einträge): horizontale Chip-Zeile oben —
- *   • AppSubnavShell → .capture-shell (sticky unter dem Header, Wrap auf großen Screens)
- *   • viele flache Tabs (z. B. Stammdaten) → .admin-page-subtabs (gleiche Chip-Idee, Edge-Scroll mobil)
+ * Sektionsumschalter auf einer Seite: PageSectionNav → .admin-page-subtabs (Chips, mobil Edge-Scroll).
+ *   AppSubnavShell = PageSectionNav + Inhalt (z. B. Hierarchie-Admin).
 * Wechsel zwischen Admin-Seiten → .admin-top-nav
- * „Sub-Sub“ (dritte Ebene, z. B. Editor-Spalten): bewusst in jeweiligen Feature-Layouts (Seitenleiste / Panel).
- * Karten-Raster: .card-grid oder Klassen mit *list-grid* / *slots-board* / .dashboard-training-grid — dort kein .card+.card-Abstand (nur gap).
+ * „Sub-Sub“ (dritte Ebene): Feature-Layouts (Rahmen-Editor, Slots).
+ * Karten-Raster: .card-grid / *list-grid* / *slots-board* — nur gap, kein .card+.card.
 * ---------- */

 /* Admin-Kataloge: Seite „Stammdaten“ — viele Unter-Tabs, Chip-Scroll */
@ -1559,6 +1401,19 @@ button.capture-shell__nav-item {
  color: var(--text2);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+.admin-page-subtabs__btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.admin-page-subtabs__btn:disabled:hover {
+  border-color: var(--border2);
+  color: var(--text2);
+  background: var(--surface2);
 }
 .admin-page-subtabs__btn:hover {
  border-color: var(--accent);
@ -1578,6 +1433,31 @@ button.capture-shell__nav-item {
    font-size: 13px;
    padding: 9px 15px;
  }
+  .page-section-nav--wrap.admin-page-subtabs {
+    flex-wrap: wrap;
+  }
+}
+
+.page-section-nav__icon {
+  flex-shrink: 0;
+}
+/* Eingebettet in z. B. framework-edit__tabbar — keine zweite Unterlinie */
+.page-section-nav--embedded.admin-page-subtabs {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+  flex: 1;
+  min-width: 0;
+}
+/* Inline neben Labeln (Planung: Ansicht / Einblenden) */
+.page-section-nav--inline.admin-page-subtabs {
+  display: inline-flex;
+  width: auto;
+  max-width: 100%;
+  margin-bottom: 0;
+  flex: 0 1 auto;
+  border-bottom: none;
+  padding-bottom: 0;
 }

 /* Admin Hierarchy & Catalog Section (Komponenten) */
@ -4145,7 +4025,8 @@ button.capture-shell__nav-item {
 .framework-edit__tabbar::-webkit-scrollbar {
  display: none;
 }
-.framework-edit__tabbar .planning-segment-group {
+.framework-edit__tabbar .admin-page-subtabs,
+.framework-edit__tabbar .page-section-nav {
  flex: 1;
  min-width: 0;
 }
--- a/frontend/src/components/AppSubnavShell.jsx
+++ b/frontend/src/components/AppSubnavShell.jsx
@ -1,9 +1,8 @@
+import PageSectionNav from './PageSectionNav'
+
 /**
- * Sub-Navigation (einheitlich mit Admin-Sektionsschaltern):
- * — Mobil & Desktop: eine horizontale Chip-/Registerzeile oben (scroll auf schmalen Viewports).
- * — Eine darunter liegende „Sub-Sub“-Ebene (z. B. Rahmen bearbeiten) bleibt bewusst
- *   seitlich / in eigenen Layout-Komponenten (z. B. Trainingseinheit, Framework-Editor).
- * Nutzt .capture-shell* aus app.css.
+ * Sub-Navigation mit Icon-Chips: gleiche Darstellung wie Stammdaten / Vereine (PageSectionNav).
+ * „Sub-Sub“ (z. B. Editor) bleibt in den jeweiligen Feature-Layouts.
 */
 export default function AppSubnavShell({
  ariaLabel,
@ -14,39 +13,16 @@ export default function AppSubnavShell({
  iconSize = 18,
 }) {
  return (
-    <div className="capture-shell app-subnav-shell">
-      <div className="capture-shell__layout">
-        <div className="capture-shell__nav-wrap">
-          <nav className="capture-shell__nav" aria-label={ariaLabel}>
-            {items.map((item) => {
-              const Icon = item.icon
-              const active = value === item.id
-              return (
-                <button
-                  key={item.id}
-                  type="button"
-                  className={
-                    'capture-shell__nav-item' +
-                    (active ? ' capture-shell__nav-item--active' : '')
-                  }
-                  onClick={() => onChange(item.id)}
-                >
-                  {Icon ? (
-                    <Icon
-                      className="capture-shell__nav-icon"
-                      size={iconSize}
-                      strokeWidth={2}
-                      aria-hidden
-                    />
-                  ) : null}
-                  <span className="capture-shell__nav-label">{item.label}</span>
-                </button>
-              )
-            })}
-          </nav>
-        </div>
-        <div className="capture-shell__main">{children}</div>
-      </div>
+    <div className="app-subnav-shell">
+      <PageSectionNav
+        ariaLabel={ariaLabel}
+        value={value}
+        onChange={onChange}
+        items={items}
+        iconSize={iconSize}
+        className="page-section-nav--wrap"
+      />
+      <div className="app-subnav-shell__main">{children}</div>
    </div>
  )
 }
--- a/frontend/src/components/PageSectionNav.jsx
+++ b/frontend/src/components/PageSectionNav.jsx
@ -0,0 +1,50 @@
+/**
+ * Einheitliche Sektions-Navigation: Chip-Zeile wie Admin-Stammdaten (.admin-page-subtabs).
+ * Für „Tabs“ (role=tablist) oder kompakte Umschalter (aria-pressed, role=group).
+ */
+export default function PageSectionNav({
+  ariaLabel,
+  value,
+  onChange,
+  items,
+  className = '',
+  iconSize = 16,
+  semantics = 'tabs',
+}) {
+  const isToggle = semantics === 'toggle'
+  return (
+    <div
+      className={`admin-page-subtabs page-section-nav ${className}`.trim()}
+      role={isToggle ? 'group' : 'tablist'}
+      aria-label={ariaLabel}
+    >
+      {items.map((item) => {
+        const Icon = item.icon
+        const active = value === item.id
+        const disabled = Boolean(item.disabled)
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role={isToggle ? undefined : 'tab'}
+            aria-selected={isToggle ? undefined : active}
+            aria-pressed={isToggle ? active : undefined}
+            disabled={disabled}
+            className={
+              'admin-page-subtabs__btn' +
+              (active ? ' admin-page-subtabs__btn--active' : '')
+            }
+            onClick={() => {
+              if (!disabled) onChange(item.id)
+            }}
+          >
+            {Icon ? (
+              <Icon size={iconSize} strokeWidth={2} className="page-section-nav__icon" aria-hidden />
+            ) : null}
+            <span>{item.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
--- a/frontend/src/pages/AdminCatalogsPage.jsx
+++ b/frontend/src/pages/AdminCatalogsPage.jsx
@ -1,6 +1,19 @@
 import { useState, useEffect } from 'react'
 import { api } from '../utils/api'
 import AdminPageNav from '../components/AdminPageNav'
+import PageSectionNav from '../components/PageSectionNav'
+
+const CATALOG_SUBTABS = [
+  { id: 'focus-areas', label: 'Fokusbereiche' },
+  { id: 'training-styles', label: 'Stilrichtungen' },
+  { id: 'training-types', label: 'Trainingsstil' },
+  { id: 'hierarchy', label: 'Hierarchie' },
+  { id: 'target-groups', label: 'Zielgruppen' },
+  { id: 'target-groups-matrix', label: 'Zuordnungen' },
+  { id: 'training-characters', label: 'Trainingscharakter' },
+  { id: 'skill-categories', label: 'Fähigkeitskategorien' },
+  { id: 'trainer-assignments', label: 'Trainer-Zuordnungen' },
+]

 export default function AdminCatalogsPage() {
  const [activeTab, setActiveTab] = useState('focus-areas')
@ -318,33 +331,12 @@ export default function AdminCatalogsPage() {

      <h1 className="page-title">Stammdaten-Kataloge</h1>

-      <div className="admin-page-subtabs" role="tablist" aria-label="Katalogbereiche">
-        {[
-          { id: 'focus-areas', label: 'Fokusbereiche' },
-          { id: 'training-styles', label: 'Stilrichtungen' },
-          { id: 'training-types', label: 'Trainingsstil' },
-          { id: 'hierarchy', label: 'Hierarchie' },
-          { id: 'target-groups', label: 'Zielgruppen' },
-          { id: 'target-groups-matrix', label: 'Zuordnungen' },
-          { id: 'training-characters', label: 'Trainingscharakter' },
-          { id: 'skill-categories', label: 'Fähigkeitskategorien' },
-          { id: 'trainer-assignments', label: 'Trainer-Zuordnungen' }
-        ].map((tab) => (
-          <button
-            key={tab.id}
-            type="button"
-            role="tab"
-            aria-selected={activeTab === tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={
-              'admin-page-subtabs__btn' +
-              (activeTab === tab.id ? ' admin-page-subtabs__btn--active' : '')
-            }
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
+      <PageSectionNav
+        ariaLabel="Katalogbereiche"
+        value={activeTab}
+        onChange={setActiveTab}
+        items={CATALOG_SUBTABS}
+      />

      {error && <div className="admin-matrix-alert">{error}</div>}

--- a/frontend/src/pages/AdminMaturityModelsPage.jsx
+++ b/frontend/src/pages/AdminMaturityModelsPage.jsx
@ -6,6 +6,14 @@ import SkillsCatalogAdmin from '../components/admin/SkillsCatalogAdmin'
 import MaturityModelsAdminPanel from '../components/admin/MaturityModelsAdminPanel'
 import MaturityModelBindingsAdmin from '../components/admin/MaturityModelBindingsAdmin'
 import MaturityMatrixToolsAdmin from '../components/admin/MaturityMatrixToolsAdmin'
+import PageSectionNav from '../components/PageSectionNav'
+
+const MATURITY_SECTION_TABS = [
+  { id: 'catalog', label: 'Katalog und Hierarchie' },
+  { id: 'models', label: 'Reifegradmodelle' },
+  { id: 'bindings', label: 'Kontext-Zuordnung' },
+  { id: 'matrixviz', label: 'Matrix-Ansicht und Export' },
+]

 export default function AdminMaturityModelsPage() {
  const { user } = useAuth()
@ -27,52 +35,12 @@ export default function AdminMaturityModelsPage() {
        </p>
      </header>

-      <div className="admin-page-subtabs" role="tablist" aria-label="Bereiche Fähigkeiten">
-        <button
-          type="button"
-          role="tab"
-          aria-selected={tab === 'catalog'}
-          className={
-            'admin-page-subtabs__btn' + (tab === 'catalog' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setTab('catalog')}
-        >
-          Katalog und Hierarchie
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={tab === 'models'}
-          className={
-            'admin-page-subtabs__btn' + (tab === 'models' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setTab('models')}
-        >
-          Reifegradmodelle
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={tab === 'bindings'}
-          className={
-            'admin-page-subtabs__btn' + (tab === 'bindings' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setTab('bindings')}
-        >
-          Kontext-Zuordnung
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={tab === 'matrixviz'}
-          className={
-            'admin-page-subtabs__btn' + (tab === 'matrixviz' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setTab('matrixviz')}
-        >
-          Matrix-Ansicht und Export
-        </button>
-      </div>
+      <PageSectionNav
+        ariaLabel="Bereiche Fähigkeiten"
+        value={tab}
+        onChange={setTab}
+        items={MATURITY_SECTION_TABS}
+      />

      <div className="admin-tabs__panel" role="tabpanel">
        {tab === 'catalog' ? (
--- a/frontend/src/pages/ClubsPage.jsx
+++ b/frontend/src/pages/ClubsPage.jsx
@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo } from 'react'
 import api from '../utils/api'
 import { useAuth } from '../context/AuthContext'
+import PageSectionNav from '../components/PageSectionNav'

 const CLUB_ROLE_OPTIONS = [
  { code: 'club_admin', label: 'Vereinsadmin' },
@ -285,6 +286,19 @@ function ClubsPage() {
    setFormData(prev => ({ ...prev, [field]: value }))
  }

+  const clubTabItems = useMemo(() => {
+    const ids = canManageOrgSomewhere
+      ? ['clubs', 'divisions', 'groups', 'members']
+      : ['clubs', 'divisions', 'groups']
+    const labels = {
+      clubs: 'Vereine',
+      divisions: 'Sparten',
+      groups: 'Trainingsgruppen',
+      members: 'Mitglieder',
+    }
+    return ids.map((id) => ({ id, label: labels[id] }))
+  }, [canManageOrgSomewhere])
+
  if (loading) {
    return (
      <div className="skills-page__loading">
@ -294,10 +308,6 @@ function ClubsPage() {
    )
  }

-  const clubTabIds = canManageOrgSomewhere
-    ? ['clubs', 'divisions', 'groups', 'members']
-    : ['clubs', 'divisions', 'groups']
-
  return (
    <div className="app-page clubs-page">
      <h1 className="page-title">Vereinsverwaltung</h1>
@ -306,27 +316,14 @@ function ClubsPage() {
        Sparten sind optional — typische Eckdaten einer Gruppe (Wochentag, Zeit, Ort) kannst du schrittweise eintragen.
      </p>

-      <div className="admin-page-subtabs" role="tablist" aria-label="Vereinsverwaltung">
-        {clubTabIds.map((tab) => (
-          <button
-            key={tab}
-            type="button"
-            role="tab"
-            aria-selected={activeTab === tab}
-            className={
-              'admin-page-subtabs__btn' + (activeTab === tab ? ' admin-page-subtabs__btn--active' : '')
-            }
-            onClick={() => setActiveTab(tab)}
-          >
-            {tab === 'clubs' && 'Vereine'}
-            {tab === 'divisions' && 'Sparten'}
-            {tab === 'groups' && 'Trainingsgruppen'}
-            {tab === 'members' && 'Mitglieder'}
-          </button>
-        ))}
-      </div>
+      <PageSectionNav
+        ariaLabel="Vereinsverwaltung"
+        value={activeTab}
+        onChange={setActiveTab}
+        items={clubTabItems}
+      />

-        {/* Clubs Tab */}
+      {/* Clubs Tab */}
        {activeTab === 'clubs' && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
--- a/frontend/src/pages/ExercisesListPage.jsx
+++ b/frontend/src/pages/ExercisesListPage.jsx
@ -17,10 +17,15 @@ import { useAuth } from '../context/AuthContext'
 import { SKILL_LEVEL_OPTIONS } from '../constants/skillLevels'
 import MultiSelectCombo from '../components/MultiSelectCombo'
 import ExerciseProgressionGraphPanel from '../components/ExerciseProgressionGraphPanel'
+import PageSectionNav from '../components/PageSectionNav'
 import { sanitizeExerciseRichText, coerceApiNameList } from '../utils/sanitizeHtml'

 const PAGE_SIZE = 100
 const BULK_MAX_IDS = 500
+const EXERCISES_PAGE_TABS = [
+  { id: 'list', label: 'Liste' },
+  { id: 'progression', label: 'Progressionsgraphen' },
+]
 const LEVEL_FILTER_OPTS = SKILL_LEVEL_OPTIONS.filter((o) => o.level != null)

 const INITIAL_FILTERS = {
@ -646,31 +651,13 @@ function ExercisesListPage() {
        )}
      </div>

-      <div className="exercises-page-toolbar-tabs admin-page-subtabs" role="tablist" aria-label="Übungen Bereiche">
-        <button
-          type="button"
-          role="tab"
-          aria-selected={pageTab === 'list'}
-          className={
-            'admin-page-subtabs__btn' + (pageTab === 'list' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setPageTab('list')}
-        >
-          Liste
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={pageTab === 'progression'}
-          className={
-            'admin-page-subtabs__btn' +
-            (pageTab === 'progression' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setPageTab('progression')}
-        >
-          Progressionsgraphen
-        </button>
-      </div>
+      <PageSectionNav
+        ariaLabel="Übungen Bereiche"
+        value={pageTab}
+        onChange={setPageTab}
+        items={EXERCISES_PAGE_TABS}
+        className="exercises-page-toolbar-tabs"
+      />

      {pageTab === 'progression' ? (
        <ExerciseProgressionGraphPanel />
--- a/frontend/src/pages/MediaWikiImportPage.jsx
+++ b/frontend/src/pages/MediaWikiImportPage.jsx
@ -1,6 +1,14 @@
 import React, { useState, useEffect } from 'react'
+import { Eye, Play, History } from 'lucide-react'
 import api from '../utils/api'
 import AdminPageNav from '../components/AdminPageNav'
+import PageSectionNav from '../components/PageSectionNav'
+
+const WIKI_IMPORT_TABS = [
+  { id: 'preview', label: 'Vorschau', icon: Eye },
+  { id: 'execute', label: 'Ausführen', icon: Play },
+  { id: 'history', label: 'Historie', icon: History },
+]

 export default function MediaWikiImportPage() {
  const [activeTab, setActiveTab] = useState('preview')
@ -111,32 +119,12 @@ export default function MediaWikiImportPage() {
        Importiere Übungen, Fähigkeiten und Methoden aus karatetrainer.net
      </p>

-      {/* Tabs */}
-      <div style={{ borderBottom: '2px solid var(--border)', marginBottom: '24px' }}>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          {['preview', 'execute', 'history'].map(tab => (
-            <button
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              style={{
-                padding: '12px 24px',
-                background: activeTab === tab ? 'var(--accent)' : 'transparent',
-                color: activeTab === tab ? 'white' : 'var(--text1)',
-                border: 'none',
-                borderBottom: activeTab === tab ? '2px solid var(--accent)' : '2px solid transparent',
-                cursor: 'pointer',
-                fontSize: '16px',
-                fontWeight: activeTab === tab ? 'bold' : 'normal',
-                transition: 'all 0.2s'
-              }}
-            >
-              {tab === 'preview' && '👁️ Vorschau'}
-              {tab === 'execute' && '▶️ Ausführen'}
-              {tab === 'history' && '📜 Historie'}
-            </button>
-          ))}
-        </div>
-      </div>
+      <PageSectionNav
+        ariaLabel="Import-Schritte"
+        value={activeTab}
+        onChange={setActiveTab}
+        items={WIKI_IMPORT_TABS}
+      />

      {/* Error Display */}
      {error && (
--- a/frontend/src/pages/SkillsPage.jsx
+++ b/frontend/src/pages/SkillsPage.jsx
@ -1,6 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import api from '../utils/api'
 import { useAuth } from '../context/AuthContext'
+import PageSectionNav from '../components/PageSectionNav'
+
+const SKILLS_SECTION_TABS = [
+  { id: 'skills', label: 'Fähigkeiten' },
+  { id: 'methods', label: 'Trainingsmethoden' },
+]

 function SkillsPage() {
  const { user } = useAuth()
@ -146,30 +152,13 @@ function SkillsPage() {
    <div className="app-page skills-page">
      <h1 className="page-title">Fähigkeiten & Methoden</h1>

-      <div className="skills-page__tabs-scroll admin-page-subtabs" role="tablist" aria-label="Bereich wählen">
-        <button
-          type="button"
-          role="tab"
-          aria-selected={activeTab === 'skills'}
-          className={
-            'admin-page-subtabs__btn' + (activeTab === 'skills' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setActiveTab('skills')}
-        >
-          Fähigkeiten
-        </button>
-        <button
-          type="button"
-          role="tab"
-          aria-selected={activeTab === 'methods'}
-          className={
-            'admin-page-subtabs__btn' + (activeTab === 'methods' ? ' admin-page-subtabs__btn--active' : '')
-          }
-          onClick={() => setActiveTab('methods')}
-        >
-          Trainingsmethoden
-        </button>
-      </div>
+      <PageSectionNav
+        ariaLabel="Bereich wählen"
+        value={activeTab}
+        onChange={setActiveTab}
+        items={SKILLS_SECTION_TABS}
+        className="skills-page__tabs-scroll"
+      />

        {/* Skills Tab */}
        {activeTab === 'skills' && (
--- a/frontend/src/pages/TrainingFrameworkProgramEditPage.jsx
+++ b/frontend/src/pages/TrainingFrameworkProgramEditPage.jsx
@ -4,6 +4,7 @@ import api from '../utils/api'
 import ExercisePickerModal from '../components/ExercisePickerModal'
 import ExercisePeekModal from '../components/ExercisePeekModal'
 import TrainingUnitSectionsEditor from '../components/TrainingUnitSectionsEditor'
+import PageSectionNav from '../components/PageSectionNav'
 import {
  defaultSection,
  normalizeUnitToForm,
@ -675,27 +676,17 @@ export default function TrainingFrameworkProgramEditPage() {
          </div>
        </details>

-        <div className="framework-edit__tabbar" role="tablist" aria-label="Bereiche">
-          <div className="planning-segment-group planning-segment-group--equal">
-            {[
+        <div className="framework-edit__tabbar">
+          <PageSectionNav
+            ariaLabel="Bereiche"
+            value={frameworkTab}
+            onChange={setFrameworkTab}
+            items={[
              { id: 'meta', label: 'Stammdaten' },
              { id: 'plan', label: 'Plan (Ziele & Sessions)' },
-            ].map((t) => (
-              <button
-                key={t.id}
-                type="button"
-                role="tab"
-                aria-selected={frameworkTab === t.id}
-                className={
-                  'planning-segment-group__btn' +
-                  (frameworkTab === t.id ? ' planning-segment-group__btn--active' : '')
-                }
-                onClick={() => setFrameworkTab(t.id)}
-              >
-                {t.label}
-              </button>
-            ))}
-          </div>
+            ]}
+            className="page-section-nav--embedded framework-edit__section-nav"
+          />
        </div>

        <div
--- a/frontend/src/pages/TrainingPlanningPage.jsx
+++ b/frontend/src/pages/TrainingPlanningPage.jsx
@ -5,6 +5,7 @@ import { useAuth } from '../context/AuthContext'
 import ExercisePickerModal from '../components/ExercisePickerModal'
 import ExercisePeekModal from '../components/ExercisePeekModal'
 import TrainingUnitSectionsEditor from '../components/TrainingUnitSectionsEditor'
+import PageSectionNav from '../components/PageSectionNav'
 import {
  defaultSection,
  normalizeUnitToForm,
@ -864,41 +865,28 @@ function TrainingPlanningPage() {
          >
            Ansicht
          </span>
-          <div
-            className="planning-segment-group planning-segment-group--comfort"
-            role="group"
-            aria-label="Darstellung Liste oder Kalender"
-          >
-            <button
-              type="button"
-              aria-pressed={planView === 'list'}
-              onClick={() => setPlanView('list')}
-              className={
-                'planning-segment-group__btn' +
-                (planView === 'list' ? ' planning-segment-group__btn--active' : '')
-              }
-            >
-              Liste
-            </button>
-            <button
-              type="button"
-              aria-pressed={planView === 'calendar'}
-              onClick={() => {
+          <PageSectionNav
+            semantics="toggle"
+            ariaLabel="Darstellung Liste oder Kalender"
+            value={planView}
+            onChange={(id) => {
+              if (id === 'calendar') {
                setPlanView('calendar')
                setCalendarMonthStr((prev) => {
                  const fromList = (startDate || '').slice(0, 7)
                  if (/^\d{4}-\d{2}$/.test(fromList)) return fromList
                  return prev || new Date().toISOString().slice(0, 7)
                })
-              }}
-              className={
-                'planning-segment-group__btn' +
-                (planView === 'calendar' ? ' planning-segment-group__btn--active' : '')
+              } else {
+                setPlanView('list')
              }
-            >
-              Kalender
-            </button>
-          </div>
+            }}
+            items={[
+              { id: 'list', label: 'Liste' },
+              { id: 'calendar', label: 'Kalender' },
+            ]}
+            className="page-section-nav--inline planning-ansicht-nav"
+          />
          <span style={{ fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.35, maxWidth: '22rem' }}>
            {planView === 'list'
              ? 'Zeitraum unten mit Von/Bis filtern.'
@ -1047,32 +1035,17 @@ function TrainingPlanningPage() {
              <span className="form-label" style={{ marginBottom: 0, alignSelf: 'center' }}>
                Einblenden
              </span>
-              <div className="planning-segment-group" role="group" aria-label="Gruppe oder ganzer Verein">
-                <button
-                  type="button"
-                  className={
-                    'planning-segment-group__btn' +
-                    (planScope === 'group' ? ' planning-segment-group__btn--active' : '')
-                  }
-                  aria-pressed={planScope === 'group'}
-                  disabled={!selectedGroupId}
-                  onClick={() => setPlanScope('group')}
-                >
-                  Nur diese Gruppe
-                </button>
-                <button
-                  type="button"
-                  className={
-                    'planning-segment-group__btn' +
-                    (planScope === 'club' ? ' planning-segment-group__btn--active' : '')
-                  }
-                  aria-pressed={planScope === 'club'}
-                  disabled={!selectedGroupId}
-                  onClick={() => setPlanScope('club')}
-                >
-                  Ganzer Verein
-                </button>
-              </div>
+              <PageSectionNav
+                semantics="toggle"
+                ariaLabel="Gruppe oder ganzer Verein"
+                value={planScope}
+                onChange={setPlanScope}
+                items={[
+                  { id: 'group', label: 'Nur diese Gruppe', disabled: !selectedGroupId },
+                  { id: 'club', label: 'Ganzer Verein', disabled: !selectedGroupId },
+                ]}
+                className="page-section-nav--inline"
+              />
              <label
                style={{
                  display: 'inline-flex',