/* ============================================================
   MTMS – Mentaltraining Maximilian Seibel
   WIEDEREINSTIEG.CSS

   Seitenspezifisches CSS fuer die Hauptseite "Zurueck in den Sport"
   (Zielgruppe: berufstaetige Menschen mit wenig Motivation). Basiert
   auf dem gleichen Baukasten wie sportverletzungen.css und golf.css.
   Gemeinsame Bausteine (Header, Footer, Buttons, Hinweisbox) stehen
   in content/css/shared.css.

   Inhalt: Hero, Zweifel-Karten, Beweggrund-Reframe, Vorteile-Grid,
   Fuer-wen-Bereich, Ablauf-Timeline, Philosophie-Zitat, Schluss-CTA.
   ============================================================ */


/* ---------- page hero ---------- */
.page-hero{ padding: 96px 0 76px; }
  .page-hero h1{
    font-family: var(--display);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.01em;
    margin: 16px 0 22px;
  }
  .page-hero p{ font-size: 16.5px; color: rgba(32,36,31,0.75); max-width: 640px; margin-top: 14px; }
  .page-hero p strong{ color: var(--ink); }

/* ---------- section shared ---------- */
section{ padding: 92px 0; }
  .section-head{ max-width: 640px; margin-bottom: 44px; }
  .section-head h2{
    font-family: var(--display);
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight:500;
    margin-top:12px;
    line-height:1.18;
  }
  .lead-text{ font-size: 16.5px; color: rgba(32,36,31,0.72); max-width: 640px; }
  .lead-text + .lead-text{ margin-top: 14px; }

/* ---------- definition ---------- */
.definition{ background: var(--paper-dim); }
  .tint{ background: var(--paper-dim); }
  .def-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
  .checklist{ list-style:none; margin-top: 8px; }

/* ---------- story & doubts (Sportverletzungen) ---------- */
.story{ max-width: 760px; }
  .doubts-section{ background: var(--paper-dim); }
  .doubts{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; }
  .doubt-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 24px 26px;
    font-family: var(--display);
    font-size: 17px;
    font-style: italic;
    line-height: 1.4;
    color: rgba(32,36,31,0.82);
  }
  @media (max-width: 860px){
    .doubts{ grid-template-columns: 1fr; }
  }
  .checklist li{
    display:flex; gap:14px; align-items:flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-size: 15.5px; color: rgba(32,36,31,0.8);
  }
  .checklist li:first-child{ border-top: 1px solid var(--line); }
  .checklist li::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background: var(--amber); margin-top: 7px; flex-shrink:0;
  }

/* ---------- symptoms ---------- */
.symptoms{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px; }
  .symptom-tag{
    font-family: var(--display); font-style: italic; font-size: 15px;
    border: 1px solid var(--line); background: var(--card);
    border-radius: 999px; padding: 11px 20px; color: rgba(32,36,31,0.75);
  }

/* ---------- benefits grid ---------- */
.benefit-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .benefit-item{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 34px 28px; }
  .benefit-item h3{ font-family: var(--display); font-size: 19px; font-weight: 500; margin-bottom: 10px; }
  .benefit-item p{ font-size: 14px; color: rgba(32,36,31,0.62); }

/* ---------- für wen ---------- */
.fuer-wen{ background: var(--paper-dim); }
  .fuer-wen-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items:start; }

/* ---------- process timeline ---------- */
.timeline{ position:relative; margin-top: 16px; }
  .timeline::before{ content:""; position:absolute; left: 21px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
  .timeline-step{ position:relative; display:grid; grid-template-columns: 44px 1fr; gap: 22px; padding-bottom: 40px; }
  .timeline-step:last-child{ padding-bottom:0; }
  .t-num{
    position:relative; width: 44px; height: 44px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 13px; color: var(--sage);
    z-index:1;
  }
  .timeline-step h3{ font-family: var(--display); font-size: 20px; font-weight: 500; margin-bottom: 8px; }
  .timeline-step p{ font-size: 15px; color: rgba(32,36,31,0.68); max-width: 580px; }

/* ---------- philosophie ---------- */
.verstaendnis blockquote{
    font-family: var(--display); font-style: italic;
    font-size: clamp(21px, 2.8vw, 30px); font-weight: 500; line-height: 1.4;
  }
  .verstaendnis blockquote::before{
    content:""; display:block; width:44px; height:44px; border-radius:50%;
    background: var(--sage-dim); opacity:0.3; margin-bottom: 20px;
  }
  .stack-line{
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--sage); margin-top: 24px;
  }

/* ---------- final cta ---------- */
.cta{ text-align:center; }
  .cta-card{ background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 66px 40px; }
  .cta h2{
    font-family: var(--display); font-size: clamp(28px, 4.6vw, 44px); font-weight:500;
    max-width: 700px; margin: 16px auto 26px; line-height: 1.2;
  }

/* ---------- responsive ---------- */
@media (max-width: 860px){
    .def-grid{ grid-template-columns: 1fr; }
    .benefit-grid{ grid-template-columns: 1fr; }
    .fuer-wen-grid{ grid-template-columns: 1fr; }
    section{ padding: 62px 0; }
    .footer-grid{ flex-direction:column; align-items:flex-start; }
    .cta-card{ padding: 46px 24px; }
  }