.experience-wrapper {
    display: grid;
    position: relative;
    overflow: hidden;
    height: min-content;
    grid-template-rows: 8vh 10fr;
    background-color: rgba(99, 99, 99, 0.158);
    z-index: 6;
}

.experience-body {
    display: grid;
    position: relative;
    overflow: hidden;
    padding-top: 50px;

    padding-bottom: 50px;
    width: 100%;
    grid-template-columns: 1vw 2fr 0.5fr 3px 0.5fr 2fr 1vw;
    grid-template-areas: 
    ". e1 l1 m . . ."
    ". . . m l2 e2 ."
    ". e3 l3 m . . ."
    ". . . m l4 e4 ."
    ". e5 l5 m . . ."
    ". . . m l6 e6 ."
    ". e7 l7 m . . ."
    ;
    row-gap: 5vh;
    /*aspect-ratio: 3 / 2;*/
    background: linear-gradient(
        145deg,
        rgba(231, 243, 237, 0.562),
        rgba(198, 187, 216, 0.05)
    );
}

.experience-middle-line {
    grid-area: m;
    display: flex;
    position: relative;
    width: 100%;
    background-color: rgb(0, 0, 0);
    box-shadow: 1px 0px 8px 1px rgba(0, 0, 0, 0.199);
    margin: 0;
}

.experience-1 {
    grid-area: e1;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: end;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-1 {
    grid-area: l1;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

.experience-2 {
    grid-area: e2;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: start;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-2 {
    grid-area: l2;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

.experience-3 {
    grid-area: e3;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: end;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-3 {
    grid-area: l3;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

.experience-4 {
    grid-area: e4;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-4 {
    grid-area: l4;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

.experience-5 {
    grid-area: e5;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: end;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-5 {
    grid-area: l5;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

.experience-6 {
    grid-area: e6;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
        backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-6 {
    grid-area: l6;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

.experience-7 {
    grid-area: e7;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: end;
    justify-content: center;
    align-items: start;
    white-space: pre-line;
       backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    padding: 0.8rem;
    font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
}

.line-7 {
    grid-area: l7;
    display: flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 1fr;
    padding: 3px;
    border-bottom: 2px solid black;
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.281);
    white-space: nowrap;
    font-size: clamp(0.7rem, 0.8vw + 0.8vh, 1rem);
}

/* Responsive Umbruch auf schmalen Bildschirmen */
@media (aspect-ratio < 1/1) {
    .experience-body {
    all: unset;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
        background: linear-gradient(
        145deg,
        rgba(99, 140, 160, 0.562),
        rgba(198, 187, 216, 0.1)
    );
    }

    .experience-1,
    .experience-2,
    .experience-3,
    .experience-4,
    .experience-5,
    .experience-6,
    .experience-7 {
    all: unset;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
    min-width: 75vw;
    max-width: 90vw;
    margin-bottom: clamp(20px, 8vw, 60px);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.438) 0%,
        rgba(255, 255, 255, 0.3) 30%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-color: rgba(212, 231, 255, 0.527);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.452);
    box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.23);
    box-sizing: border-box;
    padding: 0.5rem;
    height: auto;
    font-size: clamp(0.85rem, 1.1vw + 1vh, 1.5rem);
    z-index: 8;
  }

  .line-1,
  .line-2,
  .line-3,
  .line-4,
  .line-5,
  .line-6,
  .line-7 {
        all: unset;
        display: flex;
        position: relative;
        justify-content: start;
        align-items: center;
        font-weight: bold;
        white-space: nowrap;
        min-height: 20px;
        margin-bottom: 0;
        padding: 3px;
        font-size: clamp(0.7rem, 0.8vw + 1vh, 1rem);
        -webkit-text-stroke-width: 1px white;
        text-shadow: 0 0 3px white;
        z-index: 7;
  }

  .experience-middle-line {
        display: flex;
        position: absolute;
        margin-top: 10vh;
        margin-bottom: 12vh;
        width: 2px;
        min-height: 75%;
        background-color: rgba(0, 0, 0, 0.384);
        z-index: 6;
  }

    .line-1      { order: 1; }
    .experience-1 { order: 2; }   
    .line-2      { order: 3; }
    .experience-2 { order: 4; }
    .line-3      { order: 5; }
    .experience-3 { order: 6; }
    .line-4      { order: 7; }
    .experience-4 { order: 8; }
    .line-5      { order: 9; }
    .experience-5 { order: 10; }
    .line-6      { order: 11; }
    .experience-6 { order: 12; }
    .line-7      { order: 13; }
    .experience-7 { order: 14; }
}