/* ══════════════════════════════════════════════════════════════════
   Kontaktformular + "Oder direkt" (Startseite und Leistungsseiten)
   Eine Quelle für beide Seitentypen (vorher je eine Kopie in home.css
   und service.css). Nutzt die --color-*-Tokens: auf den Leistungsseiten
   aus tokens.css, auf der Startseite aus der Inline-Palette in index.html.
   Wird nach service.css bzw. home.css geladen.
   ══════════════════════════════════════════════════════════════════ */
.sp-form-wrap { width: 100%; max-width: 640px; margin: 34px auto 0; text-align: left; }
.sp-form {
  position: relative;
  background: rgba(8, 8, 13, .72);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  padding: clamp(22px, 4vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.sp-form::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: var(--radius-md, 16px) var(--radius-md, 16px) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.sp-form .cf-field { display: flex; flex-direction: column; gap: 8px; }
.sp-form .cf-field--full { grid-column: 1 / -1; }
.sp-form label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--color-haze);
}
.sp-form input, .sp-form select, .sp-form textarea {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm, 10px); color: var(--color-fog);
  font-family: var(--font-body); font-size: 15px; padding: 13px 16px; width: 100%;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}
.sp-form input::placeholder, .sp-form textarea::placeholder { color: var(--color-haze); }
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-dim); background: rgba(0, 0, 0, .45);
}
.sp-form select {
  appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6e6e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sp-form select option { background: #12121a; color: var(--color-fog); }
.sp-form textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
/* Die Einwilligung ist ein <label> und erbt sonst Versalien, Sperrung und
   Gewicht der Feldbeschriftungen (.sp-form label) – als Fließtext zurücksetzen. */
.sp-form .cf-consent {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.6;
  letter-spacing: normal; text-transform: none; color: var(--color-mist); cursor: pointer;
}
.sp-form .cf-consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--color-accent); cursor: pointer;
}
.sp-form .cf-consent a { color: var(--color-fog); text-decoration: underline; text-underline-offset: 2px; }
.sp-form .cf-consent a:hover { color: var(--color-accent); }
.sp-form .cf-submit-row {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; justify-content: space-between; margin-top: 4px;
}
/* „font: inherit" hat hier jeden Knopfstil überschrieben — deshalb sah der
   Absende-Knopf nie aus wie die übrigen Knöpfe der Seite. Gilt jetzt nur
   noch für ungesättigte Knöpfe ohne eigene Klasse. */
.sp-form .cf-submit-row button:not([class]) { font: inherit; }
.sp-form .cf-submit-row button { border: none; cursor: pointer; }
.sp-form .cf-submit-row button:disabled { opacity: .55; cursor: default; pointer-events: none; }
.sp-form .cf-hint { font-family: var(--font-body); font-size: 11px; color: var(--color-haze); }
.sp-form .cf-result {
  grid-column: 1 / -1; font-family: var(--font-body); font-size: 14px;
  padding: 14px 18px; border-radius: var(--radius-sm, 10px); display: none;
}
.sp-form .cf-result.show { display: block; }
.sp-form .cf-result.success {
  background: rgba(243,146,0,.08); border: 1px solid var(--color-accent-dim); color: var(--color-fog);
}
.sp-form .cf-result.error {
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: #ff8f8f;
}
.sp-form input.cf-invalid, .sp-form textarea.cf-invalid, .sp-form select.cf-invalid { border-color: #ef4444; }

@media (max-width: 640px) {
  .sp-form { grid-template-columns: 1fr; }
  .sp-form .cf-submit-row { justify-content: center; }
}


/* ── Weitere Kontaktwege unter dem Formular (Leistungsseiten) ────────── */
.sp-contact-links { width: 100%; max-width: 640px; margin: 40px auto 0; text-align: center; }
.sp-contact-links h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 10px;
  letter-spacing: .35em; text-transform: uppercase; color: var(--color-haze); margin: 0 0 18px;
}
.sp-contact-links ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px;
}
.sp-contact-links li { min-width: 0; }
.sp-contact-links a {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px;
  border: 1px solid var(--color-rule); border-radius: 14px; color: var(--color-mist);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.sp-contact-links a:hover { background: rgba(255,255,255,.035); border-color: var(--color-rule-strong); color: var(--color-fog); }
.sp-clink__ic {
  flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--color-rule-strong);
  border-radius: 999px; display: grid; place-items: center; color: var(--color-mist);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.sp-contact-links a:hover .sp-clink__ic { background: var(--color-accent); border-color: var(--color-accent); color: #000; }
.sp-clink__txt { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.sp-clink__txt .k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--color-haze); transition: color .3s var(--ease-out);
}
.sp-contact-links a:hover .sp-clink__txt .k { color: var(--color-accent); }
.sp-clink__txt .v {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  letter-spacing: -.01em; overflow-wrap: anywhere;
}