/* ════════════════════════════════════════════════════════════════ PROVA GLOBAL RESPONSIVE CSS Funktioniert automatisch auf jedem Gerät: - iPhone 17, Samsung Galaxy → max-width: 430px - iPad, Tablet → max-width: 1024px - Desktop → alles darüber ════════════════════════════════════════════════════════════════ */ /* ─── VIEWPORT META (muss im jeder Seite stehen) ─── */ /* */ /* ─── TOUCH-OPTIMIERUNG: größere Tap-Flächen auf Mobile ─── */ @media (max-width: 768px) { /* Sidebar: auf Mobile als Bottom-Sheet */ .sidebar, .sb-wrap { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; height: auto !important; max-height: 70vh !important; border-radius: 16px 16px 0 0 !important; z-index: 9000 !important; overflow-y: auto !important; transform: translateY(100%) !important; transition: transform 0.3s cubic-bezier(.32,.72,0,1) !important; box-shadow: 0 -4px 32px rgba(0,0,0,.5) !important; } .sidebar.mobile-open, .sb-wrap.mobile-open { transform: translateY(0) !important; } /* Hauptcontent: volle Breite ohne Sidebar-Offset */ .main-content, .page-content, .main { margin-left: 0 !important; padding: 12px !important; padding-bottom: 80px !important; /* Platz für Bottom-Nav */ } /* Mobile Top-Bar */ .topbar { padding: 0 12px !important; height: 52px !important; } .topbar .topbar-title { font-size: 15px !important; } /* Karten: volle Breite */ .card { border-radius: 10px !important; } /* Buttons: Touch-optimiert (min 44px Höhe nach Apple HIG) */ button, .btn, .btn-primary, .btn-secondary, a.btn { min-height: 44px !important; font-size: 15px !important; } /* Sidebar Items — Apple HIG 44px für Touch */ .sb-item, a.sb-item { min-height: 44px !important; padding: 0 12px !important; } #sb-collapse-btn, #sb-search-btn, .sb-action-btn { min-width: 44px !important; min-height: 44px !important; } .sb-section-label { padding: 10px 12px 4px !important; } /* Form-Inputs: keine Zoom-Vergrößerung auf iOS */ input, select, textarea { font-size: 16px !important; /* < 16px triggert iOS Zoom */ } /* Grids: 1 Spalte auf Mobile */ .grid-two, .grid-three { grid-template-columns: 1fr !important; } .kpi-row, #kpi-row { grid-template-columns: 1fr 1fr !important; } /* Modals: volle Breite */ .modal-box, .modal-inner { width: 96vw !important; max-width: none !important; margin: 8px !important; max-height: 88vh !important; overflow-y: auto !important; } /* Tabellen: horizontal scrollbar */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Dash-Grid: 1 Spalte */ #dash-grid { grid-template-columns: 1fr !important; } /* Kanban: horizontales Scroll */ .kanban-board { display: flex !important; flex-direction: row !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding-bottom: 16px !important; } .kanban-col { min-width: 260px !important; flex-shrink: 0 !important; } /* Hide decorative elements on mobile */ .sb-kbd-hint { display: none !important; } } /* ─── TABLET (768px - 1024px) ─── */ /* P5b.X2-Hotfix (Sprint 04b): Sidebar-Width-Override ENTFERNT aus dieser Range. Vorher: `.sidebar, .sb-wrap { width: 220px !important; }` zwang die Sidebar bei halbiertem Desktop-Fenster (~960px) auf 220px statt 228px — wirkte wie eine teilweise Kollabierung mit Label-Cutoffs. Marcel-Spec: Bei 768-1024px IMMER voll sichtbar (228px). Unter 768px greift der Mobile-Mode in nav.js per @media (max-width:768px) mit translateX(-100%) — die Sidebar wird dort sowieso komplett aus dem Viewport geschoben. */ @media (min-width: 768px) and (max-width: 1024px) { .main-content, .page-content, .main { padding: 16px !important; } .grid-three { grid-template-columns: 1fr 1fr !important; } #dash-grid { grid-template-columns: 1fr !important; } } /* ─── MOBILE BOTTOM-NAV ─── */ .prova-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--bg2, #111827); border-top: 1px solid var(--border, rgba(255,255,255,.08)); z-index: 8000; padding: 0 4px; padding-bottom: env(safe-area-inset-bottom, 0); /* iPhone notch */ } .prova-bottom-nav-items { display: flex; align-items: center; justify-content: space-around; height: 60px; } .prova-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 10px; cursor: pointer; text-decoration: none; min-width: 48px; min-height: 44px; justify-content: center; transition: background .15s; color: var(--text3, rgba(255,255,255,.5)); border: none; background: none; font-family: inherit; } .prova-bottom-nav-item.active { color: var(--accent, #4f8ef7); } .prova-bottom-nav-item span:first-child { font-size: 20px; } .prova-bottom-nav-item span:last-child { font-size: 9px; font-weight: 600; letter-spacing: .02em; } .prova-bottom-nav-item:active { background: rgba(255,255,255,.06); } @media (max-width: 768px) { .prova-bottom-nav { display: block; } } /* S-SICHER UI-FIX1.3 (24.04.2026): .mobile-sidebar-overlay entfernt — war Duplikat zu .sb-overlay (nav.js:346-351). Beide Mechaniken wurden vorher parallel ausgelöst, Z-Index-Stapel auf Mobile. nav.js:toggleMobileSidebar nutzt jetzt window.openMobileSidebar / window.closeMobileSidebar (mit .sb-overlay). */ /* ─── TOUCH SCROLL IMPROVEMENTS ─── */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } /* ════════════════════════════════════════════════════════════════ PROVA SEITEN-SPEZIFISCHE MOBILE FIXES ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Dashboard */ .page-header { flex-direction: column !important; gap: 10px !important; } .page-header button { width: 100% !important; justify-content: center !important; } /* Archiv / Kanban */ .toolbar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; } .toolbar-left { flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; } .search-input { width: 100% !important; min-width: 0 !important; } .filter-select { flex: 1 !important; min-width: 100px !important; } .kanban-board { display: flex !important; flex-direction: row !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 10px !important; padding-bottom: 16px !important; scroll-snap-type: x mandatory; } .kanban-col { min-width: 260px !important; flex-shrink: 0 !important; scroll-snap-align: start; } #bulk-bar { flex-wrap: wrap !important; } #bulk-bar button { flex: 1 !important; min-width: 100px !important; } /* Akte */ .cockpit-cta { font-size: 14px !important; width: 100% !important; padding: 12px !important; } .cockpit-sec-btn { font-size: 12px !important; flex: 1 !important; } .section-header, .section-body { padding: 12px !important; } /* Stellungnahme */ .sv-textarea { font-size: 16px !important; min-height: 200px !important; } #freigabe-cta button { font-size: 14px !important; padding: 13px !important; } /* Formulare */ .form-row, .btn-row { flex-direction: column !important; gap: 8px !important; } .btn-row button, .btn-row a { width: 100% !important; justify-content: center !important; } /* Normen */ .normen-grid, #normenGrid { grid-template-columns: 1fr !important; } .norm-actions { flex-direction: column !important; gap: 6px !important; } .norm-actions button { width: 100% !important; } /* Positionen */ .pos-row { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; } .pos-actions { width: 100% !important; display: flex !important; gap: 6px !important; } .pos-actions button { flex: 1 !important; } /* Rechnungen */ .re-actions button { flex: 1 !important; font-size: 12px !important; } /* Modals → Bottom-Sheet */ .modal-overlay { align-items: flex-end !important; padding: 0 !important; } .modal-box, .modal-inner { width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; margin: 0 !important; max-height: 90vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* JVEG */ .grid-two { grid-template-columns: 1fr !important; } /* Dash-Grid */ #dash-grid { grid-template-columns: 1fr !important; } /* Topbar Hamburger sichtbar */ #mobile-menu-btn { display: flex !important; } } /* iOS Safe Area */ @supports (padding: max(0px)) { .prova-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; height: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } @media (max-width: 768px) { .main-content, .page-content, .main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } } } /* Android vh Fix */ @media (max-width: 768px) { .full-height { height: calc(var(--vh, 1vh) * 100) !important; } } /* ═══════════════════════════════════════════════════════════════ TOUCH-TARGETS — finale Feinjustierung (Session 10 Runde 3) ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .sb-footer a, .sb-footer .sb-item, .sb-footer button { min-height: 44px !important; padding: 10px 12px !important; } #mobile-menu-btn, .mobile-menu-btn { min-width: 44px !important; min-height: 44px !important; padding: 10px !important; } .topbar-icon, .notification-icon, .notif-icon, .settings-icon, .topbar button, .topbar .icon-btn { min-width: 44px !important; min-height: 44px !important; padding: 6px !important; } .kpi-link, .section-link, a.more-link, .link-all, .card-header a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding: 0 12px !important; } .quick-action, .qa-card, .dashboard-link-card, a.kpi-card { min-height: 44px !important; } }