/**
 * DECAID · HubSpot Form Styling (site-wide)
 *
 * Hosting: IONOS-Webspace, gehostet als
 *          https://decaid.de/assets/css/hubspot-forms.css
 * Einbau:  Webflow Site-Settings → Custom Code → Head Code
 *          <link rel="stylesheet" href="…hubspot-forms.css">
 *
 * Was es tut:
 *   Site-weite Default-Styles für alle HubSpot-Forms (`.hbspt-form`-Klasse):
 *   - Reset für form/fieldset/submitted-message
 *   - Inputs: 52px Höhe, 12px Border-Radius, Lavender-Border-on-Focus
 *   - Custom Select-Caret als SVG
 *   - Textarea Min-Height
 *   - Submit-Button: charcoal #1d1d1f, weiße Schrift, 17px, full-width
 *   - Error-Messages mit Pseudo-"Erforderlich"-Label
 *   - Lädt Satoshi (Fontshare) via @import als Fallback wenn nicht schon
 *     anderswo geladen
 *
 * Scope:
 *   Default-Stile für Site-weite HubSpot-Forms. Embeds mit eigenem Scope
 *   (z. B. .decaid-dl-<slug> aus decaid-downloadables-v0.4.md §4.2)
 *   überschreiben diese Defaults bewusst — Specificity durch !important
 *   auf beiden Seiten, die scoped-Klasse gewinnt durch Selektor-Spezifität.
 *
 * Changelog:
 *   v0.1.0 (2026-05-28) — auf IONOS migriert, vom inline Webflow-Head-Code
 *                          extrahiert.
 */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,400,300&display=swap');

.hbspt-form,
.hbspt-form * {
  box-sizing: border-box !important;
  outline: none !important;
}

.webinar-form-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hbspt-form {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

.hbspt-form form {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.hbspt-form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.submitted-message {
  background-color: #f0fdf4 !important;
  border: 1.5px solid #4ade80 !important;
  border-radius: 12px !important;
  padding: 32px 24px !important;
  text-align: center !important;
  margin-top: 10px !important;
  color: #15803d !important;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.submitted-message p,
.submitted-message span {
  margin: 0 !important;
  color: #15803d !important;
}

.hs-form-field {
  margin-bottom: 32px !important;
  width: 100% !important;
  padding: 0 !important;
}

.hs-form-field > div,
.hs-form-field > div.input {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.hs-form-field label {
  display: block;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #1d1d1f;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  padding: 0 !important;
}

.hs-form-required {
  color: #ff3b30;
  font-weight: 400;
}

.hs-input {
  display: block !important;
  width: 100% !important;
  height: 52px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 52px !important;
  color: #1d1d1f;
  background-color: #ffffff !important;
  background-clip: padding-box !important;
  background-image: none !important;
  border: 1.5px solid #d2d2d7 !important;
  border-radius: 12px !important;
  border-style: solid !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s ease;
}

.hs-input::placeholder {
  color: #86868b;
  font-weight: 400;
}

.hs-input:focus {
  border-color: #1d1d1f !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.hs-input:hover {
  border-color: #a1a1a6 !important;
}

select.hs-input {
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px !important;
  cursor: pointer;
}

textarea.hs-input {
  height: auto !important;
  min-height: 120px !important;
  padding: 14px 16px !important;
  line-height: 1.6 !important;
  resize: vertical;
}

.hs-form-booleancheckbox {
  margin-bottom: 32px !important;
}

.hs-form-booleancheckbox label {
  display: flex !important;
  align-items: flex-start !important;
}

.hs-form-booleancheckbox input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  cursor: pointer;
  border: 1.5px solid #d2d2d7 !important;
  border-radius: 4px !important;
}

.hs-form-booleancheckbox input[type="checkbox"]:checked {
  background-color: #1d1d1f !important;
  border-color: #1d1d1f !important;
}

.hs-submit {
  margin-top: 40px !important;
  width: 100% !important;
}

.hs-submit .actions {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-button {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: none !important;
  padding: 16px 32px !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  width: 100% !important;
  display: block !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.hs-button:hover {
  background: #2d2d2f !important;
}

.hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.hs-error-msg {
  font-size: 0 !important;
  color: #ff3b30;
}

.hs-error-msg::before {
  content: "Erforderlich";
  font-size: 13px;
  display: block;
}

.hs-input.error,
.hs-input.invalid {
  border-color: #ff3b30 !important;
}

.footer-copyright-center { color: #8a8a8a !important; }