/*
 * Business Builder AI – Mobile Responsive V5
 * Stand: 2026-06-22
 * Alle Regeln liegen ausschließlich in Mobile-/Tablet-Media-Queries.
 * Desktop ab 1025px bleibt unverändert.
 */

@media (max-width: 1024px) {
  :root {
    --bbai-mobile-topbar: 55px;
    --bbai-mobile-x: max(16px, env(safe-area-inset-left));
    --bbai-mobile-x-right: max(16px, env(safe-area-inset-right));
    --bbai-mobile-bottom: max(28px, env(safe-area-inset-bottom));
    --bbai-mobile-gap: 14px;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 70px;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  *, *::before, *::after { box-sizing: border-box; }

  img, video, iframe, canvas, svg {
    max-width: 100%;
  }

  img, video, iframe { height: auto; }

  form, fieldset, main, section, article, aside, nav, header, footer, div {
    min-width: 0;
  }

  /* iPhone zoomt Formularfelder unter 16 px beim Fokus automatisch. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  select,
  textarea {
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.35;
  }

  textarea { resize: vertical; }

  input, select, textarea, button, a, [role="button"] {
    touch-action: manipulation;
  }

  /* Häufig verwendete Formularklassen. Keine pauschale Breite für Switches/Icons. */
  .inp,
  .input,
  .select,
  .textarea,
  .textarea-plain,
  .form-input,
  .form-select,
  .form-control,
  .ov-input,
  .kv-input,
  .kv-select,
  .kv-textarea,
  .em-input,
  .em-select,
  .em-textarea,
  .vc21-chat-input,
  .aib-project-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .field,
  .form-group,
  .form-row,
  .input_row,
  .input-wrap,
  .row-inputwrap,
  .em-field,
  .kv-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  label, .label, .form-label, .em-label, .kv-field label,
  .helper, .help, .hint, .muted, .sub, .subtitle, small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Zentrale Topbar und Off-Canvas-Menü. */
  #top_menu,
  .top_menu,
  .menu_top {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--bbai-mobile-x) !important;
    padding-right: var(--bbai-mobile-x-right) !important;
  }

  #side_menu,
  .side_menu,
  .menu_left {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    height: 100dvh !important;
    margin: 0 !important;
    transform: translate3d(-105%, 0, 0);
    visibility: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: transform .24s ease, visibility .24s ease !important;
    z-index: 2147482001 !important;
    box-shadow: 20px 0 55px rgba(15, 23, 42, .20);
  }

  body.bbai-mobile-menu-open #side_menu,
  body.bbai-mobile-menu-open .side_menu,
  body.bbai-mobile-menu-open .menu_left {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  body.bbai-mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .bbai-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 2147482000;
  }

  body.bbai-mobile-menu-open .bbai-mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .bbai-mobile-menu-trigger {
    position: fixed;
    top: calc(9px + env(safe-area-inset-top));
    left: var(--bbai-mobile-x);
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2147481999;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .08);
  }

  .bbai-mobile-menu-trigger::before,
  .bbai-mobile-menu-trigger::after,
  .bbai-mobile-menu-trigger span {
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
  }
  .bbai-mobile-menu-trigger::before { transform: translateY(-6px); }
  .bbai-mobile-menu-trigger::after { transform: translateY(6px); }

  /* Top-Level-Seitenbereiche: Desktop-Sidebar-Abstand entfernen. */
  body > .content,
  body > main,
  body > .page,
  body > .pg,
  body > .bb_main,
  body > .devodix_section_content,
  body > .main-content,
  body > .page-content,
  body > .app-content,
  body > .dashboard-content,
  body > .content-wrapper,
  body > .kv-main,
  body > .lp-content,
  body > .wrap {
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body > .content,
  body > .page,
  body > .pg,
  body > .bb_main,
  body > .devodix_section_content,
  body > .main-content,
  body > .page-content,
  body > .app-content,
  body > .dashboard-content,
  body > .content-wrapper,
  body > .kv-main,
  body > .lp-content {
    padding-left: var(--bbai-mobile-x) !important;
    padding-right: var(--bbai-mobile-x-right) !important;
    padding-bottom: var(--bbai-mobile-bottom) !important;
  }

  .content, .page, .pg, .bb_main, .devodix_section_content,
  .main-content, .page-content, .app-content, .dashboard-content,
  .content-wrapper, .kv-main, .lp-content, .wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Kopf-, Filter- und Aktionsbereiche. */
  .page-head,
  .page-header,
  .head,
  .toolbar,
  .filters,
  .filter-row,
  .actions,
  .actions-inline,
  .header-actions,
  .page-actions,
  .card-actions,
  .form-actions,
  .btn-row,
  .em-actions,
  .em-row,
  .kv-head-actions,
  .kv-foot-actions {
    min-width: 0 !important;
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  h1, h2, h3, h4, .page-title, .title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Strukturelle Grids. Kleine Icon-/Mediengrids bleiben bewusst unberührt. */
  .form-grid,
  .formgrid,
  .rule-grid,
  .settings-grid,
  .dashboard-grid,
  .course-grid,
  .editor-grid,
  .stats-grid,
  .stat-grid,
  .kpi-grid,
  .cards-grid,
  .card-grid,
  .profil-grid,
  .social-grid,
  .network-grid,
  .layout-pick-grid,
  .choice-grid-2,
  .choice-grid-3,
  .voice-grid,
  .row-2,
  .row2,
  .kv-form-grid,
  .kv-status-grid,
  .em-grid,
  .em-summary-grid,
  .em-option-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .col-2, .col-3, .col-4, .col-6, .col-8, .col-9, .col-12,
  .kv-col-3, .kv-col-4, .kv-col-6, .kv-col-8, .kv-col-12,
  .em-col-3, .em-col-4, .em-col-6, .em-col-8, .em-col-12 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tabellen: Wrapper scrollbar, Tabelle selbst bleibt eine echte Tabelle. */
  .table-wrap,
  .table-responsive,
  .responsive-table,
  .data-table-wrap,
  .kv-table-wrap,
  .em-table-wrap,
  .bbai-mobile-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .table-wrap table,
  .table-responsive table,
  .responsive-table table,
  .data-table-wrap table,
  .kv-table-wrap table,
  .em-table-wrap table,
  .bbai-mobile-table-scroll table {
    max-width: none;
  }

  /* Modals: Außenfläche und Karte werden getrennt behandelt. */
  .overlay,
  .backdrop,
  .modal-backdrop,
  .modal-bd,
  .em-modal-backdrop,
  .sfu-modal-backdrop,
  .sfu-loading-overlay,
  .kv-modal,
  .vc21-confirm-backdrop {
    max-width: none !important;
  }

  .modal,
  .modal-card,
  .modal-content,
  .ov-card,
  .overlay-card,
  .em-modal,
  .em-modal-box,
  .sfu-modal,
  .sfu-loading-card,
  .kv-modal-card,
  .vc21-confirm-card {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden;
  }

  .modal-body,
  .em-modal-b,
  .em-modal-body,
  .sfu-modal-body,
  .kv-modal-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* TinyMCE und andere Editoren. */
  .tox,
  .tox-tinymce,
  .mce-tinymce,
  .CodeMirror,
  .ace_editor,
  .note-editor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tox-tinymce { min-height: 260px !important; }

  .tox .tox-editor-header,
  .tox .tox-toolbar-overlord,
  .tox .tox-toolbar__primary {
    max-width: 100% !important;
  }

  .tox .tox-toolbar__primary {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tox .tox-toolbar__group { flex-shrink: 0; }

  /* Authentifizierung. */
  .auth { min-height: 100dvh !important; }
  .auth-right {
    min-height: 100dvh !important;
    padding: max(24px, env(safe-area-inset-top)) var(--bbai-mobile-x-right) max(24px, env(safe-area-inset-bottom)) var(--bbai-mobile-x) !important;
  }
  .auth-inner { max-width: 480px !important; }
}

@media (max-width: 640px) {
  :root {
    --bbai-mobile-x: max(18px, env(safe-area-inset-left));
    --bbai-mobile-x-right: max(18px, env(safe-area-inset-right));
    --bbai-mobile-gap: 12px;
  }

  body > .content,
  body > .page,
  body > .pg,
  body > .bb_main,
  body > .devodix_section_content,
  body > .main-content,
  body > .page-content,
  body > .app-content,
  body > .dashboard-content,
  body > .content-wrapper,
  body > .kv-main,
  body > .lp-content {
    padding-top: 18px !important;
    padding-left: var(--bbai-mobile-x) !important;
    padding-right: var(--bbai-mobile-x-right) !important;
    padding-bottom: var(--bbai-mobile-bottom) !important;
  }

  .page-head,
  .page-header,
  .head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-title,
  .page-head h1,
  .page-header h1 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .crumb, .breadcrumb, .breadcrumbs {
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .toolbar,
  .toolbar .left,
  .toolbar .right,
  .filters,
  .filter-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .toolbar > *, .toolbar .left > *, .toolbar .right > *,
  .filters > *, .filter-row > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .toolbar label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .toolbar label > select { width: 100% !important; }

  .dv-card,
  .card,
  .panel,
  .section,
  .box,
  .sec-card,
  .em-card,
  .kv-panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .modal,
  .modal-card,
  .modal-content,
  .ov-card,
  .overlay-card,
  .em-modal,
  .em-modal-box,
  .sfu-modal,
  .sfu-loading-card,
  .vc21-confirm-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
  }

  .modal-head, .modal-body, .modal-foot,
  .em-modal-h, .em-modal-b, .em-modal-head, .em-modal-body,
  .sfu-modal-head, .sfu-modal-body,
  .kv-modal-head, .kv-modal-body, .kv-modal-foot {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .format-grid,
  .pal-grid,
  .media-grid,
  .icon-grid,
  #pexels_list.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .auth .title { font-size: clamp(30px, 9vw, 40px) !important; }
  .auth .logo { max-width: min(230px, 72vw); height: auto !important; }
}

/* ================================================================
   REELS / SHORTS – Karten dürfen nicht auf einzelne Buchstaben fallen
================================================================ */
@media (max-width: 1024px) {
  .wrap .editor.show {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - var(--bbai-mobile-topbar));
    overflow: visible !important;
  }

  .wrap .editor.show .ed-left,
  .wrap .editor.show .ed-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .wrap .editor.show .ed-right { border-top: 1px solid #e2e8f0 !important; }

  .wrap .editor.show .ed-top,
  .wrap .editor.show .ed-tabs {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .wrap .editor.show .ed-top > *,
  .wrap .editor.show .ed-tabs > * { flex-shrink: 0; }

  .wrap .editor.show .ed-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .seg-fixed,
  .seg-sort {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .seg-num { grid-column: 1; }
  .seg-body {
    grid-column: 2;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .seg-acts {
    grid-column: 3;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }
  .seg-ta {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 4px 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .seg-footer {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
  .seg-pill { white-space: nowrap; }
  .ed-body .card, .ed-right .card { width: 100% !important; }
}

@media (max-width: 640px) {
  .wrap .editor.show .ed-top { padding: 9px 12px !important; }
  .wrap .editor.show .ed-body { padding: 14px !important; }
  .seg-fixed, .seg-sort { padding: 11px 10px !important; gap: 8px !important; }
}

/* ================================================================
   KUNDENVERWALTUNG – mobile Karten und echtes Vollbild-Modal
================================================================ */
@media (max-width: 720px) {
  .kv-main { padding: 18px var(--bbai-mobile-x-right) 50px var(--bbai-mobile-x) !important; }
  .kv-kpis { grid-template-columns: minmax(0, 1fr) !important; }
  .kv-toolbar { grid-template-columns: minmax(0, 1fr) !important; padding: 14px !important; }

  .kv-table-wrap { overflow: visible !important; }
  .kv-table {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }
  .kv-table thead { display: none; }
  .kv-table tbody { display: grid; gap: 12px; width: 100%; }
  .kv-table tbody tr {
    width: 100%;
    min-width: 0;
    padding: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.04);
  }
  .kv-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 9px 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    white-space: normal !important;
    text-align: right;
  }
  .kv-table tbody td:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
  .kv-table tbody td:first-child { display: block; text-align: left; padding-top: 0 !important; }
  .kv-table tbody td:nth-child(2)::before { content: "E-Mail"; }
  .kv-table tbody td:nth-child(3)::before { content: "Letzter Login"; }
  .kv-table tbody td:nth-child(4)::before { content: "Bestell-ID"; }
  .kv-table tbody td:nth-child(5)::before { content: "AI Buddy"; }
  .kv-table tbody td:nth-child(6)::before { content: "Zahlung"; }
  .kv-table tbody td:nth-child(7)::before { content: "Zugang"; }
  .kv-table tbody td:nth-child(8)::before { content: "Aktion"; }
  .kv-table tbody td:not(:first-child)::before {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
  }
  .kv-email {
    max-width: 62% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .kv-customer { min-width: 0 !important; }
  .kv-btn.small { width: auto !important; }

  .kv-modal[role="dialog"] {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  .kv-modal-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  .kv-modal-head { flex: 0 0 auto; }
  .kv-tabs { flex: 0 0 auto; overflow-x: auto !important; }
  .kv-modal-card form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }
  .kv-modal-body { flex: 1 1 auto; min-height: 0; }
  .kv-modal-foot { flex: 0 0 auto; }
  .kv-form-grid, .kv-status-grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* ================================================================
   DIGISTORE24 / BLOGFY – 12-Spalten-Formulare und Mail-Karten
================================================================ */
@media (max-width: 700px) {
  .tab-pane .grid,
  .dv-card .tab-pane .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .tab-pane .grid > [class*="col-"],
  .dv-card .tab-pane .grid > [class*="col-"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tab-pane .panel,
  .tab-pane .section,
  .tab-pane .field,
  .tab-pane .input,
  .tab-pane .textarea,
  .tab-pane .textarea-plain {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .tab-pane .textarea-plain { min-height: 180px !important; }

  .sticky-tabs .tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .sticky-tabs .tab {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center;
    white-space: nowrap;
  }

  .card-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 14px !important;
  }
  .row-inputwrap { min-width: 0 !important; }
  .row-actions { flex-shrink: 0; }

  .blogfy-settings .card-body,
  .content .card-body { min-width: 0; }
}

/* ================================================================
   E-MAIL-MARKETING – Stepper, Formulare, Modals und Editor
================================================================ */
@media (max-width: 900px) {
  .em-shell { width: 100%; max-width: 100%; min-width: 0; }
  .em-grid,
  .em-summary-grid,
  .em-option-grid,
  .em-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .em-col-3, .em-col-4, .em-col-6, .em-col-8, .em-col-12 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .em-topbar { flex-direction: column !important; align-items: stretch !important; }
  .em-topbar > *, .em-actions { width: 100%; }
  .em-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .em-tab { flex: 0 0 auto; white-space: nowrap; }

  .em-stepper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .em-step-pill {
    flex: 0 0 auto !important;
    min-width: 112px !important;
    white-space: nowrap;
  }
  .em-step-pill::after { min-width: 20px; }

  .em-card-h {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .em-card-b { min-width: 0; }
  .em-template-select { width: 100% !important; min-width: 0 !important; margin-left: 0 !important; }
  .em-option-grid { gap: 10px !important; }
  .em-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .em-card-h, .em-card-b { padding-left: 14px !important; padding-right: 14px !important; }
  .em-step-page > .em-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .em-step-page > .em-row .em-btn { width: 100% !important; }
  .em-field .em-row { align-items: stretch !important; }
  .em-field .em-row .em-input { width: 100% !important; max-width: 100% !important; }
  .em-field .em-row .em-btn { width: 100% !important; }
  .em-modal, .em-modal-box { width: calc(100vw - 20px) !important; }
}

/* ================================================================
   QUIZLEAD
================================================================ */
@media (max-width: 700px) {
  .form-grid, .rule-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .rule-card, .q-card, .slider-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .rule-card .form-row, .q-card .form-row { width: 100% !important; min-width: 0 !important; }
  .rule-card select, .rule-card input, .q-card select, .q-card input { width: 100% !important; max-width: 100% !important; }
}

/* ================================================================
   LINKPAGES
================================================================ */
@media (max-width: 700px) {
  .lp-grid,
  .profil-grid,
  .social-grid,
  .design-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .sec-head, .sec-body { padding-left: 14px !important; padding-right: 14px !important; }
  .slug-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden;
  }
  .slug-prefix {
    width: 100%;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .slug-input { width: 100% !important; min-width: 0 !important; }

  .link-item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 13px 14px !important;
  }
  .link-drag { grid-column: 1; grid-row: 1; }
  .link-icon-wrap { grid-column: 1; grid-row: 2; }
  .link-info { grid-column: 2; grid-row: 1 / span 2; }
  .link-clicks-wrap { grid-column: 3; grid-row: 1; }
  .link-acts { grid-column: 3; grid-row: 2; }
  .link-title, .link-url { white-space: normal !important; overflow-wrap: anywhere; }

  .backdrop {
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .backdrop .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
  }
}

/* ================================================================
   LEADMAGNETEN – bestehende Kartenansicht nicht durch globale Tabelle zerstören
================================================================ */
@media (max-width: 900px) {
  #projTable { display: table; width: 100% !important; min-width: 0 !important; }
  #projTable thead { display: none; }
  #projTable tbody { display: block; width: 100%; }
  #projTable tbody tr {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
  }
  #projTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 10px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  #projTable .cell-actions { flex-wrap: wrap !important; justify-content: flex-end !important; }
}

/* Der globale Buddy darf die letzten Formularfelder und Buttons nicht verdecken. */
@media (max-width: 1024px) {
  body:has(#bbaiGlobalBuddy) > .content,
  body:has(#bbaiGlobalBuddy) > main,
  body:has(#bbaiGlobalBuddy) > .page,
  body:has(#bbaiGlobalBuddy) > .pg,
  body:has(#bbaiGlobalBuddy) > .bb_main,
  body:has(#bbaiGlobalBuddy) > .devodix_section_content,
  body:has(#bbaiGlobalBuddy) > .main-content,
  body:has(#bbaiGlobalBuddy) > .page-content,
  body:has(#bbaiGlobalBuddy) > .app-content,
  body:has(#bbaiGlobalBuddy) > .dashboard-content,
  body:has(#bbaiGlobalBuddy) > .content-wrapper,
  body:has(#bbaiGlobalBuddy) > .kv-main,
  body:has(#bbaiGlobalBuddy) > .lp-content,
  body:has(#bbaiGlobalBuddyUpgrade) > .content,
  body:has(#bbaiGlobalBuddyUpgrade) > main,
  body:has(#bbaiGlobalBuddyUpgrade) > .kv-main,
  body:has(#bbaiGlobalBuddyUpgrade) > .lp-content {
    padding-bottom: max(100px, env(safe-area-inset-bottom)) !important;
  }
}

/* Bewegungen reduzieren, wenn im Betriebssystem gewünscht. */
@media (prefers-reduced-motion: reduce) and (max-width: 1024px) {
  #side_menu, .side_menu, .menu_left, .bbai-mobile-menu-backdrop {
    transition: none !important;
  }
}


/* ================================================================
   V6 – Leadmagneten: Aktions-Dropdowns auf Mobil vollständig sichtbar
   Die Kartenansicht darf Menüs nicht abschneiden. Das geöffnete Menü
   erscheint als gut bedienbares Auswahlfenster am unteren Bildschirmrand.
================================================================ */
@media (max-width: 900px) {
  body:has(#projTable) .table-wrap {
    overflow: visible !important;
  }

  #projTable tbody,
  #projTable tbody tr,
  #projTable tbody td.cell-actions,
  #projTable .acts,
  #projTable .act-dropdown {
    overflow: visible !important;
  }

  #projTable tbody tr {
    position: relative !important;
  }

  #projTable .act-menu {
    position: fixed !important;
    left: max(16px, env(safe-area-inset-left)) !important;
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(70dvh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .30) !important;
    z-index: 2147483001 !important;
  }

  #projTable .act-menu a,
  #projTable .act-menu span.disabled {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  body:has(#projTable .act-menu.open)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .38);
    backdrop-filter: blur(1px);
    z-index: 2147483000;
    pointer-events: none;
  }
}