/* MOTOMATION page enhancements (scoped to this product page) */

/* Fancy hero with subtle gradient and soft shadow */
.product-hero {
  position: relative;
  padding: 48px 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbff 0%, #f1f5ff 50%, #eef7ff 100%);
  box-shadow: 0 10px 30px rgba(31,111,255,0.08);
}

/* Override the generic two-column layout within the product hero for better spacing */
.product-hero .hero-media .product-logo{
  width: 320px;
  height: 140px;
  border: 2px dashed #cfe0ff;
  border-radius: 12px;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  color:#6b7a90;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Pills (quick benefits under headline) */
.pills{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px; padding:0; list-style:none;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#ffffff; border:1px solid #e6ecff; color:#0b1020;
  padding:6px 10px; border-radius:999px; font-size:12.5px; font-weight:700;
  box-shadow:0 2px 8px rgba(31,111,255,0.06);
}
.pill .dot{
  width:8px; height:8px; border-radius:50%; background:#1f6fff; display:inline-block;
}

/* Stats-Grid (elegantes Gitter für KPIs) */
.stats-grid{
  display:grid;
  /* KORRIGIERT: von 3 auf 2 Spalten für das 2x2 Raster */
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:28px 0;
}
.stat-item{
  background:#fff;
  border-radius:12px;
  padding:20px;
  text-align:center;
  border:1px solid var(--border, #e5e7eb);
  box-shadow:0 6px 16px rgba(17,24,39,0.05);
  transition:all .2s ease-in-out;
}
.stat-item.highlight{
  border-color:var(--blue, #1f6fff);
  border-width:2px;
  background:#f6f9ff;
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(31,111,255,0.10);
}
.stat-item .num{
  font-size:28px;
  font-weight:800;
  color:var(--text, #0b1020);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.stat-item .lbl{
  font-size:14px;
  color:var(--muted, #5b6475);
}

@media (max-width:600px){
  /* HINWEIS: Hier wird es automatisch auf eine Spalte umgestellt, was für Mobile perfekt ist */
  .stats-grid{ grid-template-columns:1fr; gap:12px; }
  .stat-item.highlight{ transform:none; box-shadow:0 6px 16px rgba(17,24,39,0.05); }
}

@media (max-width:400px){
  .stat-item{ padding:16px; }
  .stat-item .num{ font-size:26px; }
}

/* Feature grid cards */
.features-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:12px;
}
.feature-card{
  background:#fff; border:1px solid #e8eefc; border-radius:12px; padding:14px;
  box-shadow:0 6px 18px rgba(17,24,39,0.05);
  display:flex; gap:12px; align-items:flex-start;
}
.feature-card .ico{
  flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:#f1f6ff; color:#1f6fff; font-size:18px; border:1px solid #e0e9ff;
}
.feature-card .ico-img {
  width: 20px;
  height: 20px;
  color: currentColor;
}
.feature-card h3{
  margin:0 0 6px; font-size:16px; font-weight:800;
}
.feature-card p{
  margin:0; color:#5b6475; line-height:1.45
}

/* Emphasis section title */
.section-title{
  font-size:22px; font-weight:800; margin:26px 0 10px;
}

/* Section mini navigation (under hero) */
.section-nav{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:10px auto 6px;
}
.section-nav a{
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  opacity: .95;
}
.section-nav a:hover{
  color: var(--blue);
  text-decoration: underline;
}

/* Highlighted pricing / risk-free card */
.pricing-card{
  margin-top:10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border:1px solid #e0e9ff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 12px 30px rgba(31,111,255,0.08);
}
.pricing-card .guarantee{
  display:flex; align-items:center; gap:8px; color:#0b1020; font-weight:700; margin-top:10px;
}
.pricing-card .note{
  margin-top:8px; color:#5b6475; font-size:13px
}

/* CTA emphasis */
.cta-wrap .btn-lg{
  transform: translateZ(0);
  box-shadow: 0 10px 22px rgba(31,111,255,.25);
}
.cta-wrap .btn-lg:hover{
  box-shadow: 0 12px 28px rgba(22,91,230,.32);
}

/* Modules: make the list flow as grid */
.product-modules .cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.product-modules .card{
  border-color:#e8eefc; box-shadow:0 6px 16px rgba(17,24,39,.05);
}

/* FAQ (collapsible) */
.faq{ margin-top:24px }
.faq details{
  background:#fff; border:1px solid #e8eefc; border-radius:10px; padding:10px 12px; margin-bottom:8px;
  box-shadow:0 6px 16px rgba(17,24,39,.04);
}
.faq summary{ cursor:pointer; font-weight:800; color:var(--text); font-size:16px }
.faq p{ margin:8px 0 0; color:var(--text); line-height:1.6; font-size:15px }
.faq li{ color:var(--text); line-height:1.6; }
.faq ol{ color:var(--text); }

/* Spacing: add air after pricing section → before "Die 7 Module …" */
.pricing{ margin-bottom: 28px; }

/* Responsive tweaks */
@media (max-width:980px){
  .product-modules .cards{ grid-template-columns:1fr; }
  .features-grid{ grid-template-columns:1fr; }
  .product-hero{ padding:28px 0; }
  .pricing{ margin-bottom: 22px; }
}

/* No-needed-list: remove native bullets and align items */
.no-needed-list ul{
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.no-needed-list ul li{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.4;
}

/* Testimonial styles */
.testimonial{ margin: 18px 0 10px; }
.testimonial-card{
  background:#fff; border:1px solid #e8eefc; border-radius:16px; padding:16px;
  box-shadow:0 10px 24px rgba(17,24,39,.06);
  display:flex; gap:14px; align-items:flex-start;
}
.t-avatar{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.t-body .t-quote-head{ font-weight:800; font-size:18px; margin:0 0 8px; color:var(--text); }
.t-body .t-quote{ margin:0; color:var(--muted,#5b6475); line-height:1.55; }
.t-author{ margin-top:10px; color:var(--text); }

@media (max-width:680px){
  .testimonial-card{ flex-direction:column; }
  .t-avatar{ width:64px; height:64px; }
}

/* Prevent CTA button wrapping on small screens */
@media (max-width: 480px){
  .product-hero .btn-lg,
  .pricing .btn-lg,
  .cta-bottom .btn-lg {
    font-size: 16px;
    --padX: 18px;
    --padY: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 360px){
  .product-hero .btn-lg,
  .pricing .btn-lg,
  .cta-bottom .btn-lg {
    font-size: 15px;
    --padX: 14px;
  }
}

/* Mid-CTA spacing and polish (only affects the middle CTA block) */
.cta-mid{
  text-align: center;
  padding: 0;
  margin: 18px auto 16px;
}
.cta-mid .cta-meta{
  max-width: 560px;
  margin: 0 auto;
}
/* Spacing under the green check note above the button */
.cta-mid .cta-meta:first-child{
  margin-bottom: 12px;
}
/* Space above the button for breathing room */
.cta-mid .cta-wrap{
  margin-top: 14px;
}
/* Space below the button to the affiliate note */
.cta-mid .cta-wrap + .cta-meta{
  margin-top: 14px;
}
/* Subtle emphasis for the 30‑Tage Hinweis */
.cta-mid .cta-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
/* Keep the affiliate text calm and small */
.cta-mid .cta-legal{
  font-size: 12px;
  color: var(--muted, #5b6475);
}

@media (max-width: 520px){
  .cta-mid{ margin: 14px auto 14px; }
  .cta-mid .cta-meta:first-child{ margin-bottom: 10px; }
  .cta-mid .cta-wrap + .cta-meta{ margin-top: 12px; }
}