/* --------------------------------------------------
   SKILLS SECTION - LINIENBASIERT, MODERN & SOFT
-------------------------------------------------- */

.skills-section {
    width: 100%;
    padding: 180px 40px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 30;
}

.skills-inner {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 70px;
    align-items: stretch;
    column-gap: 30px;
}

/* --------------------------------------------------
   NAVIGATION PFEILE
-------------------------------------------------- */

.skills-nav {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skills-nav:focus-visible {
    outline: 1px solid #000;
    outline-offset: 4px;
}

/* Pfeil-Styling */
.nav-line {
    position: relative;
    width: 40px;
    height: 2px;
    background: #2b2b2b;
    display: inline-block;
}

.nav-line::before,
.nav-line::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 2px;
    background: #2b2b2b;
}

/* Links-Pfeil */
.nav-line-left {
    transform: translateX(4px);
}

.nav-line-left::before {
    left: 0;
    top: -6px;
    transform-origin: left center;
    transform: rotate(-35deg);
}

.nav-line-left::after {
    left: 0;
    top: 6px;
    transform-origin: left center;
    transform: rotate(35deg);
}

/* Rechts-Pfeil */
.nav-line-right {
    transform: translateX(-4px);
}

.nav-line-right::before {
    right: 0;
    top: -6px;
    transform-origin: right center;
    transform: rotate(35deg);
}

.nav-line-right::after {
    right: 0;
    top: 6px;
    transform-origin: right center;
    transform: rotate(-35deg);
}

/* Hover-Effekt */
.skills-nav:hover .nav-line {
    transform: scale(1.05);
}

/* --------------------------------------------------
   CONTENT LAYOUT (2 SPALTEN)
-------------------------------------------------- */

.skills-content {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    column-gap: 80px;
    align-items: stretch;
}

/* linke Seite */
.skills-left {
    position: relative;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* organischer Blob */
.skills-left::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 40% 60% 55% 45%;
    background: radial-gradient(circle at 10% 0%, rgba(255,255,255,0.9), transparent 60%);
    opacity: 0.8;
    pointer-events: none;
}

.skills-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.04), transparent 45%),
        linear-gradient(to right, rgba(0,0,0,0.04), transparent 40%);
    mix-blend-mode: multiply;
    opacity: 0.7;
    pointer-events: none;
}

/* Skill Name */
.skill-main-label {
    position: relative;
    font-family: "CinzelDecorative";
    font-size: 80px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 20px;
    line-height: 0.9;

    white-space: normal;
    word-break: break-word;
}

.skill-main-label-long {
    font-size: 60px;
}

.skill-main-label-very-long {
    font-size: 48px;
}

/* Farbcode */
.skill-color-code {
    position: relative;
    font-family: "CinzelDecorative";
    font-size: 20px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #444;
}

.skill-color-code::after {
    content: "";
    display: block;
    height: 1px;
    width: 80%;
    margin-top: 14px;
    background: linear-gradient(to right, rgba(0,0,0,0.7), transparent 80%);
}

/* rechte Seite */
.skills-right {
    position: relative;
    padding: 40px 10px 40px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.skills-right::before {
    content: "";
    position: absolute;
    inset: 12% 0 8% 50%;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.08),
        rgba(0,0,0,0.08) 1px,
        transparent 11px,
        transparent 18px
    );
    opacity: 0.6;
}

/* Titel & Text */
.skill-right-title {
    font-family: "CinzelDecorative";
    font-size: 30px;
    margin-bottom: 16px;
    color: #111;
}

.skill-right-text {
    font-family: "CinzelDecorative";
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    max-width: 460px;
}

/* --------------------------------------------------
   VERTIKALE BAR
-------------------------------------------------- */

.skill-bar-area {
    margin-top: 40px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.skill-bar-track {
    position: relative;
    width: 20px;
    height: 220px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.03));
    overflow: hidden;
}

.skill-bar-track::before {
    content: "";
    position: absolute;
    inset: 10px 0 10px 0;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.12),
        rgba(0,0,0,0.12) 1px,
        transparent 9px,
        transparent 18px
    );
    opacity: 0.7;
}

.skill-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    border-radius: 999px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(255,255,255,0.9));
    box-shadow: 0 0 12px rgba(0,0,0,0.35);
    transform-origin: bottom center;
    transition: height 0.85s cubic-bezier(0.23, 0.8, 0.3, 1);
}

.skill-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 15%, rgba(255,255,255,0.8), transparent 55%);
}

.skill-bar-percent {
    font-family: "CinzelDecorative";
    font-size: 22px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #111;
}

/* --------------------------------------------------
   SUMMARY-SLIDE (NEU & FIXED)
-------------------------------------------------- */

.skills-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* Links Text – Rechts Bars */
    column-gap: 70px;
    align-items: start;
}

.summary-text-block {
    padding-right: 20px;
}

.summary-title {
    font-family: "CinzelDecorative";
    font-size: 42px;
    margin-bottom: 18px;
}

.summary-text {
    font-family: "CinzelDecorative";
    font-size: 20px;
    line-height: 1.55;
    color: #333;
}

/* GRID FÜR 9 SKILLS → 2 REIHEN × 5 SPALTEN */
.summary-bars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    row-gap: 45px;
    column-gap: 30px;
    justify-items: center;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 130px;
    width: 100%;
}

.summary-name {
    font-family: "CinzelDecorative";
    font-size: 18px;
    text-align: center;
    white-space: nowrap;     /* NICHT umbrechen */
    word-break: keep-all;    /* NICHT splitten */
}


.summary-bar-track {
    position: relative;
    width: 20px;
    height: 150px;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.07), rgba(0,0,0,0.02));
    overflow: hidden;
}

.summary-bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0%;
    border-radius: inherit;
    background: #000;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    transform-origin: bottom center;
    transition: height 0.8s cubic-bezier(0.23, 0.8, 0.3, 1);
}

.summary-percent {
    font-family: "CinzelDecorative";
    font-size: 16px;
    margin-top: 4px;
}

.skills-title-wrap {
    position: absolute;
    top: 20px;              /* Abstand nach oben */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
    pointer-events: none;   /* verhindert, dass Titel Buttons blockiert */
}

.skills-title {
    font-family: "CinzelDecorative";
    font-size: 82px;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 0;
}

.skills-title-line {
    width: 160px;
    height: 2px;
    margin: 12px auto 0 auto;
    background: rgba(0,0,0,0.4);
}


/* ============================================
   MOBILE SKILLS SECTION (max-width: 720px)
   Komplett überarbeitet & stabil
============================================ */
@media (max-width: 720px) {

    /* SECTION */
    .skills-section {
        padding: 110px 16px;
        position: relative;
    }

    /* TITLE */
    .skills-title-wrap {
        top: 10px;
    }

    .skills-title {
        font-size: 46px;
    }

    .skills-title-line {
        width: 110px;
        height: 1px;
        margin-top: 6px;
    }

    /* GRID KOMPAKTER */
    .skills-inner {
        max-width: 360px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 36px 1fr 36px;  /* Pfeile enger */
        column-gap: 12px;
        align-items: center;
    }

    /* ============================================
       PFEILE — Fix für Überstehendes
    ============================================= */
    .skills-nav {
        position: relative;
        top: -14px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    /* Linker Pfeil */
    .skills-nav-left {
        transform: translateX(6px); /* zieht nach innen */
    }

    /* Rechter Pfeil */
    .skills-nav-right {
        transform: translateX(-6px); /* zieht nach innen */
    }

    /* Pfeilgröße */
    .skills-nav .nav-line {
        width: 26px;
        height: 2px;
    }

    /* ============================================
       CONTENT CARD
    ============================================= */
    .skills-content {
        display: flex;
        flex-direction: column;
        gap: 24px;

        padding: 26px 18px;
        background: rgba(255,255,255,0.45);
        border-radius: 22px;
        backdrop-filter: blur(12px);

        width: 100%;
        max-width: 360px;
        margin-inline: auto;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

    /* LEFT SIDE */
    .skills-left {
        padding: 0 !important;
    }

    .skill-main-label {
        font-size: 46px;
        text-align: center;
        line-height: 1.0;
        margin-bottom: 10px;
    }

    .skill-main-label-long {
        font-size: 38px;
    }

    .skill-main-label-very-long {
        font-size: 32px;
    }

    .skill-color-code {
        font-size: 14px;
        text-align: center;
        margin-bottom: 12px;
    }

    .skill-color-code::after {
        width: 55%;
        margin-inline: auto;
    }

    /* RIGHT SIDE */
    .skills-right {
        padding: 0 !important;
        text-align: center;
    }

    .skill-right-title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .skill-right-text {
        font-size: 15px;
        max-width: 260px;
        margin-inline: auto;
        line-height: 1.45;
    }

    /* BAR */
    .skill-bar-area {
        margin-top: 16px;
        justify-content: center;
        align-items: center;
        gap: 18px;
    }

    .skill-bar-track {
        height: 120px;
        width: 14px;
    }

    .skill-bar-percent {
        font-size: 16px;
        margin-top: 6px;
    }

    /* ============================================
       SUMMARY – STABIL & MITTEN IM RAHMEN
    ============================================= */
    .skills-summary {
        padding: 26px 18px;
        background: rgba(255,255,255,0.45);
        border-radius: 22px;
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);

        width: 100%;
        max-width: 360px;
        margin-inline: auto;

        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .summary-title {
        font-size: 26px;
        text-align: center;
    }

    .summary-text {
        font-size: 15px;
        line-height: 1.45;
        text-align: center;
    }

    .summary-bars {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* sauber, stabil */
        gap: 22px;
        justify-items: center;
        width: 100%;
    }

    .summary-name {
        font-size: 14px;
    }

    .summary-bar-track {
        height: 100px;
        width: 14px;
    }

    .summary-percent {
        font-size: 14px;
    }
}
@media (max-width: 720px) {
    .summary-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}