/* ============================================================
   262-php-08-section — Abschnitts-Hülle

   Enthält bewusst KEINE Container-Breite: die kommt aus
   _partials/cmp-container.css. Hier steht nur der vertikale
   Rhythmus und der Abschnittskopf.
   ============================================================ */

.x262-section {
    padding-block: clamp(3rem, 2.2rem + 3.5vw, 5rem);
}

/* Getönte und weiche Bänder ziehen sich über die volle Breite;
   der Inhalt bleibt durch cmp-container mittig. */
.x262-section--tint { background: var(--surface-2, #f4f2ee); }
.x262-section--soft { background: var(--brand-tint, #F3F8ED); }

/* Haarlinie zwischen zwei schlichten Abschnitten. Nie zwischen
   einem schlichten und einem getönten — dort trennt schon die Fläche. */
.x262-section--plain + .x262-section--plain > .x262-section__inner {
    border-top: 1px solid var(--border-soft, #eceae5);
    padding-top: clamp(3rem, 2.2rem + 3.5vw, 5rem);
    margin-top: calc(-1 * clamp(3rem, 2.2rem + 3.5vw, 5rem));
}

/* ---- Kopf ------------------------------------------------ */
.x262-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.x262-section__title {
    display: grid;
    gap: .5rem;
    min-width: 0;
}

/* H2 = Roboto Condensed, laut Stilguide eine der nur zwei Ebenen
   mit der zweiten Schrift. */
.x262-section__head h2 {
    margin: 0;
    font-family: var(--font-display, "Roboto Condensed", sans-serif);
    font-size: var(--fs-h2, 2.75rem);
    font-weight: var(--w-display, 400);
    line-height: var(--lh-h2, 1.14);
    letter-spacing: var(--tr-h2, -.018em);
    color: var(--ink, #14171a);
    max-width: var(--measure-h2, 22ch);
}

.x262-section__lead {
    margin: 0;
    font-size: var(--fs-small, 1rem);
    line-height: 1.55;
    color: var(--text-2, #3d4247);
    max-width: var(--measure-mid);
}

/* Der EINE Weiterlink pro Abschnitt. */
.x262-more {
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1.4 var(--font-body, Roboto, sans-serif);
    color: var(--brand-strong, #15703A);
    text-decoration: none;
    white-space: nowrap;
}
.x262-more::after { content: " \2192"; }
.x262-more:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .x262-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}