/* TEMPORARY TEST - DELETE LATER */
body {
    border: 5px solid red !important;
}

/* 1. HERO-BEREICH */
body .elementor-element.klang-hero {
    background: linear-gradient(135deg, rgba(24, 30, 45, 0.9), rgba(53, 92, 125, 0.9)) !important;
    border-radius: 20px !important;
    padding: 60px 40px !important;
    color: #ffffff !important;
    margin-bottom: 50px !important;
}

body .elementor-element.klang-hero h1, 
body .elementor-element.klang-hero h2, 
body .elementor-element.klang-hero .elementor-heading-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* 2. MODUL-GRID */
body .elementor-element.klang-grid {
    gap: 30px !important;
}

/* 3. WORKSHOP-KARTEN */
body .elementor-element.klang-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 35px 25px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Hover-Effekt: Karte hebt sich edel an */
body .elementor-element.klang-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* 4. INHALTS-ANPASSUNGEN IN DEN KARTEN */
body .klang-card h3 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
}

body .klang-card .elementor-icon-list-items {
    margin-bottom: 20px !important;
}

body .klang-card .elementor-icon-list-item {
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}

/* Mobile Optimierung: Auf Smartphones weniger Padding im Hero */
@media (max-width: 767px) {
    body .elementor-element.klang-hero {
        padding: 30px 20px !important;
    }
}