/* ============================================================
   WebAbo.html - seiteneigene Ergaenzungen zum Design-System.
   Nur was system.css nicht abdeckt.
   ============================================================ */

/* Die H1 dieser Seite ist deutlich laenger als auf den anderen
   Seiten. Eine eigene Stufe verhindert 6-zeilige Displayzeilen. */
.hero h1 { font-size: clamp(2.2rem, 1.35rem + 3.5vw, 4.2rem); }

/* Dunkles Band: Vorspann und dreispaltige Antwortliste */
.dark-band .dark-lead { max-width: 62ch; }
.dark-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(2rem, 5vh, 3.2rem);
}
.dark-trio > div {
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 1.5rem;
}
.dark-trio > div > p { max-width: 42ch; }
@media (max-width: 879px) { .dark-trio { grid-template-columns: 1fr; } }

/* Ablauf hat hier drei statt vier Schritte */
.steps.is-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .steps.is-three { grid-template-columns: 1fr; } }

/* Kundenstimme in der Bild-Text-Zeile */
.quote-body blockquote {
    font-size: var(--fs-2);
    line-height: 1.7;
    color: var(--ink);
    max-width: 44ch;
    margin-bottom: 1.5rem;
    text-wrap: pretty;
}
.quote-body .review-who { margin-bottom: 1.2rem; }
.quote-body .review-name { font-size: var(--fs-1); }
.quote-role {
    display: block;
    font-size: var(--fs-0);
    color: var(--ink-4);
    font-weight: 400;
}

/* Schlussnotiz im Ablauf ohne Zwischenueberschrift */
.steps-note p { color: var(--ink-2); }
.steps-note a.accent { text-decoration: underline; text-underline-offset: 3px; }

/* Buttons duerfen im FAQ-Abschluss nicht am Text kleben */
.faq-more .btn { margin-top: .4rem; }