.skills-wrapper {
    display: grid;
    position: relative;
    overflow: hidden;
    min-height: var(--unit);
    background-color: rgba(88, 166, 255, 0);
}

.skills-grid {
    display: grid;
    position: relative;
    overflow: hidden;
    min-height: min-content;
    grid-template-rows: 8vh 10fr;
}

.skills-body {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    padding: 5vw;
    gap: clamp(10px, 5vw, 80px); /* Abstand passt sich an */
    flex-wrap: nowrap;  /* erlaubt Umbruch bei schmalem Viewport */
    background:
    linear-gradient(
      315deg,
      rgba(126, 126, 126, 0.219),
      rgba(126, 126, 126, 0.152),
      rgba(126, 126, 126, 0.1)
    );
}

/* Jede Spalte soll min. 300px haben, aber flexibel bleiben */
.left-column, .right-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 0;
    min-width: 300px;
}

.right-column {
    justify-content: space-between;
    gap: 20px;
}

.list-top, .list-bottom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item {
    display: flex;
    flex-direction: row;
    border-radius: 6px;
    gap: 10px;
}

.title-itemL {
    display: flex;
    background-color: rgb(255, 204, 155);
    padding: 15px;
    border-radius: 6px;
    height: 8vh;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 600;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.title-itemRT {
    display: flex;
    align-items: center;
    background-color: rgb(204, 229, 255);
    padding: 15px;
    border-radius: 6px;
    height: 8vh;
    font-size: 1.3rem;
    font-weight: 600;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.title-itemRB {
    display: flex;
    align-items: center;
    background-color: rgb(205, 235, 139);
    padding: 15px;
    border-radius: 6px;
    height: 8vh;
    font-size: 1.3rem;
    font-weight: 600;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.item-titleL {
    flex: 0 0 100px;
    background-color: rgb(255, 235, 217);
    color: rgb(0, 0, 0);
    border-radius: 4px;
    padding: 2vh;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.item-contentL {
    flex: 1;
    background-color: rgb(255, 235, 217);
    border-radius: 4px;
    padding: 1.5vh;
    display: flex;
    align-items: center;
    font-size: 1rem;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.item-titleRT {
    flex: 0 0 100px;
    background-color: rgb(240, 248, 255);
    color: rgb(0, 0, 0);
    border-radius: 4px;
    padding: 1.5vh;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.item-contentRT {
    flex: 1;
    background-color: rgb(240, 248, 255);
    border-radius: 4px;
    padding: 1.5vh;
    display: flex;
    align-items: center;
    font-size: 1rem;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.item-titleRB {
    flex: 0 0 100px;
    background-color: rgb(229, 235, 217);
    color: rgb(0, 0, 0);
    border-radius: 4px;
    padding: 2vh;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

.item-contentRB {
    flex: 1;
    background-color: rgb(229, 235, 217);
    border-radius: 4px;
    padding: 1.5vh;
    display: flex;
    align-items: center;
    font-size: 1rem;
    box-shadow: 0px 0px 0.1vw 1px rgb(0, 0, 0);
}

/* Responsive Umbruch und Layout-Anpassung ab 768px */
@media (max-width: 768px) {
  .skills-body {
    flex-direction: column; /* Items untereinander */
    flex-wrap: wrap;      /* Kein Umbruch nötig */
    align-items: center;    /* Zentriert die Spalten horizontal */
    padding-inline: 20px;   /* Weniger Padding an den Seiten */
  }

  .left-column, .right-column {
    min-width: auto;        /* Min-Breite zurücksetzen */
    width: 100%;            /* Spalten volle Breite */
  }
}