/* ==========================================================================
   RI-SE Glass Effects
   Moderne Glas-/Verlauf-Optik für die Stats-Section und die navyfarbenen
   Buttons (.btn / .btn-outline) auf den Produktseiten.

   - Wird NACH css/style.css und css/enterprise-theme.css geladen.
   - Wirkt seitenweit auf die o.g. Klassen.
   - Schützt explizit die hellen Buttons im dunklen .cta-banner.
   ========================================================================== */

/* ---------- Stats-Section ------------------------------------------------- */

.stats-section {
    position: relative;
    background:
        radial-gradient(900px 360px at 12% -10%, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0) 60%),
        radial-gradient(700px 320px at 95% 110%, rgba(125, 211, 252, 0.18) 0%, rgba(125, 211, 252, 0) 60%),
        linear-gradient(135deg, #07264a 0%, #0b3b6e 55%, #0f4c85 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Sehr feines Raster für mehr Tiefe – am Rand sanft ausgeblendet */
.stats-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 75%);
            mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
    z-index: 0;
}

.stats-section .container {
    position: relative;
    z-index: 1;
}

/* Glassmorphism-Karte mit Verlauf, Lichtkante oben und Backdrop-Blur */
.stat-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 20px 40px -20px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}

/* Dezenter Glanz-Sweep am oberen Rand */
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
    opacity: 0.7;
    pointer-events: none;
}

/* Animierter, kaum sichtbarer Halo, der bei Hover stärker wird */
.stat-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.45) 0%, rgba(125, 211, 252, 0) 40%, rgba(167, 139, 250, 0) 60%, rgba(167, 139, 250, 0.45) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-4px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 28px 50px -22px rgba(0, 0, 0, 0.55);
}

.stat-card:hover::after {
    opacity: 1;
}

/* Icon-Tile als kleines Glas-Plättchen mit weichem Glow */
.stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 10px 24px -14px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.stat-card:hover .stat-icon {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 0 0 4px rgba(125, 211, 252, 0.12),
        0 14px 28px -14px rgba(0, 0, 0, 0.6);
}

/* Zahlen mit feinem hellen Verlauf für Premium-Look */
.stat-number {
    background: linear-gradient(180deg, #ffffff 0%, #cfe3f7 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    letter-spacing: -0.02em;
}

.stat-label {
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.02em;
}

/* ---------- Buttons (navy) im gleichen Glas-Look ------------------------- */
/* Wirkt auf alle .btn / .btn-outline der Seite. Die hellen Buttons im
   dunklen .cta-banner ganz unten bleiben unverändert (höhere Spezifität
   in style.css gewinnt; pseudo-Dekorationen werden weiter unten explizit
   unterdrückt). */

.btn {
    position: relative;
    background:
        linear-gradient(135deg, #155a99 0%, #0b3b6e 55%, #07264a 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 14px 28px -14px rgba(7, 38, 74, 0.55),
        0 2px 6px rgba(7, 38, 74, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    isolation: isolate;
}

/* Feiner Glanz-Sweep oben innen */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

/* Animierter Halo-Ring (cyan -> violett) – erscheint bei Hover */
.btn::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.55) 0%, rgba(125, 211, 252, 0) 40%, rgba(167, 139, 250, 0) 60%, rgba(167, 139, 250, 0.55) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

/* Beschriftung über die Pseudo-Layer heben */
.btn > * {
    position: relative;
    z-index: 2;
}

.btn:hover {
    transform: translateY(-2px);
    background:
        linear-gradient(135deg, #1e6fb3 0%, #0f4c85 55%, #0b3b6e 100%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 22px 40px -18px rgba(7, 38, 74, 0.65),
        0 4px 10px rgba(7, 38, 74, 0.3);
}

.btn:hover::after {
    opacity: 1;
}

/* Outline-Variante – sekundäre Hierarchie, gleiche Familie */
.btn-outline {
    background:
        linear-gradient(180deg, rgba(11, 59, 110, 0.04) 0%, rgba(11, 59, 110, 0.08) 100%);
    color: var(--primary);
    border: 1px solid rgba(11, 59, 110, 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 6px 16px -10px rgba(7, 38, 74, 0.25);
}

.btn-outline::before {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 45%);
    opacity: 0.6;
}

.btn-outline:hover {
    background:
        linear-gradient(135deg, #155a99 0%, #0b3b6e 55%, #07264a 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 18px 32px -16px rgba(7, 38, 74, 0.55),
        0 3px 8px rgba(7, 38, 74, 0.28);
}

.btn-outline:hover::after {
    opacity: 1;
}

/* Sicherheitsnetz: Buttons im hellen CTA-Banner bleiben weiß –
   die Glas-Pseudo-Layer dort ausblenden, damit die Optik nicht kippt. */
.cta-banner .btn::before,
.cta-banner .btn::after,
.cta-banner .btn-outline::before,
.cta-banner .btn-outline::after {
    content: none;
}