/* ========================================
   CONTACT FORM STYLES - CLEAN & MINIMAL
   ======================================== */

/* --- Steps & Controls --- */

.hero-contact{
    padding-bottom: 0;
    background: transparent;
  }


.contact-steps,
.cw-steps {
  max-width: 1250px;
  margin-inline: auto;
  position: relative;
  z-index: 1 !important;
}
.contact-controls,
.cw-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 10px auto;
  width: 100%;
  max-width: 500px;
}
.contact-step,
.cw-step {
  display: none !important;
  position: relative;
  z-index: 1 !important;
}
.contact-step.is-active,
.cw-step.is-active {
  display: block !important;
}

/* --- Buttons --- */
.contact-btn,
.cw-btn {
  background: #333333;
  color: #fff;
  border: 1px solid #333333;
  border-radius: 0;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  min-width: 240px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  display: block;
  margin: 5px auto;
}
.contact-btn:hover,
.cw-btn:hover {
  background: #1a1a1a;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.contact-btn--primary,
.cw-btn--primary,
.wpcf7-submit {
  background: #333333;
  color: #fff;
  border-color: #333333;
  border-radius: 0;
  min-width: 240px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  padding: 12px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: block;
  margin: 5px auto;
}
.contact-btn--primary:hover,
.cw-btn--primary:hover,
.wpcf7-submit:hover {
  background: #1a1a1a;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.wpcf7-submit {
  background: #333333 !important;
  color: #ffffff !important;
  border: 1px solid #333333 !important;
}
.wpcf7-submit:hover {
  background: #1a1a1a !important;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}
.wpcf7-form .wpcf7-submit {
  margin: 24px auto !important;
}

/* --- Last Step --- */
.contact-step:last-child,
.cw-step:last-child {
  text-align: center;
}
.contact-step:last-child .wpcf7-submit,
.cw-step:last-child .wpcf7-submit {
  margin: 4px auto !important;
  display: block !important;
  text-align: center !important;
}
.contact-step:last-child .contact-controls,
.cw-step:last-child .cw-controls {
  justify-content: center;
  margin: 4px auto;
}

/* --- Privacy --- */
.contact-privacy,
.cw-privacy {
  text-align: center;
  margin-top: 14px;
  margin-bottom: 0;
}
.contact-privacy a,
.cw-privacy a {
  color: #0f172a;
  font-weight: 700;
  text-decoration: underline;
}

/* --- Success Message inside cw-steps --- */
.cw-steps .wpcf7-response-output {
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  max-width: 100%;
  background: transparent !important;
  color: #374151 !important;
  font-weight: 400;
  font-size: clamp(16px, 22px, 24px) !important;
  text-align: center;
}
/* Hide buttons and controls when success message is shown */
.wpcf7.sent .cw-controls,
.wpcf7.sent .cw-btn,
.wpcf7.sent .wpcf7-submit {
  display: none !important;
}

/* Success message for plain HTML form */
.cw-success-message {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cw-success-message.is-active {
  display: flex !important;
}

/* Form validation states */
.cw-form input:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}
.cw-form input:valid:not(:placeholder-shown) {
  border-color: #10b981;
}
.cw-form .error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* --- Consent Box --- */
.cw-consent-box {
  max-width: 700px;
  margin: 20px auto;
  text-align: left;
}
.cw-consent-text {
  background: #e5e7eb;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 16px;
}
.cw-consent-box .wpcf7-acceptance {
  margin: 0;
}
.cw-consent-box .wpcf7-list-item {
  margin: 0;
  position: relative;
}
.cw-consent-box .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  min-height: 80px;
  position: relative;
}
.cw-consent-box .wpcf7-list-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  cursor: pointer;
  accent-color: #000000;
  position: relative;
  opacity: 1;
}
.cw-consent-box .wpcf7-list-item label:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.cw-consent-box .wpcf7-list-item .wpcf7-list-item-label {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1.6;
}

/* --- Hero --- */
.cw-hero {
  position: relative;
  height: 600px;
  display: grid;
  text-align: center;
  color: #1f2937;
  padding: var(--xl) var(--m);
  overflow: visible;
  isolation: isolate;
  margin-top: 0;
}
.cw-hero > * {
  position: relative;
  z-index: -1 !important;
}
.cw-hero__title {
  font-size: clamp(20px, 4vw, 32px);
  font-weight: 700;
  margin: 0 0 8px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.cw-hero__sub {
  font-size: clamp(12px, 2vw, 16px);
  margin: 0 0 20px;
}
.cw-hero__sub.small {
  margin-top: -6px;
  font-size: 13px;
}
.cw-hero__q {
  font-size: clamp(16px, 22px, 24px);
  margin: 10px 0 16px;
  font-weight: 400;
}

/* --- Background Images --- */
body.has-contact-bg {
  position: relative;
}
body.has-contact-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}
body.has-contact-bg::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(248, 250, 252, 0.85);
  z-index: -1;
}
.cw-hero.has-bg-image,
body.has-contact-bg .cw-hero {
  background: transparent;
}
.cw-hero.has-bg-image::before,
body.has-contact-bg .cw-hero::before {
  display: none;
}
.cw-hero.has-bg-image > *,
body.has-contact-bg .cw-hero > * {
  position: relative;
  z-index: 2;
}
.cw-hero.has-bg-image::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 48px;
  background: #dddddd;
  z-index: 10;
}
.cw-hero .wp-block-image.hero-background,
.cw-hero figure.wp-block-image.hero-background,
.cw-hero .wp-block-image__wrapper.hero-background {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
.cw-hero .hero-background img {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  z-index: 0 !important;
  filter: brightness(0.3) !important;
}

/* --- Options --- */
.contact-options,
.cw-options {
  max-width: 600px;
  margin: 0 auto 18px;
  display: grid;
  position: relative;
  z-index: 1 !important;
}
.contact-options .wpcf7-list-item,
.cw-options .wpcf7-list-item {
  display: block;
  margin: 0 0 10px 0;
}
.contact-options .wpcf7-list-item label,
.cw-options .wpcf7-list-item label {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  /* border-radius: 6px; */
  background: #ededed;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.contact-options .wpcf7-list-item label:hover,
.cw-options .wpcf7-list-item label:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.contact-options .wpcf7-list-item input[type="checkbox"],
.cw-options .wpcf7-list-item input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.contact-options .wpcf7-list-item label:has(input:checked),
.cw-options .wpcf7-list-item label:has(input:checked) {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.contact-options .wpcf7-list-item *,
.cw-options .wpcf7-list-item * {
  cursor: pointer;
}

/* Label text inside checkbox options */
.cw-options .wpcf7-list-item-label {
  pointer-events: none;
  position: relative;
  z-index: 2;
}

/* --- Slider --- */
.budget-slider-header,
.cw-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px;
  margin: 0 auto 6px;
  padding: 0 8px;
  font-size: 14px;
}
.budget-label,
.cw-label {
  font-weight: 700;
}
.budget-slider-container,
.cw-slider-wrap {
  max-width: 500px;
  margin-inline: auto;
}
#budget-range,
#cw-range {
  max-width: 500px;
  margin: 18px auto 8px;
}
.budget-scale,
.cw-scale {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  height: 18px;
}
.budget-scale .budget-min,
.budget-scale .budget-max,
.cw-scale .cw-min,
.cw-scale .cw-max {
  position: absolute;
  top: 0;
  color: #9ca3af;
  font-size: 12px;
}
.budget-scale .budget-min,
.cw-scale .cw-min {
  left: 0;
  transform: translateX(-6px);
}
.budget-scale .budget-max,
.cw-scale .cw-max {
  right: 0;
  transform: translateX(6px);
}

/* --- noUiSlider --- */
.noUi-target {
  border: none;
  box-shadow: none;
}
.noUi-horizontal {
  height: 4px;
}
.noUi-connects {
  background: #cbd5e1;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.noUi-connect {
  background: #333333;
}
.noUi-handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #333333;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
}
.noUi-handle:hover {
  background: #333333;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}
.noUi-horizontal .noUi-handle {
  top: -10px;
}
.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

/* --- Form Fields --- */
.contact-form,
.cw-form {
  max-width: 500px;
  margin: 16px auto 8px;
  position: relative;
  z-index: 1 !important;
}
.contact-form p,
.cw-form p {
  margin: 0 0 14px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.cw-form input[type="text"],
.cw-form input[type="email"],
.cw-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cbd5e1;
  font-size: 14px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  z-index: 1 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.contact-form input[type="text"]:hover,
.contact-form input[type="email"]:hover,
.contact-form input[type="tel"]:hover,
.cw-form input[type="text"]:hover,
.cw-form input[type="email"]:hover,
.cw-form input[type="tel"]:hover {
  border-color: #000000;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.cw-form input[type="text"]:focus,
.cw-form input[type="email"]:focus,
.cw-form input[type="tel"]:focus {
  outline: none;
  border-color: black;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05),
    0 0 0 3px rgba(133, 133, 133, 0.3);
  background: #ffffff;
}
.contact-form input::placeholder,
.cw-form input::placeholder {
  color: #9ca3af;
}

/* --- Phone Input --- */
.phone-input-container {
  width: 100%;
  position: relative;
  z-index: 10 !important;
}
.phone-input-container .iti {
  width: 100%;
  position: relative;
  z-index: 10 !important;
}
.phone-input-container .iti__selected-flag {
  z-index: 11 !important;
  position: relative;
}
.phone-input-container .iti__country-list {
  z-index: 2147483647 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  margin-top: 2px !important;
}
.phone-input-container .iti__country-list--dropup {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}
.phone-input-container .iti__country {
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.2s ease !important;
}
.phone-input-container .iti__country:hover {
  background-color: #f8fafc !important;
}
.phone-input-container .iti__country--highlight {
  background-color: #e2e8f0 !important;
}
.phone-input-container .iti__country-name {
  color: #374151 !important;
  font-size: 14px !important;
}
.phone-input-container .iti__dial-code {
  color: #6b7280 !important;
  font-size: 14px !important;
}

/* --- Header Integration --- */
/* body:has(.cw-hero) header,
body.has-contact-bg header {
  position: relative;
  background: transparent;
  border-bottom: 1px solid rgba(203, 213, 225, 0.5);
  color: #1f2937;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}
body:has(.cw-hero) header a,
body.has-contact-bg header a {
  color: #1f2937;
  pointer-events: auto;
  cursor: pointer;
}
body:has(.cw-hero) header .custom-logo,
body.has-contact-bg header .custom-logo {
  filter: none;
}
body:has(.cw-hero) header nav ul li a,
body.has-contact-bg header nav ul li a {
  pointer-events: auto;
  cursor: pointer;
} */

/* --- Contact Steps --- */
body.has-contact-bg .cw-steps {
  background: transparent;
  border-radius: 16px;
  padding: var(--l);
  margin: var(--m) auto;
}
body:has(.cw-hero) .cw-hero {
  margin-top: 0;
  padding-top: var(--m);
  position: relative;
  z-index: 0;
}

/* --- Hero Contact --- */
body.hero-contact {
  position: relative;
  min-height: 100vh;
}
body.hero-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  box-shadow: 0 35px 0 0 #dddddd;
}
body.hero-contact::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
body.hero-contact header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
body.hero-contact header a {
  color: #ffffff !important;
}
body.hero-contact .entry-title {
  display: none;
}
body.hero-contact .cw-hero {
  position: relative;
  z-index: 10;
  background: transparent;
}
body.hero-contact .cw-steps {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0;
  padding: 2rem;
  margin: 2rem auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .cw-form-wrapper{
    margin-bottom: 10rem;
  }
  .cw-steps {
    max-width: 100%;
    margin: 0 1rem;
    padding: 1rem;
  }
  .cw-controls {
    flex-direction: column;
    gap: 12px;
    margin: 24px auto;
  }
  .cw-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  .cw-btn--primary,
  .wpcf7-submit {
    min-width: 100%;
    max-width: 250px;
    margin: 20px auto;
  }
  .cw-hero {
    height: 650px;
    padding: 2rem 1rem;
  }
  .cw-hero__title {
    font-size: clamp(18px, 5vw, 28px);
    margin: 0 0 6px;
  }
  .cw-hero__sub {
    font-size: clamp(11px, 2.5vw, 14px);
    margin: 0 0 16px;
  }
  .cw-hero__q {
    font-size: clamp(14px, 3.5vw, 20px);
    margin: 8px 0 14px;
  }
  .cw-options {
    gap: 12px;
  }
  .cw-options .wpcf7-list-item label {
    padding: 10px 14px;
    font-size: 13px;
  }
  .cw-form {
    margin: 12px auto 6px;
  }
  .cw-form input[type="text"],
  .cw-form input[type="email"],
  .cw-form input[type="tel"] {
    padding: 10px 12px;
  }
  .cw-slider-head {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .cw-slider-wrap {
    margin-bottom: 2rem;
  }
  .cw-scale {
    margin-bottom: 4rem;
  }
  .noUi-handle {
    width: 24px;
    height: 24px;
  }
  .noUi-horizontal .noUi-handle {
    top: -8px;
  }
  .cw-consent-box {
    max-width: 100%;
    margin: 16px auto;
  }
  .cw-consent-text {
    padding: 12px 16px;
    font-size: 13px;
  }
  .cw-consent-box .wpcf7-list-item label {
    padding: 12px;
    font-size: 13px;
  }
  .wp-block-spacer {
    height: 0 !important;
    min-height: 0 !important;
    display: none !important;
  }
  .cw-steps .wpcf7-response-output {
    font-size: clamp(14px, 3.5vw, 20px);
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .cw-steps {
    margin: 0 0.5rem;
    padding: 0.75rem;
  }
  .cw-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  .cw-btn--primary,
  .wpcf7-submit {
    max-width: 240px;
    margin: 18px auto;
  }
  .cw-hero {
    height: 600px;
    padding: 1rem 0.5rem;
  }
  .cw-hero__title {
    font-size: clamp(16px, 6vw, 24px);
  }
  .cw-hero__sub {
    font-size: clamp(10px, 3vw, 13px);
  }
  .cw-hero__q {
    font-size: clamp(12px, 4vw, 18px);
  }
  .cw-options {
    gap: 8px;
  }
  .cw-options .wpcf7-list-item label {
    padding: 8px 12px;
    font-size: 12px;
  }
  .cw-form input[type="text"],
  .cw-form input[type="email"],
  .cw-form input[type="tel"] {
    padding: 8px 10px;
  }
  .cw-consent-text {
    padding: 10px 14px;
    font-size: 12px;
  }
  .cw-consent-box .wpcf7-list-item label {
    padding: 10px;
    font-size: 12px;
  }
  .wp-block-spacer {
    height: 0 !important;
    min-height: 0 !important;
    display: none !important;
  }
  .cw-steps .wpcf7-response-output {
    font-size: clamp(12px, 4vw, 18px);
    min-height: 200px;
  }
}

@media (max-width: 375px) {
  .cw-steps {
    margin: 0 0.25rem;
    padding: 0.5rem;
  }
  .cw-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .cw-btn--primary,
  .wpcf7-submit {
    max-width: 220px;
    margin: 14px auto;
  }
  .cw-hero {
    height: 550px;
    padding: 0.75rem 0.25rem;
  }
  .cw-hero__title {
    font-size: clamp(14px, 7vw, 20px);
  }
  .cw-hero__sub {
    font-size: clamp(9px, 3.5vw, 12px);
  }
  .cw-hero__q {
    font-size: clamp(10px, 4.5vw, 16px);
  }
  .cw-options .wpcf7-list-item label {
    padding: 6px 10px;
    font-size: 11px;
  }
  .cw-form input[type="text"],
  .cw-form input[type="email"],
  .cw-form input[type="tel"] {
    padding: 6px 8px;
    font-size: 13px;
  }
  .cw-consent-text {
    padding: 8px 12px;
    font-size: 11px;
  }
  .cw-consent-box .wpcf7-list-item label {
    padding: 8px;
    font-size: 11px;
    min-height: 60px;
  }
  .wp-block-spacer {
    height: 0 !important;
    min-height: 0 !important;
    display: none !important;
  }
  .cw-steps .wpcf7-response-output {
    font-size: clamp(10px, 4.5vw, 16px);
    min-height: 180px;
  }
}

/* ========================================
   CONTACT FORM ICONS (SVG via CSS Masks)
   ======================================== */

/* Ensure labels can show icons side by side - consolidated with existing label styles */

/* Base icon container */
.cw-options .wpcf7-list-item label::before,
.contact-options .wpcf7-list-item label::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 10px;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  position: relative;
  z-index: 2;
}

/* -----------------------------------------
   STEP 1 ICONS
------------------------------------------ */

/* 🏠 Neubau (House) */
.cw-options .wpcf7-list-item label:has(input[value="Neubau"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>");
}

/* 🚚 Umzug (Truck) */
.cw-options .wpcf7-list-item label:has(input[value="Umzug"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 18.5a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m1.5-9 1.96 2.5H17V9.5m-11 9A1.5 1.5 0 0 1 4.5 17 1.5 1.5 0 0 1 6 15.5 1.5 1.5 0 0 1 7.5 17 1.5 1.5 0 0 1 6 18.5M20 8h-3V4H3c-1.11 0-2 .89-2 2v11h2a3 3 0 0 0 3 3 3 3 0 0 0 3-3h6a3 3 0 0 0 3 3 3 3 0 0 0 3-3h2v-5z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18 18.5a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m1.5-9 1.96 2.5H17V9.5m-11 9A1.5 1.5 0 0 1 4.5 17 1.5 1.5 0 0 1 6 15.5 1.5 1.5 0 0 1 7.5 17 1.5 1.5 0 0 1 6 18.5M20 8h-3V4H3c-1.11 0-2 .89-2 2v11h2a3 3 0 0 0 3 3 3 3 0 0 0 3-3h6a3 3 0 0 0 3 3 3 3 0 0 0 3-3h2v-5z'/></svg>");
}

/* 🛠 Renovierung (Wrench) */
.cw-options .wpcf7-list-item label:has(input[value="Renovierung"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>");
}

/* ⚠ Sonstiger Grund (Warning Triangle) */
.cw-options .wpcf7-list-item label:has(input[value="Sonstiger Grund"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2V8h2v6z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2V8h2v6z'/></svg>");
}

/* -----------------------------------------
   STEP 2 ICONS
------------------------------------------ */

/* ⭐ Möchte Inspiration (Star) */
.cw-options
  .wpcf7-list-item
  label:has(input[value="Möchte Inspiration"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
}

/* ⚙ Vergleichbare Angebote (Gear) */
.cw-options
  .wpcf7-list-item
  label:has(input[value="Vergleichbare Angebote"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96a6.8 6.8 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.48-.41h-3.84a.5.5 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.56-1.62.94L5.24 5.33c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61L19.14 12.94zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M19.14 12.94c.04-.3.06-.61.06-.94s-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96a6.8 6.8 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.48-.41h-3.84a.5.5 0 0 0-.47.41l-.36 2.54c-.59.24-1.13.56-1.62.94L5.24 5.33c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61L19.14 12.94zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z'/></svg>");
}

/* ℹ Brauche Beratung (Info Circle) */
.cw-options
  .wpcf7-list-item
  label:has(input[value="Brauche Beratung"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm1 17h-2v-6h2v6zm0-8h-2V7h2v4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm1 17h-2v-6h2v6zm0-8h-2V7h2v4z'/></svg>");
}

/* 📝 Anderer Grund (Pencil/Edit) */
.cw-options
  .wpcf7-list-item
  label:has(input[value="Anderer Grund"])::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>");
}