.ausbildung-wrapper {
  display: grid;
  position: relative;
  overflow: hidden;
  min-height: var(--unit);
  width: 100%;
  grid-template-rows: 8vh 10fr;
  background:
  linear-gradient(
    315deg,
    rgba(131, 177, 147, 0.873),
    rgba(131, 177, 147, 0.507),
    rgba(131, 177, 147, 0.334)
  );
  row-gap: 0;
}

.ausbildung-body-wrapper {
  grid-row: 2;
  display: flex;
  align-self: center;
  height: 80%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ausbildung-body {
  display: grid;
  position: relative;
  height: 100%;
  width: 80vw;
  align-self: center;
  grid-template-rows: repeat(3, 1fr);
}

/* Obere Box (zentriert über beide Spalten) */
.station-1 {
  grid-row: 1;
  display:flex;
  flex-direction: column;
  position: relative;
  justify-self: start;
  justify-content: center;
  text-align: center;
  width: clamp(40%, 65%, 800px);
  height: auto;
  font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25),
      rgba(49, 49, 49, 0.05)
    );
    background-color: rgba(199, 200, 255, 0.13);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.23);
  margin: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgb(0, 0, 0);
  z-index: 9;
}

/* Untere linke Box */
.station-2 {
  grid-row: 2;
  display:flex;
  flex-direction: column;
  position: relative;
  justify-self: center;
  justify-content: center;
  text-align: center;
  width: clamp(40%, 65%, 800px);
  height: auto;
  font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(18px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25),
    rgba(49, 49, 49, 0.05)
  );
  background-color: rgba(199, 200, 255, 0.13);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.23);
  margin: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgb(0, 0, 0);
  z-index: 9;
}

/* Untere rechte Box */
.station-3 {
  grid-row: 3;
  display:flex;
  position: relative;
  flex-direction: column;
  justify-self: end;
  justify-content: center;
  text-align: center;
  width: clamp(40%, 65%, 800px);
  height: auto;
  font-size: clamp(1rem, 1.1vw + 1vh, 1.5rem);
     backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25),
      rgba(49, 49, 49, 0.05)
    );
  background-color: rgba(199, 200, 255, 0.13);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.23);
  color: rgb(0, 0, 0);
  margin: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  z-index: 9;
}

/* Responsive Umbruch und Layout-Anpassung ab 768px */
@media (aspect-ratio < 1/1) {
  .ausbildung-body {
    display: flex;
    flex-direction: column; /* Items untereinander */
    flex-wrap: nowrap;      /* Kein Umbruch nötig */
    align-items: center;    /* Zentriert die Spalten horizontal */
    justify-content: center;
    padding-inline: 20px;
  }

  .station-1, .station-2, .station-3 {
    all:unset;
    display: flex;
    position: relative;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    width: clamp(200px, 70vw + 1vh, 350px);
    height: clamp(16vh, 1.2vw + 1vh, 25vh);
    font-size: clamp(0.8rem, 1.1vw + 1vh, 1.5rem);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(18px);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25),
      rgba(49, 49, 49, 0.05)
    );
    background-color: rgba(199, 200, 255, 0.13);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.23);
    padding: 0.5rem;
    margin: calc(1vw + 2vh);
    color: rgb(0, 0, 0);
  }
}