feat: enhance mobile responsiveness and UI components in app.css

- Added new CSS styles for mobile layout adjustments, improving spacing and readability for various UI elements.
- Implemented horizontal scrollable navigation for main and admin top navigation, enhancing usability on smaller screens.
- Updated button and card styles for better visual consistency and compactness in mobile view.
- Enhanced tab and segment button styles to improve user interaction and accessibility.

frontend/src/app.css

@@ -1181,6 +1181,238 @@ button.capture-shell__nav-item {
   background: transparent;
 }
 
+/*
+ * Mobile (≤1023px): geringerer Platzbedarf bei Schaltern und Menüs.
+ * Haupt- + Sub-Navigation: horizontale, scrollbare Chip-Leisten (kein Umbruch).
+ */
+@media (max-width: 1023px) {
+  .app-main {
+    padding-top: 12px;
+    padding-left: max(12px, env(safe-area-inset-left, 0px));
+    padding-right: max(12px, env(safe-area-inset-right, 0px));
+  }
+
+  .page-title {
+    font-size: 1.125rem;
+    margin-bottom: 10px;
+    letter-spacing: -0.02em;
+  }
+
+  .btn {
+    padding: 8px 14px;
+    font-size: 13px;
+    border-radius: 9px;
+  }
+
+  .card {
+    padding: 12px 14px;
+  }
+
+  .card + .card {
+    margin-top: 10px;
+  }
+
+  /* globale Tab-Zeile: bei Bedarf horizontal scrollbar */
+  .tabs {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    gap: 2px;
+    padding: 2px;
+    margin-bottom: 12px;
+    border-radius: 8px;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab {
+    flex: 0 0 auto;
+    min-height: 38px;
+    padding: 6px 12px;
+    font-size: 12px;
+    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;
+    overflow-y: hidden;
+    gap: 6px;
+    border-bottom: none;
+    margin-bottom: 14px;
+    padding-bottom: 4px;
+    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));
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    scroll-snap-type: x proximity;
+  }
+
+  .admin-top-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .admin-top-nav__link {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+    min-height: 36px;
+    padding: 6px 11px;
+    font-size: 12px;
+    font-weight: 600;
+    border-bottom: none;
+    margin-bottom: 0;
+    border-radius: 999px;
+    background: var(--surface2);
+    border: 1px solid var(--border2);
+    gap: 5px;
+    box-sizing: border-box;
+    align-items: center;
+  }
+
+  .admin-top-nav__link svg {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+  }
+
+  .admin-top-nav__link--active {
+    background: var(--accent);
+    color: #fff !important;
+    border-color: var(--accent);
+  }
+
+  .admin-top-nav__link:hover {
+    background: var(--surface);
+    color: var(--text1);
+  }
+
+  .admin-top-nav__link--active:hover {
+    color: #fff !important;
+    background: color-mix(in srgb, var(--accent) 90%, #000);
+  }
+
+  /* Segment-Schalter (Liste/Kalender, Gruppe/Verein, Rahmen-Tabs) */
+  .planning-segment-group {
+    border-radius: 8px;
+  }
+
+  .planning-segment-group__btn {
+    padding: 6px 10px;
+    font-size: 0.78rem;
+    min-height: 34px;
+    box-sizing: border-box;
+  }
+
+  .planning-segment-group--comfort .planning-segment-group__btn {
+    padding: 7px 11px;
+    font-size: 0.8125rem;
+    min-height: 36px;
+  }
+
+  .planning-segment-group--equal .planning-segment-group__btn {
+    min-width: 0;
+    flex: 1 1 0;
+  }
+
+  .framework-edit__tabbar {
+    padding: 4px 0 8px;
+    margin-bottom: 10px;
+    gap: 6px;
+  }
+
+  .framework-edit__tabbar .planning-segment-group__btn {
+    padding: 6px 8px;
+    font-size: 11px;
+    line-height: 1.25;
+    min-height: 34px;
+  }
+
+  .training-planning-create__cta,
+  .training-planning-create__secondary {
+    min-height: 42px;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .admin-assignments-wrap {
+    padding: 14px;
+  }
+
+  .admin-assignments-wrap__title {
+    font-size: 1.05rem;
+  }
+
+  /* Framework-Slot-Chips (falls sehr breit): leicht kompakter */
+  .framework-slot-chip {
+    padding: 7px 12px;
+    font-size: 0.8rem;
+  }
+
+  /* Untere Hauptnavigation: etwas kompakter */
+  .bottom-nav {
+    gap: 0;
+    padding-top: 5px;
+  }
+
+  .nav-item {
+    min-width: 52px;
+    max-width: 90px;
+    padding: 1px 2px 3px;
+    gap: 2px;
+  }
+
+  .nav-item span {
+    font-size: 9.5px;
+  }
+}
+
 /* Trainingsplanung: kompakte Segmente (Gruppe / Verein) */
 .planning-segment-group {
   display: inline-flex;