/* ============================================================================
 * kp-theme.css — Hero-Site Re-Theme fuer den KI-Potenzial-Funnel.
 * Laedt NACH kp.css und styles.css, gewinnt damit jede Farb-/Font-Regel.
 * DNA: Bebas Neue + Outfit, bg #02030a, EINE Blau-Familie (#2ea2ff / #1f6dff).
 * Kein Blau-Gruen-Verlauf, kein zweiter Akzent-Ton.
 * Logik bleibt unangetastet: nur Optik (Farben, Fonts, Kopf-Abstand).
 * ==========================================================================*/

/* ---- 1. Token-Override (kp :root Variablen) -------------------------------
   Wir mappen die echten kp-Variablen auf das Hero-Token-System.
   --kp-accent-2 wird bewusst auf dieselbe Blau-Familie gesetzt, damit der
   alte Gruen-Akzent komplett verschwindet. --------------------------------*/
:root{
  --kp-bg:            #02030a;
  --kp-bg-deep:       #04060f;
  --kp-bg-paper:      #080d18;

  --kp-accent:        #2ea2ff;
  --kp-accent-2:      #2ea2ff;
  --kp-accent-line:   #1f6dff;

  --kp-grad:          linear-gradient(135deg, #2ea2ff 0%, #1f6dff 100%);
  --kp-grad-h:        linear-gradient(90deg,  #2ea2ff 0%, #1f6dff 100%);
  --kp-grad-v:        linear-gradient(180deg, #2ea2ff 0%, #1f6dff 100%);
}

/* ---- 2. Seiten-Basis ------------------------------------------------------ */
body.kp-page{
  background-color: var(--kp-bg);
  color: var(--kp-text);
  font-family: "Outfit", system-ui, sans-serif;
}

/* ---- 3. Display-Headlines auf Bebas Neue ---------------------------------
   Funnel-Intro, Step-, Section-, Result-, CTA- und Closing-Titel.
   Bebas ist eine reine Versalien-Schrift, deshalb uppercase + ruhiges
   Tracking, passend zum Hero-Look. ----------------------------------------*/
.kp-display,
.kp-funnel-intro-title,
.kp-step-title,
.kp-section-title,
.kp-section-title--sm,
.kp-result-title,
.kp-trust-title,
.kp-uc-title,
.kp-cta-h,
.kp-closing-title{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.92;
}

/* Score-Zahl + Stat-Zahlen + Ranks: ebenfalls Bebas (ersetzt Oswald) */
.kp-score-num,
.kp-stat dt,
.kp-option-rank,
.kp-option-rank-sm,
.kp-uc-card::after,
.kp-faq-num,
.kp-loading-text,
.kp-progress-meta .kp-overline strong,
.kp-overline-num{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

/* Sub-Labels / Body / Eyebrows: Outfit statt Inter/Montserrat */
.kp-eyebrow,
.kp-overline,
.kp-mono-label,
.kp-field-meta,
.kp-progress-label,
.kp-btn,
.kp-input-label,
.kp-form-foot,
.kp-stat dd,
.kp-microreass,
.kp-hero-lead,
.kp-step-hint,
.kp-funnel-intro-sub,
.kp-section-sub,
.kp-section-aside,
.kp-result-sub,
.kp-result-narrative p[data-kp-bucket-text],
.kp-uc-desc,
.kp-cta-primary p,
.kp-cta-secondary p,
.kp-closing-lead,
.kp-option,
.kp-option-body strong,
.kp-option-sub,
.kp-input input,
.kp-input select,
.kp-consent,
.kp-faq-q,
.kp-faq-body p,
.kp-trust-card p,
.kp-score-bucket,
.kp-score-max,
.kp-uc-roi{
  font-family: "Outfit", system-ui, sans-serif;
}

/* ---- 4. Akzent-Wort: solides Blau statt Verlaufs-Italic ------------------ */
.kp-accent-word,
body.kp-page .gradient-text{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--kp-accent);
  font-style: normal;
}

/* ---- 5. Funnel-Kopf-Abstand: fixer Shared-Header (~70px) nicht ueberlappen */
.kp-funnel{
  padding-top: 7rem;            /* Header + Luft ueber Step 1 */
}
/* Sticky-Progress bleibt unter dem fixen Header haengen */
.kp-progress{
  top: 70px;
  border-top: 1px solid rgba(46, 162, 255, 0.30);
  background: var(--kp-bg-deep);
}
@media (max-width: 768px){
  .kp-funnel{ padding-top: 6rem; }
  .kp-progress{ top: 64px; border-top: 1px solid rgba(46, 162, 255, 0.35); }
}
@media (max-width: 480px){
  .kp-progress{ top: 60px; }
}

/* Feiner Top-Hairline-Akzent im Funnel: nur Blau, kein Gruen */
.kp-funnel::before{
  background: linear-gradient(90deg,
      transparent 0%,
      var(--kp-accent) 35%,
      var(--kp-accent-line) 65%,
      transparent 100%);
}
.kp-funnel::after{
  background: radial-gradient(circle, rgba(46, 162, 255, 0.06) 0%, transparent 65%);
}

/* ---- 6. Progress-Steps (alte gruene "is-done" Stufe -> Blau) ------------- */
.kp-progress-step.is-active{
  background: var(--kp-grad);
  border-color: transparent;
  color: #fff;
}
.kp-progress-step.is-done{
  color: var(--kp-accent);
  border-color: rgba(46, 162, 255, 0.55);
  background: rgba(46, 162, 255, 0.08);
}
.kp-progress-step.is-done::after{ color: var(--kp-accent); }

/* ---- 7. Optionen: ausgewaehlte Zustaende in Blau ------------------------ */
.kp-option:focus-visible,
.kp-input input:focus,
.kp-input select:focus,
.kp-btn:focus-visible{
  outline-color: var(--kp-accent);
}
.kp-option.is-selected{
  background: rgba(46, 162, 255, 0.08);
}
.kp-options--pills .kp-option.is-selected{
  background: rgba(46, 162, 255, 0.12);
}
.kp-input input:focus,
.kp-input select:focus{
  border-color: var(--kp-accent);
  background: rgba(46, 162, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(46, 162, 255, 0.18);
}
.kp-consent input[type="checkbox"]:checked{
  border-color: var(--kp-accent);
}

/* ---- 8. Buttons: solides Hero-Blau (kp-grad ist jetzt Blau-Blau) -------- */
.kp-btn--primary{
  background: var(--kp-accent-line);
  box-shadow: 0 10px 30px rgba(31, 109, 255, 0.30);
}
.kp-btn--primary:hover{
  background: #2f7dff;
  box-shadow: 0 14px 38px rgba(46, 162, 255, 0.42);
}

/* ---- 9. Result-Screen: Score, Buckets, ROI-Tags in Blau ----------------- */
.kp-score-num{
  background: none;
  -webkit-text-fill-color: var(--kp-accent);
  color: var(--kp-accent);
}
/* Alle Bucket-Varianten auf eine Blau-Familie ziehen (kein Gruen/Indigo) */
.kp-score-bucket[data-bucket="hoch"],
.kp-score-bucket[data-bucket="mittel"],
.kp-score-bucket[data-bucket="niedrig"]{
  background: rgba(46, 162, 255, 0.10);
  border-color: rgba(46, 162, 255, 0.40);
  color: #bfe0ff;
}
.kp-uc-roi{
  color: var(--kp-accent);
  border-color: rgba(46, 162, 255, 0.35);
  background: rgba(46, 162, 255, 0.06);
}
.kp-trust-icon{ color: var(--kp-accent); }
.kp-faq-icon{ color: var(--kp-accent); }
.kp-faq-item[open]{ border-top-color: var(--kp-accent); }

/* PDF-Confirm + Form-Foot: blauer Haken statt Gruen */
.kp-form-foot{ color: var(--kp-accent); }
.kp-cta-confirm{
  color: var(--kp-accent) !important;
  background: rgba(46, 162, 255, 0.08);
  border-color: rgba(46, 162, 255, 0.22);
  border-left-color: var(--kp-accent);
}

/* Calendly-Lade-/Link-Akzente von #0c69ee auf Hero-Blau */
.kp-calendly-spinner{ border-top-color: var(--kp-accent); }
.kp-calendly-loading .kp-calendly-fallback a,
.kp-link-btn{ color: var(--kp-accent); }
.kp-cta-calendly{ background: var(--kp-bg-deep); }

/* ---- 10. Rest-Fonts auf die Seiten-DNA ziehen ----------------------------
   Einige kp-Elemente trugen noch Oswald / Inter / Montserrat / Arial (vom
   alten Theme bzw. Browser-Default). Wir holen die Step-Nummern auf Bebas
   und alle uebrigen Texte/Felder auf Outfit, damit NICHTS aus dem Font-
   System der restlichen Seite faellt. -------------------------------------*/
.kp-progress-step,
.kp-progress-step span{
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: .04em;
}
body.kp-page .kp-skip,
body.kp-page .kp-result-restart,
body.kp-page .kp-link-btn,
body.kp-page input,
body.kp-page select,
body.kp-page textarea,
body.kp-page button{
  font-family: "Outfit", system-ui, sans-serif;
}