/** * mobile.css – Overrides für alle Seiten wenn * Wird zusätzlich zu main.css geladen. Klasse wird via PHP gesetzt (includes/mobile.php). * Gilt für alle Seiten, die mobile.php einbinden. */ /* ============================================================ BASIS – Grundlegende Touch-Anpassungen ============================================================ */ body.is-mobile { font-size: 15px; -webkit-text-size-adjust: 100%; } /* Mindest-Touch-Target 48px (Google-Empfehlung) */ body.is-mobile a, body.is-mobile button, body.is-mobile input[type="submit"], body.is-mobile input[type="button"], body.is-mobile .button, body.is-mobile .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Inputs: größer, touch-freundlich */ body.is-mobile input[type="text"], body.is-mobile input[type="password"], body.is-mobile input[type="email"], body.is-mobile input[type="number"], body.is-mobile select, body.is-mobile textarea { font-size: 16px; /* verhindert iOS-Zoom beim Fokus */ padding: 12px 10px; min-height: 44px; box-sizing: border-box; width: 100%; max-width: 100%; } /* ============================================================ LAYOUT – Boxen und Wrapper ============================================================ */ body.is-mobile .box { padding: 24px 16px 20px; margin: 0; max-width: 100%; box-shadow: none; border-radius: 0; } body.is-mobile .centerwrap { justify-content: flex-start; padding-top: 16px; } /* ============================================================ NAVIGATION / TOPBAR ============================================================ */ body.is-mobile .admin-header, body.is-mobile .topbar { padding: 12px 14px; flex-wrap: wrap; gap: 8px; } body.is-mobile .admin-header h1, body.is-mobile .topbar h2 { font-size: 1.05em; flex-basis: 100%; } body.is-mobile .admin-header .user-info { font-size: 0.82em; flex-basis: 100%; } body.is-mobile .admin-header a.logout, body.is-mobile .topbar a { padding: 8px 14px; font-size: 0.88em; } /* ============================================================ KACHELN / TILE-GRID (admin/index.php) ============================================================ */ body.is-mobile .tile-grid { grid-template-columns: 1fr; gap: 12px; } body.is-mobile .tile { padding: 18px 16px; } body.is-mobile .tile .tile-icon { font-size: 1.8em; } body.is-mobile .admin-grid { grid-template-columns: 1fr 1fr; gap: 10px; } body.is-mobile .admin-card { padding: 14px 12px; } body.is-mobile .admin-card .ac-icon { font-size: 1.3em; } /* ============================================================ TABELLEN – scrollbar statt abgeschnitten ============================================================ */ body.is-mobile table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 0.84em; } body.is-mobile table th, body.is-mobile table td { padding: 7px 6px; } /* ============================================================ FORMULARE (Benutzer, Mandanten etc.) ============================================================ */ body.is-mobile .form-row { flex-direction: column; gap: 8px; } body.is-mobile .form-row label { width: 100%; } body.is-mobile .form-row input, body.is-mobile .form-row select { width: 100%; min-width: unset; } body.is-mobile .btn-primary, body.is-mobile .btn-secondary { width: 100%; padding: 12px; font-size: 1em; } /* ============================================================ FILTER-LEISTE ============================================================ */ body.is-mobile .filter-bar { flex-direction: column; gap: 8px; } body.is-mobile .filter-bar input, body.is-mobile .filter-bar select, body.is-mobile .filter-bar button { width: 100%; } /* ============================================================ BUTTONS / ACTIONS ============================================================ */ body.is-mobile .button { display: block; width: 100%; padding: 14px; font-size: 1em; box-sizing: border-box; text-align: center; } body.is-mobile .actions { flex-direction: column; gap: 10px; align-items: stretch; } body.is-mobile .abteilungs-actions { flex-direction: column; } body.is-mobile .button-block { max-width: 100%; min-width: unset; width: 100%; } /* ============================================================ DB-KARTEN (admin/datenbank.php) ============================================================ */ body.is-mobile .db-grid { grid-template-columns: 1fr; } /* ============================================================ MONTAGESERVICE PLATZHALTER ============================================================ */ body.is-mobile .wip-card { padding: 32px 20px 28px; margin: 20px 12px; max-width: 100%; } /* ============================================================ ANSICHT UMSCHALTEN – fixer Button unten rechts (nur auf Mobilgeräten sichtbar) ============================================================ */ .view-toggle { position: fixed; bottom: 16px; right: 16px; background: #1a3a5c; color: #fff; border: none; padding: 10px 16px; font-size: 0.82em; cursor: pointer; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,0.2); text-decoration: none; display: inline-block; } .view-toggle:hover { background: #1976d2; color: #fff; }