/* ==============================
   CF7 Steps: Sichtbarkeit
============================== */
.cf7-step{ display:none; }
.wpcf7 .cf7-step.is-active{
  display:flex;              /* nicht block, weil du flex+gap willst */
  flex-direction:column;
  gap: var(--cf7-row-gap, 1.25rem);
}

/* ==============================
   Einheitliche Abstände (WICHTIG)
   -> alles über Flex + gap
============================== */
.cf7-steps{
  --cf7-row-gap: 1.25rem;   /* Abstand zwischen Reihen */
  --cf7-col-gap: 1rem;      /* Abstand innerhalb Inline-Grids */
  --cf7-label-gap: .35rem;  /* Label -> Feld */
}



/* CF7 packt Inputs oft in <p> -> killt zufällige Margins */
.cf7-step :where(p){
  margin:0;
}

/* Headings / Trenner */
.cf7-step :where(h4){
  margin:0;
}
.cf7-step hr{
  border:0;
  border-top:1px solid rgba(0,0,0,.12);
  margin: 0; /* Abstand kommt über gap */
}

/* ==============================
   Labels & Controls
============================== */
.cf7-step label{
  display:block;
  margin:0 0 var(--cf7-label-gap);
  line-height:1.2;
}

.cf7-step .wpcf7-form-control-wrap{
  display:block;
}

.cf7-step :where(input,textarea,select){
  width:100%;
  margin:0;
}

/* CF7 Validation */
.wpcf7 form .wpcf7-not-valid{
  border-color:#b91c1c !important;
  outline:none;
}
.wpcf7-not-valid-tip{
  color:#b91c1c;
  font-size:.9rem;
  margin-top:.25rem;
  display:block;
}

/* Shake */
.cf7-step.is-invalid{
  animation: shake 0.2s ease-in-out 2;
}
@keyframes shake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  50%{transform:translateX(4px);}
  75%{transform:translateX(-4px);}
  100%{transform:translateX(0);}
}

/* ==============================
   Inline-Grids
============================== */
.cf7-inline{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--cf7-col-gap);
}

/* Nur diese Reihen mobil untereinander */
@media (max-width: 690px){
  .cf7-inline--stack-mobile{
	grid-template-columns: 1fr;
  }
}

/* ==============================
   Conditional fields
============================== */
.cf7-cond{ display:none; }
.cf7-cond.is-visible{ display:block; }

/* ==============================
   Navigation: links/rechts
============================== */
.cf7-nav{
  display:flex;
  gap: 1rem;
  align-items:center;
  width:100%;
  margin-top: .25rem; /* optional kleiner Abstand nach unten */
}

/* CF7 kann Buttons in <p> wrappen */
.cf7-nav :where(p){
  display:flex;
  width:100%;
  gap: 1rem;
  margin:0;
}

.cf7-prev{ margin-right:auto; }
.cf7-next{ margin-left:auto; }

.cf7-nav br{ display:none; }

/* ==============================
   Progress Bar (wie gehabt)
============================== */
.cf7-progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 16px;
}

.cf7-progress__step{
  display:flex;
  align-items:center;
  flex: 1 1 0;
  min-width: 0;
}

.cf7-progress__dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: #fff;
  border: 2px solid #d6d6d6;
  position: relative;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.cf7-progress__num{
  font-weight: 700;
  font-size: 14px;
  color: #777;
  transition: color .25s ease;
}

.cf7-progress__line{
  height: 4px;
  flex: 1;
  margin-left: 12px;
  border-radius: 999px;
  background: #e7e7e7;
  position: relative;
  overflow: hidden;
}

.cf7-progress__line::after{
  content:"";
  position:absolute;
  inset:0;
  width:0%;
  background: #D6F1D3;
  transition: width .35s ease;
}

/* done */
.cf7-progress__step.is-done{
  color:#40a535;
}
.cf7-progress__step.is-done .cf7-progress__dot{
  background:#40a535;
  border-color:#40a535;
}
.cf7-progress__step.is-done .cf7-progress__num{
  color:#fff;
}

/* active */
.cf7-progress__step.is-active{
  color:#40a535;
}
.cf7-progress__step.is-active .cf7-progress__dot{
  background:#40a535;     
  border-color:#40a535;
  transform: scale(1.02);
}
.cf7-progress__step.is-active .cf7-progress__num{
  color:#fff;            
}

/* subtle pulse on active dot */
@media (prefers-reduced-motion: no-preference){
  .cf7-progress__step.is-active .cf7-progress__dot::after{
	content:"";
	position:absolute;
	inset:-6px;
	border-radius:999px;
	border:2px solid rgba(64,165,53,.25);
	animation: cf7Pulse 1.6s ease-out infinite;
  }
  @keyframes cf7Pulse{
	0%{ transform: scale(.85); opacity:.9; }
	70%{ transform: scale(1.15); opacity:0; }
	100%{ transform: scale(1.15); opacity:0; }
  }
}