/* ========================================================================
 🧬 AQUASTUDIO PRO V3.1 — MULTI-RESPONSIVE CYBERPUNK PIPELINE (TOTAL FIX)
 ======================================================================== */
body {
    margin: 0;
    padding: 0;
    background: #13131F;
    overflow-x: hidden;
    font-family: 'Consolas', monospace;
    color: #E8E8F0;
}

/* ========================================================================
 📡 BRAND-LOGO MATRIX (FIXIERTE BRANDING-ZONE)
 ======================================================================== */
img[src*="aqua_logo_trans.png"],
.main-brand-logo, 
.cyber-header img {
    position: absolute !important;
    top: 25px !important;
    left: 25px !important;
    width: 85px !important; 
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    z-index: 99999 !important;
}

/* ⚡ HIER UPGRADED: Padding bleibt tief für maximale Tiefenwirkung! */
.cyber-header {
    position: relative;
    text-align: center;
    padding: 110px 20px 10px 20px;
}

/* ⚡ DIE ANKER-REPARATUR: Verankert den Punkt dauerhaft an der Unterkante eures 85px Logos! */
.cyber-header::before {
    content: '';
    position: absolute;
    top: 102px !important; 
    left: 102px !important;
    width: 8px;
    height: 8px;
    background: #00FF66; 
    border-radius: 50%;
    box-shadow: 0 0 10px #00FF66, 0 0 20px rgba(0, 255, 102, 0.5);
    z-index: 100000;
    animation: terminal-pulse 2s infinite ease-in-out;
}

@keyframes terminal-pulse {
    0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 8px #00FF66; }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 18px #00FF66, 0 0 30px rgba(0, 255, 102, 0.8); }
    100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 8px #00FF66; }
}

.card-content .box-logo {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 50px !important;
    height: auto !important;
    margin: 0 auto 15px auto !important;
}

/* ========================================================================
 🌐 HORIZONTALE SPRACH-ZEILE & HEADER-LOGIK
 ======================================================================== */
.cyber-lang-dropdown {
    width: 100%;
    text-align: center;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
}

.dropdown-trigger {
    background: transparent;
    border: none;
    color: #00FFCC;
    cursor: pointer;
    font-family: 'Consolas', monospace;
    font-size: 13px;
    font-weight: bold;
}

.dropdown-content {
    display: inline-block;
    margin-left: 10px;
}

.dropdown-content a {
    color: #7777AA;
    text-decoration: none !important; 
    margin: 0 10px;
    font-size: 13px;
    transition: color 0.3s ease;
}

.dropdown-content a:hover {
    color: #00FFCC;
}

.cyber-logo {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    color: #00FFCC;
    text-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
    margin: 0;
}

.cyber-subtitle {
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: #7777AA;
    margin: 5px 0 0 0;
    text-transform: uppercase;
    position: relative; 
    animation: textGlitch 6s infinite ease-in-out;
}


#dynamicDownloadGrid {
    width: 100%;
    max-width: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
}
/* ========================================================================
 🏁 DESKTOP-BASE: DIE 3D-KONSOLEN-NEIGUNG (CSS-GRID RESOLUTION PIPELINE)
 ======================================================================== */
.cyber-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 300px) !important; /* Spaltenbreite starr auf 300px zementiert! */
    justify-content: center !important; 
    align-items: flex-start !important;
    
    gap: 4vw !important; /* Flexibler Abstand für Standard-Desktops */
    width: 100% !important;
    max-width: 95vw !important; 
    margin: 0 auto !important;
    padding: 100px 20px 140px 20px !important;
    
    transform: perspective(3000px) rotateX(7deg) rotateY(-8deg) skewX(-4deg) !important;
    transform-style: preserve-3d !important;
    animation: reaktor-turbofluss 7s infinite ease-in-out !important;
}

/* 📦 DIE MECHANISCHEN KACHELN (ORIGINAL-PROPORTION HOCHSICHER VERRIEGELT) */
.cyber-card {
    width: 300px !important;
    max-width: 300px !important;
    height: 440px !important; /* Echte Kachel-Proportion, kein Kaugummi-Effekt! */
    perspective: 1000px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transform-style: preserve-3d !important;
}

/* 👑 3D-TREPPE: Räumliche Stufen-Staffelung */
.cyber-card.core { transform: translateY(60px) !important; }
.cyber-card.premium { transform: translateY(30px) !important; }
.cyber-card.pro { transform: translateY(0px) !important; }

/* ========================================================================
 🖥️ EXTENSION A: HIGH-END ULTRAWIDE TUNING (Für Monitore ab 2560px wie dein 32")
 ======================================================================== */
@media (min-width: 2560px) {
    .cyber-grid {
        /* Drückt die 300px-Karten unbarmherzig nach außen, um UltraWide perfekt auszufüllen! */
        gap: 12vw !important; 
        max-width: 90vw !important;
        padding-top: 120px !important;
    }
    .cyber-card {
        height: 440px !important; /* Verriegelt eure Originalhöhe absolut starr! */
    }
}

/* ========================================================================
 🎮 KACHEL-INNENLEBEN, ANIMATIONEN & HOVER-EFFEKTEN
 ======================================================================== */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: #18182B;
    border: 1px solid #3a3a60;
    border-radius: 8px;
    padding: 30px;
    box-sizing: border-box;
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.cyber-card.core .card-inner { 
    box-shadow: inset 8px 0 0 0 #00b3a1, inset 0 -8px 0 0 #00b3a1, 5px 5px 25px rgba(0, 255, 204, 0.15); 
    animation: pulse-cyan 3s infinite alternate !important; 
}
.cyber-card.premium .card-inner { 
    box-shadow: inset 8px 0 0 0 #8e00e6, inset 0 -8px 0 0 #8e00e6, 5px 5px 25px rgba(189, 0, 255, 0.15); 
    animation: pulse-magenta 3.5s infinite alternate !important; 
}
.cyber-card.pro .card-inner { 
    box-shadow: inset 8px 0 0 0 #cc3c00, inset 0 -8px 0 0 #cc3c00, 5px 5px 25px rgba(255, 85, 0, 0.15); 
    animation: pulse-orange 4s infinite alternate !important; 
}

/* ZITTERFREIER 3D-VORSPRUNG BEIM HOVERN */
.cyber-card:hover { z-index: 999 !important; }

.cyber-card.core:hover .card-inner { 
    transform: translateZ(40px) !important; border-color: #00FFCC !important; 
    box-shadow: -20px -20px 40px rgba(0, 255, 204, 0.4), 20px -20px 40px rgba(0, 255, 204, 0.4), 15px 15px 30px rgba(0, 0, 0, 0.5) !important; 
}
.cyber-card.premium:hover .card-inner { 
    transform: translateZ(40px) !important; border-color: #bd00ff !important; 
    box-shadow: -20px -20px 40px rgba(189, 0, 255, 0.4), 20px -20px 40px rgba(189, 0, 255, 0.4), 15px 15px 30px rgba(0, 0, 0, 0.5) !important; 
}
.cyber-card.pro:hover .card-inner { 
    transform: translateZ(40px) !important; border-color: #ff5500 !important; 
    box-shadow: -20px -20px 40px rgba(255, 85, 0, 0.4), 20px -20px 40px rgba(255, 85, 0, 0.4), 15px 15px 30px rgba(0, 0, 0, 0.5) !important; 
}

.scanline { 
    position: absolute; top: -100%; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.03), transparent); 
}
.cyber-card:hover .scanline { animation: scan 1.2s linear infinite; }

/* ========================================================================
 📊 KACHEL-CONTENT & COCKPIT-FINALE (BUTTON-ANKER AN DER UNTERKANTE)
 ======================================================================== */
.card-content { 
    display: flex !important; 
    flex-direction: column !important; 
    height: 100% !important; 
}
.card-content p { 
    flex-grow: 1 !important; 
    margin-bottom: auto !important; 
    font-size: 0.85rem; 
    line-height: 1.5; 
    color: #7777AA; 
    padding: 0 5px;
}

.badge { font-size: 0.75rem; letter-spacing: 2px; margin-bottom: 15px; color: #7777AA; font-weight: bold; padding-left: 5px; }
h3 { margin: 0 0 15px 0; font-size: 1.5rem; color: #FFFFFF; padding-left: 5px; }
.price { font-size: 2.2rem; font-weight: bold; margin-bottom: 20px; color: #FFFFFF; padding-left: 5px; }

.premium-ribbon { position: absolute; top: 15px; right: 15px; background: #bd00ff; color: #fff; font-size: 10px; font-weight: bold; padding: 4px 8px; border-radius: 3px; letter-spacing: 1px; z-index: 3; }
.in-app-badge-3d { position: absolute; top: 15px; right: 15px; border: 1px dashed #ff5500; color: #ff5500; font-size: 10px; font-weight: bold; padding: 4px 8px; border-radius: 3px; z-index: 3; }

/* Schweißt die Buttons unlösbar bündig an die farbigen Gehäuse-Unterkanten */
.buy-btn, .in-app-lock { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    padding: 12px 10px !important; 
    font-size: 11px !important; 
    font-weight: bold !important; 
    letter-spacing: 1px !important; 
    white-space: nowrap !important;
    margin-top: auto !important; 
    margin-bottom: -15px !important; 
    background: #0F0F1E; 
    border: 1px solid #22223A; 
    border-radius: 4px; 
    transition: all 0.3s ease; 
    box-sizing: border-box; 
    width: 100%; 
    color: #E8E8F0;
    text-decoration: none !important;
}

.cyber-card.core .buy-btn { border-color: #00FFCC; color: #00FFCC; }
.cyber-card.premium .buy-btn { border-color: #bd00ff; color: #bd00ff; }
.cyber-card.pro .buy-btn { border-color: #ff5500; color: #ff5500; }

.buy-btn:hover { 
    background: #224422 !important; 
    color: #00CC66 !important; 
    border-color: #00CC66 !important;
    box-shadow: 0 0 15px rgba(0, 204, 102, 0.3) !important;
}

.buy-btn span, .in-app-lock span, .buy-btn img { display: inline-block !important; vertical-align: middle !important; line-height: 1 !important; }

.buy-btn::before, .in-app-lock::before {
    content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 30% !important; height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important; transition: none !important;
}
.buy-btn:hover::before, .in-app-lock:hover::before { left: 150% !important; transition: left 0.5s ease-in-out !important; }
/* ========================================================================
 🌎 UNIVERSELLER FOOTER FÜR RECHTSTEXTE
 ======================================================================== */
.cyber-footer {
    border-top: 1px solid #22223A;
    background: #0F0F1E;
    padding: 40px 20px;
    text-align: center;
    font-size: 11px;
    margin-top: 130px; 
}
.footer-nav { margin-bottom: 20px; }
.footer-nav a { color: #7777AA; text-decoration: none !important; margin: 0 15px; transition: color 0.3s; }
.footer-nav a:hover { color: #00FFCC; text-shadow: 0 0 5px #00FFCC; }
.footer-copyright { color: #4E4E6A; letter-spacing: 1px; }
.footer-highlight { color: #7777AA; }

/* ========================================================================
 🌀 CORE ENGINE KEYFRAMES
 ======================================================================== */
@keyframes scan { 0% { top: -100%; } 100% { top: 100%; } }
@keyframes textGlitch {
    0%, 94%, 98%, 100% { text-shadow: none; color: #7777AA; }
    55% { text-shadow: 2px 0 #FF0055, -2px 0 #00FFCC; color: #FFFFFF; }
    57% { text-shadow: -2px 0 #FF0055, 2px 0 #00FFCC; color: #E8E8F0; }
}
@keyframes reaktor-turbofluss {
    0%, 100% { background: radial-gradient(circle at center, rgba(30, 30, 55, 0.2) 0%, rgba(19, 19, 31, 0) 60%) !important; }
    50% { background: radial-gradient(circle at center, rgba(40, 40, 75, 0.45) 0%, rgba(19, 19, 31, 0) 75%) !important; }
}
@keyframes pulse-cyan {
    0% { box-shadow: inset 8px 0 0 0 #00b3a1, inset 0 -8px 0 0 #00b3a1, 5px 5px 2px rgba(0, 255, 204, 0.1) !important; background: #18182B !important; }
    100% { box-shadow: inset 8px 0 0 0 #00FFCC, inset 0 -8px 0 0 #00FFCC, 0 0 35px rgba(0, 255, 204, 0.45) !important; background: #1D233A !important; }
}
@keyframes pulse-magenta {
    0% { box-shadow: inset 8px 0 0 0 #8e00e6, inset 0 -8px 0 0 #8e00e6, 5px 5px 2px rgba(189, 0, 255, 0.1) !important; background: #18182B !important; }
    100% { box-shadow: inset 8px 0 0 0 #ca33ff, inset 0 -8px 0 0 #bd00ff, 0 0 35px rgba(189, 0, 255, 0.45) !important; background: #221D3A !important; }
}
@keyframes pulse-orange {
    0% { box-shadow: inset 8px 0 0 0 #cc3c00, inset 0 -8px 0 0 #cc3c00, 5px 5px 2px rgba(255, 85, 0, 0.1) !important; background: #18182B !important; }
    100% { box-shadow: inset 8px 0 0 0 #ff7733, inset 0 -8px 0 0 #ff5500, 0 0 35px rgba(255, 85, 0, 0.45) !important; background: #281B24 !important; }
}

/* ========================================================================
 📱 EXTENSION B: CYBERPUNK RESPONSIVE MATRIX (TABLET & SMARTPHONE PIPELINE)
 ======================================================================== */
@media screen and (max-width: 1024px) {
    img[src*="aqua_logo_trans.png"], .main-brand-logo, .cyber-header img {
        position: relative !important; top: 0 !important; left: 0 !important; margin: 0 auto 20px auto !important;
    }
    .cyber-header { padding: 40px 15px 10px 15px; }
    .cyber-logo { font-size: 2.2rem; }
    /* TABLET-MODUS: Zieht das zickige Grid fliegend zurück auf Flexbox um */
    .cyber-grid { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        transform: none !important; 
        gap: 30px !important; 
        padding: 30px 15px 60px 15px !important; 
    }
    .cyber-card.core, .cyber-card.premium, .cyber-card.pro { transform: translateY(0px) !important; }
    .buy-btn, .in-app-lock { margin-bottom: 0 !important; margin-top: 20px !important; }
}

@media screen and (max-width: 768px) {
    .cyber-logo { font-size: 1.8rem; letter-spacing: 3px; }
    .cyber-subtitle { font-size: 0.75rem; letter-spacing: 1px; }
    
    /* SMARTPHONE-MODUS: Saubere, zentrierte Einspaltigkeit */
    .cyber-grid { 
        display: grid !important;
        grid-template-columns: 1fr !important; 
        align-items: center !important; 
        justify-content: center !important; 
        gap: 35px !important; 
        transform: none !important; 
        padding: 30px 15px 60px 15px !important;
    }
    
    .cyber-card { width: 100% !important; max-width: 320px !important; height: auto !important; }
    .card-inner { padding: 25px 20px; height: auto !important; }
    .card-content { height: auto !important; }
    p { margin-bottom: 20px !important; }
    .price { margin-top: 15px !important; margin-bottom: 15px !important; font-size: 2rem; }
    .cyber-card:hover { transform: scale(1.02) !important; }
    
    .cyber-card:hover .card-inner { transform: none !important; box-shadow: 0 0 20px rgba(0, 255, 204, 0.3) !important; }
    .cyber-card.premium:hover .card-inner { box-shadow: 0 0 20px rgba(189, 0, 255, 0.3) !important; }
    .cyber-card.pro:hover .card-inner { box-shadow: 0 0 20px rgba(255, 85, 0, 0.3) !important; }
    .buy-btn, .in-app-lock { margin-bottom: 0 !important; margin-top: 20px !important; }
}
/* ========================================================================
 🌌 COCKPIT-ZUSATZ: DEZENTER MATRIX-CODE-REGEN (KINETHISCHER HINTERGRUND)
 ======================================================================== */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Erzeugt feine, vertikale Digital-Adern */
    background: linear-gradient(90deg, 
        rgba(0, 255, 204, 0.04) 1px, transparent 1px,
        transparent 40px, rgba(189, 0, 255, 0.02) 41px, transparent 41px
    );
    background_size: 80px 100%;
    
    /* Eine fast unsichtbare Matrix-Regen-Ebene, die dezent von oben nach unten fließt */
    background-image: linear-gradient(0deg, 
        transparent 0%, 
        rgba(0, 255, 204, 0.03) 50%, 
        transparent 100%
    );
    background-size: 100% 400px;
    
    z-index: -1; /* Liegt felsenfest hinter euren Karten! */
    pointer-events: none; /* Blockiert keine Klicks oder Buttons */
    animation: cyber-regen-fluss 14s linear infinite;
}

@keyframes cyber-regen-fluss {
    0% { background-position: 0 0; }
    100% { background-position: 0 1600px; }
}