/* =========================================================
   MZVISUALS COMPLETE REVISED PREMIUM CSS
   ========================================================= */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    overflow-x:hidden;

    background:
        radial-gradient(circle at top,
        #1a2230 0%,
        #0d121b 40%,
        #06080d 100%);

    color:#fff;

    font-family:
        Inter,
        system-ui,
        sans-serif;
}

/* =========================================================
   HEADER
   ========================================================= */

.mz-site-header{
    position:fixed;
    top:22px;
    left:50%;
    transform:translateX(-50%);

    width:min(1280px,92vw);

    z-index:9999;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 26px;

    border-radius:999px;

    background:
        rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);
}

.mz-logo{
    color:#ffe6a3;
    text-decoration:none;

    font-size:26px;
    font-weight:900;
    letter-spacing:3px;
}

.mz-nav{
    display:flex;
    gap:22px;
}

.mz-nav a{
    color:#fff;
    text-decoration:none;

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;

    transition:.35s ease;
}

.mz-nav a:hover{
    opacity:.7;
}

/* =========================================================
   HERO
   ========================================================= */

.mz-hero{
    position:relative;

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    overflow:hidden;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.05),
            rgba(0,0,0,.18)
        ),
        url('https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=2400&auto=format&fit=crop');

    background-size:cover;
    background-position:center;

    animation:mzHeroZoom 18s ease-in-out infinite alternate; }

@keyframes mzHeroZoom{

    from{
        background-size:100%;
    }

    to{
        background-size:108%;
    }

}

.mz-hero:after{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,220,150,.06),
            transparent 45%
        );
}

.mz-hero-inner{
    position:relative;
    z-index:2;
}

.mz-hero h1{
    margin:0;

    font-size:clamp(68px,10vw,170px);

    line-height:.9;

    letter-spacing:7px;

    font-weight:900;
}

.mz-hero p{
    margin-top:24px;

    font-size:clamp(20px,2vw,34px);

    color:rgba(255,255,255,.88);
}

/* =========================================================
   SECTIONS
   ========================================================= */

.mz-section{
    width:min(1450px,94vw);

    margin:120px auto;
}

.mz-section h2{
    text-align:center;

    font-size:clamp(46px,5vw,84px);

    margin-bottom:18px;
}

.mz-intro{
    text-align:center;

    font-size:22px;

    color:rgba(255,255,255,.72);

    margin-bottom:60px;
}

/* =========================================================
   TOP GLASS CARDS
   ========================================================= */

.mz-glass-grid{
    width:min(1400px,94vw);

    margin:0 auto;

    display:flex;
    flex-wrap:wrap;

    justify-content:center;

    gap:30px;
}

.mz-glass-card{
    position:relative;

    width:240px;
    height:240px;

    overflow:hidden;

    border-radius:34px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(14px);

    box-shadow:
        0 14px 45px rgba(0,0,0,.45);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.mz-glass-card:hover{
    transform:
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 40px rgba(95,185,255,.22);
}

.mz-glass-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1.2s ease,
        filter 1.2s ease;
}

.mz-glass-card:hover img{
    transform:scale(1.08);

    filter:
        saturate(1.08)
        contrast(1.08)
        brightness(.92);
}

.mz-glass-card h3{
    position:absolute;

    left:22px;
    bottom:18px;

    margin:0;

    z-index:2;

    color:#ffffff !important;

    font-size:32px;
    font-weight:900;

    text-shadow:
        0 2px 18px rgba(0,0,0,.65);
}

/* =========================================================
   GALLERY + VIDEO CARDS
   ========================================================= */

.mz-card-grid,
.mz-gallery-grid,
.mzgp-grid{

    width:min(1400px,94vw) !important;

    margin:0 auto !important;

    display:grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        ) !important;

    gap:30px !important;
}

.mz-gallery-card,
.mz-video-card,
.mz-gallery-item,
.mzgp-card{

    position:relative;

    overflow:hidden;

    height:320px !important;

    border-radius:30px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(14px);

    box-shadow:
        0 14px 45px rgba(0,0,0,.45);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.mz-gallery-card:hover,
.mz-video-card:hover,
.mz-gallery-item:hover,
.mzgp-card:hover{

    transform:
        translateY(-12px)
        scale(1.02);

    box-shadow:
        0 25px 70px rgba(0,0,0,.55),
        0 0 40px rgba(120,190,255,.18);
}

.mz-gallery-card img,
.mz-video-card img,
.mz-gallery-item img,
.mzgp-card img{

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    transition:
        transform 1.2s ease,
        filter 1.2s ease;
}

.mz-gallery-card:hover img,
.mz-video-card:hover img,
.mz-gallery-item:hover img,
.mzgp-card:hover img{

    transform:scale(1.08);

    filter:
        saturate(1.08)
        contrast(1.08)
        brightness(.92);
}

/* =========================================================
   CARD OVERLAY
   ========================================================= */

.mz-card-content,
.mz-gallery-overlay{

    position:absolute;

    inset:auto 0 0 0;

    padding:24px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.85),
            transparent
        );
}

.mz-card-content h3,
.mz-gallery-overlay h3{

    margin:0 0 8px 0;

    color:#fff !important;

    font-size:34px;
    font-weight:900;

    text-shadow:
        0 2px 18px rgba(0,0,0,.65);
}

.mz-card-content p,
.mz-gallery-overlay p{

    margin:0;

    color:rgba(255,255,255,.84) !important;

    font-size:16px;

    line-height:1.5;
}

/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.mzgp-filters,
.mz-filter-bar{

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:center !important;

    gap:14px !important;

    width:min(1200px,94vw);

    margin:40px auto 60px !important;
}

.mzgp-filters button,
.mz-filter-bar button{

    width:auto !important;

    min-width:0 !important;

    padding:12px 18px !important;

    border-radius:999px !important;

    border:
        1px solid rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.06);

    color:#fff;

    font-size:12px !important;
    font-weight:800;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.35s ease;
}

.mzgp-filters button:hover,
.mz-filter-bar button:hover,
.mzgp-filters button.active,
.mz-filter-bar button.active{

    background:#ffe6a3;

    color:#111;
}

/* =========================================================
   FOOTER
   ========================================================= */

.mz-footer{

    margin-top:140px;

    padding:80px 30px;

    text-align:center;

    border-top:
        1px solid rgba(255,255,255,.08); }

.mz-footer h3{
    font-size:42px;
}

.mz-footer p{
    color:rgba(255,255,255,.65);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

    .mz-site-header{
        width:94vw;

        padding:14px 18px;
    }

    .mz-nav{
        gap:14px;
    }

    .mz-nav a{
        font-size:11px;
    }

    .mz-glass-card{
        width:200px;
        height:200px;
    }

    .mz-card-grid,
    .mz-gallery-grid,
    .mzgp-grid{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(240px,1fr)
            ) !important;
    }

}

@media(max-width:700px){

    .mz-glass-grid{
        gap:20px;
    }

    .mz-glass-card{
        width:100%;
        max-width:320px;

        height:240px;
    }

    .mz-gallery-card,
    .mz-video-card,
    .mz-gallery-item,
    .mzgp-card{

        height:280px !important;
    }

    .mz-hero h1{
        letter-spacing:2px;
    }

}

/* Frontpage Kacheln nicht mehr klickbar */

.home .card-link,
.home .full-link,
.home .mz-card a {
    pointer-events: none !important;
    cursor: default !important;
}

/* Ganze Kachel deaktivieren */
.home .mz-card {
	pointer-events: none !important;
}