.mv-contact-person {
  position: relative;
  padding-bottom: var(--block-spacing-default);
  /* Enable Container Queries */
  container-type: inline-size;
  container-name: contact-person;
}
.mv-contact-person__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-l);
  align-items: center;
  /* Use Container Query instead of Media Query */
  /* Breakpoint: Approx 700px seems good for switching to side-by-side */
}
@container contact-person (min-width: 700px) {
  .mv-contact-person__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
  }
}
.mv-contact-person__image-col {
  position: relative;
  display: flex;
  justify-content: flex-start;
  overflow: visible !important;
}
@container contact-person (min-width: 700px) {
  .mv-contact-person__image-col {
    justify-content: flex-end;
    padding-right: var(--spacing-l);
  }
}
.mv-contact-person__image-wrapper {
  position: relative;
  z-index: 1;
  width: calc(100% - 20px);
  max-width: 570px;
  border-radius: 60px 0 60px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 10px 20px 20px 10px;
}
.mv-contact-person__image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 450px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 60px 0 60px 0;
  position: relative;
  z-index: 2;
}
.mv-contact-person__image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--accent);
  transform: translate(-5px, 5px);
  border-radius: 60px 0 60px 0;
}
@container contact-person (min-width: 700px) {
  .mv-contact-person__image-wrapper::before {
    transform: translate(-10px, 10px);
  }
}
.mv-contact-person__content-col {
  text-align: left;
}
.mv-contact-person__name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--font-size-h3);
  margin-bottom: var(--spacing-xs);
  color: var(--headline-color);
}
.mv-contact-person__position {
  font-family: var(--font-body);
  font-size: var(--font-size-p);
  color: var(--text-color);
  margin-bottom: var(--spacing-m);
  display: block;
}
.mv-contact-person__contact-details {
  margin-bottom: var(--spacing-l);
}
.mv-contact-person__contact-item {
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--font-size-p);
}
.mv-contact-person__contact-item a {
  color: var(--accent);
  text-decoration: underline;
}
.mv-contact-person__contact-item a:hover {
  text-decoration: none;
}
.mv-contact-person__label {
  margin-right: 5px;
  color: var(--accent);
}
.mv-contact-person__actions {
  display: flex;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

.mv-contact-person-wrapper {
  padding-bottom: var(--block-spacing-default);
}

.mv-contact-person--bg-blue {
  background-color: var(--base);
  color: var(--base-4);
  padding-top: var(--spacing-xxl) !important;
  padding-bottom: var(--spacing-xxl) !important;
}
.mv-contact-person--bg-blue .mv-contact-person__name {
  color: var(--base-3);
}
.mv-contact-person--bg-blue .mv-contact-person__position {
  color: var(--contrast-2);
}
.mv-contact-person--bg-blue .mv-contact-person__contact-item {
  color: var(--base-4);
}
.mv-contact-person--bg-blue .mv-contact-person__contact-item a {
  text-decoration: underline;
}
.mv-contact-person--bg-blue .mv-contact-person__contact-item a:hover {
  color: var(--base-3);
}
.mv-contact-person--bg-blue .mv-contact-person__label {
  color: var(--accent);
}
.mv-contact-person--bg-blue {
  /* ==========================================================================
     KOMPONENTE: Button
     ========================================================================== */
}
.mv-contact-person--bg-blue .mv-button {
  display: inline-block;
  padding: var(--spacing-s) var(--spacing-l);
  text-decoration: none;
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-p);
  border-radius: var(--spacing-xs);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
  border-radius: var(--solvia-btn-radius);
  /* ==========================================================================
     MODIFIKATOREN (aus ACF "button_style" Feld)
     ========================================================================== */
}
.mv-contact-person--bg-blue .mv-button--primary {
  background-color: var(--base);
  color: var(--base-3);
  border: 2px solid var(--base);
}
.mv-contact-person--bg-blue .mv-button--primary:focus, .mv-contact-person--bg-blue .mv-button--primary:active {
  background-color: var(--base);
  color: var(--base-3);
  border-color: var(--base);
}
.mv-contact-person--bg-blue .mv-button--primary:hover {
  border-radius: 0;
  color: var(--base);
  background-color: transparent;
}
.mv-contact-person--bg-blue .mv-button--secondary {
  background-color: transparent;
  color: var(--base);
  border: 2px solid var(--base);
}
.mv-contact-person--bg-blue .mv-button--secondary:focus, .mv-contact-person--bg-blue .mv-button--secondary:active {
  background-color: transparent;
  color: var(--base);
  border-color: var(--base);
}
.mv-contact-person--bg-blue .mv-button--secondary:hover {
  border-radius: 0;
}
.mv-contact-person--bg-blue .mv-button--accent {
  background-color: var(--accent);
  color: var(--base);
  border: 2px solid var(--accent);
}
.mv-contact-person--bg-blue .mv-button--accent:focus, .mv-contact-person--bg-blue .mv-button--accent:active {
  background-color: var(--accent);
  color: var(--base);
  border-color: var(--accent);
}
.mv-contact-person--bg-blue .mv-button--accent:hover {
  border-radius: 0;
  color: var(--accent);
  background-color: transparent;
}
.mv-contact-person--bg-blue .mv-button--accent-outline {
  background-color: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.mv-contact-person--bg-blue .mv-button--accent-outline:focus, .mv-contact-person--bg-blue .mv-button--accent-outline:active {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.mv-contact-person--bg-blue .mv-button--accent-outline:hover {
  border-radius: 0;
  background-color: var(--accent);
  color: var(--base);
}
.mv-contact-person--bg-blue .mv-button {
  /* --- Style: Text --- */
}
.mv-contact-person--bg-blue .mv-button--text {
  background-color: transparent;
  color: var(--accent);
  border: none;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.mv-contact-person--bg-blue .mv-button--text:hover, .mv-contact-person--bg-blue .mv-button--text:focus {
  text-decoration: underline;
}
.mv-contact-person--bg-blue .mv-contact-person__image-wrapper::before {
  background-color: var(--accent);
}/*# sourceMappingURL=mv-contact-person.css.map */