/* =========================================================
   MeerHeimatLiebe 2.0
   GLASS SYSTEM
   ========================================================= */

/* ---------------------------------------------------------
   Basis
   --------------------------------------------------------- */

.mhl-glass {
    background:
        var(--mhl-glass-light);

    border:
        1px solid var(--mhl-glass-border);

    box-shadow:
        var(--mhl-glass-shadow);

    backdrop-filter:
        blur(var(--mhl-glass-blur))
        saturate(140%);

    -webkit-backdrop-filter:
        blur(var(--mhl-glass-blur))
        saturate(140%);
}


/* ---------------------------------------------------------
   Helles Glas
   --------------------------------------------------------- */

.mhl-glass--light {
    background:
        rgba(255, 255, 255, 0.18);

    border-color:
        rgba(255, 255, 255, 0.28);
}


/* ---------------------------------------------------------
   Starkes helles Glas
   --------------------------------------------------------- */

.mhl-glass--strong {
    background:
        var(--mhl-glass-light-strong);

    border-color:
        var(--mhl-glass-border-strong);
}


/* ---------------------------------------------------------
   Dunkles Glas
   --------------------------------------------------------- */

.mhl-glass--dark {
    background:
        var(--mhl-glass-dark);

    border-color:
        rgba(255, 255, 255, 0.14);
}


/* ---------------------------------------------------------
   Ocean Glas
   --------------------------------------------------------- */

.mhl-glass--ocean {
    background:
        var(--mhl-glass-ocean);

    border-color:
        rgba(255, 255, 255, 0.22);
}


/* ---------------------------------------------------------
   Frosted Glas
   --------------------------------------------------------- */

.mhl-glass--frost {
    background:
        rgba(245, 251, 250, 0.64);

    border-color:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 20px 60px rgba(6, 37, 54, 0.12);

    backdrop-filter:
        blur(var(--mhl-glass-blur-heavy))
        saturate(125%);

    -webkit-backdrop-filter:
        blur(var(--mhl-glass-blur-heavy))
        saturate(125%);
}


/* ---------------------------------------------------------
   Glas-Karte
   --------------------------------------------------------- */

.mhl-glass-card {
    position: relative;

    overflow: hidden;

    padding: var(--mhl-space-5);

    border-radius:
        var(--mhl-radius-lg);

    background:
        var(--mhl-glass-light);

    border:
        1px solid var(--mhl-glass-border);

    box-shadow:
        var(--mhl-glass-shadow);

    backdrop-filter:
        blur(20px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(140%);

    transition:
        transform var(--mhl-transition-base),
        box-shadow var(--mhl-transition-base),
        background var(--mhl-transition-base);
}

.mhl-glass-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            transparent 45%
        );

    pointer-events: none;
}

.mhl-glass-card:hover {
    transform:
        translateY(-4px);

    background:
        rgba(255, 255, 255, 0.22);

    box-shadow:
        var(--mhl-glass-shadow-heavy);
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .mhl-glass-card {
        transition: none;
    }

    .mhl-glass-card:hover {
        transform: none;
    }

}