.skills_section {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: #141D2F;
    min-height: clamp(600px, 100vh, 885px);
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 109px;
}

.skills-content {
    display: flex;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    gap: clamp(60px, 12vw, 200px);
    align-items: flex-start;
}

.skills-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 80px);
    grid-template-areas:
        "skill1 skill2 skill3 skill4"
        "skill5 skill6 skill7 skill8"
        "skill9 skill10 . ."
        "skill11 . . .";
}

.skill-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.5vh, 15px);
    text-align: center;
    width: 100%;
    max-width: clamp(70px, 10vw, 75px);
}

.skill-container:nth-child(1) {
    grid-area: skill1;
}

.skill-container:nth-child(2) {
    grid-area: skill2;
}

.skill-container:nth-child(3) {
    grid-area: skill3;
}

.skill-container:nth-child(4) {
    grid-area: skill4;
}

.skill-container:nth-child(5) {
    grid-area: skill5;
}

.skill-container:nth-child(6) {
    grid-area: skill6;
}

.skill-container:nth-child(7) {
    grid-area: skill7;
}

.skill-container:nth-child(8) {
    grid-area: skill8;
}

.skill-container:nth-child(9) {
    grid-area: skill9;
}

.skill-container:nth-child(10) {
    grid-area: skill10;
}

.skill-container:nth-child(11) {
    grid-area: skill11;
}

.skill-container span {
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 700;
    line-height: 120%;
}

.skills_picture {
    width: clamp(40px, 5vw, 60px);
    height: clamp(40px, 5vw, 60px);
    object-fit: contain;
}

.skills_picture:hover {
    transform: translateY(-10px);
    transition: all 0.1s ease-in-out;
}

.skills_section h1 {
    font-size: clamp(48px, 8vw, 90px);
    margin: 0;
}

.skills_infobox {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vh, 30px);
    padding-top: clamp(10px, 2vh, 20px);
    flex-shrink: 0;
}

.skills_headline_container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(15px, 2vw, 20px);
    margin-bottom: clamp(10px, 2vh, 20px);
    width: 100%;
    max-width: clamp(300px, 90vw, 761px);
    flex-wrap: wrap;
    margin-left: auto;
}

.skills_section h2 {
    font-size: clamp(24px, 4vw, 32px);
    margin: 0;
    line-height: 120%;
}

.skills_infobox_span {
    display: flex;
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1.6;
    width: 100%;
    max-width: 471px;
}


.skills-intro {
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1.6;
    width: 100%;
    max-width: 471px;
}

.blue_line {
    width: clamp(120px, 20vw, 287px);
    height: clamp(2px, 0.3vh, 3px);
    background-color: #70E61C;
    flex-shrink: 0;
}

.h2_container {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 8px);
    line-height: 120%;
    width: 100%;
    max-width: 470px;
    flex-wrap: wrap;
}

.skills_section p {
    font-size: clamp(18px, 2.5vw, 21px);
    font-weight: 700;
    line-height: 120%;
    margin: 0;
}

.purple-p {
    font-size: clamp(18px, 2.6vw, 22px);
    color: #9747ff;
}

.skills-section-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    height: auto;
    width: auto;
    max-width: clamp(200px, 50vw, 274px);
    border-radius: clamp(8px, 1vw, 10px);
    padding: clamp(12px, 1.5vh, 15px) clamp(20px, 3vw, 30px);
    background-color: #70E61C;
    font-size: clamp(18px, 2.5vw, 23px);
    line-height: 120%;
    transition: all 0.3s ease-in-out;
    border: none;
    margin-top: clamp(15px, 2vh, 20px);
    text-decoration: none;
}

.skills-section-button:hover {
    background-color: #9747FF;
    transform: scale(1.07);
}

/* ⚠️ TABLET - 3 Spalten */
@media(max-width: 1180px) {
    .skills-content {
        gap: clamp(50px, 10vw, 120px);
        flex-direction: column-reverse;
        align-items: center;
    }

    .h2_container {
        max-width: 100%;
        justify-content: flex-end;
        padding-right: clamp(12px, 4vw, 60px);
    }

    .skills_infobox {
        max-width: 100%;
        padding-left: clamp(12px, 4vw, 60px);
        flex-direction: column;
    }

    .skills_infobox_span {
        justify-content: flex-end;
        padding-right: clamp(12px, 4vw, 60px);
        margin-left: auto;
        text-align: right;
    }

    .skills-section-button {
        align-self: flex-end;
        margin-left: auto;
        margin-right: clamp(12px, 4vw, 60px);
    }
}

/* ⚠️ MOBILE - 2 Spalten, Infobox OBEN */
@media(max-width: 768px) {
    .skills-content {
        gap: clamp(40px, 6vh, 60px);
        padding-top: 0;
    }

    .skills_headline_container {
        gap: 10px;
    }

    .blue_line {
        width: clamp(150px, 40vw, 200px);
    }

    .skills-section-button {
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 515px) {
    .skills-intro {
        padding-right: clamp(12px, 4vw, 60px);
    }

    .skills-section-button {}
}

/* ⚠️ SMALL MOBILE - 480px */
@media(max-width: 480px) {
    .skills_section h1 {
        font-size: 42px;
    }

    .skills-overview {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 80px);
        grid-template-areas:
            "skill1 skill2 skill3"
            "skill4 skill5 skill6"
            "skill7 skill8 skill9"
            "skill10 skill11 .";
    }

    .skill-container {
        max-width: 75px;
    }

    .skills_picture {
        width: 45px;
        height: 45px;
    }

    .skills_section h2 {
        font-size: 26px;
    }

    .skills_section p {
        font-size: 18px;
    }
}

/* ⚠️ EXTRA SMALL - 375px */
@media(max-width: 375px) {
    .skills_section h1 {
        font-size: 38px;
    }

    .skill-container {
        max-width: 70px;
    }

    .skill-container span {
        font-size: 12px;
    }

    .skills_section h2 {
        font-size: 24px;
    }

    .skills_section p {
        font-size: 17px;
    }

    .purple-p {
        font-size: 17px;
    }

    .blue_line {
        width: 140px;
    }
}

/* ⚠️ MINIMUM - 320px */
@media(max-width: 320px) {
    .skills_section h1 {
        font-size: 34px;
    }

    .skills_section h2 {
        font-size: 22px;
    }

    .skill-container {
        max-width: 65px;
        gap: 8px;
    }

    .skill-container span {
        font-size: 11px;
    }

    .skills_section p {
        font-size: 16px;
    }

    .purple-p {
        font-size: 16px;
    }

    .skills-section-button {
        font-size: 16px;
        padding: 10px 20px;
    }

    .blue_line {
        width: 120px;
    }
}