/* ============================================================
   Sharpa — Landingpages Abklärung & Therapieplan (page-specific)
   Used by: de/abklaerung-diagnose.html, en/diagnostic-assessment.html,
            de/therapieplan.html, en/therapy-plan.html
   Builds on assets/css/main.css (tokens, nav, footer).
   ============================================================ */

:root {
  --dx-max: 1080px;
  --dx-radius: 14px;
}

.wrap { max-width: var(--dx-max); margin: 0 auto; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 14px;
}

.creme { background: var(--creme); }

/* Primärbutton wie .btn-primary in main.css (Petrol) */
.btn {
  display: inline-block;
  background: var(--petrol); color: var(--bg-light);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  padding: .85rem 2rem; border-radius: 8px;
  text-decoration: none; transition: background .2s, transform .15s;
}
.btn:hover { background: var(--petrol-light); color: var(--bg-light); transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ---------- Hero ---------- */
/* Hero und zweite Sektion bewusst kompakt, damit die Schritte schon im ersten Bildschirm anschneiden */
.hero { padding-top: clamp(6rem, 9vw, 7.25rem); padding-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.hero + section { padding-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: 0; max-width: 36ch; text-wrap: balance; }
.hero .lead { font-size: 1.25rem; line-height: 1.65; margin-top: 28px; max-width: 76ch; }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; }
.crosslink { margin-top: 20px; font-size: 1rem; color: #77736C; }
.crosslink a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Section head ---------- */
.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head h2 { margin-bottom: 0; }

/* ---------- Steps ---------- */
.steps { list-style: none; display: grid; gap: 20px; }
.step {
  background: var(--bg-light); border-radius: var(--dx-radius); padding: 32px;
  display: grid; grid-template-columns: 72px 1fr auto; gap: 28px; align-items: start;
}
.step > div { min-width: 0; }
.step-icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--creme);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.step-icon svg {
  width: 36px; height: 36px; stroke: var(--petrol); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.step-num {
  position: absolute; top: -4px; right: -4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--petrol); color: #fff; font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 1.3rem; margin-bottom: 8px; }
.step p { max-width: 60ch; }
.sublist { margin-top: 12px; padding-left: 1.2em; max-width: 60ch; display: grid; gap: 8px; }
.sublist li::marker { color: var(--petrol); }

.chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.chip {
  font-size: .88rem; font-weight: 600; color: var(--petrol); background: var(--creme);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.chip.chip-pay {
  background: #F5E9DA; color: #7A5634; white-space: normal; text-align: right;
  max-width: 230px; line-height: 1.35; border-radius: 12px;
}

@media (max-width: 760px) {
  .step { grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 20px; }
  .step-icon { width: 56px; height: 56px; }
  .step-icon svg { width: 28px; height: 28px; }
  .chips { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .chip.chip-pay { text-align: left; max-width: 100%; }
}
/* Schmale Phones: Icon über den Text, damit die Textspalte die volle Kartenbreite nutzt */
@media (max-width: 480px) {
  .step { grid-template-columns: 1fr; gap: 14px; padding: 22px 18px; }
  .step-icon { width: 48px; height: 48px; }
  .step-icon svg { width: 24px; height: 24px; }
  .step-num { width: 22px; height: 22px; font-size: .78rem; }
  .chips { grid-column: 1; }
  .panel { padding: 28px 22px; }
  .hero .lead { font-size: 1.15rem; }
  .section-head { margin-bottom: 36px; }
  .panel .btn { display: block; text-align: center; padding: .85rem 1rem; }
}

/* ---------- Outcome + carers ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

.panel { border-radius: var(--dx-radius); padding: 40px 36px; }
.panel h2 { font-size: 1.6rem; margin-bottom: 24px; }
.panel-light { background: var(--bg-medium); }
.panel-dark { background: var(--petrol); color: var(--creme); }
.panel-dark h2 { color: var(--creme); }
.panel-dark .eyebrow { color: var(--creme); opacity: .85; }
.panel-dark p:not(.eyebrow) { line-height: 1.55; opacity: .9; max-width: 42ch; margin-bottom: 32px; }
/* Auf Petrol-Grund: heller Button */
.panel-dark .btn { background: var(--creme); color: var(--petrol); }
.panel-dark .btn:hover { background: #fff; color: var(--petrol); }
.panel-dark .btn:focus-visible { outline-color: var(--creme); }

.outcomes { list-style: none; display: grid; gap: 18px; }
.outcomes li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; font-size: 1.15rem; color: var(--text-black); }
.outcomes svg {
  width: 26px; height: 26px; margin-top: 2px; stroke: var(--petrol); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.panel-price { margin-top: 28px; padding-top: 20px; border-top: 1px solid #DDD8CF; font-size: 1rem; line-height: 1.5; }
.panel-price strong { display: block; margin-top: 6px; font-family: var(--font-heading); font-size: 2.1rem; font-weight: 500; line-height: 1.15; color: var(--petrol); white-space: nowrap; }