/* ============================================================
   Nicci Landing Page — V1 (Nicci-Branding + Two-Column-Layout)
   Scope: body.lp-entscheidungstool
   Struktur folgt ThriveCart-Referenz, Optik folgt deine.nicci
   ============================================================ */

/* ============ TOKENS ============
   Alle Token-Werte kommen aus shared/tokens.css (:root).
   Keine Overrides nötig — Landing nutzt die Shared-Defaults 1:1.
*/

/* ============ BASE ============ */
  .lp-entscheidungstool,
  .lp-entscheidungstool *,
  .lp-entscheidungstool *::before,
  .lp-entscheidungstool *::after {
    box-sizing: border-box;
  }
  .lp-entscheidungstool {
    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: shared/blobs.css (aktiviert via body.nc-has-blobs).
     Body-overflow-x:hidden + position:relative kommen aus dem shared-Block. */
  .lp-entscheidungstool .lp-stage { position: relative; z-index: 1; }
  .lp-entscheidungstool img { max-width: 100%; height: auto; display: block; }
  .lp-entscheidungstool a {
    color: var(--nc-ink);
    text-decoration-color: var(--nc-sage);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
  }
  .lp-entscheidungstool a:hover { color: var(--nc-ink); text-decoration-color: var(--nc-ink); }
  .lp-entscheidungstool ::selection { background: var(--nc-sage-soft); color: var(--nc-ink); }
  .lp-entscheidungstool :focus-visible {
    outline: 2px solid var(--nc-ink);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .lp-entscheidungstool h1,
  .lp-entscheidungstool h2,
  .lp-entscheidungstool h3 {
    font-family: var(--nc-font-head);
    color: var(--nc-ink);
    text-wrap: balance;
    letter-spacing: -0.01em;
    margin: 0 0 0.6em;
  }
  .lp-entscheidungstool h1 { font-weight: 600; }
  .lp-entscheidungstool h2 { font-weight: 600; }
  .lp-entscheidungstool h3 { font-weight: 600; }
  .lp-entscheidungstool p { margin: 0 0 1em; text-wrap: pretty; }
  .lp-entscheidungstool p:last-child { margin-bottom: 0; }
  .lp-entscheidungstool ul { list-style: none; margin: 0; padding: 0; }
  .lp-entscheidungstool hr { border: 0; border-top: 1px solid var(--nc-rule); margin: 0; }

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

  .lp-entscheidungstool .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-entscheidungstool .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-entscheidungstool a.lp-wordmark:hover {
    color: var(--nc-ink);
    text-decoration: none;
  }
  .lp-entscheidungstool .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-entscheidungstool .lp-grid {
    max-width: var(--nc-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--nc-gap);
    align-items: start;
  }

  @container (inline-size > 920px) {
    .lp-entscheidungstool .lp-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: clamp(20px, 2.5vw, 32px);
    }
    .lp-entscheidungstool .lp-col--sidebar {
      position: sticky;
      top: clamp(20px, 3vw, 40px);
      align-self: start;
    }
  }

  .lp-entscheidungstool .lp-col { min-width: 0; }
  .lp-entscheidungstool .lp-col--content {
    display: flex;
    flex-direction: column;
    gap: var(--nc-gap);
  }

/* ============ COMPONENTS ============ */
  /* Card primitive */
  .lp-entscheidungstool .lp-card {
    background: var(--nc-surface);
    border-radius: var(--nc-radius);
    padding: var(--nc-card-pad);
    box-shadow: var(--nc-shadow-card);
  }

  /* Eyebrow — immer zentriert, responsive */
  .lp-entscheidungstool .lp-eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 18px;
    font-family: var(--nc-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nc-ink);
    background: var(--nc-sage-soft);
    padding: 6px 14px;
    border-radius: var(--nc-radius-pill);
    text-align: center;
  }

  /* Buttons */
  .lp-entscheidungstool .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: var(--nc-font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    border: 0;
    border-radius: var(--nc-radius-pill);
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  }
  .lp-entscheidungstool .lp-btn--primary {
    background: var(--nc-sage);
    color: var(--nc-ink);
    box-shadow: 0 2px 8px rgb(188 213 132 / 0.45);
  }
  .lp-entscheidungstool .lp-btn--primary:hover {
    background: color-mix(in oklch, var(--nc-sage) 85%, black 15%);
    color: var(--nc-ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgb(188 213 132 / 0.55);
  }
  .lp-entscheidungstool .lp-btn--primary:active { transform: translateY(0); }
  .lp-entscheidungstool .lp-btn--block { display: flex; width: 100%; }

  /* Lists */
  .lp-entscheidungstool .lp-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
  }
  /* Icon absolut, Rest fliesst als Inline-Text — robust gegen Editor-Stripping
     des inneren <span>-Wrappers um Strong+Text. */
  .lp-entscheidungstool .lp-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--nc-ink);
  }
  .lp-entscheidungstool .lp-list__icon {
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 16px;
    line-height: 1.4;
  }
  .lp-entscheidungstool .lp-list strong { font-weight: 600; }

  /* CTA-Row — freistehende CTA zwischen Cards */
  .lp-entscheidungstool .lp-cta-row {
    text-align: center;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Price-Highlight Line */
  .lp-entscheidungstool .lp-price-highlight {
    font-family: var(--nc-font-head);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--nc-ink);
    margin: 0;
  }

/* ============ SECTIONS ============ */

  /* Hero-Card */
  .lp-entscheidungstool .lp-hero .lp-headline {
    font-size: clamp(22px, 1.6vw + 14px, 30px);
    line-height: 1.22;
    color: var(--nc-ink);
    margin-bottom: 0.7em;
  }
  .lp-entscheidungstool .lp-hero .lp-copy p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--nc-ink);
  }
  .lp-entscheidungstool .lp-hero .lp-copy strong { font-weight: 600; }
  .lp-entscheidungstool .lp-hero .lp-btn {
    margin-top: 14px;
  }
  .lp-entscheidungstool .lp-hero__visual {
    margin: 18px 0 22px;
  }
  .lp-entscheidungstool .lp-hero__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* Section-Titel (H2) */
  .lp-entscheidungstool .lp-section__title {
    font-size: clamp(18px, 0.9vw + 14px, 22px);
    line-height: 1.25;
    color: var(--nc-ink);
    margin: 0 0 16px;
  }

  /* For-Whom / Twin-Grid */
  .lp-entscheidungstool .lp-twin {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 36px);
  }
  @container (inline-size > 560px) {
    .lp-entscheidungstool .lp-twin {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* About */
  .lp-entscheidungstool .lp-about {
    background: var(--nc-surface-soft);
    border-left: 3px solid var(--nc-sage);
  }
  .lp-entscheidungstool .lp-about__title {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    color: var(--nc-ink);
    margin-bottom: 14px;
  }

  /* Testimonials */
  .lp-entscheidungstool .lp-testimonials__grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .lp-entscheidungstool .lp-testimonial {
    position: relative;
    background: var(--nc-surface-soft);
    border-radius: var(--nc-radius);
    padding: 20px 22px 20px 48px;
    margin: 0;
    border-left: 3px solid var(--nc-sage);
  }
  .lp-entscheidungstool .lp-testimonial::before {
    content: "„";
    position: absolute;
    left: 14px;
    top: -4px;
    font-family: var(--nc-font-head);
    font-size: 52px;
    line-height: 1;
    color: var(--nc-peach);
  }
  .lp-entscheidungstool .lp-testimonial p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--nc-ink);
    margin: 0 0 8px;
    font-style: italic;
  }
  .lp-entscheidungstool .lp-testimonial cite {
    font-size: 13px;
    color: var(--nc-ink-muted);
    font-style: normal;
  }

  /* FAQ */
  .lp-entscheidungstool .lp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lp-entscheidungstool .lp-faq__item {
    border-top: 1px solid var(--nc-rule);
  }
  .lp-entscheidungstool .lp-faq__item:last-of-type {
    border-bottom: 1px solid var(--nc-rule);
  }
  .lp-entscheidungstool .lp-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--nc-ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .lp-entscheidungstool .lp-faq__item summary::-webkit-details-marker { display: none; }
  .lp-entscheidungstool .lp-faq__item summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--nc-ink);
    border-bottom: 2px solid var(--nc-ink);
    transform: rotate(45deg);
    transition: transform 0.22s ease;
    margin-right: 4px;
  }
  .lp-entscheidungstool .lp-faq__item[open] summary { color: var(--nc-ink); }
  .lp-entscheidungstool .lp-faq__item[open] summary::after {
    transform: rotate(-135deg);
  }
  .lp-entscheidungstool .lp-faq__item p {
    padding: 0 0 18px;
    color: var(--nc-ink-muted);
    font-size: 15px;
    line-height: 1.6;
  }

  /* ============ SIDEBAR ============ */
  .lp-entscheidungstool .lp-sidebar-card {
    position: relative;
    background: var(--nc-surface);
    border-radius: var(--nc-radius);
    padding: var(--nc-card-pad);
    box-shadow: var(--nc-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* === Sidebar-Highlight: Conic-Gradient Swoosh ===
     Wird von landing.js aktiviert, wenn auf Desktop einer der 3
     Content-CTAs geklickt wird. Ein leuchtender Lichtschein dreht
     einmal im Uhrzeigersinn um die Karte, begleitet von einem
     leichten Schatten-Pulse. ===================================== */
  @property --lp-swoosh-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }

  .lp-entscheidungstool .lp-sidebar-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--nc-radius) + 3px);
    padding: 3px;
    background: conic-gradient(
      from var(--lp-swoosh-angle, 0deg),
      transparent 0deg,
      var(--nc-sage) 40deg,
      var(--nc-olive) 70deg,
      var(--nc-peach) 100deg,
      transparent 140deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
  }

  .lp-entscheidungstool .lp-sidebar-card.is-pulsing {
    animation: lp-card-pulse 2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .lp-entscheidungstool .lp-sidebar-card.is-pulsing::before {
    animation: lp-swoosh 2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Reduced-Motion-Fallback: kurzer Border-Flash statt Swoosh */
  .lp-entscheidungstool .lp-sidebar-card.is-flashed {
    animation: lp-card-flash 0.9s ease-out;
  }

  @keyframes lp-swoosh {
    0%   { --lp-swoosh-angle:   0deg; opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { --lp-swoosh-angle: 360deg; opacity: 0; }
  }

  @keyframes lp-card-pulse {
    0%, 100% { box-shadow: var(--nc-shadow-card); transform: scale(1); }
    50%      { box-shadow: 0 8px 32px rgb(93 118 40 / 0.28); transform: scale(1.012); }
  }

  @keyframes lp-card-flash {
    0%, 100% { box-shadow: var(--nc-shadow-card); }
    40%      { box-shadow: 0 0 0 3px var(--nc-sage), 0 6px 20px rgb(93 118 40 / 0.2); }
  }

  @media (prefers-reduced-motion: reduce) {
    .lp-entscheidungstool .lp-sidebar-card.is-pulsing,
    .lp-entscheidungstool .lp-sidebar-card.is-pulsing::before {
      animation: none;
    }
  }

  .lp-entscheidungstool .lp-product-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .lp-entscheidungstool .lp-product-intro__cover {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 10px;
    overflow: clip;
    background: linear-gradient(135deg, var(--nc-sage-soft) 0%, var(--nc-peach) 100%);
    box-shadow: 0 2px 8px rgb(28 26 21 / 0.08);
  }
  .lp-entscheidungstool .lp-product-intro__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .lp-entscheidungstool .lp-product__title {
    font-family: var(--nc-font-head);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    color: var(--nc-ink);
    margin: 0 0 4px;
  }
  .lp-entscheidungstool .lp-product__subtitle {
    font-size: 13px;
    color: var(--nc-ink-muted);
    margin: 0 0 8px;
  }
  .lp-entscheidungstool .lp-product__price {
    font-family: var(--nc-font-head);
    font-weight: 600;
    font-size: 32px;
    line-height: 1;
    color: var(--nc-ink);
    margin: 0;
  }

  .lp-entscheidungstool .lp-pricing-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lp-entscheidungstool .lp-pricing__heading {
    font-family: var(--nc-font-head);
    font-weight: 600;
    font-size: 22px;
    color: var(--nc-ink);
    margin: 0 0 6px;
  }
  .lp-entscheidungstool .lp-pricing__row,
  .lp-entscheidungstool .lp-pricing__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: var(--nc-ink);
  }
  .lp-entscheidungstool .lp-pricing__row span:first-child {
    color: var(--nc-ink-muted);
  }
  .lp-entscheidungstool .lp-pricing__total {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--nc-font-body);
    letter-spacing: 0.02em;
  }
  .lp-entscheidungstool .lp-pricing__total span:first-child { color: var(--nc-ink); }
  .lp-entscheidungstool .lp-pricing__rule { margin: 4px 0; }
  .lp-entscheidungstool .lp-pricing__note {
    font-size: 11px;
    color: var(--nc-ink-muted);
    text-align: right;
    margin: 4px 0 0;
  }

  .lp-entscheidungstool .lp-trust {
    font-size: 12px;
    line-height: 1.5;
    color: var(--nc-ink-muted);
    text-align: center;
    margin: 0;
  }

/* ============ FOOTER ============ */
/* Footer-Styles → shared/components.css (.nc-site-footer) */

/* ============ STATES / MOTION ============ */
  @media (prefers-reduced-motion: reduce) {
    .lp-entscheidungstool *,
    .lp-entscheidungstool *::before,
    .lp-entscheidungstool *::after {
      transition-duration: 0.001ms !important;
      animation-duration: 0.001ms !important;
    }
    .lp-entscheidungstool::before { animation: none; }
  }