/* =========================================================================
   MOND UNIFIED DESIGN SYSTEM (ULTIMATE RADIANT & SEAMLESS MASTER)
   Urheberrecht: Copyright © 2026 Mario Berg (MOND.TV)
   ========================================================================= */

html, body {
    background-color: #0b0f19 !important;
    background-image: 
        /* 📺 Dezente Interlace-Scanlines */
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%),
        /* Kosmischer, weicher Orbital-Glow */
        radial-gradient(ellipse 90% 60% at 50% -20%, rgba(31, 111, 235, 0.38) 0%, rgba(11, 15, 25, 0) 70%),
        radial-gradient(circle at 15% 85%, rgba(137, 87, 229, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(56, 189, 248, 0.1) 0%, transparent 45%) !important;
    background-size: 100% 3px, 100% 100%, 100% 100%, 100% 100% !important;
    background-attachment: fixed !important;
    color: #c9d1d9;
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    min-height: 100vh;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

.mond-container {
    width: 100% !important;
    max-width: 1050px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 1;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .mond-container { padding: 0 !important; }
    .mond-tier-accordion, .mond-card, .pf-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 📺 SANFTER RETRO-TV EINBLENDE-EFFEKT */
@keyframes mondRetroTvStartup {
    0% {
        opacity: 0;
        transform: scaleY(0.01) scaleX(0.92);
        filter: brightness(2.5) blur(5px);
    }
    50% {
        opacity: 0.7;
        transform: scaleY(0.05) scaleX(1.01);
        filter: brightness(1.6) blur(2px);
    }
    100% {
        opacity: 1;
        transform: scaleY(1) scaleX(1);
        filter: brightness(1) blur(0);
    }
}

/* 🛸 DIE KAPSELN MIT NAHTLOSER VERSCHMELZUNG */
.mond-tier-accordion, .mond-card, .clean-card {
    background: rgba(13, 17, 23, 0.88) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 6px !important;
    padding: 12px;
    margin-bottom: -1px !important; /* Nahtloses Ineinandergreifen */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    animation: mondRetroTvStartup 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: all 0.4s ease;
}

/* Oberste Linie komplett unsichtbar für einen sauberen Look oben */
.mond-container > *:first-child,
.mond-tier-accordion:first-of-type,
.mond-card:first-of-type {
    border-top: none !important;
}

.mond-tier-accordion:hover, .mond-card:hover {
    z-index: 10;
}

/* =========================================================================
   HHAUCHZARTE 1PX-LINIEN MIT GANZ SANFTEM RADIANT-SCHIMMER
   ========================================================================= */
details.mond-tier-accordion,
div.mond-card,
.clean-card,
[style*="border"] {
    border-width: 1px !important;
    border-style: solid !important;
    /* Extrem dezenter, fließender Radiant-Farbverlauf (kaum sichtbar, aber ultra-edel) */
    border-image: linear-gradient(90deg, rgba(56, 189, 248, 0.25), rgba(137, 87, 229, 0.25), rgba(56, 189, 248, 0.08)) 1 !important;
}

/* Ampel- und Blau-Akzente mit sehr weichem, tiefen Glow */
details.mond-tier-accordion[data-tier="0"], .tier-0, .clean-card[data-tier="0"], [style*="border"][data-tier="0"] {
    box-shadow: 0 0 24px rgba(29, 78, 216, 0.12), inset 0 0 10px rgba(56, 189, 248, 0.03) !important;
}

details.mond-tier-accordion[data-tier="1"], .tier-1, .clean-card[data-tier="1"], [style*="border"][data-tier="1"] {
    box-shadow: 0 0 24px rgba(21, 128, 61, 0.12), inset 0 0 10px rgba(74, 222, 128, 0.03) !important;
}

details.mond-tier-accordion[data-tier="2"], .tier-2, .clean-card[data-tier="2"], [style*="border"][data-tier="2"] {
    box-shadow: 0 0 24px rgba(180, 83, 9, 0.12), inset 0 0 10px rgba(250, 204, 21, 0.03) !important;
}

details.mond-tier-accordion[data-tier="3"], .tier-3, .clean-card[data-tier="3"], [style*="border"][data-tier="3"] {
    box-shadow: 0 0 24px rgba(185, 28, 28, 0.12), inset 0 0 10px rgba(248, 113, 113, 0.03) !important;
}

.mond-tier-accordion summary, .mond-card summary, .clean-summary {
    background: #161b22 !important;
    border: 1px solid rgba(48, 54, 61, 0.35) !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    list-style: none !important;
    transition: all 0.3s ease;
}

.mond-tier-accordion summary:hover, .clean-summary:hover {
    background: #1c2128 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}