Prompts v2

/* Prompts CSS für echte Klassen - CompactGrid Loop Widget */

/* Grid Container optimieren */
.elementor-widget-compactgrid_loop_mod {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 0 -10px !important;
}

/* Cards (artikel.post) stylen */
.elementor-widget-compactgrid_loop_mod article.post {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #e1e5e9 !important;
    margin: 0 10px 20px 10px !important;
    flex: 1 1 300px !important;
    box-sizing: border-box !important;
}

.elementor-widget-compactgrid_loop_mod article.post:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Responsive Grid */
@media (min-width: 1024px) {
    .elementor-widget-compactgrid_loop_mod article.post {
        flex: 1 1 calc(33.333% - 20px) !important;
        max-width: calc(33.333% - 20px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .elementor-widget-compactgrid_loop_mod article.post {
        flex: 1 1 calc(50% - 20px) !important;
        max-width: calc(50% - 20px) !important;
    }
}

@media (max-width: 767px) {
    .elementor-widget-compactgrid_loop_mod {
        flex-direction: column !important;
        margin: 0 !important;
    }
    
    .elementor-widget-compactgrid_loop_mod article.post {
        flex: none !important;
        margin: 0 0 15px 0 !important;
        max-width: 100% !important;
    }
}

/* Buttons in Posts stylen */
.elementor-widget-compactgrid_loop_mod article.post button,
.elementor-widget-compactgrid_loop_mod article.post .button,
.elementor-widget-compactgrid_loop_mod article.post [class*="btn"] {
    background: #667eea !important;
    color: white !important;
    border: 1px solid #667eea !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.elementor-widget-compactgrid_loop_mod article.post button:hover,
.elementor-widget-compactgrid_loop_mod article.post .button:hover,
.elementor-widget-compactgrid_loop_mod article.post [class*="btn"]:hover {
    background: #5a6fd8 !important;
    border-color: #5a6fd8 !important;
    transform: translateY(-1px) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Content in Cards optimieren */
.elementor-widget-compactgrid_loop_mod article.post .post-content,
.elementor-widget-compactgrid_loop_mod article.post .content {
    background: #f8f9fa !important;
    border: 1px solid #e1e5e9 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    white-space: pre-wrap !important;
    max-height: 120px !important;
    overflow-y: auto !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}

/* Titel und Meta-Infos */
.elementor-widget-compactgrid_loop_mod article.post h2,
.elementor-widget-compactgrid_loop_mod article.post h3,
.elementor-widget-compactgrid_loop_mod article.post .title {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.elementor-widget-compactgrid_loop_mod article.post .excerpt,
.elementor-widget-compactgrid_loop_mod article.post .description {
    color: #666 !important;
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
}