/* Öffentliche Klassengrenzen des wiederverwendbaren Kontaktmoduls. */
.contact-section,
.contact-section__inner,
.contact-section__copy,
.contact-section__form,
.contact-section__fields {
  min-width: 0;
}

/*
 * Der Verlauf gehört zum Modulrahmen und läuft dadurch unabhängig von der
 * Inhaltsbreite über den gesamten Viewport. Der eigentliche Inhalt bleibt im
 * gemeinsamen Seitenraster der .shell-Klasse ausgerichtet.
 */
.contact-section {
  width: 100%;
  padding: 0;
  color: #fff;
  background: linear-gradient(120deg, #6d56fa, #163fd5);
}

.contact-section__inner {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin-inline: auto;
  padding: 58px 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
  align-items: center;
  gap: 70px;
  min-height: 430px;
}

.contact-section__copy { position: relative; z-index: 2; }
.contact-section__kicker,
.contact-section__title,
.contact-section__title em,
.contact-section__description { color: #fff; }
.contact-section__title em { font-style: normal; }
.contact-section__description { max-width: 560px; margin: 22px 0 0; font-size: 14px; line-height: 1.65; }
.contact-section__email { display: inline-block; margin-top: 24px; border-bottom: 1px solid #ffffff80; padding-bottom: 4px; color: #fff; font-size: 13px; font-weight: 750; }
.contact-section__form { position: relative; z-index: 2; display: grid; gap: 14px; padding: 28px; border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 24px 65px #11164b2b; }
.contact-section__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-section__form label { display: grid; gap: 7px; }
.contact-section__form label > span,
.contact-field > span { font-size: 11px; font-weight: 750; }
.required-mark { color: #514fee; font-style: normal; }
.contact-section__form input,
.contact-section__form textarea { width: 100%; border: 1px solid #dfe1ed; border-radius: 8px; padding: 12px 13px; color: var(--ink); background: #fafaff; font: inherit; font-size: 13px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.contact-section__form textarea { min-height: 112px; resize: vertical; }
.contact-section__form input:focus,
.contact-section__form textarea:focus { border-color: #6256ee; background: #fff; box-shadow: 0 0 0 3px #6256ee1f; }
.contact-section__form [aria-invalid="true"] { border-color: #c7354b; }
.contact-submit { width: 100%; border: 0; border-radius: 8px; padding: 14px 18px; color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.contact-submit:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.contact-submit.is-sending:disabled { cursor: wait; opacity: .72; }
.contact-section__form .contact-privacy { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; margin: 1px 0; color: #74778c; font-size: 10px; line-height: 1.55; cursor: pointer; }
.contact-privacy input { appearance: none; display: grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; margin: 0; border: 1px solid #cfd2e2; border-radius: 5px; padding: 0; background: #fafaff; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.contact-privacy input::after { content: ""; width: 8px; height: 4px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; opacity: 0; transform: translateY(-1px) rotate(-45deg) scale(.6); transition: opacity .15s, transform .15s; }
.contact-privacy input:checked { border-color: #514fee; background: #514fee; }
.contact-privacy input:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.contact-privacy input:focus-visible { outline: none; box-shadow: 0 0 0 3px #6256ee24; }
.contact-privacy input[aria-invalid="true"] { border-color: #c7354b; box-shadow: 0 0 0 3px #c7354b17; }
.contact-privacy a { text-decoration: underline; text-underline-offset: 2px; }
.contact-section__form .contact-status { display: none; margin: 0; border-radius: 7px; padding: 10px 12px; color: #39405b; background: #f0f1f8; font-size: 11px; line-height: 1.5; }
.contact-status.is-visible { display: block; }
.contact-status.is-success { color: #17653d; background: #eaf8f0; }
.contact-status.is-error { color: #9c2638; background: #fff0f2; }
.contact-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-field { display: grid; gap: 7px; }
.custom-select { position: relative; }
.custom-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; border: 1px solid #dfe1ed; border-radius: 8px; padding: 12px 15px 12px 13px; color: #73768a; background: #fafaff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.custom-select-trigger svg { flex: 0 0 18px; width: 18px; height: 18px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.custom-select-trigger.is-selected { color: var(--ink); }
.custom-select-trigger:focus-visible,
.custom-select.is-open .custom-select-trigger { border-color: #6256ee; background: #fff; box-shadow: 0 0 0 3px #6256ee1f; }
.custom-select-trigger[aria-invalid="true"] { border-color: #c7354b; }
.custom-select.is-open .custom-select-trigger svg { transform: rotate(180deg); }
.custom-select-menu { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 20; overflow: hidden; border: 1px solid #dfe1ed; border-radius: 10px; padding: 6px; background: #fff; box-shadow: 0 18px 45px #171a4630; }
.custom-select-menu[hidden] { display: none; }
.custom-select-menu button { display: block; width: 100%; border: 0; border-radius: 7px; padding: 10px 11px; color: var(--ink); background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: color .15s, background .15s; }
.custom-select-menu button:hover,
.custom-select-menu button:focus-visible { color: #403fd8; background: #f0efff; outline: none; }
.custom-select-menu button[aria-selected="true"] { color: #403fd8; background: #eeedff; font-weight: 750; }

@media (max-width: 1228px) {
  .contact-section__inner {
    width: min(1180px, calc(100% - 48px));
    max-width: 1180px;
    margin-inline: auto;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .contact-section__inner { grid-template-columns: 1fr; align-items: start; gap: 38px; }
}

@media (max-width: 560px) {
  .contact-section__inner {
    width: calc(100% - 28px);
    padding: 42px 0;
  }

  .contact-section__form { padding: 20px; }
  .contact-section__fields { grid-template-columns: 1fr; }
}