/* ==========================================================
   3D-WUNSCHMANUFAKTUR
   GLASS SYSTEM
========================================================== */



/* ==========================================================
   LIGHT GLASS
   Header
========================================================== */

.glass-light{

    position:relative;

    overflow:visible;

    border-radius:28px;

    background:rgba(22,30,42,.32);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

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

    box-shadow:

        0 14px 32px rgba(0,0,0,.28);

}



/* ==========================================================
   SOLID GLASS
   Hauptbereiche
========================================================== */

.glass-solid{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:rgba(18,25,36,.46);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:

        0 30px 70px rgba(0,0,0,.34);

}



/* ==========================================================
   FLOATING GLASS
   Karten
========================================================== */

.glass-floating{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:rgba(20,28,40,.52);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:

        0 18px 45px rgba(0,0,0,.30);

}



/* ==========================================================
   MATERIAL EDGE
========================================================== */

.glass-solid::before,
.glass-floating::before{

    content:"";

    position:absolute;

    left:1px;
    right:1px;
    top:1px;

    height:2px;

    border-radius:inherit;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.04),

            rgba(255,255,255,.20),

            rgba(255,255,255,.04)

        );

}



/* ==========================================================
   INNER DEPTH
========================================================== */

.glass-solid::after,
.glass-floating::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        inset 0 -1px 0 rgba(0,0,0,.18);

}