/* ============================================================
   Nicci Funnel — Optin-Landingpage + Danke-/Abmelde-Seiten
   Scope: body.lp-funnel (Varianten --optin / --message)
   Depends: shared/utilities.css → components.css → base.css → tokens.css
   Ersetzt die Elementor-Seiten 437, 270, 374, 471.
   ============================================================ */

/* ============ BASE ============ */
.lp-funnel,
.lp-funnel *,
.lp-funnel *::before,
.lp-funnel *::after {
  box-sizing: border-box;
}

.lp-funnel {
  margin: 0;
  padding: 0;
  background: var(--nc-bg);
  color: var(--nc-ink);
  font-family: var(--nc-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hintergrund-Blobs aus shared/blobs.css; Stage über das Blob-Layer heben. */
.lp-funnel .lp-stage { position: relative; z-index: 1; }
.lp-funnel img { max-width: 100%; height: auto; display: block; }
.lp-funnel ::selection { background: var(--nc-sage-soft); color: var(--nc-ink); }
.lp-funnel :focus-visible {
  outline: 2px solid var(--nc-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ LAYOUT ============ */
.lp-funnel .lp-stage {
  container-type: inline-size;
  min-height: 100vh;
  padding: var(--nc-stage-pad) clamp(12px, 3vw, 32px) 48px;
  display: flex;
  flex-direction: column;
}

/* Topbar kommt aus modules/landing/parts/landing-topbar.php. Wie in legal.css
   spiegeln wir die nötigen Selektoren auf den eigenen Body-Scope. */
.lp-funnel .lp-topbar {
  max-width: var(--nc-container);
  margin: 0 auto clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.lp-funnel .lp-wordmark {
  font-family: var(--nc-font-head);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--nc-ink);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.lp-funnel a.lp-wordmark:hover {
  color: var(--nc-ink);
  text-decoration: none;
}
.lp-funnel .lp-avatar {
  width: clamp(92px, 10vw, 120px);
  height: clamp(92px, 10vw, 120px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--nc-surface);
  box-shadow: 0 4px 18px rgb(28 26 21 / 0.12);
  background: var(--nc-surface);
}

.lp-funnel .fn-main {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  flex: 1 0 auto;
}

/* ============ CARD ============ */
.lp-funnel .fn-card {
  text-align: center;
}

/* Reine Textkarte — der Hover-Schatten aus .nc-card wirkt hier fehl am Platz. */
.lp-funnel .fn-card:hover {
  box-shadow: var(--nc-shadow-card);
}

.lp-funnel .fn-card__intro > :first-child { margin-top: 0; }

.lp-funnel .fn-card__intro p {
  margin: 0 0 1em;
  color: var(--nc-ink);
  text-wrap: pretty;
}

.lp-funnel .fn-card__intro h1,
.lp-funnel .fn-message__body h1,
.lp-funnel .fn-message__title {
  font-family: var(--nc-font-head);
  font-weight: 600;
  font-size: clamp(27px, 2vw + 15px, 40px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--nc-ink);
  margin: 0 0 clamp(14px, 2vw, 22px);
}

.lp-funnel .fn-card__intro h2 {
  font-family: var(--nc-font-head);
  font-weight: 600;
  font-size: clamp(20px, 1vw + 14px, 25px);
  line-height: 1.25;
  text-wrap: balance;
  margin: 1.4em 0 0.5em;
}

.lp-funnel .fn-card__intro strong { font-weight: 600; }

.lp-funnel .fn-card__intro a,
.lp-funnel .fn-message__body a,
.lp-funnel .fn-back a {
  color: var(--nc-ink);
  text-decoration: underline;
  text-decoration-color: var(--nc-sage);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease;
}
.lp-funnel .fn-card__intro a:hover,
.lp-funnel .fn-message__body a:hover,
.lp-funnel .fn-back a:hover {
  text-decoration-color: var(--nc-ink);
}

/* Emoji im Titel nicht als Blockbild umbrechen lassen. */
.lp-funnel .fn-message__title img,
.lp-funnel .fn-message__body img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  margin: 0 0.05em;
}
.lp-funnel .fn-message__title small { font-size: inherit; }

.lp-funnel .fn-back {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  text-align: center;
  font-size: 0.9rem;
}

/* ============ OPTIN-FORMULAR ============ */
.lp-funnel .fn-optin {
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--nc-rule);
}

/* Labels und Consent-Text linksbündig, auch wenn die Karte zentriert ist. */
.lp-funnel .fn-optin__form { text-align: left; }

.lp-funnel .fn-optin__submit {
  width: 100%;
  margin-top: 4px;
}

/* Honeypot: unsichtbar, aber nicht display:none — manche Bots ignorieren das. */
.lp-funnel .fn-optin__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lp-funnel .fn-optin__error {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--nc-radius);
  background: color-mix(in oklab, var(--nc-danger) 10%, var(--nc-surface));
  color: var(--nc-danger);
  font-size: 0.86rem;
  line-height: 1.45;
}

.lp-funnel .fn-optin__form.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* ============ DEFENSE-IN-DEPTH ============
   Pflicht laut docs/module-guidelines.md: Formular-Elemente zusätzlich mit
   body-Prefix (Specificity 0,2,1), damit sie auch dann gewinnen, wenn der
   reset.css-Dequeue aus functions.php mal ausfällt. Werte gespiegelt aus
   shared/components.css — keine neuen Design-Entscheidungen.
*/
body.lp-funnel .nc-form__input {
  padding: 11px 14px;
  border: 1.5px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  background: var(--nc-surface);
  color: var(--nc-ink);
  font-family: var(--nc-font-body);
  font-size: 0.9rem;
  line-height: 1.4;
}
body.lp-funnel .nc-form__input:focus {
  outline: none;
  border-color: var(--nc-olive);
}
body.lp-funnel .nc-form__consent input[type="checkbox"] {
  accent-color: var(--nc-olive);
  flex-shrink: 0;
  margin-top: 2px;
}
body.lp-funnel button.nc-btn {
  border: none;
  font-family: var(--nc-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
}
body.lp-funnel button.nc-btn--primary {
  background: var(--nc-sage);
  color: var(--nc-ink);
}
body.lp-funnel button.nc-btn--primary:hover {
  background: var(--nc-olive);
  color: var(--nc-surface);
}

/* ============ ERFOLGS-ZUSTAND ============ */
.lp-funnel .fn-optin__success {
  text-align: center;
}

.lp-funnel .fn-optin__success-title {
  font-family: var(--nc-font-head);
  font-weight: 600;
  font-size: clamp(23px, 1.5vw + 14px, 30px);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 10px;
}

.lp-funnel .fn-optin__success p {
  margin: 0;
  color: var(--nc-ink-muted);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-funnel .fn-optin__success:not([hidden]) {
    animation: fn-fade-in 0.35s ease both;
  }
}

@keyframes fn-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============ MELDUNGSSEITEN ============ */
.lp-funnel .fn-message__body > :first-child { margin-top: 0; }
.lp-funnel .fn-message__body > :last-child  { margin-bottom: 0; }

.lp-funnel .fn-message__body p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

.lp-funnel .fn-message__cta {
  justify-content: center;
  margin-top: clamp(22px, 3vw, 30px);
}

.lp-funnel .fn-ig {
  flex-shrink: 0;
}

@container (inline-size < 420px) {
  .lp-funnel .fn-message__cta { flex-direction: column; }
  .lp-funnel .fn-message__cta .nc-btn { width: 100%; }
}