/* Contact (/kontakt): C07 hero + C15 band surface holding a cream form card. */

/* hero: statement line, then the gradient word alone on its own line */
.contact-title { display: flex; flex-direction: column; align-items: center; }
.contact-title .line { display: block; }
/* long single words (DE "zusammenarbeiten", LB "zesummeschaffen") shrink to fit the column instead of breaking;
   .72em ≈ widest per-character advance of the heavy display cut */
.contact-title .grad-text { max-width: 100%; overflow-wrap: anywhere; font-size: min(1em, calc((100vw - 2 * var(--gutter)) / (var(--chars, 8) * .72))); }

.contact-hero .lead { text-wrap: balance; }

/* card on the gradient band (C15 surface) */
.contact-card {
  background: var(--cream); color: var(--ink); border-radius: var(--r-card); padding: 80px;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 80px; align-items: start;
}
.contact-main { min-width: 0; }
/* the global teal focus ring is 1.6:1 on cream; ink keeps keyboard focus visible on the card */
.contact-card :focus-visible { outline-color: var(--ink); }

/* form */
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form[hidden] { display: none; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* 70% ink on the input fill = 5.2:1 (60% was 3.9:1, below AA) */
.contact-form ::placeholder { color: color-mix(in srgb, var(--ink) 70%, transparent); opacity: 1; }
.contact-form .field textarea { min-height: 200px; }
.contact-form .err:empty { display: none; }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 60px; cursor: pointer; }
.select select:has(option[value=""]:checked) { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.select option { color: var(--ink); }
.select .select-ico { position: absolute; right: 20px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); pointer-events: none; color: var(--ink); }

.contact-consent { position: relative; margin-top: 4px; }
/* 44×44 hit square centred on the 22px checkbox; it belongs to the label, so it toggles the box and closes the gap to the text */
.contact-consent label::before { content: ""; position: absolute; left: -11px; top: -9px; width: 44px; height: 44px; }
.contact-consent label { line-height: 1.4; cursor: pointer; }
.contact-consent a { text-decoration: underline; text-underline-offset: 3px; }

.contact-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px; }
.contact-status { font-size: 16px; line-height: 1.4; }
.contact-status:empty { display: none; }

.contact-success:not([hidden]) { display: flex; flex-direction: column; gap: 20px; }
.contact-success:focus { outline: none; }
/* focus-scroll targets stay clear of the sticky nav pill (20 + 75) plus the field label above (33) */
.contact-success, .contact-form [aria-invalid="true"], .contact-consent input { scroll-margin-top: 140px; }

/* contact details: hairline rows (C12b row language) */
.contact-info { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.ci-row { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }
.ci-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid currentColor; }
.ci-row dt { font-family: var(--font-body-strong); font-weight: 700; }
.ci-row dd { margin: 0; overflow-wrap: anywhere; }
.ci-address span { display: block; }
.ci-social { display: flex; gap: 10px; padding-top: 4px; }
.ci-social a {
  width: 56px; height: 56px; border-radius: 40px; background: var(--ink); color: var(--cream);
  display: grid; place-items: center; flex: none; transition: background-color 400ms var(--spring-b02);
}
.ci-social a:hover { background: var(--ink-80); }
.ci-social a:active { background: var(--ink); }
.ci-social svg { width: 24px; height: 24px; }

@media (max-width: 1279.98px) {
  .contact-card { padding: 40px; gap: 40px; }
  .ci-social a { width: 44px; height: 44px; }
  .ci-social svg { width: 16px; height: 16px; }
}
@media (max-width: 767.98px) {
  .contact-card { grid-template-columns: minmax(0, 1fr); padding: 40px 20px; }
  .contact-row { grid-template-columns: minmax(0, 1fr); }
  .contact-form .field textarea { min-height: 180px; }
}