.pop-funnel{
  --pop-primary:#0F3A30;
  --pop-secondary:#184938;
  --pop-accent:#B8842B;
  --pop-accent-dark:#7A5206;
  --pop-text:#495E56;
  --pop-cream:#F5F3EE;
  --pop-line:#DCD8CF;
  --pop-error:#B3261E;

  max-width:800px; width:100%; margin:0 auto;
  font-family:inherit; color:var(--pop-text);
  text-align:left; box-sizing:border-box;
}
.pop-funnel *,.pop-funnel *::before,.pop-funnel *::after{box-sizing:border-box;}
.pop-funnel .pop-screen{display:none; animation:pop-in .28s ease both;}
.pop-funnel .pop-screen.is-active{display:block;}
@keyframes pop-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .pop-funnel .pop-screen{animation:none;}
  .pop-funnel .pop-spinner{animation:none;}
}

.pop-funnel .pop-h{
  font-size:clamp(22px,4.2vw,30px); line-height:1.25; font-weight:700;
  color:var(--pop-primary); margin:0 0 22px; text-align:center;
}
.pop-funnel .pop-sub{margin:-12px 0 22px; text-align:center; font-size:15px; opacity:.85;}

.pop-funnel .pop-field{margin:0 0 14px;}
.pop-funnel label.pop-label{display:block; font-size:14px; font-weight:600; margin:0 0 6px; color:var(--pop-primary);}
/* !important ist hier noetig: Theme und Elementor setzen fuer Formularfelder
   generische Regeln (border:0, transparenter Grund, eigenes Padding), die sonst
   gewinnen. Der Funnel soll auf jeder Seite gleich aussehen. */
.pop-funnel input[type=text],
.pop-funnel input[type=email],
.pop-funnel input[type=tel],
.pop-funnel select{
  width:100% !important; height:auto !important;
  padding:14px 16px !important; font-size:16px !important; font-family:inherit !important;
  line-height:1.4 !important; color:var(--pop-primary) !important;
  background:#fff !important; background-image:none !important;
  border:1px solid var(--pop-line) !important; border-radius:10px !important;
  box-shadow:none !important; outline:none;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;
}
.pop-funnel input[type=text]:focus,
.pop-funnel input[type=email]:focus,
.pop-funnel input[type=tel]:focus,
.pop-funnel select:focus{
  border-color:var(--pop-accent) !important;
  box-shadow:0 0 0 3px rgba(184,132,43,.18) !important;
}
.pop-funnel input.pop-invalid,.pop-funnel select.pop-invalid{border-color:var(--pop-error) !important;}

.pop-funnel .pop-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 20px; margin-top:6px;
  font-family:inherit; font-size:17px; font-weight:700; color:#fff;
  background:var(--pop-primary); border:0; border-radius:10px; cursor:pointer;
  transition:background .15s, transform .06s;
}
.pop-funnel .pop-btn:hover{background:var(--pop-secondary);}
.pop-funnel .pop-btn:active{transform:translateY(1px);}
.pop-funnel .pop-btn[disabled]{opacity:.6; cursor:progress;}
.pop-funnel .pop-btn .pop-arrow{font-size:19px; line-height:1;}
.pop-funnel .pop-btn-ghost{
  background:transparent; color:var(--pop-primary); border:1px solid var(--pop-line);
  font-size:15px; font-weight:600; padding:12px 18px; width:auto; margin:18px auto 0;
}
.pop-funnel .pop-btn-ghost:hover{background:var(--pop-cream);}

/* Alters-Kacheln */
.pop-funnel .pop-choices{display:grid; gap:12px;}
.pop-funnel .pop-choice{
  display:flex !important; align-items:center; gap:14px; width:100% !important;
  padding:18px 20px !important; background:#fff !important; cursor:pointer;
  border:1px solid var(--pop-line) !important; border-radius:10px !important;
  font-size:17px !important; font-weight:600; font-family:inherit !important;
  color:var(--pop-primary) !important; text-align:left;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.pop-funnel .pop-choice:hover{border-color:var(--pop-accent) !important; background:var(--pop-cream) !important;}
.pop-funnel .pop-choice:focus-visible{outline:3px solid rgba(184,132,43,.5); outline-offset:2px;}
.pop-funnel .pop-choice.is-picked{border-color:var(--pop-accent); box-shadow:0 0 0 3px rgba(184,132,43,.18);}
.pop-funnel .pop-radio{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--pop-line); position:relative;
}
.pop-funnel .pop-choice.is-picked .pop-radio{border-color:var(--pop-accent);}
.pop-funnel .pop-choice.is-picked .pop-radio::after{
  content:""; position:absolute; inset:4px; border-radius:50%; background:var(--pop-accent);
}

/* Telefonzeile */
.pop-funnel .pop-phone{display:grid; grid-template-columns:112px 1fr; gap:10px;}

/* Consent */
.pop-funnel .pop-consent{display:flex; align-items:flex-start; gap:10px; margin:16px 0 4px; font-size:14px; line-height:1.5;}
.pop-funnel .pop-consent input{flex:0 0 auto; width:20px; height:20px; margin-top:1px; accent-color:var(--pop-accent);}
.pop-funnel .pop-consent a{color:var(--pop-primary); text-decoration:underline;}

/* Loader */
.pop-funnel .pop-loader{text-align:center; padding:26px 0 10px;}
.pop-funnel .pop-spinner{
  width:46px; height:46px; margin:0 auto 20px; border-radius:50%;
  border:4px solid var(--pop-line); border-top-color:var(--pop-accent);
  animation:pop-spin .9s linear infinite;
}
@keyframes pop-spin{to{transform:rotate(360deg);}}
.pop-funnel .pop-bar{height:6px; background:var(--pop-line); border-radius:99px; overflow:hidden; max-width:320px; margin:0 auto;}
.pop-funnel .pop-bar>span{display:block; height:100%; width:0; background:var(--pop-accent); transition:width .2s linear;}

/* Erfolg / Hinweis */
.pop-funnel .pop-note{
  background:var(--pop-cream); border:1px solid var(--pop-line); border-radius:10px;
  padding:20px 22px; font-size:16px; line-height:1.6; text-align:center;
}
.pop-funnel .pop-check{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background:var(--pop-primary); color:#fff; font-size:30px;
  display:flex; align-items:center; justify-content:center;
}
.pop-funnel .pop-msg{margin:12px 0 0; font-size:14px; color:var(--pop-error); min-height:20px;}
.pop-funnel .pop-msg:empty{margin:0; min-height:0;}

/* Schritt-Anzeige */
.pop-funnel .pop-steps{display:flex; align-items:flex-start; justify-content:center; gap:0; margin:26px 0 0;}
.pop-funnel .pop-step{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; color:#9a9a95; width:88px;}
.pop-funnel .pop-dot{width:13px; height:13px; border-radius:50%; background:var(--pop-line);}
.pop-funnel .pop-step.is-on{color:var(--pop-primary); font-weight:700;}
.pop-funnel .pop-step.is-on .pop-dot{background:var(--pop-accent); box-shadow:0 0 0 4px rgba(184,132,43,.2);}
.pop-funnel .pop-step.is-done .pop-dot{background:var(--pop-primary);}
.pop-funnel .pop-connector{flex:0 0 34px; height:1px; background:var(--pop-line); margin-top:6px;}

/* Honeypot - fuer Menschen unsichtbar, fuer Bots verlockend */
.pop-funnel .pop-hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden;}

@media (max-width:480px){
  .pop-funnel .pop-phone{grid-template-columns:98px 1fr;}
  .pop-funnel .pop-step{width:74px;}
  .pop-funnel .pop-connector{flex-basis:20px;}
}