/* ============================================================
   Liquid-Glass — Wiederverwendbare Glas-Optik
   ============================================================ */

.glas {
    position: relative;
    background: var(--glas-bg);
    border: 1px solid var(--glas-rand);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
        var(--schatten-md),
        inset 0 1px 0 var(--glas-glanz),
        inset 0 0 0 1px rgba(255,255,255,0.02);
    overflow: hidden;
    isolation: isolate;
}

/* Heller Glanz oben — gibt das "Glas"-Gefühl */
.glas::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.02) 40%,
        rgba(255,255,255,0)    100%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="hell"] .glas::before {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.40) 40%,
        rgba(255,255,255,0)    100%);
}

.glas > * { position: relative; z-index: 1; }

.glas-stark {
    background: var(--glas-bg-stark);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
}

.glas-klein {
    border-radius: var(--radius);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* Fallback für Browser ohne backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    .glas { background: var(--bg-erhoben); }
}