.elementor-431 .elementor-element.elementor-element-4124572{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-3ca5987 *//***********************
 * HSQ – Responsive CSS
 ***********************/

/* Reset */
.hsq, .hsq *, .hsq *::before, .hsq *::after { box-sizing: border-box; }

/* Design-Variablen */
.hsq{
  --hsq-font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hsq-text:#0f172a;
  --hsq-text-muted:#475569;
  --hsq-border:#e5e7eb;
  --hsq-border-hover:#ff7a1a;
  --hsq-answer-hover-bg:#fff4ec;
  --hsq-track:#eaf2f9;
  --hsq-progress-start:#22c55e;
  --hsq-progress-end:#16a34a;
}

/* Wrapper & Card */
.hsq{ font-family:var(--hsq-font-family)!important; color:var(--hsq-text)!important; padding:8px!important; }
.hsq .hsq-card{
  background:#fff!important; border:1px solid #e6eef7!important; border-radius:14px!important;
  box-shadow:0 2px 8px rgba(15,23,42,.05)!important; padding:20px!important; max-width:820px!important; margin:0 auto!important;
}

/* Head: Step-Tag oben rechts, Titel mittig */
.hsq .hsq-head{ display:flex!important; flex-direction:column!important; align-items:center!important; padding-right:0!important; position:relative!important; }
.hsq .hsq-step-tag{ order:-1!important; align-self:flex-end!important; position:static!important; margin-bottom:6px!important; font-weight:600!important; color:#64748b!important; font-size:14px!important; }
.hsq h2{ margin:0!important; font-weight:800!important; letter-spacing:-.02em!important; color:var(--hsq-text)!important; text-align:center!important; font-size:28px!important; line-height:1.2!important; }

/* Progress (Breite via --hsq-progress aus JS) */
.hsq .hsq-progress{ width:100%!important; height:12px!important; background:var(--hsq-track)!important; border-radius:999px!important; margin:14px 0 4px!important; overflow:hidden!important; }
.hsq .hsq-progress-bar{
  display:block!important; height:100%!important; width:var(--hsq-progress,0%)!important;
  background:linear-gradient(90deg,var(--hsq-progress-start),var(--hsq-progress-end))!important; border-radius:999px!important; transition:width .25s ease!important;
}

/* Fragen & Antworten */
.hsq .hsq-question{ font-size:20px!important; margin:18px 0 14px!important; line-height:1.35!important; color:var(--hsq-text)!important; }
.hsq .hsq-answers{ display:grid!important; gap:12px!important; }

/* Antwort-Buttons */
.hsq .hsq-answer{
  position:relative!important; width:100%!important; max-width:100%!important; text-align:left!important;
  border:1px solid var(--hsq-border)!important; background:#fff!important; border-radius:12px!important;
  padding:16px 44px 16px 14px!important; font-size:16px!important; font-weight:500!important; cursor:pointer!important;
  transition:background-color .15s,border-color .15s,box-shadow .15s,transform .02s!important;
  box-shadow:0 1px 2px rgba(15,23,42,.05)!important; color:var(--hsq-text)!important;
  white-space:normal!important; overflow-wrap:anywhere!important; word-break:break-word!important; touch-action:manipulation!important;
}
.hsq .hsq-answer::after{ content:"→"; position:absolute; right:14px; top:50%; transform:translateY(-50%) translateX(-6px); opacity:0; transition:transform .2s,opacity .2s; color:var(--hsq-border-hover); font-weight:700; }
.hsq .hsq-answer:hover, .hsq .hsq-answer:focus{ border-color:var(--hsq-border-hover)!important; background-color:var(--hsq-answer-hover-bg)!important; box-shadow:0 6px 18px rgba(255,122,26,.15)!important; outline:none!important; }
.hsq .hsq-answer:hover::after, .hsq .hsq-answer:focus::after{ opacity:1; transform:translateY(-50%); }

/* Footer-Buttons */
.hsq .hsq-footer{ display:flex!important; gap:12px!important; margin-top:18px!important; flex-wrap:wrap!important; }
.hsq .hsq-btn{ appearance:none!important; border:none!important; border-radius:12px!important; padding:12px 16px!important; font-weight:700!important; cursor:pointer!important; font-size:15px!important; }
.hsq .hsq-btn-ghost{ background:#f1f5f9!important; color:var(--hsq-text)!important; border:1px solid #e2e8f0!important; }
.hsq .hsq-btn-ghost:hover{ background:#e9eef5!important; }
.hsq .hsq-btn-primary{ background:linear-gradient(90deg,#ff7a1a,#ff5e00)!important; color:#fff!important; text-decoration:none!important; display:inline-block!important; box-shadow:0 6px 14px rgba(255,122,26,.25)!important; }

/* Ergebnis */
.hsq .hsq-result-title{ text-align:center!important; margin:12px 0 6px!important; font-weight:800!important; color:var(--hsq-text)!important; }
.hsq .hsq-perc{ font-size:clamp(36px,9vw,56px)!important; line-height:1!important; font-weight:900!important; text-align:center!important; margin-top:6px!important; }
.hsq .hsq-status{ text-align:center!important; font-size:20px!important; font-weight:800!important; margin-bottom:4px!important; color:var(--hsq-text)!important; }
.hsq .hsq-desc{ text-align:center!important; color:var(--hsq-text-muted)!important; margin-bottom:6px!important; }
.hsq .hsq-contact-wrap{ background:#f6fbff!important; border:1px solid #e6eef7!important; border-radius:12px!important; padding:16px!important; margin-top:16px!important; }
.hsq .hsq-contact-title{ font-weight:700!important; margin-bottom:10px!important; color:var(--hsq-text)!important; }
.hsq .hsq-contact-table{ display:grid!important; grid-template-columns:140px 1fr!important; row-gap:8px!important; column-gap:12px!important; }
.hsq .hsq-row{ display:contents!important; }
.hsq .hsq-cell{ padding:2px 0!important; color:var(--hsq-text)!important; }
.hsq .hsq-label{ font-weight:700!important; color:#334155!important; }

/* Result-CTAs */
.hsq .hsq-cta-text{ text-align:center!important; margin:16px 0 8px!important; color:var(--hsq-text-muted)!important; }
.hsq .hsq-cta-wrap{ display:flex!important; justify-content:center!important; gap:12px!important; flex-wrap:wrap!important; margin-bottom:6px!important; }

/* Lead-Text (Kontakt-Schritt) wie Fragen */
.hsq .hsq-lead{ margin:18px 0 14px!important; font-size:20px!important; line-height:1.35!important; font-weight:700!important; color:var(--hsq-text)!important; }

/* Inputs: Text schwarz + Autofill fix */
.hsq .hsq-field input{ color:#000!important; -webkit-text-fill-color:#000!important; caret-color:#000!important; }
.hsq .hsq-field input::placeholder{ color:#64748b!important; opacity:1; }
.hsq .hsq-field input:-webkit-autofill,
.hsq .hsq-field input:-webkit-autofill:hover,
.hsq .hsq-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#000!important;
  transition: background-color 99999s ease-in-out 0s;
}

/* Utilities */
.hsq .hsq-step{ margin-top:10px!important; }
.hsq .hsq-hidden{ display:none!important; }

/* Responsive */
@media (max-width:640px){
  .hsq .hsq-card{ padding:16px!important; border-radius:12px!important; }
  .hsq h2{ font-size:24px!important; }
  .hsq .hsq-step-tag{ font-size:12px!important; }
  .hsq .hsq-progress{ height:10px!important; }
  .hsq .hsq-question{ font-size:18px!important; }
  .hsq .hsq-answer{ padding:14px 42px 14px 14px!important; font-size:16px!important; border-radius:10px!important; }
  .hsq .hsq-contact-table{ grid-template-columns:110px 1fr!important; }
  .hsq .hsq-cta-wrap{ flex-direction:column!important; align-items:stretch!important; }
  .hsq .hsq-btn{ width:100%!important; text-align:center!important; }
}
@media (max-width:360px){
  .hsq h2{ font-size:22px!important; }
  .hsq .hsq-perc{ font-size:40px!important; }
  .hsq .hsq-answer{ font-size:15px!important; }
  .hsq .hsq-contact-table{ grid-template-columns:100px 1fr!important; }
}

/* ===== Mobile: Mindestschriftgröße 1rem überall, wo's klein wurde ===== */
@media (max-width:640px){
  /* Basis – falls das Theme global verkleinert */
  .hsq{ font-size:16px !important; -webkit-text-size-adjust:100%; }

  /* Kontakt-/Ergebnis-Texte & Labels */
  .hsq .hsq-contact-title,
  .hsq .hsq-label,
  .hsq .hsq-cell,
  .hsq .hsq-cta-text,
  .hsq .hsq-field label,
  .hsq .hsq-field input,
  .hsq .hsq-step-tag,
  .hsq .hsq-btn{
    font-size:1rem !important;
    line-height:1.4 !important;
  }

  /* etwas mehr Luft in den mobilen CTAs */
  .hsq .hsq-cta-wrap .hsq-btn{ padding:14px 16px !important; }

  /* Kontakt-Tabelle bleibt lesbar mit größerer Label-Spalte */
  .hsq .hsq-contact-table{ grid-template-columns:120px 1fr !important; }
}

/* 1) Ergebnis: E-Mail bricht korrekt um (verhindert Rechts-Überlauf) */
.hsq .hsq-contact-table .hsq-cell{
  min-width: 0 !important;              /* Grid-Overflow verhindern */
  overflow-wrap: anywhere !important;    /* überall umbrechen */
  word-break: break-word !important;
}

/* 2) Kontaktformular: mehr vertikaler Abstand zwischen den Feldern (Mobile) */
@media (max-width:640px){
  .hsq .hsq-form-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;           /* ↑ Abstand zwischen Vorname/Nachname/… */
    column-gap: 0 !important;
  }
  .hsq .hsq-field label{ margin-bottom: 8px !important; }
  .hsq .hsq-field input{ padding: 14px 12px !important; }
}

/* Fragebilder: Desktop/Tablet 350x350, Smartphone 175x175, mittig */
.hsq .hsq-q-media{
  display:flex !important;
  justify-content:center !important;
  margin:10px 0 12px !important;
}
.hsq .hsq-q-media img{
  display:block !important;
  width:350px !important;             /* Tablet/Desktop */
  max-width:100% !important;          /* falls Container schmaler ist */
  height:auto !important;             /* mit aspect-ratio quadratisch */
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  border-radius:12px !important;
  box-shadow:0 2px 10px rgba(15,23,42,.06) !important;
}

@media (max-width:640px){
  .hsq .hsq-q-media img{
    width:175px !important;           /* Smartphone = ~50% von 350 */
  }
}

/* Consent-Checkbox über den Kontakt-Buttons */
.hsq .hsq-consent{
  display:block !important;
  margin:12px 0 8px !important;
  color:var(--hsq-text) !important;
  font-size:16px !important;
  line-height:1.4 !important;
}
.hsq .hsq-consent a{ color:#0f172a !important; text-decoration:underline !important; }
.hsq .hsq-consent input{
  vertical-align:middle !important;
  margin:0 10px 0 0 !important;
  width:18px !important; height:18px !important;
}
@media (max-width:640px){
  .hsq .hsq-consent{ font-size:1rem !important; }
}/* End custom CSS */