/* Seitenspezifisches Layout: Kontaktseite (PROJ-9). Felder und Auswahl stecken in components.css (.field, .field__select). */
.contact__head { max-width: 680px; }
.contact__head > * + * { margin-top: var(--space-4); }
.contact__title { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }

.contact__grid { display: grid; gap: var(--space-8); margin-top: var(--space-10); align-items: start; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-10); } }

.contact__form, .contact__success { padding: clamp(var(--space-5), 4vw, var(--space-8)); }
.contact__form { display: grid; gap: var(--space-5); }
.contact__form[hidden], .contact__success[hidden] { display: none; }
.contact__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .contact__row { grid-template-columns: 1fr 1fr; } }

/* Honigtopf: aus dem Layout genommen, nicht display:none (manche Bots überspringen das) */
.contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__alert {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4);
  border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-weight: var(--fw-medium);
}
.contact__alert[hidden] { display: none; }
.contact__alert .icon { flex: none; margin-top: 3px; }

.contact__submit { display: grid; gap: var(--space-4); justify-items: start; }
.contact__form[aria-busy="true"] [data-submit] { opacity: .7; cursor: progress; }
.contact__privacy { color: var(--text-muted); font-size: var(--fs-small); max-width: 52ch; }

.contact__success { display: grid; gap: var(--space-4); justify-items: start; outline: 0; }
.contact__success:focus-visible { outline: 3px solid var(--focus-outline); outline-offset: 3px; }
.contact__success-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: var(--text-on-accent); font-size: 24px; }
.contact__success-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: var(--lh-snug); }

.contact__side { display: grid; gap: var(--space-5); }
.contact__direct, .contact__steps { padding: var(--space-6); }
.contact__side-title { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.contact__list { display: grid; gap: var(--space-3); margin-top: var(--space-4); list-style: none; }
.contact__list li { display: flex; align-items: center; gap: var(--space-3); }
.contact__list .icon { color: var(--accent-text); font-size: 20px; }
.contact__list a { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.contact__steplist { display: grid; gap: var(--space-4); margin-top: var(--space-4); list-style: none; }
.contact__steplist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact__stepno { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy-900); color: var(--text-on-inverse); font-family: var(--font-mono); font-size: 13px; }