/*
 * Glass Effect für Enfold Spalte
 *
 * ANLEITUNG:
 * 1. Im Enfold Builder einer Spalte die Custom CSS Class geben: glass / glass-dark / glass-strong
 * 2. Dieses CSS unter Enfold → Theme Options → General Styling → Quick CSS einfügen
 *    (oder in die style.css des Child-Themes)
 *
 * WICHTIG: Die Spalte darf KEINE eigene Hintergrundfarbe haben (muss transparent bleiben),
 *          sonst überdeckt sie den Blur-Effekt.
 */

/* ══════════════════════════════════════
   Glass Light — CSS Class: glass
   ══════════════════════════════════════ */

/* Auf der Spalte selbst */
.glass.flex_column,
.glass .flex_column,
.glass.av-column-section,
.glass > .avia-column-inner,
.glass > .av-column-section-inner {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    padding: 2.5rem !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Falls die Klasse direkt auf einem div ohne Enfold-Struktur liegt */
.glass {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.glass:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}


/* ══════════════════════════════════════
   Glass Dark — CSS Class: glass-dark
   ══════════════════════════════════════ */

.glass-dark.flex_column,
.glass-dark .flex_column,
.glass-dark.av-column-section,
.glass-dark > .avia-column-inner,
.glass-dark > .av-column-section-inner {
    background: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    padding: 2.5rem !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.glass-dark {
    background: rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.glass-dark:hover {
    background: rgba(0, 0, 0, 0.12) !important;
}


/* ══════════════════════════════════════
   Glass Strong — CSS Class: glass-strong
   ══════════════════════════════════════ */

.glass-strong.flex_column,
.glass-strong .flex_column,
.glass-strong.av-column-section,
.glass-strong > .avia-column-inner,
.glass-strong > .av-column-section-inner {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(30px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    padding: 2.5rem !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.glass-strong {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(30px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 20px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    overflow: hidden;
    transition: all 0.3s ease;
}


/* ══════════════════════════════════════
   Fix: Enfold setzt manchmal eigene BGs
   auf innere Elemente — die müssen weg
   ══════════════════════════════════════ */

.glass .avia-column-inner,
.glass .av-column-section-inner,
.glass-dark .avia-column-inner,
.glass-dark .av-column-section-inner,
.glass-strong .avia-column-inner,
.glass-strong .av-column-section-inner {
    background: transparent !important;
}