/* ==========================================================================
   Form components for the Contact page (the Demo page uses the HubSpot embed styles in demo.css)
   Fields, consent checkbox, submit spinner, inline errors, success panel.
   ========================================================================== */

/* Fields */
.field { margin-top: 14px; }
.field__label { display: block; margin-bottom: 11px; font-size: 14px; line-height: 20px; color: #666; }
.field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field__input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #eef2fe;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  outline: none;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: var(--blue); opacity: 0.55; transition: opacity 0.3s; }
.field__input:hover { background: #e6ecfd; }
.field__input:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(53, 90, 240, 0.08); }
.field__input:focus::placeholder { opacity: 0.35; }
textarea.field__input { height: 184px; padding: 14px 16px; resize: vertical; line-height: 24px; }
select.field__input { cursor: pointer; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355af0' 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 16px center; background-size: 20px; }
.field.is-invalid .field__input { border-color: #e0475c; background-color: #fff5f6; }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 4px rgba(224, 71, 92, 0.1); }
.field.is-valid .field__input:not(:focus) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355af0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.field__error {
  display: grid;
  grid-template-rows: 0fr;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #d23a50;
  transition: grid-template-rows 0.4s var(--ease-out), opacity 0.3s, margin 0.4s var(--ease-out);
  opacity: 0;
}
.field__error > span { overflow: hidden; }
.field__error.is-shown { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
.is-shake { animation: shake 0.45s var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.form-submit { width: 100%; margin-top: 20px; border-radius: 4px; }
.form-spinner { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.3s; }
.form-submit__label { transition: opacity 0.3s, transform 0.3s; }
.is-sending .form-spinner { opacity: 1; transform: none; animation: spin 0.7s linear infinite; }
.is-sending .form-submit__label { opacity: 0; transform: translateY(-6px); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Consent */
.consent { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 14px; line-height: 20px; color: #656565; cursor: pointer; width: max-content; max-width: 100%; }
.consent input { position: absolute; z-index: 2; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.consent__box { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.consent__check { position: absolute; inset: 0; width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset 0.45s var(--ease-out) 0.1s; }
.consent__box::before { content: ""; position: absolute; inset: 1px; border-radius: 5px; background: var(--blue); transform: scale(0.4); opacity: 0; transition: transform 0.4s var(--ease-spring), opacity 0.25s; }
.consent input:checked ~ .consent__box::before { transform: none; opacity: 1; }
.consent input:checked ~ .consent__box .consent__check { stroke-dashoffset: 0; }
.consent input:focus-visible ~ .consent__box { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.consent a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 0.3s, background-size 0.4s var(--ease-out); }
.consent a:hover { color: var(--blue); background-size: 100% 1px; }
.consent.is-invalid { color: #d23a50; }
.consent__error.is-shown { margin-top: 4px; }

/* Success state */
form.is-sent > :not([data-success]) { display: none; }
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 16px 60px;
}
.form-success[hidden] { display: none; }
.success__icon { width: 80px; height: 80px; fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.success__icon circle { stroke-dasharray: 227; stroke-dashoffset: 227; transform: rotate(-90deg); transform-origin: center; }
.success__icon path { stroke-dasharray: 50; stroke-dashoffset: 50; }
.is-sent .success__icon circle { animation: draw 0.9s var(--ease-out) 0.15s forwards; }
.is-sent .success__icon path { animation: draw 0.5s var(--ease-out) 0.8s forwards; }
.is-sent .success__icon { animation: pop 0.6s var(--ease-spring) 0.9s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success__title { margin-top: 24px; font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.038em; outline: none; }
.success__text { max-width: 460px; margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--navy); }
.success__text strong { font-weight: 600; color: var(--blue); }
.success__again { margin-top: 28px; }
.is-sent .success__title, .is-sent .success__text, .is-sent .success__again { animation: rise 0.8s var(--ease-out) both; }
.is-sent .success__title { animation-delay: 0.5s; }
.is-sent .success__text { animation-delay: 0.62s; }
.is-sent .success__again { animation-delay: 0.74s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes pop { 0% { transform: scale(0.86); } 100% { transform: none; } }

/* Consent variant: outlined checkbox (contact form) */
.consent--box .consent__box { border: 1px solid #8c8c8c; border-radius: 2px; background: #fff; transition: border-color 0.3s; }
.consent--box .consent__box::before { inset: -1px; border-radius: 3px; }
.consent--box:hover .consent__box { border-color: var(--blue); }
.consent--box input:checked ~ .consent__box { border-color: var(--blue); }
.consent--box.is-invalid .consent__box { border-color: #d23a50; }

/* German: keep inline errors and the consent line on whole words (no hyphenated "Datenschutzer-klärung") */
html[lang="de"] :is(.field__error, .consent__text) { -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 767px) {
  /* "Mustermann" placeholder: a little more room on the right of the half-width name inputs */
  html[lang="de"] .field__pair .field__input { padding-right: 8px; }
}