/* Hover-Effekte für alle Listencontainer - FARBLICH ANGEPASSTE VERSION */

/* Grundlegende Übergänge für alle Container */
.list-container,
.list-container2,
.list-container3 {
    transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, box-shadow, background-color;
    transform-origin: center;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Verstärkter Hover-Effekt für Container 1 (Blau) */
.list-container:hover {
    transform: scale(1.03) translateY(-7px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(106, 165, 216, 0.25);
    z-index: 5;
    background-color: #ffffff;
}

/* Verstärkter Hover-Effekt für Container 2 (Grün) */
.list-container2:hover {
    transform: scale(1.03) translateY(-7px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(46, 125, 50, 0.25);
    z-index: 5;
    background-color: #ffffff;
}

/* Verstärkter Hover-Effekt für Container 3 (Hellblau) */
.list-container3:hover {
    transform: scale(1.03) translateY(-7px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(21, 101, 192, 0.3);
    z-index: 5;
    background-color: #ffffff;
}

/* Hellerer Glüh-Effekt - Container 1 (Blau) */
.list-container:hover::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #a1d6ff, #6aa5d8, #a1d6ff);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.2;
    filter: blur(15px);
    animation: gradientMove 4s linear infinite;
    pointer-events: none;
}

/* Hellerer Glüh-Effekt - Container 2 (Grün) */
.list-container2:hover::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #c8e6c9, #2e7d32, #c8e6c9);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.2;
    filter: blur(15px);
    animation: gradientMove 4s linear infinite;
    pointer-events: none;
}

/* Hellerer Glüh-Effekt - Container 3 (Hellblau) */
.list-container3:hover::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #e3f2fd, #1565c0, #e3f2fd);
    z-index: -1;
    border-radius: 10px;
    opacity: 0.25;
    filter: blur(15px);
    animation: gradientMove 4s linear infinite;
    pointer-events: none;
}

@keyframes gradientMove {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 130% 0%;
    }
}

/* Bessere Sichtbarkeit der Listenelemente beim Hover - Container 1 (Blau) */
.list-container:hover .feature-list li {
    color: #6aa5d8;
    /* Exakte Blau-Farbe von Container 1 */
    transform: translateX(5px);
    transition: all 0.75s ease;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.2px;
}

/* Bessere Sichtbarkeit der Listenelemente beim Hover - Container 2 (Grün) */
.list-container2:hover .feature-list li {
    color: #2e7d32;
    /* Exakte Grün-Farbe von Container 2 */
    transform: translateX(5px);
    transition: all 0.75s ease;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.2px;
}

/* Bessere Sichtbarkeit der Listenelemente beim Hover - Container 3 (Hellblau) */
.list-container3:hover .feature-list li {
    color: #1565c0;
    /* Exakte Hellblau-Farbe von Container 3 */
    transform: translateX(5px);
    transition: all 0.75s ease;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.8);
    letter-spacing: 0.2px;
}

/* Angepasster Icon-Effekt - Container 1 (Blau) */
.list-container:hover .feature-list li i {
    transform: scale(1.2) rotate(5deg);
    color: #6aa5d8;
    /* Exakte Blau-Farbe von Container 1 */
    text-shadow: 0 0 10px rgba(106, 165, 216, 0.8);
}

/* Angepasster Icon-Effekt - Container 2 (Grün) */
.list-container2:hover .feature-list li i {
    transform: scale(1.2) rotate(5deg);
    color: #2e7d32;
    /* Exakte Grün-Farbe von Container 2 */
    text-shadow: 0 0 10px rgba(46, 125, 50, 0.8);
}

/* Angepasster Icon-Effekt - Container 3 (Hellblau) */
.list-container3:hover .feature-list li i {
    transform: scale(1.2) rotate(5deg);
    color: #1565c0;
    /* Exakte Hellblau-Farbe von Container 3 */
    text-shadow: 0 0 10px rgba(21, 101, 192, 0.9);
}

/* Hellere, besser sichtbare Icons für alle Container */
.feature-list li i {
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: relative;
}

/* Verbesserte Sichtbarkeit von Icons nach dem Scrollen */
.icon-check::before,
.icon-star::before,
.icon-dot::before {
    font-weight: bold;
    display: inline-block;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
    transition: all 0.75s ease;
}

.icon-star::before {
    font-size: 115%;
    color: #FFD700;
}

/* Hover-Effekt für einzelne Listenelemente */
.feature-list li {
    transition: all 0.75s ease;
    position: relative;
    padding-left: 25px;
    line-height: 1.5;
}

/* Hover-Effekt für Listenelemente - Container 1 (Blau) */
.list-container .feature-list li:hover {
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background-color: rgba(106, 165, 216, 0.12);
    /* Exakte Blau-Farbe von Container 1 mit Transparenz */
    border-radius: 4px;
    color: #6aa5d8;
    /* Exakte Blau-Farbe von Container 1 */
}

/* Hover-Effekt für Listenelemente - Container 2 (Grün) */
.list-container2 .feature-list li:hover {
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background-color: rgba(46, 125, 50, 0.12);
    /* Exakte Grün-Farbe von Container 2 mit Transparenz */
    border-radius: 4px;
    color: #2e7d32;
    /* Exakte Grün-Farbe von Container 2 */
}

/* Hover-Effekt für Listenelemente - Container 3 (Hellblau) */
.list-container3 .feature-list li:hover {
    padding-left: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background-color: rgba(21, 101, 192, 0.12);
    /* Exakte Hellblau-Farbe von Container 3 mit Transparenz */
    border-radius: 4px;
    color: #1565c0;
    /* Exakte Hellblau-Farbe von Container 3 */
}

/* Pulsierendes Highlight für Überschriften - Container 1 (Blau) */
@keyframes headingPulseBlue {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        color: #6aa5d8;
        /* Exakte Blau-Farbe von Container 1 */
    }

    100% {
        transform: scale(1);
    }
}

/* Pulsierendes Highlight für Überschriften - Container 2 (Grün) */
@keyframes headingPulseGreen {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        color: #2e7d32;
        /* Exakte Grün-Farbe von Container 2 */
    }

    100% {
        transform: scale(1);
    }
}

/* Pulsierendes Highlight für Überschriften - Container 3 (Hellblau) */
@keyframes headingPulseHellblau {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
        color: #1565c0;
        /* Exakte Hellblau-Farbe von Container 3 */
    }

    100% {
        transform: scale(1);
    }
}

/* Überschrift-Styling ohne Animation */
.list-container h3 {
    color: #6aa5d8;
    /* Exakte Blau-Farbe von Container 1 */
    transition: color 0.75s ease, text-shadow 0.75s ease;
    font-weight: 600;
}

.list-container2 h3 {
    color: #2e7d32;
    /* Exakte Grün-Farbe von Container 2 */
    transition: color 0.75s ease, text-shadow 0.75s ease;
    font-weight: 600;
}

.list-container3 h3 {
    color: #1565c0;
    /* Exakte Hellblau-Farbe von Container 3 */
    transition: color 0.75s ease, text-shadow 0.75s ease;
    font-weight: 600;
}

/* Animation beim Hover - Container 1 (Blau) */
.list-container:hover h3 {
    animation: headingPulseBlue 2.2s ease-in-out infinite;
    color: #6aa5d8;
    /* Exakte Blau-Farbe von Container 1 */
    text-shadow: 0 0 8px rgba(106, 165, 216, 0.4);
}

/* Animation beim Hover - Container 2 (Grün) */
.list-container2:hover h3 {
    animation: headingPulseGreen 2.2s ease-in-out infinite;
    color: #2e7d32;
    /* Exakte Grün-Farbe von Container 2 */
    text-shadow: 0 0 8px rgba(46, 125, 50, 0.4);
}

/* Animation beim Hover - Container 3 (Hellblau) */
.list-container3:hover h3 {
    animation: headingPulseHellblau 2.2s ease-in-out infinite;
    color: #1565c0;
    /* Exakte Hellblau-Farbe von Container 3 */
    text-shadow: 0 0 8px rgba(21, 101, 192, 0.5);
}

/* Verbesserte Sichtbarkeit nach dem Scrollen */
.list-container,
.list-container2,
.list-container3 {
    transition: transform 0.9s ease, box-shadow 0.9s ease, opacity 0.9s ease;
    opacity: 0.95;
}

.list-container:hover,
.list-container2:hover,
.list-container3:hover {
    opacity: 1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 15px 20px rgba(0, 0, 0, 0.08);
}

/* 3D-Effekt */
.tilt-effect {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Grundeinstellung für Icons - DUNKLER NORMALZUSTAND */
/* Container 1 (Blau) Icons im Normalzustand */
.list-container .icon-check::before {
    content: "✓";
    color: #6aa5d8;
    /* Exakte Blau-Farbe von Container 1, dunkler Zustand */
}

.list-container .icon-star::before {
    content: "★";
    color: #b7791f;
    font-size: 115%;
}

/* Container 2 (Grün) Icons im Normalzustand */
.list-container2 .icon-check::before {
    content: "✓";
    color: #2e7d32;
    /* Exakte Grün-Farbe von Container 2, dunkler Zustand */
}

.list-container2 .icon-star::before {
    content: "★";
    color: #b7791f;
    font-size: 115%;
}

/* Container 3 (Hellblau) Icons im Normalzustand */
.list-container3 .icon-check::before {
    content: "✓";
    color: #1565c0;
    /* Exakte Hellblau-Farbe von Container 3, dunkler Zustand */
}

.list-container3 .icon-star::before {
    content: "★";
    color: #b7791f;
    font-size: 115%;
}

/* Dot-Icon für alle Container */
.icon-dot::before {
    content: "•";
    color: #4b5563;
    font-size: 130%;
}

/* HOVER-EFFEKTE: VON DUNKEL ZU HELL */
/* Container 1 (Blau) Icons beim Hover */
.list-container:hover .icon-check::before {
    color: #a1d6ff;
    /* Hellere Version der Blau-Farbe von Container 1 */
    text-shadow: 0 0 8px rgba(106, 165, 216, 0.7);
}

.list-container:hover .icon-star::before {
    color: #facc15;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
}

/* Container 2 (Grün) Icons beim Hover */
.list-container2:hover .icon-check::before {
    color: #c8e6c9;
    /* Hellere Version der Grün-Farbe von Container 2 */
    text-shadow: 0 0 8px rgba(46, 125, 50, 0.7);
}

.list-container2:hover .icon-star::before {
    color: #facc15;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
}

/* Container 3 (Hellblau) Icons beim Hover */
.list-container3:hover .icon-check::before {
    color: #e3f2fd;
    /* Hellere Version der Hellblau-Farbe von Container 3 */
    text-shadow: 0 0 8px rgba(21, 101, 192, 0.7);
}

.list-container3:hover .icon-star::before {
    color: #facc15;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
}

/* Dot-Icon in allen Containern beim Hover */
.list-container:hover .icon-dot::before,
.list-container2:hover .icon-dot::before,
.list-container3:hover .icon-dot::before {
    color: #94a3b8;
    text-shadow: 0 0 6px rgba(148, 163, 184, 0.6);
}