/* =========================================
   IUNIXX – EASY TO USE
   Vollständiges Section-Stylesheet
========================================= */

/* =========================================
   1. SECTION UND HINTERGRUND
========================================= */

.easy-section {
    --easy-cycle: 2.8s;
    --easy-circle-size: 76px;
    --easy-line: #B5DEFF;
    --easy-blue: #1499FE;
    --easy-orange: #FE7914;
    --easy-lime: #99FE14;

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 100px 0 110px;

    background-color: #F4F9FF;

    background-image:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(20, 153, 254, 0.14),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 10% 90%,
            rgba(121, 20, 254, 0.06),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F1F8FF 55%,
            #EAF4FF 100%
        );

    color: #071725;
}

.easy-container {
    width: calc(100% - 48px);
    max-width: 1200px;
    margin-inline: auto;
}

/* =========================================
   2. ÜBERSCHRIFT
========================================= */

.easy-header {
    text-align: left;
    max-width: none;
    margin: 0 0 75px;
}

.easy-eyebrow {
    display: block;
    color: var(--color-primary, #1499FE);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-label, 0.12em);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.easy-title {
    margin: 0;
    color: var(--color-navy, #071725);
    font-size: clamp(2.1rem, 3.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.16;
    text-wrap: balance;
}

.easy-title span {
    color: var(--color-primary, #1499FE);
}

.easy-description {
    color: var(--color-muted);
    font-size: 1.1rem;
    margin: 22px 0 0;
    max-width: 620px;
}

/* =========================================
   3. SCHRITTE – DESKTOP
========================================= */

.easy-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;

    max-width: 1100px;
    margin-inline: auto;
}

.easy-step {
    position: relative;
    min-width: 0;
}

/* =========================================
   4. NUMMERNKREISE
========================================= */

.easy-step-number {
    position: relative;
    z-index: 3;

    width: var(--easy-circle-size);
    height: var(--easy-circle-size);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;

    background-color: var(--easy-blue);

    box-shadow:
        0 8px 22px rgba(20, 153, 254, 0.17);

    margin-bottom: 28px;
    flex-shrink: 0;

    animation:
        easy-node-color var(--easy-cycle)
        linear infinite;
}

/* =========================================
   5. RUHENDE VERBINDUNGSLINIEN
========================================= */

.easy-step:not(:last-child)::after {
    content: "";
    position: absolute;

    top: 37px;
    left: var(--easy-circle-size);

    width: calc(100% - 52px);
    height: 2px;

    background: var(--easy-line);
    z-index: 1;
    pointer-events: none;
}

/* =========================================
   6. WANDERNDER NERVENIMPULS
========================================= */

/*
   Drei getrennte Verbindungssegmente.

   Segment 1: Kreis 1 zu Kreis 2
   Segment 2: Kreis 2 zu Kreis 3
   Segment 3: Kreis 3 zu Kreis 4

   Alle verwenden denselben 8-Sekunden-Zyklus.
*/

.easy-step:not(:last-child)::before {
    content: "";
    position: absolute;

    top: 33px;
    left: var(--easy-circle-size);

    width: calc(100% - 52px);
    height: 10px;

    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(20, 153, 254, 0.15) 20%,
        rgba(20, 153, 254, 0.75) 43%,
        #FFFFFF 50%,
        rgba(20, 153, 254, 0.75) 57%,
        transparent 100%
    );

    background-size: 35% 100%;
    background-repeat: no-repeat;

    filter: drop-shadow(
        0 0 4px rgba(20, 153, 254, 0.65)
    );

    opacity: 0;
}

/* -----------------------------------------
   SEGMENT 1
----------------------------------------- */

.easy-step:nth-child(1)::before {
    animation:
        easy-pulse-1 var(--easy-cycle)
        linear infinite;
}

/* -----------------------------------------
   SEGMENT 2
----------------------------------------- */

.easy-step:nth-child(2)::before {
    animation:
        easy-pulse-2 var(--easy-cycle)
        linear infinite;
}

/* -----------------------------------------
   SEGMENT 3
----------------------------------------- */

.easy-step:nth-child(3)::before {
    animation:
        easy-pulse-3 var(--easy-cycle)
        linear infinite;
}

/* =========================================
   7. IMPULS-ANIMATION – HORIZONTAL
========================================= */

/*
   0–12.5 %   Kreis 1 leuchtet
   12.5–25 %  Impuls 1 → 2
   25–37.5 %  Impuls 2 → 3
   37.5–50 %  Impuls 3 → 4
   50–100 %   Ruhephase / Neustart
*/

/* =========================================
   NERVENIMPULS – HORIZONTAL
   4 Sekunden Bewegung + 0,5 Sekunden Pause
========================================= */

/* Kreis 1 → Kreis 2 */

@keyframes easy-pulse-1 {
    0%, 22.21% {
        background-position: -55% 0;
        opacity: 0;
    }

    22.22% {
        background-position: -55% 0;
        opacity: 1;
    }

    44.43% {
        background-position: 155% 0;
        opacity: 1;
    }

    44.44%, 100% {
        background-position: 155% 0;
        opacity: 0;
    }
}

/* Kreis 2 → Kreis 3 */

@keyframes easy-pulse-2 {
    0%, 44.43% {
        background-position: -55% 0;
        opacity: 0;
    }

    44.44% {
        background-position: -55% 0;
        opacity: 1;
    }

    66.66% {
        background-position: 155% 0;
        opacity: 1;
    }

    66.67%, 100% {
        background-position: 155% 0;
        opacity: 0;
    }
}

/* Kreis 3 → Kreis 4 */

@keyframes easy-pulse-3 {
    0%, 66.66% {
        background-position: -55% 0;
        opacity: 0;
    }

    66.67% {
        background-position: -55% 0;
        opacity: 1;
    }

    88.88% {
        background-position: 155% 0;
        opacity: 1;
    }

    88.89%, 100% {
        background-position: 155% 0;
        opacity: 0;
    }
}
/* =========================================
   8. KREISFARBEN SYNCHRONISIEREN
========================================= */

/*
   Die Kreise wechseln nacheinander
   ihre Farbe, passend zum Impuls.
*/

.easy-step:nth-child(1) .easy-step-number {
    animation-delay: 0s;
}

.easy-step:nth-child(2) .easy-step-number {
    animation-delay: 0s;
}

.easy-step:nth-child(3) .easy-step-number {
    animation-delay: 0s;
}

.easy-step:nth-child(4) .easy-step-number {
    animation-delay: 0s;
}

/*
   Ein gemeinsamer Farbzyklus,
   der über eine Phasenverschiebung
   pro Kreis gesteuert wird.
*/

.easy-step:nth-child(1) {
    --easy-node-phase: 0s;
}

.easy-step:nth-child(2) {
    --easy-node-phase: -1s;
}

.easy-step:nth-child(3) {
    --easy-node-phase: -2s;
}

.easy-step:nth-child(4) {
    --easy-node-phase: -3s;
}

.easy-step-number {
    animation-delay: var(--easy-node-phase);
}

@keyframes easy-node-color {

    0%, 100% {
        background-color: #1499FE;
        box-shadow:
            0 8px 22px rgba(20,153,254,0.17);
    }

    12.5% {
        background-color: #FE7914;
        box-shadow:
            0 0 25px rgba(254,121,20,0.35);
    }

    25% {
        background-color: #99FE14;
        box-shadow:
            0 0 25px rgba(153,254,20,0.35);
    }

    37.5% {
        background-color: #1499FE;
        box-shadow:
            0 8px 22px rgba(20,153,254,0.17);
    }
}

/* =========================================
   9. SCHRITT-TEXTE
========================================= */

.easy-step-content h3 {
    margin: 0 0 12px;

    color: var(--color-navy, #071725);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.easy-step-content p {
    margin: 0;

    color: var(--color-muted, #64748B);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
}

/* =========================================
   10. TABLET UND MOBIL
========================================= */

@media (max-width: 900px) {

    .easy-section {
        padding: 75px 0 85px;
    }

    .easy-header {
        text-align: left;
        margin-bottom: 48px;
    }

    .easy-steps {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .easy-step {
        display: grid;
        grid-template-columns:
            76px minmax(0, 1fr);

        column-gap: 24px;
        padding-bottom: 54px;
    }

    .easy-step:last-child {
        padding-bottom: 0;
    }

    .easy-step-number {
        margin-bottom: 0;
    }

    /* Vertikale Verbindungslinie */

    .easy-step:not(:last-child)::after {
        top: 76px;
        left: 37px;

        width: 2px;
        height: calc(100% - 76px);
    }

    /* Vertikaler Lichtimpuls */

    .easy-step:not(:last-child)::before {
        top: 76px;
        left: 33px;

        width: 10px;
        height: calc(100% - 76px);

        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(20,153,254,0.15) 20%,
            rgba(20,153,254,0.75) 43%,
            #FFFFFF 50%,
            rgba(20,153,254,0.75) 57%,
            transparent 100%
        );

        background-size: 100% 35%;
        background-repeat: no-repeat;
    }

    .easy-step:nth-child(1)::before {
        animation-name: easy-pulse-vertical-1;
    }

    .easy-step:nth-child(2)::before {
        animation-name: easy-pulse-vertical-2;
    }

    .easy-step:nth-child(3)::before {
        animation-name: easy-pulse-vertical-3;
    }

    .easy-step-content {
        padding-top: 6px;
    }
}

/* =========================================
   11. IMPULS – VERTIKAL
========================================= */

@keyframes easy-pulse-vertical-1 {

    0%, 12.49% {
        background-position: 0 -55%;
        opacity: 0;
    }

    12.5% {
        background-position: 0 -55%;
        opacity: 1;
    }

    24.99% {
        background-position: 0 155%;
        opacity: 1;
    }

    25%, 100% {
        background-position: 0 155%;
        opacity: 0;
    }
}

@keyframes easy-pulse-vertical-2 {

    0%, 24.99% {
        background-position: 0 -55%;
        opacity: 0;
    }

    25% {
        background-position: 0 -55%;
        opacity: 1;
    }

    37.49% {
        background-position: 0 155%;
        opacity: 1;
    }

    37.5%, 100% {
        background-position: 0 155%;
        opacity: 0;
    }
}

@keyframes easy-pulse-vertical-3 {

    0%, 37.49% {
        background-position: 0 -55%;
        opacity: 0;
    }

    37.5% {
        background-position: 0 -55%;
        opacity: 1;
    }

    49.99% {
        background-position: 0 155%;
        opacity: 1;
    }

    50%, 100% {
        background-position: 0 155%;
        opacity: 0;
    }
}

/* =========================================
   12. KLEINE SMARTPHONES
========================================= */

@media (max-width: 480px) {

    .easy-container {
        width: calc(100% - 36px);
    }

    .easy-title {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }

    .easy-step {
        grid-template-columns:
            62px minmax(0, 1fr);

        column-gap: 20px;
        padding-bottom: 44px;
    }

    .easy-step-number {
        width: 62px;
        height: 62px;
        font-size: 1.65rem;
    }

    .easy-step:not(:last-child)::after {
        top: 62px;
        left: 30px;
        height: calc(100% - 62px);
    }

    .easy-step:not(:last-child)::before {
        top: 62px;
        left: 26px;
        height: calc(100% - 62px);
    }

    .easy-step-content h3 {
        font-size: 1.25rem;
    }

    .easy-step-content p {
        font-size: 0.98rem;
    }
}

/* =========================================
   13. BARRIEREFREIHEIT
========================================= */

@media (prefers-reduced-motion: reduce) {

    .easy-step-number {
        animation: none;
        background-color: var(--easy-blue);
    }

    .easy-step:not(:last-child)::before {
        animation: none;
        opacity: 0;
    }
}