/**
 * Formulare: Kontaktformular und Bewerbungsformular
 *
 * Nur .hitlife-form* – gemeinsame Grundlage beider Formular-Widgets.
 */
/* =======================================================================
   Kontaktformular

   Hinweis zu den Selektoren: Beschriftungen, Felder und Button werden
   bewusst mit .hitlife-form davor angesprochen. Viele Themes setzen für
   input und textarea eigene Regeln mit hoher Gewichtung – ohne diesen
   Vorlauf würden Breite und Abstände dort wieder überschrieben.
   ======================================================================= */

.hitlife-form {
    --hitlife-green: #2a6b4b;
    --hitlife-green-dark: #1d4d36;
    --hitlife-green-light: #eaf3ee;
    --hitlife-accent: #efa027;
    --hitlife-text: #3c4a43;
    --hitlife-line: #dbe7e0;
    --hitlife-error: #b32d2e;

    /* Pfeil für Auswahlfelder, damit sie zu den übrigen Feldern passen */
    --hitlife-form-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233c4a43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    color: var(--hitlife-text);
}

.hitlife-form *,
.hitlife-form *::before,
.hitlife-form *::after {
    box-sizing: border-box;
}

/* Karte ------------------------------------------------------------------ */

.hitlife-form--boxed {
    padding: 36px;
    border: 1px solid var(--hitlife-line);
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(29, 77, 54, 0.06);
}

/* Empfänger-Hinweis ------------------------------------------------------ */

.hitlife-form__recipient {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 28px;
    padding: 14px 18px;
    border-radius: 10px;
    background-color: var(--hitlife-green-light);
    color: var(--hitlife-green-dark);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
}

.hitlife-form__recipient-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--hitlife-green);
}

.hitlife-form__recipient strong {
    font-weight: 700;
}

/* Meldungen -------------------------------------------------------------- */

.hitlife-form__notice {
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.hitlife-form__notice--success {
    color: var(--hitlife-green-dark);
    border-color: var(--hitlife-green);
    background-color: var(--hitlife-green-light);
}

.hitlife-form__notice--error {
    color: var(--hitlife-error);
    border-color: var(--hitlife-error);
    background-color: #fdf3f3;
}

/* Zeilen und Felder ------------------------------------------------------ */

.hitlife-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}

.hitlife-form--stacked .hitlife-form__row {
    grid-template-columns: minmax(0, 1fr);
}

.hitlife-form__field {
    min-width: 0;
    margin-bottom: 20px;
}

.hitlife-form .hitlife-form__label {
    display: block;
    width: 100%;
    margin: 0 0 7px;
    padding: 0;
    color: var(--hitlife-green-dark);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.hitlife-form__required {
    color: var(--hitlife-accent);
    font-weight: 700;
}

.hitlife-form input.hitlife-form__input,
.hitlife-form select.hitlife-form__input,
.hitlife-form textarea.hitlife-form__input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 13px 16px;
    border: 1px solid var(--hitlife-line);
    border-radius: 10px;
    background-color: #fff;
    color: var(--hitlife-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hitlife-form input.hitlife-form__input:focus,
.hitlife-form select.hitlife-form__input:focus,
.hitlife-form textarea.hitlife-form__input:focus {
    border-color: var(--hitlife-green);
    box-shadow: 0 0 0 3px rgba(42, 107, 75, 0.14);
    outline: none;
}

.hitlife-form input.hitlife-form__input::placeholder,
.hitlife-form textarea.hitlife-form__input::placeholder {
    color: #9aa8a1;
}

.hitlife-form textarea.hitlife-form__input {
    min-height: 150px;
    resize: vertical;
}

.hitlife-form__field--error .hitlife-form__label {
    color: var(--hitlife-error);
}

.hitlife-form .hitlife-form__field--error input.hitlife-form__input,
.hitlife-form .hitlife-form__field--error select.hitlife-form__input,
.hitlife-form .hitlife-form__field--error textarea.hitlife-form__input {
    border-color: var(--hitlife-error);
}

/* Einwilligung ----------------------------------------------------------- */

.hitlife-form__field--consent {
    margin-top: 4px;
    margin-bottom: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--hitlife-line);
}

.hitlife-form .hitlife-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    color: var(--hitlife-text);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    cursor: pointer;
}

.hitlife-form .hitlife-form__consent input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--hitlife-green);
}

.hitlife-form__consent a {
    color: var(--hitlife-green);
    text-underline-offset: 2px;
}

/* Honeypot: zusätzlich zum style-Attribut im Markup */

.hitlife-form__trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Button ----------------------------------------------------------------- */

.hitlife-form__actions {
    display: flex;
    justify-content: flex-start;
    margin: 0;
}

.hitlife-form button.hitlife-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 52px;
    margin: 0;
    padding: 14px 34px;
    border: 1px solid var(--hitlife-green);
    border-radius: 999px;
    background-color: var(--hitlife-green);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.hitlife-form button.hitlife-form__submit:hover {
    background-color: var(--hitlife-green-dark);
    border-color: var(--hitlife-green-dark);
}

.hitlife-form button.hitlife-form__submit:active {
    transform: translateY(1px);
}

.hitlife-form button.hitlife-form__submit:focus-visible {
    outline: 2px solid var(--hitlife-accent);
    outline-offset: 3px;
}

.hitlife-form--button-full .hitlife-form__actions {
    display: block;
}

.hitlife-form--button-full button.hitlife-form__submit {
    width: 100%;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 767px) {
    .hitlife-form--boxed {
        padding: 24px 20px;
    }

    .hitlife-form__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hitlife-form *,
    .hitlife-form *::before,
    .hitlife-form *::after {
        transition-duration: 0.01ms !important;
    }

    .hitlife-form button.hitlife-form__submit:active {
        transform: none;
    }
}

.hitlife-form__recipient-text {
    min-width: 0;
}

.hitlife-form__recipient--person {
    font-weight: 600;
}

.hitlife-form__form {
    margin: 0;
    max-width: 100%;
}

/* =======================================================================
   Bewerbungsformular – Ergänzungen zum Formular-Grundgerüst
   ======================================================================= */

.hitlife-form__title {
    margin: 0 0 24px;
    color: var(--hitlife-green-dark);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Die Stelle steht fest und ist deshalb kein Eingabefeld */
/* Auswahlfeld: eigener Pfeil, damit es zu den übrigen Feldern passt */
.hitlife-form select.hitlife-form__input {
    padding-right: 42px;
    background-image: var(--hitlife-form-caret);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.hitlife-form__field--file .hitlife-form__label {
    margin-bottom: 8px;
}

.hitlife-form input.hitlife-form__file {
    padding: 11px 14px;
    background-color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
}

.hitlife-form input.hitlife-form__file::file-selector-button {
    margin-right: 14px;
    padding: 8px 16px;
    border: 1px solid var(--hitlife-green);
    border-radius: 999px;
    background-color: transparent;
    color: var(--hitlife-green);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hitlife-form input.hitlife-form__file:hover::file-selector-button {
    background-color: var(--hitlife-green);
    color: #fff;
}

.hitlife-form__hint {
    margin: 7px 0 0;
    color: #6c7a73;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Fallanfrage --------------------------------------------------------------

   Nur diese drei Bausteine kommen bei der Fallanfrage hinzu. Felder,
   Beschriftungen, Haekchen und Schaltflaeche teilt sie sich mit den
   uebrigen Formularen - eine Aenderung dort wirkt hier mit, und das ist
   auch gewollt. */

.hitlife-form__intro {
    max-width: 62ch;
    margin: 0 0 20px;
    font-size: 0.98rem;
    line-height: 1.65;
}

/* Der Hinweis, was hier nicht hineingehoert. Er traegt eine eigene Kante
   und einen eigenen Grund, damit er nicht wie Fliesstext ueberlesen wird -
   an dieser Stelle haengt daran mehr als an jedem anderen Satz. */
.hitlife-form__privacy {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-left: 4px solid var(--hitlife-form-accent, #2a6b4b);
    border-radius: 4px 10px 10px 4px;
    background-color: #fdf6e6;
    font-size: 0.94rem;
    line-height: 1.6;
}

/* Worauf sich die Anfrage bezieht */
.hitlife-form__vacancy {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #dce7e0;
    border-radius: 12px;
    background-color: #eaf3ee;
}

.hitlife-form__vacancy-label {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    opacity: 0.75;
}

.hitlife-form__vacancy-title {
    margin: 4px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.hitlife-form__vacancy-meta {
    margin: 4px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.8;
}