/* =====================================================================
   Mission Personal · Potenzial-Check LP - Design-System
   Corporate Design 1:1 aus mission-personal.de übernommen (Elementor-Kit
   post-20.css + Seiten-CSS post-5427.css): Farben, Schriften (Neue Montreal
   für Headlines, SF Pro Display für Fließtext), Pill-Buttons, Feld-Stil,
   graue Karten mit 1.5rem-Radius, Hero mit Wolken + Blau-Verlauf.
   ===================================================================== */

@font-face{font-family:"Neue Montreal";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/neuemontreal-medium.woff2) format("woff2");}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sf-pro-display-regular.woff2) format("woff2");}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/sf-pro-display-medium.woff2) format("woff2");}
@font-face{font-family:"SF Pro Display";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/sf-pro-display-semibold.woff2) format("woff2");}

:root{
  /* Globale Farben der Live-Seite */
  --blau: #316BE0;          /* Primär, Buttons, Akzent-Wörter */
  --blau-dunkel: #2856B3;   /* Hover */
  --blau-tief: #204287;
  --navy: #182E5B;
  --blau-hell: #EBF2FD;     /* Badge-/Hero-Hintergrund */
  --blau-hell-2: #D6E4FB;
  --blau-mittel: #5C92EF;
  --text: #222222;
  --text-soft: #626262;
  --text-field: #5C5C5C;
  --border: #E0E0E0;
  --border-focus: #B0B0B0;
  --bg: #FFFFFF;
  --bg-grau: #F5F5F5;
  --font: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head: "Neue Montreal","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:1rem;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blau);}
a:hover{color:var(--blau-dunkel);}
.container{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding-inline:20px;
}
.accent{color:var(--blau);}
.nowrap{white-space:nowrap;}

/* ---------- Header: nur Logo, bewusst ohne Navigation ---------- */
.topbar{
  position:relative;
  z-index:2;
  padding-block:14px 4px;
  background:#fff;
}
.topbar-inner{
  max-width:640px;
  margin:0 auto;
  padding-inline:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo{width:116px;height:auto;}

/* ---------- Hero: clean und kompakt (Verlauf/Wolken bewusst entfernt) ---------- */
.hero{
  position:relative;
  background:var(--bg);
  padding-block:14px 0;
}
.hero > .container{position:relative; z-index:1; text-align:center;}

/* ---------- Fokus-Modus: ab Schritt 2 raeumt der Hero den Platz fuer das Formular ----------
   Die Hoehe setzt main.js vor dem Einklappen als Inline-Wert, damit von einem echten
   Wert auf 0 animiert wird. Ohne JS bleibt der Hero sichtbar. */
.hero{overflow:hidden;}
.hero.is-collapsing{transition:max-height .26s ease, opacity .18s ease, padding-block .26s ease;}
body.funnel-focus .hero{max-height:0 !important; opacity:0; padding-block:0; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .hero.is-collapsing{transition:none;}
}

.hero h1{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(28px,7.2vw,46px);
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--text);
  margin:0 0 12px;
  text-wrap:balance;
}
/* Zweiter Satz der Headline: kleiner, kursiv, in Akzentblau */
.hero h1 .h1-sub{
  display:block;
  margin-top:6px;
  font-size:.66em;
  font-style:italic;
  font-weight:400;
  color:var(--blau);
  letter-spacing:-0.01em;
}
.hero p.lead{
  font-size:.9375rem;
  line-height:1.5;
  color:var(--text-soft);
  margin:0 auto;
  max-width:520px;
  text-wrap:balance; /* gleichmäßige Zeilen statt einzelnem Wort am Ende */
}

/* ---------- Funnel-Karte (Rahmen + Schatten wie das Original-Formular) ---------- */
.funnel-wrap{
  position:relative;
  z-index:1;
  padding-block:14px 36px;
}
.funnel-card{
  background:var(--bg);
  border:1px solid var(--text);
  border-radius:10px;
  box-shadow:0 0 29px -17px var(--navy);
  padding:26px 20px 22px;
}
.progress-track{
  height:6px;
  background:var(--bg-grau);
  border-radius:10rem;
  overflow:hidden;
  margin-bottom:8px;
}
.progress-fill{
  height:100%;
  background:var(--blau);
  border-radius:10rem;
  width:20%;
  transition:width .25s ease;
}
.progress-label{
  font-size:.75rem;
  color:var(--text-soft);
  margin:0 0 20px;
}
.step{display:none;}
.step.active{display:block; animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.step h2{
  font-family:var(--font-head);
  font-weight:500;
  font-size:1.625rem;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--text);
  margin:0 0 6px;
}
.step p.step-hint{
  font-size:.9375rem;
  color:var(--text-soft);
  margin:0 0 20px;
}
.step h2 + .tiles,
.step h2 + .field{margin-top:18px;}

.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:.8125rem;
  color:var(--text);
  margin-bottom:6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"]{
  width:100%;
  font-family:var(--font);
  font-size:1rem; /* min 16px verhindert Zoom auf iOS */
  padding:1rem 1.25rem;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#fff;
  color:var(--text-field);
  appearance:none;
}
.field input::placeholder{color:#B0B0B0;}
.field input:focus{
  outline:none;
  border-color:var(--blau);
  box-shadow:0 0 0 3px rgba(49,107,224,.12);
}

/* Tap-Kacheln */
.tiles{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.tile-input{position:absolute; opacity:0; width:0; height:0;}
.tile{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:.75rem;
  background:#fff;
  font-size:1rem;
  color:var(--text);
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
  user-select:none;
}
/* Radio-Kreis links in der Kachel */
.tile::before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid var(--border-focus);
  background:#fff;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.tile:hover{border-color:var(--blau-hell-2); background:#FAFCFF;}
.tile-input:checked + .tile{
  border-color:var(--blau);
  background:var(--blau-hell);
}
.tile-input:checked + .tile::before{
  border-color:var(--blau);
  box-shadow:inset 0 0 0 4px #fff;
  background:var(--blau);
}
.tile-input:focus-visible + .tile{
  outline:2px solid var(--blau);
  outline-offset:2px;
}

/* Navigation: Pill-Button volle Breite, "Zurück" als Textlink darunter
   (nebeneinander passte der lange Absende-Text bei 320px nicht) */
.step-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top:22px;
}
.btn-back{
  order:2;
  background:none;
  border:none;
  color:var(--text-soft);
  font-family:var(--font);
  font-size:.9375rem;
  padding:8px 12px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.btn-back:hover{color:var(--text);}
.btn-next{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:var(--blau);
  color:#fff;
  border:1px solid var(--blau);
  font-family:var(--font);
  font-size:1.125rem;
  font-weight:400;
  line-height:1.3;
  border-radius:10rem;
  padding:1rem 1.5rem;
  cursor:pointer;
  transition:background .15s ease;
}
.btn-next::after{
  content:"";
  width:18px;
  height:18px;
  background:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M11.6562 8.59375C11.8808 8.8183 11.8808 9.1817 11.6562 9.40625L7.15625 13.9062L6.34375 13.0938L10.4375 9L6.34375 4.90625L7.15625 4.09375L11.6562 8.59375Z' fill='white'/%3e%3c/svg%3e") no-repeat center;
}
.btn-next:hover{background:var(--blau-dunkel); border-color:var(--blau-dunkel);}
.btn-next:disabled{background:var(--blau-mittel); border-color:var(--blau-mittel); cursor:not-allowed;}

.field-error{
  font-size:.8125rem;
  color:#C22B2B;
  margin:6px 0 0;
  display:none;
}
.field-error.show{display:block;}

.checkbox-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:.8125rem;
  line-height:1.45;
  color:var(--text-soft);
  margin-top:8px;
}
.checkbox-row input{margin-top:2px; flex:0 0 auto; accent-color:var(--blau); width:16px; height:16px;}

.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Logo-Leiste */
.logos{margin-top:36px;}
.logos-label{
  font-size:.875rem;
  color:var(--text-soft);
  text-align:center;
  margin:0 0 16px;
}
.logos-row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.logos-track{
  display:flex;
  align-items:center;
  gap:40px;
  width:max-content;
  padding-right:40px;
  opacity:.75;
  animation:logoMarquee 22s linear infinite;
}
/* Alle SVGs sind 115 breit, aber unterschiedlich hoch -> gleiche Breite statt
   gleicher Höhe, sonst wirkt Sparkasse kleiner */
.logos-track img{flex:0 0 auto;width:100px;height:auto;}
@keyframes logoMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .logos-track{animation:none;}
}

/* Footer: nur Pflicht-Links */
/* ---------- Footer ---------- */
footer{
  padding-block:0 28px;
}
footer div{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  text-align:center;
}
footer p{
  font-size:.8125rem;
  color:var(--text-soft);
  margin:0 0 8px;
}
footer a{
  font-size:.8125rem;
  color:var(--text-soft);
  text-decoration:underline;
}

@media (min-width:768px){
  .hero{padding-block:32px 0;}
  .funnel-card{padding:34px 36px 30px;}
  .step h2{font-size:2rem;}
}

/* Sehr schmale Handys (~320px): Absende-Button einzeilig halten */
@media (max-width:374px){
  .funnel-card{padding-inline:16px;}
  .btn-next{font-size:.9375rem; padding-inline:.75rem; gap:.25rem;}
}

/* ===== V8: PLZ-Ortsbestätigung, Consent-Zeile, Logo-Höhe ===== */

/* Grüne Bestätigung unter dem PLZ-Feld, sobald der Ort erkannt ist */
.plz-echo{
  display:none;
  align-items:center;
  gap:6px;
  font-size:.9375rem;
  font-weight:600;
  margin:8px 0 0;
}
.plz-echo[data-state="load"]{display:flex;color:var(--text-soft);font-weight:400;}
.plz-echo[data-state="ok"]{display:flex;color:#1A9D5A;}
.plz-echo svg{flex:0 0 auto;}

/* Einwilligungszeile unter dem Absende-Button */
.consent-note{
  font-size:.75rem;
  line-height:1.5;
  color:var(--text-soft);
  text-align:center;
  margin:14px 0 0;
}
.consent-note a{color:var(--text-soft);text-decoration:underline;}

/* Gemischte Logoformate (svg/webp/png): einheitliche Höhe statt Breite,
   damit kein Logo riesig oder winzig wirkt. Breite gedeckelt. */
.logos-track img{width:auto;height:30px;max-width:120px;object-fit:contain;}
/* Sanftes Einblenden beim einmaligen Branchen-Wechsel (kein Flackern) */
.logos-track{transition:opacity .18s ease;}

/* ===== Start-Gate (nur Variante B, greift über body.pre-start) ===== */
/* Vor dem Start: Formularkarte und Fortschritt ausblenden, Logos bleiben als Social Proof */
body.pre-start .funnel-card{display:none;}
/* "Jetzt starten"-Button im Hero, nur sichtbar solange pre-start aktiv ist */
.hero-cta{display:none;margin-top:4px;}
body.pre-start .hero-cta{display:block;}
.btn-start{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--font);font-size:1.0625rem;font-weight:600;
  color:#fff;background:var(--blau);border:none;border-radius:10rem;
  padding:16px 40px;cursor:pointer;
  box-shadow:0 10px 24px -12px var(--blau);
}
.btn-start:hover{background:var(--blau-dunkel);}
.btn-start-note{font-size:.8125rem;color:var(--text-soft);margin:12px 0 0;}

/* ===== Datenbank-Abgleich zwischen Region und Kontaktschritt ===== */
.scan{
  padding-block:6px 4px;
  text-align:center;
  animation:fadeIn .2s ease;
}
/* Radar: heller Blaukreis mit zwei Ringen, darueber ein drehender Keil */
.scan-radar{
  position:relative;
  width:128px;
  height:128px;
  margin:4px auto 18px;
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 31%, var(--blau-hell-2) 31% 32.5%, transparent 32.5%),
    radial-gradient(circle, transparent 0 60%, var(--blau-hell-2) 60% 61.5%, transparent 61.5%),
    var(--blau-hell);
  overflow:hidden;
}
.scan-radar::after{
  /* Mittelpunkt */
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--blau);
}
.scan-sweep{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(49,107,224,.34) 0deg, rgba(49,107,224,.10) 38deg, transparent 72deg, transparent 360deg);
  animation:scanSweep 1.5s linear infinite;
}
@keyframes scanSweep{to{transform:rotate(360deg);}}
/* Treffer-Punkte, die im Takt des Keils auftauchen */
.scan-blip{
  position:absolute;
  top:var(--by); left:var(--bx);
  width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--blau);
  opacity:0;
  animation:scanBlip 1.5s ease-out infinite;
  animation-delay:var(--bd);
}
@keyframes scanBlip{
  0%{opacity:0; transform:scale(.4);}
  12%{opacity:1; transform:scale(1);}
  60%{opacity:.55; transform:scale(1);}
  100%{opacity:0; transform:scale(1);}
}
.scan-title{
  font-family:var(--font-head);
  font-weight:500;
  font-size:1.125rem;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--text);
  margin:0 0 14px;
}
.scan-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  max-width:320px;
  text-align:left;
}
.scan-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.875rem;
  color:var(--text-soft);
  padding-block:7px;
  border-top:1px solid var(--border);
  opacity:.5;
  transition:opacity .25s ease, color .25s ease;
}
.scan-item:first-child{border-top:none;}
/* Platzhalter-Ring, bis die Zeile abgehakt ist */
.scan-ico{
  flex:0 0 auto;
  position:relative;
  width:17px; height:17px;
  border-radius:50%;
  border:1.5px solid var(--border-focus);
  transition:background .2s ease, border-color .2s ease;
}
.scan-item.done{opacity:1; color:var(--text);}
.scan-item.done .scan-ico{background:var(--blau); border-color:var(--blau);}
.scan-item.done .scan-ico::after{
  content:"";
  position:absolute;
  top:4px; left:4.5px;
  width:7px; height:4px;
  border-left:1.6px solid #fff;
  border-bottom:1.6px solid #fff;
  transform:rotate(-45deg);
}
/* Waehrend des Abgleichs sind Weiter/Zurueck weg */
body.scanning .step-nav{display:none;}

/* Treffer-Zeile ueber der Headline des Kontaktschritts */
.step-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px;
  padding:5px 11px;
  border-radius:10rem;
  background:var(--blau-hell);
  color:var(--blau-tief);
  font-size:.8125rem;
  font-weight:500;
  line-height:1.3;
}
.step-eyebrow-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--blau);
  animation:eyebrowPulse 1.8s ease-in-out infinite;
}
@keyframes eyebrowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(49,107,224,.45);}
  50%{box-shadow:0 0 0 5px rgba(49,107,224,0);}
}

@media (prefers-reduced-motion: reduce){
  .scan, .scan-sweep, .scan-blip, .step-eyebrow-dot{animation:none;}
  .scan-sweep{background:conic-gradient(from 300deg, rgba(49,107,224,.30) 0deg, rgba(49,107,224,.08) 38deg, transparent 72deg);}
  .scan-blip{opacity:.9;}
}