.contact-wrapper {
    display: grid;
    position: relative;
    overflow: hidden;
    min-height: var(--unit);
    grid-template-rows: 8vh 10fr;
    z-index: 6;
}

.contact-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgba(172, 202, 227, 0);
}

.contact-shelf {
    grid-column: 1;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: rgb(172, 202, 227);
}

.form-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1rem;
    align-items: center;
    width: 26vw;
    gap: 0.5rem;
}

.form-box input{
    width: 100%;
    max-width: 500px;
    min-width: 240px;
    height: 35px;
    box-sizing: border-box;
    font-size: 1rem;
    border: 1px solid #999;
    border-radius: 0.5rem;
    padding-top: 0.5vh;
    padding: 0.5vh;
}

.message {
    width: 100%;
    max-width: 500px;
    min-width: 240px;
    height: 180px;
    padding-top: 0.5vh;
    padding: 0.5vh;
    box-sizing: border-box;
    font-size: 1rem;
    border: 1px solid #999;
    border-radius: 0.5rem;
}

.form-box button {
  height: 2rem;
  padding: 0 2rem;
  font-size: 1rem;
  border: none;
  background-color: black;
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
}

.download-box {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: rgb(243, 247, 241);
}

picture img {
    display: flex;
    position: relative;
    height: min-content;
    max-height: fit-content;
    flex-grow: 1;
}

.download-all, .civi-only {
    display: flex;
    position: relative;
    height: calc(1vw + 1vh);
    padding-bottom: 5vh;
}

.download-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 2rem;
    transition: transform 0.2s ease;
}

.download-link:hover {
    transform: scale(1.03);
}

/* Responsive Umbruch und Layout-Anpassung ab 768px */
@media (aspect-ratio < 1/1) {
  .contact-body {
    all: unset;
    display: grid;
    grid-template-rows: 1fr 1fr;
    position: relative;
  }

  .contact-shelf {
    all: unset;
    grid-row: 1;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
        padding-top: 2vh;
    padding-bottom: 2vh;
    background-color: rgb(172, 202, 227);
}

  .download-box {
    all: unset;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: rgb(243, 247, 241);
}
}