/* buntEVENTsuite – zentrale Responsive-Regeln
   Globales Layout hier verwalten; komponentenspezifische Basisstyles bleiben in style.css. */

/* Responsive Anpassungen – buntwelt events 2026 */

@media (max-width:768px){
body{padding-left:6px!important;padding-right:6px!important;}
.container,.wrapper,main,.content,.card{
margin-left:0!important;
margin-right:0!important;
padding-left:10px!important;
padding-right:10px!important;
max-width:100%!important;
}
}

@media (prefers-reduced-motion: reduce) {
            .account-drawer,
            .account-drawer-overlay,
            .account-drawer-toggle,
            .scroll-to-top-button {
                transition: none !important;
            }
        }

@media (max-width: 768px) {
            html {
                scroll-snap-type: none;
                overflow-x: hidden;
            }

            body {
                display: block;
                width: 100%;
                min-width: 0;
                padding: 58px 4px 18px !important;
                overflow-x: hidden;
            }

            .card {
                width: 100%;
                max-width: none;
                margin: 0;
                padding: 12px 7px !important;
                border-radius: 9px;
                box-shadow: none;
            }

            h1 {
                font-size: 20px;
                line-height: 1.25;
                margin: 5px 4px 18px;
            }

            .selector-box {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
                padding: 10px;
                margin-bottom: 14px;
            }

            .selector-box > * {
                width: 100%;
                min-width: 0 !important;
                margin: 0 !important;
            }

            .selector-box .btn-outline {
                justify-content: center;
            }

            .form-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr);
                gap: 0;
            }

            .form-row .form-group,
            .form-row .sub-group-card {
                width: 100%;
                min-width: 0;
                flex: none !important;
                margin-bottom: 13px !important;
            }

            .form-group {
                margin-bottom: 13px;
                min-width: 0;
            }

            label {
                font-size: 13px;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="number"],
            input[type="date"],
            input[type="time"],
            input[type="password"],
            select,
            textarea {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                padding: 10px;
                font-size: 16px;
            }

            textarea {
                min-height: 100px;
                height: auto;
            }

            .summary-banner {
                margin: 13px 0;
                padding: 10px 8px;
                font-size: 13px;
                overflow-wrap: anywhere;
            }

            .summary-banner .line-2 {
                font-size: 16px;
            }

            details.collapsible-section {
                margin-bottom: 10px;
                border-left-width: 4px;
                scroll-margin-top: 54px;
            }

            details.collapsible-section summary {
                padding: 13px 10px;
                font-size: 15px;
                line-height: 1.3;
            }

            .collapsible-content {
                padding: 11px 7px;
            }

            .sub-group-card {
                padding: 11px 8px;
                margin-bottom: 11px;
            }

            .maps-box {
                display: block !important;
                padding: 10px 8px;
            }

            .maps-buttons {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
                width: 100%;
            }

            .maps-buttons .btn-outline,
            .maps-info-text {
                width: 100%;
                justify-content: center;
                text-align: center;
                min-height: 44px;
            }

            .timeline-row {
                position: relative;
                display: grid;
                grid-template-columns: 1fr;
                gap: 7px;
                padding: 9px 45px 9px 8px;
                align-items: stretch;
            }

            .timeline-row input[type="time"],
            .timeline-row input[type="text"] {
                width: 100%;
            }

            .timeline-row .timeline-drag-handle {
                position: absolute;
                top: 9px;
                left: 7px;
                width: 36px;
                height: 36px;
            }

            .timeline-row {
                padding-left: 51px;
            }

            .timeline-row .btn-remove-row {
                position: absolute;
                top: 9px;
                right: 7px;
                width: 36px;
                height: 36px;
            }

            .toggle-all-container {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 6px;
                margin: 10px 0;
            }

            .toggle-all-container .btn-outline {
                width: 100%;
                justify-content: center;
                padding: 9px 5px;
                font-size: 12px;
            }

            .btn-group {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
                margin-top: 15px;
            }

            .btn-outline,
            .btn-action {
                min-height: 44px;
                white-space: normal;
                text-align: center;
            }

            .btn-floating-save {
                top: auto;
                right: 11px;
                bottom: 13px;
                width: 54px;
                height: 54px;
                transform: none;
            }

            .btn-floating-save:hover {
                transform: scale(1.04);
            }

            .account-drawer-toggle {
                top: 10px !important;
                width: 38px !important;
                height: 42px !important;
            }

            .account-drawer {
                width: min(330px, calc(100vw - 48px)) !important;
                padding: 18px 14px !important;
            }

            .account-drawer-toggle.is-open {
                left: min(330px, calc(100vw - 48px)) !important;
            }

            .scroll-to-top-button {
                top: auto !important;
                right: 18px !important;
                bottom: 78px !important;
                width: 40px !important;
                min-width: 40px !important;
                height: 40px !important;
                transform: scale(.92);
            }

            .scroll-to-top-button.is-visible {
                transform: scale(1);
            }

            .scroll-to-top-button:hover {
                transform: scale(1.05);
            }

            .field-label-with-button {
                justify-content: space-between;
            }

            .btn-manage-event-types {
                width: 34px;
                height: 34px;
                flex: 0 0 34px;
            }

            .modal,
            .event-types-modal,
            .password-modal {
                padding: 5px;
                align-items: flex-end;
            }

            .modal-content,
            .event-types-modal-content {
                width: 100%;
                max-width: none;
                max-height: 92vh;
                overflow-y: auto;
                padding: 14px 10px;
                border-radius: 14px 14px 6px 6px;
            }

            .password-modal-content {
                width: min(100%, 460px) !important;
                max-width: 460px !important;
                max-height: calc(100dvh - 20px) !important;
                overflow-y: auto !important;
                padding: 18px 14px !important;
                border-radius: 14px !important;
                margin: auto !important;
            }

            .modal-header {
                position: sticky;
                top: -14px;
                z-index: 2;
                margin: -14px -10px 12px;
                padding: 13px 10px;
                background: #fff;
                border-bottom: 1px solid var(--border-color);
            }

            .history-item {
                display: grid;
                grid-template-columns: 1fr;
                gap: 7px;
                padding: 10px 2px;
            }

            .history-item .btn-outline {
                width: 100%;
                justify-content: center;
            }

            .event-type-edit-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
            }

            .event-type-edit-row .event-type-help {
                grid-column: 1 / -1;
                white-space: normal !important;
            }

            .event-types-actions,
            .password-modal-actions {
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .event-types-actions .btn-outline,
            .password-modal-actions .btn-outline {
                width: 100%;
                justify-content: center;
            }

            .alert {
                padding: 10px;
                margin-bottom: 12px;
                overflow-wrap: anywhere;
            }
        }

@media (max-width: 390px) {
            body {
                padding-left: 2px !important;
                padding-right: 2px !important;
            }

            .card {
                padding-left: 5px !important;
                padding-right: 5px !important;
            }

            .toggle-all-container {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .user-create-form, .user-row { grid-template-columns: 1fr; }
            .user-row-actions { display: grid; grid-template-columns: 1fr 1fr; }
        }


/* Google-Kalender-Aktion – Version 1.0.14 */
@media (max-width: 700px) {
    .toggle-all-container {
        align-items: stretch;
        flex-direction: column;
    }

    .toggle-all-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-left: 0;
    }

    .btn-google-calendar {
        justify-content: center;
        width: 100%;
    }
}


/* Letzte mobile Sicherheitsregeln – Version 1.1.39 */
@media (max-width: 800px) {
    .scroll-to-top-button,
    .scroll-to-top-button:hover,
    .scroll-to-top-button:active,
    .scroll-to-top-button:focus-visible {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: max(16px, env(safe-area-inset-bottom)) !important;
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
        min-height: 56px !important;
        transform: translateX(-50%) !important;
        z-index: 2147483000 !important;
        pointer-events: auto !important;
        touch-action: none !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    select {
        min-height: var(--bw-mobile-control-height, 44px) !important;
        height: var(--bw-mobile-control-height, 44px) !important;
        line-height: 1.2 !important;
    }
}


/* ==========================================================================\n   Projektweite Responsive-Sicherheitsregeln – zentral verwaltet\n   ========================================================================== */

/* Grundschutz: flexible Kinder dürfen ihren Grid-/Flex-Container nicht sprengen. */
:where(.portal-shell,.portal-panel,.card,.sub-group-card,.form-group,.form-row,
       .event-content-frame,.event-overview-row,.event-row-link,.event-row-buttons,
       .admin-collapsible-content,.user-management-grid,.user-row,.user-create-form,
       .theme-tools,.theme-color-grid,.logo-management,.builder-canvas,.builder-editor-card,
       .location-card,.location-card-actions,.location-search-wrap,.location-editor-image-grid,
       .playlist-library-card,.event-playlist-card,.streaming-config-grid,.streaming-service-status-grid,
       .streaming-match-row,.streaming-service-status-card,.system-check-card,.system-check-row,
       .event-wizard-workspace,.event-wizard-stage,.event-wizard-fields,.live-mode-columns,
       .live-mode-main-column,.live-music-requests,.modal-content) > * {
    min-width: 0;
}

:where(img,svg,video,canvas,iframe){max-width:100%;}
:where(p,small,strong,span,code,a,button,label,td,th){overflow-wrap:anywhere;}

/* Breite Tabellen bleiben bedienbar, ohne die Seite selbst horizontal zu verbreitern. */
:where(.table,.admin-log,table){max-width:100%;}
.table-responsive,
.portal-panel:has(> table),
.admin-collapsible-content:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Modals dürfen nie größer als der aktuelle Viewport werden. */
:where(.modal-content,.event-types-modal-content,.password-modal-content,.builder-modal-card,
       .location-info-modal-content,.event-log-modal-content,.copy-event-modal-content,
       .event-media-modal-content,.event-media-upload-modal-content,.playlist-modal-content,
       .live-bpm-modal-content,.live-music-lookup-modal-content,.live-music-settings-modal-content,
       .live-music-delete-modal-content,.streaming-manual-search-content){
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
}

/* ---------- Kleine Desktops / Tablet quer ---------- */
@media (max-width:1120px){
    .portal-shell{width:100%;max-width:100%;}
    .modern-portal-header{gap:12px;flex-wrap:wrap;}
    .portal-nav-modern{max-width:100%;flex-wrap:wrap;justify-content:flex-end;}
    .streaming-service-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .detail-meeting-layout{grid-template-columns:repeat(2,minmax(0,1fr));}
    .detail-meeting-contact-group,.detail-meeting-calendar-cell,
    .detail-meeting-link-group,.detail-meeting-help{grid-column:auto!important;}
}

/* ---------- Tablet / schmale Notebooks ---------- */
@media (max-width:900px){
    .portal-page{padding-left:10px!important;padding-right:10px!important;}
    .portal-shell,.streaming-main,.credits-shell{width:100%!important;max-width:100%!important;}
    .modern-portal-header{align-items:flex-start;}
    .portal-nav-modern{margin-left:0;width:100%;justify-content:flex-start;}
    .portal-nav-modern>a{flex:0 1 auto;}

    .admin-link-grid,.user-management-grid,.logo-management,
    .streaming-config-grid,.streaming-service-status-grid,.credits-grid{
        grid-template-columns:1fr!important;
    }
    .theme-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .section-title-actions,.design-action-row,.event-list-toolbar{
        flex-wrap:wrap;
    }

    .user-create-form{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .user-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .user-row-actions{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap;}

    .location-card{align-items:flex-start;}
    .location-card-actions{flex-wrap:wrap;justify-content:flex-start;}
    .streaming-match-row{grid-template-columns:minmax(0,1fr)!important;}
    .streaming-actions,.streaming-service-actions{flex-wrap:wrap;}

    .event-overview-row-actions{align-items:stretch;}
    .event-row-link{grid-template-columns:150px minmax(0,1fr) 92px;gap:12px;}
}

/* ---------- Mobile / Tablet hoch ---------- */
@media (max-width:760px){
    html,body{max-width:100%;overflow-x:hidden;}
    .portal-page{padding-left:6px!important;padding-right:6px!important;}
    .portal-shell,.portal-main,main{min-width:0!important;max-width:100%!important;}

    .modern-portal-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;}
    .modern-portal-header>.portal-nav-modern{grid-column:1/-1;}
    .portal-nav-modern{display:flex!important;overflow-x:auto;flex-wrap:nowrap!important;justify-content:flex-start;scrollbar-width:thin;}
    .portal-nav-modern>a,.portal-nav-modern>.user-menu{flex:0 0 auto;}

    .portal-title-row,.event-action-toolbar,.event-list-toolbar,
    .section-title-actions,.dynamic-contact-header,.dynamic-info-header,
    .streaming-service-overview-head,.playlist-library-head{
        align-items:stretch!important;
        flex-direction:column!important;
        gap:8px!important;
    }

    .admin-link-grid,.theme-color-grid,.user-management-grid,.logo-management,
    .streaming-config-grid,.streaming-service-status-grid,.credits-grid,
    .location-admin-grid,.custom-form-grid,.builder-field-grid,
    .home-dashboard-grid,.detail-meeting-layout{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .user-create-form,.user-row{grid-template-columns:minmax(0,1fr)!important;}
    .user-row-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
    .user-row-actions>*{min-width:0;width:100%;}

    .event-overview-row-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;}
    .event-row-link{grid-template-columns:minmax(0,1fr)!important;gap:4px!important;width:100%;}
    .event-list-time{min-width:0!important;text-align:left!important;}
    .event-row-buttons{max-width:none!important;width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}

    .location-card{flex-direction:column;align-items:stretch!important;}
    .location-card-actions{width:100%;display:flex!important;flex-wrap:wrap;}
    .location-card-actions>*{flex:1 1 150px;}
    .location-image-gallery,.location-editor-image-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

    .playlist-library-card,.event-playlist-card{grid-template-columns:minmax(0,1fr)!important;}
    .playlist-library-actions,.event-playlist-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}
    .event-playlist-upload,.event-media-upload-row{grid-template-columns:minmax(0,1fr)!important;}

    .streaming-service-checks>div{grid-template-columns:minmax(90px,.4fr) minmax(0,1fr)!important;}
    .streaming-manual-search-form{grid-template-columns:minmax(0,1fr)!important;}
    .streaming-match-row{grid-template-columns:minmax(0,1fr)!important;}
    .streaming-match-form{min-width:0;}

    .system-check-row{grid-template-columns:minmax(0,1fr)!important;gap:5px!important;}
    .system-check-row>*{min-width:0;}

    .builder-editor-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .builder-editor-actions>*{min-width:0;}
    .wysiwyg-toolbar{gap:8px!important;}

    .event-wizard-modal-content{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;}
    .event-wizard-workspace{grid-template-columns:minmax(0,1fr)!important;}
    .event-wizard-sidebar{max-height:190px;}
    .event-wizard-fields{grid-template-columns:minmax(0,1fr)!important;}

    .live-mode-columns{grid-template-columns:minmax(0,1fr)!important;}
    .live-music-request-form{grid-template-columns:minmax(0,1fr)!important;}
    .live-music-request-form>*{grid-column:1!important;}
    .live-music-lookup-grid{grid-template-columns:minmax(0,1fr)!important;}

    .modal-actions,.event-types-actions,.password-modal-actions,.import-create-actions{
        display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;
    }
    .modal-actions>*{width:100%;min-width:0;}

    .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    table{min-width:0;}
}

/* ---------- Kleine Smartphones ---------- */
@media (max-width:520px){
    .portal-page{padding-left:3px!important;padding-right:3px!important;}
    .portal-brand-logo{width:48px!important;height:34px!important;}
    .portal-brand-copy>span{font-size:.94rem!important;}
    .portal-nav-modern>a{padding:7px 9px!important;font-size:12px;}

    .card,.portal-panel,.sub-group-card{padding-left:9px!important;padding-right:9px!important;}
    .theme-color-grid,.location-image-gallery,.location-editor-image-grid{grid-template-columns:minmax(0,1fr)!important;}
    .user-row-actions,.event-row-buttons,.builder-editor-actions{grid-template-columns:minmax(0,1fr)!important;}
    .section-toggle-group{display:grid!important;grid-template-columns:minmax(0,1fr)!important;}
    .section-toggle-group .btn-outline{border-radius:var(--radius)!important;margin-left:0!important;}
    .toggle-all-container,.toggle-all-actions{grid-template-columns:minmax(0,1fr)!important;}
    .streaming-service-checks>div{grid-template-columns:minmax(0,1fr)!important;}
    .streaming-service-actions>*{flex:1 1 100%;}

    .event-wizard-footer{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));}
    .event-wizard-footer-spacer{display:none!important;}
    .event-wizard-footer button{width:100%;}
}