.elementor-10738 .elementor-element.elementor-element-8294210{--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;}/* Start custom CSS for shortcode, class: .elementor-element-b6e3763 *//* === CleverReach Signup (haet-Integration) – Blau/Weiß, runde Ecken === */
.lia-cr {
  --blue:#00447C;
  --blue-hover:#084a6e;
  --text:#0a0a0a;
  --muted:#6b7280;
  --error:#d92d20;
  --radius:10px;
  --gap:22px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
}

/* Layout & Abstände */
.lia-cr .haet-cleverreach-field-wrap { margin-bottom:var(--gap)!important; }

/* Labels */
.lia-cr .haet-cleverreach-field-wrap > label {
  display:inline-block;
  margin-bottom:8px!important;
  font-weight:700!important;
  color:var(--blue)!important;
}

/* Inputs, Selects, Textareas */
.lia-cr input[type="text"],
.lia-cr input[type="email"],
.lia-cr input[type="tel"],
.lia-cr input[type="password"],
.lia-cr select,
.lia-cr textarea {
  width:100%!important;
  background:#fff!important;
  border:2px solid var(--blue)!important;
  border-radius:var(--radius)!important;
  padding:12px 14px!important;
  font-size:16px!important;
  line-height:1.4!important;
  color:var(--text)!important;
  box-shadow:none!important;
  outline:none!important;
}
.lia-cr input::placeholder,
.lia-cr textarea::placeholder { color:var(--muted)!important; }
.lia-cr input:focus,
.lia-cr select:focus,
.lia-cr textarea:focus {
  border-color:var(--blue)!important;
  box-shadow:none!important;
}

/* Textarea */
.lia-cr textarea { min-height:130px!important; resize:vertical!important; }

/* Checkbox (Datenschutz) */
.lia-cr .cleverreach-checkbox {
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.4;
  margin-bottom:18px;
}
.lia-cr .cleverreach-checkbox label {
  margin:0!important;
  font-weight:500;
  color:#374151;
}
.lia-cr input[type="checkbox"] {
  accent-color:var(--blue)!important;
  margin-top:2px;
}

/* Beschreibungstext */
.lia-cr .type-description p {
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.55;
  color:#374151;
  margin:0 0 16px 0!important;
}

/* Pflichtfeld-Styles */
.lia-cr input[required]:not([type="checkbox"]):not([type="radio"]),
.lia-cr select[required],
.lia-cr textarea[required] {
  border-color:var(--error)!important;
}
.lia-cr input[required]:valid,
.lia-cr select[required]:valid,
.lia-cr textarea[required]:valid {
  border-color:var(--blue)!important;
}
.lia-cr input[type="email"]:invalid { border-color:var(--error)!important; }
.lia-cr label[for="haet-cleverreach-cleverreach_email"]::after {
  content:" *"; color:var(--error); font-weight:700;
}
/* Hinweis unter Email-Feld */
.lia-cr .haet-cleverreach-field-wrap.type-email::after {
  content:"Hinweis: Rot umrandete Felder sind Pflichtfelder.";
  display:block;
  margin-top:8px;
  font-size:14px;
  color:var(--error);
  font-weight:500;
}

/* --- Submit-Button zentriert --- */
.lia-cr #haet-cleverreach-submit,
.lia-cr .type-submit .button {
  display:block;
  width:100%;
  max-width:280px;
  margin:0 auto;               /* mittig */
  text-align:center;
  background:#fff!important;
  color:var(--blue)!important;
  border:2px solid var(--blue)!important;
  border-radius:8px;
  padding:12px 20px!important;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease-in-out;
}
.lia-cr #haet-cleverreach-submit:hover,
.lia-cr .type-submit .button:hover {
  color:var(--blue-hover)!important;
  border-color:var(--blue-hover)!important;
  transform:translateY(-2px);
}

/* --- Anrede-Buttons links --- */
.lia-cr .haet-cleverreach-field-wrap.type-gender {
  text-align:left!important;
}
.lia-cr .haet-cleverreach-field-wrap.type-gender .cr-segment {
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin-left:0!important;
  margin-right:auto!important;
  text-align:left!important;
}
.lia-cr .haet-cleverreach-field-wrap.type-gender .cr-segment [role="radio"] {
  display:inline-block!important;
  padding:10px 14px!important;
  border:2px solid var(--blue)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:var(--blue)!important;
  font-weight:600!important;
  cursor:pointer!important;
  user-select:none!important;
  text-align:left!important;
}
.lia-cr .haet-cleverreach-field-wrap.type-gender .cr-segment [role="radio"][aria-checked="true"] {
  background:#eef6fb!important;
  border-color:var(--blue)!important;
  color:var(--blue)!important;
}

/* ==== NOTBREMSE: Anrede-Gruppe strikt links ==== */

/* 0) Falls Elementor das gesamte Widget zentriert */
.elementor-widget-shortcode .lia-cr,
.elementor-column .lia-cr {
  text-align: left !important;
}

/* 1) Der Anrede-Wrapper selbst darf nichts zentrieren */
.lia-cr .haet-cleverreach-field-wrap.type-gender {
  text-align: left !important;
  display: block !important;               /* Grid/Flex-Zentrierung neutralisieren */
  justify-content: flex-start !important;
  align-items: flex-start !important;
  justify-items: start !important;
  place-items: start start !important;
}

/* 2) Der Segment-Container: als Block-Flex links starten */
.lia-cr .haet-cleverreach-field-wrap.type-gender .cr-segment {
  display: flex !important;                /* kein inline-flex */
  flex-wrap: wrap !important;
  justify-content: flex-start !important;  /* LINKS */
  align-items: flex-start !important;
  align-self: flex-start !important;       /* falls der Wrapper zentriert */
  gap: 8px !important;
  width: 100% !important;                  /* volle Zeile, verhindert Mittig-Layout */
  max-width: none !important;
  margin: 6px 0 0 0 !important;            /* KEIN auto */
  text-align: left !important;
}

/* 3) Buttons: niemals zentrieren/mitfließen lassen */
.lia-cr .haet-cleverreach-field-wrap.type-gender .cr-segment [role="radio"] {
  display: inline-block !important;        /* kein flex -> keine center-Ausrichtung */
  text-align: left !important;
  vertical-align: top !important;
  /* (deine restlichen Button-Styles bleiben) */
}

/* Dankesnachricht nach Absenden */
.lia-cr .cr-thankyou {
  display: none; 
  padding: 20px;
  background: #ecfdf5;          /* sanftes Grün */
  border: 1px solid #6ee7b7;    /* grünlicher Rahmen */
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: #065f46;               /* sattes Grün für Text */
  font-weight: 600;
  margin-top: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Wenn Erfolgsmeldung da, dann Formular ausblenden */
.lia-cr .success ~ form,
.lia-cr .cr_success ~ form,
.lia-cr .cr_message.success ~ form {
  display: none !important;
}

/* E-Mail: wird blau, sobald gültig – selbst wenn der Wrapper .error hat */
.lia-cr .haet-cleverreach-field-wrap.type-email input[type="email"][required]:valid,
.lia-cr .haet-cleverreach-field-wrap.type-email.error input[type="email"][required]:valid {
  border-color: var(--blue) !important;
}

/* Nur rot zeigen, wenn wirklich ungültig UND nicht leer via Placeholder-Shown-Logik */
.lia-cr .haet-cleverreach-field-wrap.type-email input[type="email"]:not(:placeholder-shown):invalid {
  border-color: var(--error) !important;
}

/* Beim Fokussieren stets blau (besseres Feedback) */
.lia-cr .haet-cleverreach-field-wrap.type-email input[type="email"]:focus {
  border-color: var(--blue) !important;
}/* End custom CSS */