/* =========================================================
   RPG OASE – ZENTRALE RESPONSIVE SCHICHT FÜR ALLE DESIGNS
   ========================================================= */

html,
body {
    max-width: 100%;
}

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

.site-layout,
.main-content,
.rpg-view,
.rpg-view-content,
.profile-page-container,
.profile-settings-page-container {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

input,
textarea,
select,
button {
    max-width: 100%;
    box-sizing: border-box;
}

table {
    max-width: 100%;
}

@media (max-width: 1450px) {
    html,
    body {
        overflow-x: clip !important;
    }

    .main-content,
    .profile-page-box,
    .profile-settings-page-box,
    .profile-tab-panel,
    .profile-settings-panel,
    .rpg-view-content,
    .rpg-posts-mode,
    .rpg-post-editor-section,
    .rpg-description-box,
    .rpg-free-roles-box,
    .rpg-notes-box,
    .rpg-roles-top-block,
    .rpg-roles-full-block,
    .rpg-administration-panel,
    .rpg-admin-roles-box,
    .rpg-admin-settings,
    .rpg-admin-welcome,
    .pm-list-box,
    .pm-read-box,
    .pm-compose-box,
    .pm-reply-box,
    .pm-system-box,
    .support-page,
    .support-layout,
    .members-page,
    .team-page,
    .home-page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-tabs,
    .profile-settings-tabs,
    .rpg-view-navigation {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 5px !important;
    }

    .profile-tab,
    .profile-settings-tab,
    .rpg-view-navigation-link {
        flex: 1 1 150px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .profile-tab-blocklist {
        margin-left: 0 !important;
    }

    html[data-design] .profile-main-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        gap: clamp(16px, 3vw, 28px) !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: clamp(16px, 3vw, 30px) !important;
        box-sizing: border-box !important;
    }

    .profile-avatar-column,
    .profile-content-column {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-design] .profile-avatar-column {
        flex: none !important;
        display: flex !important;
        justify-content: center !important;
    }

    html[data-design] .profile-avatar-frame {
        width: min(100%, 300px) !important;
        height: auto !important;
        aspect-ratio: 3 / 5 !important;
    }

    .profile-username {
        max-width: 100% !important;
        font-size: clamp(28px, 5vw, 44px) !important;
        overflow-wrap: anywhere !important;
    }

    .profile-facts-list,
    .profile-description-box,
    .profile-role-detail,
    .profile-role-form-box,
    .profile-role-editor-holder {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-description-box {
        margin: 24px 0 0 !important;
        padding: clamp(14px, 3vw, 20px) !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }

    .profile-description-box *,
    .rpg-description-text * {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .profile-description-box [data-rpgoase-bb="columns"],
    .rpg-description-text [data-rpgoase-bb="columns"] {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .profile-description-box [data-rpgoase-bb="column"],
    .rpg-description-text [data-rpgoase-bb="column"] {
        grid-column: auto !important;
        justify-self: stretch !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-user-actions {
        position: static !important;
        display: flex !important;
        flex-flow: row wrap !important;
        width: 100% !important;
        margin-top: 18px !important;
    }

    .profile-role-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important;
    }

    .profile-tab-panel,
    .profile-roles-panel,
    .profile-blocklist-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .profile-roles-panel,
    .profile-blocklist-panel {
        padding: clamp(14px, 3vw, 30px) !important;
    }

    .profile-role-browser-tools,
    .profile-role-category-create-form,
    .profile-role-detail,
    .profile-role-form-grid,
    .profile-role-images-compact-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-role-category-list,
    .profile-role-category-group,
    .profile-role-category-group[open],
    .profile-role-category-group-uncategorized,
    .profile-role-category-content,
    .profile-role-detail,
    .profile-role-detail-description,
    .profile-role-detail-gallery,
    .profile-role-image-list,
    .profile-role-images-compact {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-role-category-summary,
    .profile-role-category-summary-main,
    .profile-role-category-edit-form {
        flex-wrap: wrap !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .profile-role-category-edit-input {
        flex: 1 1 180px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .profile-blocklist-header,
    .profile-blocklist-add-form,
    .profile-blocklist-entry {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-blocklist-add-input {
        flex: 1 1 220px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-blocklist-user {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .profile-role-form-grid,
    .profile-role-images-compact-layout,
    .profile-role-detail-gallery,
    .profile-role-private-access-add-row {
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
        min-width: 0 !important;
    }

    .profile-role-image-row,
    .profile-role-toolbar,
    .profile-role-browser-tools,
    .profile-role-owner-actions,
    .profile-role-admin-toolbar {
        flex-wrap: wrap !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-settings-panel {
        padding: clamp(14px, 3vw, 30px) !important;
    }

    .profile-settings-settings-box,
    .profile-settings-social-box,
    .profile-settings-security-box {
        min-width: 0 !important;
        max-width: 100% !important;
        padding: clamp(14px, 2.5vw, 20px) !important;
    }

    .profile-settings-row,
    .profile-settings-avatar-row,
    .profile-settings-personal-fields,
    .profile-settings-birth-fields,
    .profile-settings-security-email-row,
    .profile-settings-security-password-row,
    .profile-settings-security-two-factor-row,
    .profile-settings-security-passkey-row,
    .profile-settings-security-remember-row,
    .profile-settings-security-form-row,
    .profile-settings-security-password-fields,
    .profile-settings-social-input-row,
    .profile-settings-color-designs-grid,
    .profile-settings-delete-confirm-row {
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-settings-security-email-input,
    .profile-settings-security-password-input,
    .profile-settings-security-two-factor-input,
    .profile-settings-security-passkey-input,
    .profile-settings-security-remember-input,
    .profile-settings-input,
    .profile-settings-social-input-row input,
    .profile-settings-social-input-row select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .profile-settings-security-remember-hint {
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    .rpg-description-box > .rpg-description-content,
    .rpg-free-roles-box > *,
    .rpg-notes-box > *,
    .rpg-post-editor-section > *,
    .rpg-post > *,
    .rpg-roles-top-block > *,
    .rpg-roles-full-block > .rpg-my-roles-workspace,
    .rpg-roles-full-block > .rpg-all-roles-list,
    .rpg-administration-panel > *,
    .rpg-admin-roles-box > *,
    .rpg-admin-settings > *,
    .rpg-admin-welcome > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rpg-description-box,
    .rpg-free-roles-box,
    .rpg-notes-box,
    .rpg-post-editor-section,
    .rpg-roles-top-block,
    .rpg-roles-full-block,
    .rpg-administration-panel,
    .rpg-admin-roles-box,
    .rpg-admin-settings,
    .rpg-admin-welcome {
        overflow-x: hidden !important;
    }

    .rpg-description-mode,
    .rpg-description-layout,
    .rpg-description-main,
    .rpg-description-sidebar,
    .rpg-description-side-section,
    .rpg-description-info-card,
    .rpg-description-role-card,
    .rpg-description-role-list,
    .rpg-description-played-role-list {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rpg-description-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .rpg-description-sidebar {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important;
        align-items: start !important;
    }

    .rpg-description-cover {
        width: min(100%, 340px) !important;
        margin: 0 auto !important;
    }

    .rpg-description-info-row,
    .rpg-description-free-role-option,
    .rpg-description-played-role {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .rpg-my-roles-workspace,
    .rpg-admin-layout,
    .rpg-role-form-grid,
    .rpg-settings-grid,
    .rpg-welcome-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .rpg-my-roles-list {
        border-right: 0 !important;
        border-bottom: 1px solid var(--color-border) !important;
    }

    .rpg-admin-roles-sections,
    .rpg-admin-roles-top-grid,
    .rpg-admin-roles-box,
    .rpg-admin-role-applications-list,
    .rpg-admin-free-role-list,
    .rpg-admin-played-role-list,
    .rpg-admin-free-role-create,
    .rpg-admin-played-role-create,
    .rpg-admin-role-applications-empty,
    .rpg-admin-role-application-message,
    .rpg-admin-free-role-message,
    .rpg-admin-played-role-message,
    .rpg-admin-free-role-separator,
    .rpg-admin-played-role-separator,
    .rpg-admin-played-role-new-title,
    .rpg-admin-role-application-row,
    .rpg-admin-free-role-row,
    .rpg-admin-played-role-existing {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rpg-admin-roles-top-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .rpg-admin-roles-box {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .rpg-admin-role-application-row,
    .rpg-admin-free-role-row,
    .rpg-admin-free-role-edit-form,
    .rpg-admin-free-role-create,
    .rpg-admin-played-role-edit,
    .rpg-admin-played-role-create {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    .rpg-admin-free-role-edit-form > input[type="text"],
    .rpg-admin-free-role-create-field,
    .rpg-admin-free-role-create-field input,
    .rpg-admin-played-role-field,
    .rpg-admin-played-role-field input,
    .rpg-admin-played-role-coadmin-field,
    .rpg-admin-role-application-text,
    .rpg-admin-role-application-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rpg-admin-free-role-create-button,
    .rpg-admin-played-role-add-button,
    .rpg-admin-played-role-save-button,
    .rpg-admin-played-role-delete-button {
        justify-self: start !important;
        max-width: 100% !important;
    }

    .rpgoase-editor-form,
    .rpgoase-editor-wrapper,
    .rpgoase-editor-toolbar,
    .rpgoase-editor,
    .rpgoase-source-editor,
    .rpgoase-editor-footer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .rpgoase-editor-toolbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .rpgoase-editor-toolbar-flow,
    .rpgoase-editor-footer {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .pm-mobile-scroll-box,
    .pm-list-box,
    .pm-read-box,
    .pm-compose-box,
    .pm-reply-box,
    .pm-system-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .pm-mobile-scroll-box > *,
    .pm-mobile-message-row,
    .pm-list-box > *,
    .pm-read-box > *,
    .pm-compose-box > *,
    .pm-reply-box > *,
    .pm-system-box > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .support-layout,
    .support-ticket-layout,
    .support-message,
    .members-grid,
    .members-list,
    .team-grid,
    .home-grid,
    .home-dashboard-grid,
    .advertising-grid,
    .emulator-grid,
    .mail-management-layout,
    .mail-management-grid,
    .discord-bot-layout {
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .table-scroll,
    .responsive-table,
    .members-table-wrap,
    .mail-management-table-wrap,
    .support-table-wrap,
    .mass-deletion-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 900px) {
    .profile-main-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .profile-avatar-column {
        display: flex !important;
        justify-content: center !important;
    }

    .profile-avatar-frame {
        width: min(72vw, 300px) !important;
    }

    html[data-design] .profile-content-column {
        text-align: left !important;
    }

    .profile-tabs,
    .profile-settings-tabs {
        align-items: stretch !important;
    }

    .profile-tab,
    .profile-settings-tab {
        flex-basis: min(100%, 180px) !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 9px 10px !important;
    }

    .rpg-post-scroll > .rpg-post-list > .rpg-post {
        grid-template-columns: clamp(104px, 30vw, 140px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 560px) {
    .profile-main-layout,
    .profile-settings-panel {
        padding: 12px !important;
    }

    .profile-tab,
    .profile-settings-tab {
        flex: 1 1 calc(50% - 5px) !important;
        font-size: 13px !important;
    }

    .profile-fact-row {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .profile-settings-actions,
    .profile-settings-security-form-actions,
    .profile-settings-security-two-factor-actions,
    .profile-settings-security-passkey-actions,
    .profile-settings-security-remember-actions,
    .profile-role-toolbar-actions {
        align-items: stretch !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .profile-settings-actions > *,
    .profile-settings-security-form-actions > *,
    .profile-settings-security-two-factor-actions > *,
    .profile-settings-security-passkey-actions > *,
    .profile-settings-security-remember-actions > *,
    .profile-role-toolbar-actions > * {
        width: 100% !important;
    }
}

/* =========================================================
   KORREKTUREN: bestehende Desktop-/Tablet-Strukturen erhalten
   ========================================================= */

@media (max-width: 1450px) {
    /* Profilbild und Profildaten bleiben nebeneinander. */
    html[data-design] .profile-main-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: clamp(16px, 2.5vw, 28px) !important;
    }

    html[data-design] .profile-avatar-column {
        display: block !important;
        flex: 0 1 clamp(180px, 28%, 300px) !important;
        width: clamp(180px, 28%, 300px) !important;
        max-width: 300px !important;
        margin: 0 !important;
    }

    html[data-design] .profile-avatar-frame {
        width: 100% !important;
        max-width: 300px !important;
    }

    html[data-design] .profile-content-column {
        flex: 1 1 0 !important;
        width: auto !important;
    }

    /* RPG-Beschreibung: Text links, Bild und Infos rechts. */
    .rpg-description-mode {
        overflow-x: hidden !important;
    }

    html[data-design] .rpg-description-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 30%) !important;
        gap: 16px !important;
        align-items: stretch !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .rpg-description-main {
        min-width: 0 !important;
    }

    .rpg-description-sidebar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .rpg-description-cover {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    /* Gespielte Rollen bleiben kompakte Zeilen. */
    .rpg-admin-played-role-existing {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        align-items: end !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
    }

    .rpg-admin-played-role-edit,
    .rpg-admin-played-role-create {
        display: grid !important;
        grid-template-columns: 96px minmax(120px, 1fr) minmax(120px, 1fr) 40px !important;
        align-items: end !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .rpg-admin-played-role-save-button,
    .rpg-admin-played-role-delete-button {
        justify-self: stretch !important;
    }

    /* Löschen und Übergeben nutzen die vorhandene Breite ohne Scrollen. */
    html[data-design] .rpg-admin-delete-transfer-grid,
    html[data-design] .rpg-admin-delete-transfer-grid:not(.is-single) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html[data-design] .rpg-admin-delete-transfer-grid.is-single {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .rpg-admin-danger-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .rpg-admin-danger-confirm-row {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 700px) {
    html[data-design] .profile-main-layout {
        flex-direction: column !important;
    }

    html[data-design] .profile-avatar-column {
        flex: none !important;
        width: min(100%, 280px) !important;
        margin: 0 auto !important;
    }

    html[data-design] .rpg-description-layout,
    html[data-design] .rpg-admin-delete-transfer-grid,
    html[data-design] .rpg-admin-delete-transfer-grid:not(.is-single) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .rpg-description-cover {
        width: min(100%, 300px) !important;
    }

    .rpg-admin-played-role-edit,
    .rpg-admin-played-role-create {
        grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr) 40px !important;
    }
}

@media (max-width: 520px) {
    .rpg-admin-played-role-edit,
    .rpg-admin-played-role-create {
        grid-template-columns: minmax(0, 1fr) 40px !important;
    }

    .rpg-admin-played-role-coadmin-field {
        grid-column: 1 / -1 !important;
    }

    .rpg-admin-played-role-field {
        grid-column: 1 / -1 !important;
    }

    .rpg-admin-played-role-save-button,
    .rpg-admin-played-role-add-button {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .rpg-admin-danger-confirm-row,
    .rpg-admin-danger-confirm,
    .rpg-admin-danger-button {
        width: 100% !important;
    }

    .rpg-admin-danger-confirm-row {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}