.conversion {
scroll-margin-top: 5rem;
background-color: var(--color-bg);
}
.conversion__panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-8) var(--container-padding);
}
@media (min-width: 768px) {
.conversion__panel {
padding-block: var(--space-9);
padding-inline: clamp(2.5rem, 5vw, 5rem);
}
}
.conversion__panel--form {
background-color: transparent;
justify-content: flex-start;
}
.conversion__form-wrap {
--color-link-hover: var(--color-logo-black);
width: 100%;
max-width: 38.75rem;
background-color: var(--color-white);
color: var(--color-gray);
border: 1px solid rgb(1 1 1 / 0.06);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.conversion__intro {
text-align: center;
margin-inline: auto;
max-width: 46rem;
}
.conversion__intro-lede {
margin-top: var(--space-3);
color: var(--color-text-muted);
}
.conversion .conversion__intro {
max-width: 46rem;
}
.conversion .conversion__intro-lede {
max-width: none;
margin-inline: auto;
margin-top: var(--space-3);
}
.conversion__form-alt {
margin-top: var(--space-4);
font-size: var(--font-size-sm);
color: rgb(59 73 86 / 0.75);
}
.conversion__form-alt a {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
font-weight: 500;
white-space: nowrap;
}
.conversion__form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
.conversion__form > * {
min-width: 0;
}
@media (min-width: 640px) {
.conversion__form {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.conversion__form-field--full,
.conversion__form .form-checkbox,
.conversion__form > .btn {
grid-column: 1 / -1;
}
.conversion__form .form-field__label {
font-size: 0.75rem;
font-weight: var(--font-weight-regular);
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgb(59 73 86 / 0.75);
}
.conversion__form .form-field__hint {
margin: 0 0 var(--space-2);
font-size: 0.8125rem;
line-height: 1.45;
color: rgb(59 73 86 / 0.8);
hyphens: none;
}
.conversion__form .form-field__input,
.conversion__form .form-field__textarea {
padding: var(--space-2) 0;
background-color: transparent;
border: none;
border-bottom: 1px solid rgb(59 73 86 / 0.25);
border-radius: 0;
color: var(--color-gray);
}
.conversion__form .form-field__textarea {
min-height: 4.5rem;
resize: vertical;
}
.conversion__form .form-field__input:hover,
.conversion__form .form-field__textarea:hover {
border-bottom-color: rgb(59 73 86 / 0.45);
}
.conversion__form .form-field__input:focus-visible,
.conversion__form .form-field__textarea:focus-visible {
outline: none;
border-bottom-color: var(--color-accent-strong);
border-bottom-width: 2px;
}
.conversion__form .form-checkbox__label {
color: var(--text-on-light-secondary);
}
.conversion__form .form-checkbox__label a {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.conversion__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.conversion__submit {
justify-self: start;
border-radius: var(--radius-pill);
margin-top: var(--space-2);
max-width: 100%;
white-space: normal;
}
@media (min-width: 1024px) {
.conversion__panel {
padding-block: var(--space-9);
}
}
@media (max-width: 767.98px) {
.conversion__intro-lede {
-webkit-hyphens: none;
hyphens: none;
}
.conversion__form .form-field__label {
font-size: 0.8125rem;
letter-spacing: 0.06em;
}
.conversion__form .form-field__input,
.conversion__form .form-field__textarea {
font-size: 1rem;
min-height: 3rem;
padding-block: var(--space-3) var(--space-2);
}
.conversion__form .form-field__textarea { min-height: 5.5rem; }
.conversion__form .form-checkbox {
gap: var(--space-3);
padding-block: var(--space-2);
}
.conversion__form .form-checkbox__input {
width: 1.375rem;
height: 1.375rem;
margin-top: 0;
}
.conversion__form .form-checkbox__label { line-height: 1.45; }
.conversion__submit {
width: 100%;
justify-self: stretch;
justify-content: center;
}
.conversion__form .form-checkbox__label a,
.conversion__form-alt a {
padding-block: 0.75rem;
display: inline-block;
}
.conversion__form-alt a { font-size: 1rem; }
}
.conversion__form .form-field__select {
width: 100%;
padding: var(--space-2) 0;
background-color: transparent;
border: none;
border-bottom: 1px solid rgb(59 73 86 / 0.25);
border-radius: 0;
color: var(--color-gray);
font-family: inherit;
font-size: var(--font-size-base);
color-scheme: light;
}
.conversion__form .form-field__select:hover {
border-bottom-color: rgb(59 73 86 / 0.45);
}
.conversion__form .form-field__select:focus-visible {
outline: none;
border-bottom-color: var(--color-accent-strong);
border-bottom-width: 2px;
}
.conversion__form [aria-invalid="true"]:not([type="checkbox"]) {
border-bottom-color: var(--color-form-error);
border-bottom-width: 2px;
}
.conversion__form input[type="checkbox"][aria-invalid="true"] {
outline: 2px solid var(--color-form-error);
outline-offset: 2px;
}
.conversion__form .form-checkbox--optional .form-checkbox__label {
font-size: var(--font-size-sm);
color: var(--text-on-light-secondary);
}
.lead-form__turnstile {
grid-column: 1 / -1;
min-height: 65px;
}
.lead-form__turnstile:empty {
min-height: 0;
}
.lead-form__status {
grid-column: 1 / -1;
margin: 0;
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
color: rgb(59 73 86 / 0.75);
}
.lead-form__status:empty {
display: none;
}
.lead-form__status[data-state="fehler"] {
color: var(--color-form-error);
font-weight: 500;
}
.conversion__submit[data-busy] {
opacity: 0.6;
cursor: progress;
}
@media (max-width: 639.98px) {
.lead-form__turnstile {
margin-top: calc(-1 * var(--space-2));
}
}