/* =====================================
   Skills Content Block
   ===================================== */

.skills {

    max-width: 900px;
    margin: 40px auto;
    padding: 30px;

    line-height: 1.6;

}



/* =====================================
   Überschrift
   ===================================== */

.skills-header {

    margin-bottom: 40px;
    border-bottom: 3px solid var(--bs-primary);
    padding-bottom: 15px;

}


.skills-header h2 {

    margin: 0;
    font-size: 2.2rem;

}



/* =====================================
   Skill-Liste
   ===================================== */

.skills-list {

    display: flex;
    flex-direction: column;
    gap: 20px;

}



/* =====================================
   Einzelner Skill
   ===================================== */

.skill-card {

    background: var(--bs-card-bg, #ffffff);

    border: 1px solid var(--bs-border-color);

    border-radius: 10px;

    padding: 20px 25px;

    box-shadow: 0 3px 12px rgba(0,0,0,0.08);

    transition: transform .2s ease, box-shadow .2s ease;

}


.skill-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(0,0,0,0.12);

}



/* =====================================
   Skill-Zeile
   ===================================== */

.skill-row {

    display: grid;

    grid-template-columns: 1fr 120px 160px;

    align-items: center;

    gap: 15px;

}



/* =====================================
   Skill-Bezeichnung
   ===================================== */

.skill-row h3 {

    margin: 0;

    font-size: 1.1rem;

}



/* =====================================
   Skill-Level Punkte
   ===================================== */

.skill-level {

    display: flex;

    justify-content: center;

    align-items: center;

}


.skill-dots {

    display: flex;

    gap: 6px;

}


.dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--bs-secondary-bg);

}


.dot.active {

    background: var(--bs-info);

}



/* =====================================
   Kategorie
   ===================================== */

.skill-category {

    justify-self: end;

    background: var(--bs-secondary-bg);

    color: var(--bs-body-color);

    border-radius: 20px;

    padding: 5px 12px;

    font-size: .8rem;

    white-space: nowrap;

    text-transform: capitalize;

}



/* =====================================
   Mobile
   ===================================== */

@media (max-width: 700px) {


    .skills {

        padding: 15px;

        margin: 20px auto;

    }


    .skill-row {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .skill-level {

        justify-content: flex-start;

    }


    .skill-category {

        justify-self: start;

    }

}