/* Kontaktformular (contact-form.js). Eigenes File, damit Deep-Dives es
   von website.app.freshx.de laden können, ohne das Theme zu duplizieren. */
.cf {
    margin-top: 1.4rem; max-width: 46rem;
    background: var(--surface, #fff); color: var(--ink, #353E4A);
    border: 1px solid var(--line, #d5dde5);
    border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow, none);
    text-align: left;
}
.slide .cf { margin-left: auto; margin-right: auto; }
.cf-lead { margin: 0 0 1.2rem; color: var(--ink-soft, #5b6774); font-size: 0.95rem; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; }
.cf-field { display: flex; flex-direction: column; gap: 0.3rem; }
.cf [hidden] { display: none !important; }
.cf-field.cf-wide { grid-column: 1 / -1; }
.cf-label { font-size: 0.82rem; font-weight: 600; color: inherit; }
.cf input, .cf textarea {
    font: inherit; font-size: 0.95rem; color: inherit;
    background: var(--bg, #f4f7fa); border: 1px solid var(--line, #d5dde5); border-radius: 10px;
    padding: 0.55rem 0.7rem; width: 100%; box-sizing: border-box;
}
.cf textarea { resize: vertical; min-height: 5.5rem; }
.cf input:focus-visible, .cf textarea:focus-visible {
    outline: 2px solid var(--accent, #1268B3); outline-offset: 1px; border-color: var(--accent, #1268B3);
}
.cf-choices { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 1.2rem; }
.cf-choices-label { font-size: 0.82rem; font-weight: 600; }
.cf-choice {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.92rem; line-height: 1.35; cursor: pointer;
    border: 1px solid var(--line, #d5dde5); border-radius: 12px;
    padding: 0.65rem 0.8rem; background: var(--bg, #f4f7fa);
}
.cf-choice:has(input:checked) {
    border-color: var(--accent, #1268B3);
    box-shadow: inset 0 0 0 1px var(--accent, #1268B3);
}
.cf-choice input { margin-top: 0.2rem; flex: none; accent-color: var(--accent, #1268B3); width: auto; }
.cf-msg { margin-top: 0.9rem; }
.cf-msg-open {
    font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
    color: var(--accent, #1268B3); background: none; border: 0; padding: 0;
    text-decoration: underline; text-underline-offset: 0.15em;
}
.cf-msg-open:hover { color: var(--blue-deep, #0d4f8a); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-top: 1.2rem; }
.cf-submit {
    font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer;
    color: #fff; background: var(--accent, #1268B3); border: 0;
    border-radius: 999px; padding: 0.6rem 1.5rem;
}
.cf-submit:hover:not(:disabled) { background: var(--blue-deep, #0d4f8a); }
.cf-submit:disabled { opacity: 0.55; cursor: progress; }
.cf-note { margin: 0; font-size: 0.88rem; color: var(--ink-soft, #5b6774); }
.cf-note.cf-bad { color: var(--bad, #b42318); font-weight: 600; }
.cf-ok {
    margin-top: 1.4rem; max-width: 46rem; text-align: left;
    background: var(--surface, #fff); border: 1px solid var(--ok, #3b8d5a); border-left-width: 4px;
    border-radius: 16px; padding: 1.2rem 1.4rem; color: var(--ink, #353E4A); font-weight: 600;
}
.slide .cf-ok { margin-left: auto; margin-right: auto; }
@media (max-width: 620px) {
    .cf { padding: 1.2rem; }
    .cf-grid { grid-template-columns: 1fr; }
}