/* 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;
    }
}