/* Love in the Air - globale Responsive-Schicht */

:root{
    --lita-page-max: 1220px;
    --lita-pad: clamp(12px, 2vw, 28px);
    --lita-radius: clamp(18px, 2vw, 32px);
}

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

html{
    width:100%;
    min-width:0;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:smooth;
}

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

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

img,
video,
canvas,
svg{
    height:auto;
}

iframe{
    border:0;
}

table{
    max-width:100%;
    border-collapse:collapse;
}

input,
select,
textarea,
button{
    max-width:100%;
    font:inherit;
}

textarea{
    resize:vertical;
}

pre,
code{
    max-width:100%;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.page,
.container,
.wrapper,
.content,
.main,
.main-content,
.lita-page,
.profile-page{
    width:min(var(--lita-page-max), calc(100vw - 2 * var(--lita-pad))) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.card,
.panel,
.box,
.section,
.form-card,
.hero-main,
.profile-card,
.lita-refine-nav,
.lita-quality-card,
.lita-gallery-panel,
.lita-photo-upload,
.lita-safety-panel,
.lita-coach-panel{
    max-width:100% !important;
}

.grid,
.row,
.cards,
.hero,
.lita-quality-grid,
.lita-gallery-grid,
.lita-photo-preview,
.lita-gallery-preview,
.love-match-box,
.profile-topbar,
.profile-topbar-actions{
    max-width:100% !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea{
    width:100% !important;
}

button,
.btn,
.button,
a.btn,
.profile-topbar-btn,
.mini-btn{
    max-width:100%;
    white-space:normal;
}

.lita-scroll-table,
.table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

body table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

body table thead,
body table tbody,
body table tr{
    max-width:100%;
}

.lita-start-header{
    width:100%;
}

#litaGlobalMenu{
    max-width:calc(100vw - 20px) !important;
}

#litaGlobalMenu .lita-menu-panel,
.love-menu-panel{
    max-width:calc(100vw - 20px) !important;
}

@media (min-width: 1400px){
    :root{
        --lita-page-max: 1320px;
    }
}

@media (max-width: 1180px){
    :root{
        --lita-page-max: 1040px;
    }

    .hero,
    .profile-topbar,
    .love-match-box{
        grid-template-columns:1fr !important;
    }

    .profile-topbar-right{
        justify-items:stretch !important;
    }
}

@media (max-width: 980px){
    :root{
        --lita-page-max: 900px;
    }

    .grid,
    .row,
    .cards,
    .lita-quality-grid{
        grid-template-columns:1fr !important;
    }

    .lita-gallery-grid,
    .lita-photo-preview,
    .lita-gallery-preview{
        grid-template-columns:repeat(3, 1fr) !important;
    }

    .profile-topbar-actions,
    .mini-actions,
    .actions-buttons{
        justify-content:flex-start !important;
    }
}

@media (max-width: 760px){
    :root{
        --lita-pad: 12px;
    }

    body{
        font-size:15px;
    }

    h1{
        font-size:clamp(30px, 9vw, 44px) !important;
        line-height:1.05 !important;
    }

    h2{
        font-size:clamp(24px, 7vw, 34px) !important;
    }

    h3{
        font-size:clamp(20px, 6vw, 28px) !important;
    }

    .page,
    .container,
    .wrapper,
    .content,
    .main,
    .main-content,
    .lita-page,
    .profile-page{
        width:calc(100vw - 24px) !important;
    }

    .card,
    .panel,
    .box,
    .section,
    .form-card,
    .hero-main,
    .profile-card,
    .lita-refine-nav,
    .lita-quality-card,
    .lita-gallery-panel,
    .lita-photo-upload,
    .lita-safety-panel,
    .lita-coach-panel{
        border-radius:22px !important;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .grid,
    .hero,
    .love-range-row,
    .lita-photo-choice,
    .lita-profile-preview-row,
    .lita-safety-list,
    .lita-coach-list{
        grid-template-columns:1fr !important;
    }

    .lita-gallery-grid,
    .lita-photo-preview,
    .lita-gallery-preview{
        grid-template-columns:repeat(2, 1fr) !important;
    }

    .actions{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
        width:100% !important;
        margin-top:22px !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .actions-buttons{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .btn,
    .button,
    a.btn,
    .profile-topbar-btn,
    .mini-btn{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    #litaGlobalMenu{
        top:10px !important;
        right:10px !important;
    }

    #litaGlobalMenu .lita-menu-button,
    .love-menu-button{
        min-height:42px !important;
        padding:9px 13px !important;
    }

    #litaGlobalMenu .lita-menu-panel,
    .love-menu-panel{
        width:calc(100vw - 20px) !important;
        right:0 !important;
        max-height:calc(100vh - 74px) !important;
        overflow:auto !important;
    }
}

@media (max-width: 460px){
    :root{
        --lita-pad: 10px;
    }

    body{
        font-size:14px;
    }

    .page,
    .container,
    .wrapper,
    .content,
    .main,
    .main-content,
    .lita-page,
    .profile-page{
        width:calc(100vw - 20px) !important;
    }

    .lita-gallery-grid,
    .lita-photo-preview,
    .lita-gallery-preview{
        grid-template-columns:1fr !important;
    }

    .avatar-wrap{
        width:150px !important;
        height:150px !important;
    }

    .profile-topbar-left{
        align-items:flex-start !important;
    }

    .profile-topbar-avatar{
        width:54px !important;
        height:54px !important;
    }

    .lita-start-logo{
        font-size:18px !important;
    }

    .lita-start-logo-heart{
        font-size:20px !important;
    }
}

@media (max-width: 360px){
    body{
        font-size:13px;
    }

    h1{
        font-size:28px !important;
    }

    .card,
    .panel,
    .box,
    .section,
    .form-card,
    .hero-main,
    .profile-card{
        padding-left:12px !important;
        padding-right:12px !important;
    }
}