/* ============================================================
   Service 04 · Befähigen — page-local LAYOUT only.
   Signature: format Kacheln + a curriculum accordion (kb-disclosure).
   Accent: pink (uses ink text, like the home board's tile 04).
   ============================================================ */

.svc--enable { --accent: var(--pink); }
.be-accent { color: var(--accent); }
.be-accent.kb-eyebrow::before { background: var(--accent); }

/* ---- Hero -------------------------------------------------- */
.be-hero__h1 { font: var(--type-display); font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: var(--tracking-tight); color: var(--ink); margin-top: var(--space-4); max-width: 18ch; }
.be-hero__sub { font: var(--type-body-lg); color: var(--text-body); max-width: 54ch; margin-top: var(--space-5); }

/* ---- Format tiles ------------------------------------------ */
.be-fmt { background: var(--surface-sunken); }
.be-fmt__grid { box-shadow: var(--shadow-md); }

/* ---- Curriculum accordion ---------------------------------- */
.be-cur__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-9); align-items: start; }
.be-cur__intro { position: sticky; top: var(--space-6); }
.be-cur__list .kb-disclosure { border-color: var(--border-soft); }
.be-cur__list .kb-disclosure > summary::after { color: var(--accent); }
.be-cur__list .kb-disclosure[open] { border-left: var(--bw-4) solid var(--accent); }

/* ---- CTA (pink, ink text) ---------------------------------- */
.be-cta { background: var(--accent); color: var(--ink); }
.be-cta__quote { font: var(--type-h4); font-style: italic; color: var(--violet); max-width: 34ch; }
.be-cta__h2 { font: var(--type-h1); color: var(--ink); max-width: 22ch; margin-top: var(--space-4); }
.be-cta .kb-btn--primary { background: var(--ink); color: var(--gray-0); }
.be-cta .kb-btn--primary:hover { background: var(--ink-2); }

@media (max-width: 900px) {
  .be-fmt__grid.kb-kachel-grid--4col { grid-template-columns: repeat(2, 1fr); }
  .be-cur__grid { grid-template-columns: 1fr; }
  .be-cur__intro { position: static; }
}
@media (max-width: 560px) {
  .be-fmt__grid.kb-kachel-grid--4col { grid-template-columns: 1fr; }
}