/* Smartphone-Darstellung fuer Reseller-, Distributor-, Global-Admin- und Developer-Portal.
   Nur unterhalb 768 px wirksam – Desktop unveraendert. */
.mobile-account, .mobile-nav-backdrop, .mobile-only-toggle { display: none; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  img, svg, canvas, video, iframe { max-width: 100%; }

  /* Kopfzeile */
  .app-topbar { padding: 0 8px !important; gap: 6px; }
  .app-topbar-center, .app-brand-sub, #status { display: none !important; }
  .app-brand-title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; display: block; }
  .mobile-only-toggle { display: inline-flex; }
  .app-topbar-right { gap: 6px; }

  /* Seitenmenue als Schublade */
  .app-shell { display: block !important; }
  .app-sidebar {
    position: fixed !important; top: var(--topbar-h, 56px) !important; left: 0; bottom: 0;
    width: min(86vw, 320px) !important; max-height: none !important; height: calc(100vh - var(--topbar-h, 56px));
    z-index: 1200; overflow-y: auto; transform: translateX(-105%); transition: transform .2s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding-left: 0 !important; padding-right: 0 !important;
  }
  body.mobile-nav-open .app-sidebar { transform: none; }
  .mobile-nav-backdrop {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--topbar-h, 56px);
    background: rgba(0, 0, 0, .4); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.mobile-nav-open { overflow: hidden; }
  .mobile-account {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; margin: 0 0 10px;
    border-bottom: 1px solid var(--line, #e5e7eb);
  }
  .mobile-account .dev-modebar { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; max-width: none; }
  .mobile-account .lang-wrap, .mobile-account .lang-links { display: flex !important; flex-wrap: wrap; gap: 4px; }
  .mobile-account .demo-toggle, .mobile-account #logoutBtn { width: 100%; justify-content: center; margin: 0; }
  .mobile-account .dev-user { font-size: 13px; overflow-wrap: anywhere; }

  /* Inhalt */
  .app-main { width: 100% !important; min-width: 0; }
  .main-content { padding: 0 10px 24px !important; max-width: 100% !important; }
  h1 { font-size: 1.2rem; }
  section.search, .card, .register-section, .dp-panel, .ga-card { padding: 12px !important; }
  .page-head { flex-direction: column; align-items: stretch !important; }
  .page-head .page-actions, .form-actions { flex-wrap: wrap; }
  #searchForm { flex-direction: column; align-items: stretch !important; }
  label { margin-right: 0 !important; }
  #searchForm label, .register-grid label, .modal-body label { width: 100%; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
    min-width: 0 !important; max-width: 100%; font-size: 16px !important;
  }
  #searchForm input, #searchForm select, .register-grid input, .register-grid select, .modal-body input, .modal-body select { width: 100%; }
  .register-grid, .modal-form-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .table-wrap, .card, .layout, .dp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 13px; }
  th { white-space: nowrap; }
  .card table { min-width: 560px; }
  #columnPanel { width: calc(100vw - 32px) !important; }
  .source-filter-chips, .seg-group { flex-wrap: wrap; }

  /* Dialoge */
  .modal-panel, .modal-root .modal-panel, .dp-modal, dialog { width: calc(100vw - 16px) !important; max-width: none !important; max-height: 92vh; }
  .modal-footer button { flex: 1 1 auto; }

  /* Anmeldung */
  .login-box, .ga-auth-wrap { min-width: 0 !important; width: calc(100vw - 24px) !important; max-width: 480px; padding: 18px !important; box-sizing: border-box; }
  .login-lang, .ga-auth-lang, .auth-lang { flex-wrap: wrap; }
  .auth-brand-badge, .ga-auth-brand-badge { white-space: normal; line-height: 1.25; }
  .login-head, .auth-head, .ga-auth-head { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .auth-wrap, .ga-auth-wrap { max-width: calc(100vw - 24px); box-sizing: border-box; }
  .mobile-account #whoami { font-size: 13px; overflow-wrap: anywhere; }
}