.home-grid {
    scroll-snap-align: start;
    display: grid;
    position: relative;
    overflow: hidden;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 2fr;
    width: inherit;
    height: calc(100vh - (calc(var(--unit)/6)));
    grid-template-areas:
    "baseA baseA baseA baseA"
    "baseB baseB baseB baseB";
    z-index: 7;
}

.home-top {
    grid-area: baseA;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background:
    linear-gradient(
      345deg,
      rgba(100, 118, 135, 0.232),
      rgba(100, 118, 135, 0.663),
      rgb(100, 118, 135)
    );
    z-index: 6;
}
.home-base {
    grid-area: baseB;
    display: flex;
    align-items: center;
    padding-top: calc(var(--unit)/6);
    justify-content: center;
    text-align: center;
    color: rgb(61, 80, 107);
    font-size: clamp(1.8vw + 1.2vh, 1.8vw + 1vh, 1.8vw + 1.8vh);
    font-weight: 600;
    background-color: #74393900;
    z-index: 6;
}

.CediBox {
    display: flex;
    position:absolute;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    top: clamp(30vh, calc(var(--unit)/4), 35vh);
    left: 50%;
    transform: translate(-50%, -35%);
    height: clamp(10vh, 5vw + 20vh, 35vh);
    min-height: 120px;
    width: clamp(300px, 55vw + 1vh, 60vw);
    border: 3px solid rgba(67, 95, 123,1);
    box-shadow: 0px 0px 0.5vw 1px rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    z-index: 100;
}

.CediBox picture {
    flex: 0 0 1; /* ← nimmt nur so viel Platz wie nötig */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CediBox img {
    height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.personal-info {
    height: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 3vw;
    box-sizing: border-box;
}

.pronoun {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.address {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.ping {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

h2 {
  font-size: clamp(2vw + 0.8vh, 2vw + 1vh, 2vw + 1.5vh);
}

h3 {
  font-size: clamp(1.1vw + 0.7vh, 1.1vw + 1vh, 1.1vw + 1.2vh);
}

p {
  font-size: clamp(0.7vw + 0.65vh, 1vw + 1vh, 0.7vw + 1vh);
}

a {
  font-size: clamp(0.7vw + 0.65vh, 1vw + 1vh, 0.7vw + 1vh);
}

/* Responsive Umbruch und Layout-Anpassung ab 768px 
@media (max-width: 768px) {

.home-top {
  all: unset;
    grid-area: baseA;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 20vh;
    background-color: #647687;
    z-index: 6;
}

.CediBox {
  all: unset;
    display: grid;
    position: absolute;
    overflow: hidden;
    top: calc(var(--unit)/4);
    left: 50%;
    transform: translate(-50%, -35%);
    width: 55vw;
    min-width: 200px;
    border: 3px solid rgba(67, 95, 123,1);
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 0.5vw 1px rgb(0, 0, 0);
    grid-template-columns: 1fr 2fr;
    column-gap: 0;
    z-index: 100;
}

.CediBox picture {
    grid-column: 1;
    height: clamp(15vh, 18vw + 1vh, 40vh);
    max-width: min-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.CediBox img {
    object-fit: contain;
    object-position: left center;
    display: flex;
}

.personal-info {
    grid-column: 2;
    overflow: hidden;
    display: grid;
    position: relative;
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    column-gap: 0;
    align-items: center;
    row-gap: 0;
    width: 100%;
    box-sizing: border-box;
}

.pronoun {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    row-gap: 0;
}

.address {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: start;
}

.ping {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: start;
}

h2 {
  font-size: clamp(0.7rem, 2vw + 1vh, 1.5rem);
    line-height: 1;
}

h3 {
  font-size: clamp(0.6rem, 1.5vw + 1vh, 1.2rem);
    line-height: 1;
}

p {
  font-size: clamp(0.6rem, 1vw + 1vh, 0.8rem);
    line-height: 0.8;
}

a {
  font-size: clamp(0.6rem, 1vw + 1vh, 0.8rem);
    line-height: 0.9;
}
}*/

@media (aspect-ratio < 1/1) {
  .CediBox {
    all: unset;
      display: grid;
      position: absolute;
      overflow: hidden;
      top: calc(var(--unit)/4);
      left: 50%;
      transform: translate(-50%, -35%);
      max-width: 65vw;
      min-width: 60vw;
      height: 48vh;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 2fr 1fr;
      row-gap: 0;
      padding: 1vh;
      box-sizing: border-box;
      z-index: 100;
  }

.home-top {
    grid-area: baseA;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    background:
    linear-gradient(
    345deg,
    rgba(100, 118, 135, 0.232),
    rgba(100, 118, 135, 0.663),
    rgb(100, 118, 135)
  );
    z-index: 6;
}

  .home-base {
      grid-area: baseB;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: rgb(61, 80, 107);
      font-size: clamp(1.2rem, 1.8vw + 1vh, 1.8rem);
      font-weight: 600;
      background-color: #ffffff;
      z-index: 6;
  }

  .CediBox picture {
    grid-column: 2;
      grid-row: 1;
      display: flex;
      padding-right: 0;
      align-self: center;
      height: clamp(24vh, 28vw + 1vh, 40vh);
      border: 2px solid rgb(67, 95, 123);
  }

  .CediBox img {
      object-fit: cover;
      object-position: center;
  }

  .personal-info {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row: 2;
      display: flex;
      justify-content: space-between;
      align-self: center;
      align-items: center;
      overflow: hidden;
      padding: 0;
      margin: 0;
      width: 100%;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
  }

  .pronoun {
      display: flex;
      position: relative;
      justify-content: start;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.2rem;
      row-gap: 0;
  }

  .address {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .ping {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.5rem;
  }

h2 {
  font-size: clamp(0.8rem, 2vw + 1vh, 1.5rem);
    font-weight: 600;
    line-height: 1;
}

h3 {
  font-size: clamp(0.6rem, 1.5vw + 1vh, 1.2rem);
    font-weight: 500;
    line-height: 1;
}

p {
  font-size: clamp(0.6rem, 1.2vw + 1vh, 1.2rem);
    line-height: 1;
}

a {
  font-size: clamp(0.6rem, 1.2vw + 1vh, 1.2rem);
    line-height: 1.3;
}
}