/* Verkaufsseite und Link-Seite */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header-inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.site-nav a:hover { color: var(--petrol); }

.section { padding: 72px 0; }
.section-mist { background: var(--petrol-mist); }
.section-ink { background: var(--ink); color: #fff; }
.section-title { font-size: var(--text-3xl); font-weight: 780; letter-spacing: -.02em; max-width: 22ch; margin-bottom: 18px; }
.section-lead { color: var(--ink-soft); font-size: var(--text-lg); max-width: 62ch; margin-bottom: 32px; }

/* Einstieg: Versprechen links, echte Lektion rechts */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.hero-kicker { color: var(--petrol-strong); font-weight: 650; font-size: var(--text-sm); margin-bottom: 14px; }
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.04; letter-spacing: -.035em; margin-bottom: 22px; }
.hero-lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 52ch; margin-bottom: 28px; }
.hero-media { margin: 0; }
.hero-media figcaption { margin-top: 12px; color: var(--ink-soft); font-size: var(--text-sm); }
.cta { display: grid; gap: 10px; justify-items: start; }
.cta-note { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); max-width: 52ch; }

/* Der Kurs als Zeitleiste: ein Strich je Lektion, Lücken zwischen den Modulen */
.course-map { padding: 8px 0 48px; }
.course-map-lead { margin: 0 0 14px; color: var(--ink-soft); }
.course-map-lead strong { color: var(--ink); }
.map-chain { display: flex; gap: 8px; }
.map-module { display: flex; gap: 3px; flex: var(--n, 1) 1 0; min-width: 0; }
.map-module span { flex: 1 1 0; height: 26px; border-radius: 3px; background: var(--petrol); min-width: 2px; }
.map-module:nth-child(even) span { background: var(--petrol-strong); }
.map-module:first-child span, .map-module:last-child span { background: var(--petrol-line); }

.problem-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.problem-list li { border-top: 3px solid var(--ink); padding-top: 18px; }
.problem-moment { font-size: var(--text-xl); font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.problem-answer { color: var(--ink-soft); margin: 0; }

.module-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.module-item {
  display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--petrol-line);
}
.module-number { color: var(--petrol); font-weight: 700; font-size: var(--text-sm); grid-row: span 2; }
.module-item h3 { margin: 0; font-size: var(--text-lg); }
.module-item p { margin: 0; color: var(--ink-soft); grid-column: 2 / 4; }
.module-count { color: var(--ink-soft); font-size: var(--text-sm); white-space: nowrap; grid-column: 3; grid-row: 1; }

.inside-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.inside-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin: 0; }
.inside-list dt { font-weight: 700; font-size: var(--text-lg); margin-bottom: 6px; }
.inside-list dd { margin: 0; color: var(--ink-soft); }

.preview-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.section-ink .section-title { color: #fff; }
.preview-text p { color: rgba(255, 255, 255, .8); font-size: var(--text-lg); }
.preview-text strong { color: #fff; }

.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.audience-box { border-radius: var(--radius-l); padding: 26px 28px; border: 1px solid var(--line); background: var(--surface); }
.audience-yes { background: var(--petrol-mist); border-color: var(--petrol-line); }
.audience-box h3 { font-size: var(--text-xl); }
.audience-box ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }

.sender-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.sender-grid p { max-width: 60ch; }
.ai-box { background: var(--surface); border: 1px solid var(--petrol-line); border-radius: var(--radius-l); padding: 24px 26px; }
.ai-box h3 { font-size: var(--text-lg); }
.ai-box p { margin: 0; color: var(--ink-soft); }

.voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.voice { margin: 0; background: var(--petrol-mist); border-radius: var(--radius-l); padding: 24px; }
.voice blockquote { margin: 0 0 14px; font-size: var(--text-lg); }
.voice figcaption { color: var(--ink-soft); font-size: var(--text-sm); }

.price-card {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden;
  border-radius: 24px; background: var(--ink); color: #fff; box-shadow: var(--shadow); max-width: 980px;
}
.price-main { padding: 36px clamp(24px, 4vw, 44px); background: var(--petrol); display: grid; align-content: center; gap: 6px; }
.price-main p { margin: 0; }
.price-label { font-weight: 650; }
.price-amount { font-size: 3.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.price-tax { color: rgba(255, 255, 255, .85); font-size: var(--text-sm); }
.price-phase { margin-top: 10px !important; font-weight: 600; }
.price-anchor { margin-top: 18px !important; color: rgba(255, 255, 255, .85); font-size: var(--text-sm); }
.price-details { padding: 36px clamp(24px, 4vw, 44px); display: grid; gap: 24px; align-content: center; }
.price-details ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.price-details .btn-primary { background: #fff; color: var(--ink); }
.price-details .btn-primary:hover { background: var(--petrol-mist); color: var(--ink); }

.waitlist-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.waitlist-form { background: var(--surface); border: 1px solid var(--petrol-line); border-radius: var(--radius-l); padding: 26px 28px; }

.faq-item { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 36px 18px 0; font-weight: 650; font-size: var(--text-lg); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: var(--text-2xl); color: var(--petrol); font-weight: 400; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 18px; color: var(--ink-soft); max-width: 70ch; }

/* Link-Seite für Social-Bios */
body.area-start { background: var(--petrol-mist); }
.start-page { max-width: 480px; margin: 0 auto; padding: 56px 20px 24px; text-align: center; }
.start-page h1 { font-size: var(--text-2xl); margin-top: 22px; }
.start-page p { color: var(--ink-soft); }
.start-links { display: grid; gap: 12px; margin-top: 28px; }
.start-link {
  display: block; padding: 16px 20px; border-radius: var(--radius-m); background: var(--surface);
  border: 1.5px solid var(--petrol-line); color: var(--ink); font-weight: 700; text-decoration: none;
}
.start-link:hover { border-color: var(--petrol); color: var(--ink); }
.start-link-primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.start-link-primary:hover { background: var(--petrol-strong); color: #fff; }

@media (max-width: 1280px) {
  .hero-title { font-size: 2.75rem; }
}
@media (max-width: 1000px) {
  .hero-grid, .inside-grid, .preview-grid, .sender-grid, .waitlist-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-title { font-size: 2.75rem; }
  .module-list { grid-template-columns: minmax(0, 1fr); }
  .price-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .section { padding: 52px 0; }
  .site-nav { display: none; }
  .site-header-inner { justify-content: space-between; }
  .hero { padding-top: 32px; }
  .hero-title { font-size: 2.125rem; }
  .section-title { font-size: var(--text-2xl); }
  .problem-list, .inside-list, .audience-grid { grid-template-columns: minmax(0, 1fr); }
  .problem-moment { font-size: var(--text-lg); }
  .map-chain { gap: 4px; }
  .map-module { gap: 1px; }
  .map-module span { height: 18px; border-radius: 2px; }
  .module-item { grid-template-columns: minmax(0, 1fr) auto; }
  .module-number { grid-row: auto; grid-column: 1 / 3; }
  .module-item p { grid-column: 1 / 3; }
  .module-count { grid-column: 2; grid-row: 2; }
  .price-amount { font-size: 2.75rem; }
}