/* ===========================================================
   Sub-Landingpage »Ergotherapie & Cranio Sacral Therapie«
   Erbt Typografie & Komponenten von styles.css
   =========================================================== */

/* ---------- Slim Nav ---------- */
.gp-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 12px;
}
.gp-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gp-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--ink-soft);
  transition: color .2s, gap .2s;
}
.gp-back:hover { color: var(--sage-deep); gap: 12px; }
.gp-back svg { transition: transform .2s; }
.gp-nav__right { display: flex; align-items: center; gap: 18px; }
.gp-nav__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) { .gp-nav__title { display: none; } }

/* ---------- Hero ---------- */
.gp-hero { padding-block: clamp(56px, 8vw, 108px) clamp(36px, 5vw, 64px); text-align: center; }
.gp-hero__inner { max-width: 72ch; margin: 0 auto; }
.gp-hero .eyebrow { justify-content: center; }
.gp-hero__title { margin-top: 16px; }
.gp-hero__lead { margin-top: 1.2rem; }
.gp-jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 2.2rem; }
.gp-jump a {
  font-size: 0.86rem; font-weight: 700; color: var(--sage-deep);
  background: color-mix(in oklch, var(--sage) 13%, var(--bg));
  border: 1px solid var(--line-soft);
  padding: 9px 18px; border-radius: 999px;
  transition: background .2s, transform .2s;
}
.gp-jump a:hover { transform: translateY(-2px); background: color-mix(in oklch, var(--sage) 22%, var(--bg)); }

/* ---------- Modality sections ---------- */
.gp-modality:nth-of-type(even) { background: var(--bg-soft); }
.gp-ablauf { margin-top: clamp(48px, 6vw, 84px); }
.gp-ablauf h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.6em; }

/* ---------- Closing CTA ---------- */
.gp-cta { background: var(--bg-deep); color: oklch(0.95 0.012 85); text-align: center; }
.gp-cta .eyebrow { justify-content: center; color: oklch(0.86 0.06 75); }
.gp-cta .eyebrow::before { background: oklch(0.78 0.08 70); }
.gp-cta h2 { color: oklch(0.98 0.012 85); }
.gp-cta__lead { color: oklch(0.86 0.015 85); max-width: 56ch; margin-inline: auto; }
.gp-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.gp-cta__contact { margin-top: 1.6rem; font-size: 0.92rem; color: oklch(0.82 0.015 85); }
.gp-cta__contact a { text-decoration: underline; text-underline-offset: 3px; }
.gp-cta__contact a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .gp-ablauf.split { grid-template-columns: 1fr; }
}