/* ============================================================
   birgit theme — leistungen.css — Leistung archive + single
   Part of the conditional-partial split of the original single
   stylesheet. Rules moved verbatim; cascade preserved via enqueue order.
   ============================================================ */

/* ============================================================
   LEISTUNGEN  (service-card grid)
   ============================================================ */

.leistungen {
    background: var(--color-cream-100);
    padding: 4rem 1.5rem 5rem;
}

.leistungen__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 980px;
    margin: 0 auto;
}

.leistung-card {
    background: var(--color-cream-50);
    display: flex;
    flex-direction: column;
}

.leistung-card__image {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.leistung-card__body {
    padding: 1.75rem 1.75rem 2rem;
}

.leistung-card__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--color-navy-800);
    margin: 0 0 0.75rem;
}

.leistung-card__text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-stone-800);
    margin: 0 0 1.25rem;
}

.leistung-card__link {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-navy-600);
    transition: color 160ms ease;
}

.leistung-card__link:hover {
    color: var(--color-green-600);
}

@media (max-width: 720px) {
    .leistungen { padding: 2.5rem 1.25rem 3rem; }
    .leistungen__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .leistung-card__image { height: 220px; }
}

/* ============================================================
   LEISTUNG DETAIL  (sub-page helpers)
   Stacked intro paragraphs + left-aligned section headings
   + closing pull-quote. All reuse existing section-block tokens.
   ============================================================ */
.page-intro__body {
    max-width: 52ch;
}
.page-intro__body .page-intro__text {
    max-width: none;
}
.page-intro__body .page-intro__text + .page-intro__text {
    margin-top: 1.25rem;
}

.section-block__heading--left {
    text-align: left;
}

.closing-quote {
    background: var(--color-cream-50);
    padding: 4rem 1.5rem 4.5rem;
    text-align: center;
}
.closing-quote__text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--color-navy-800);
    max-width: 40ch;
    margin: 0 auto;
}

/* Explicit section banding for the Leistungen detail pages.
   Doubled class (.section-block.section-block--*) raises specificity to
   (0,0,2,0) so it reliably overrides .section-block:nth-of-type(even),
   making the cream/white banding deterministic regardless of position. */
.section-block.section-block--band {
    background: var(--color-cream-100);   /* darker cream band */
}
.section-block.section-block--plain {
    background: var(--color-cream-50);    /* light/white band */
}

/* Inline links inside body copy (override the global no-underline reset) */
.section-block__para a {
    color: var(--color-navy-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 150ms ease;
}
.section-block__para a:hover {
    color: var(--color-navy-800);
}

/* Paartherapie hero is a tall 4160x6240 portrait; cap its width so it
   doesn't dominate the page. Targets the image by filename, so it needs
   no extra class in the HTML (applies on the Paartherapie page only). */
.page-figure__img[src*="leistung-paartherapie"] {
    max-width: 360px;
}