/*
 * Call-to-Action-Fläche mit Pfeil.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 */

/* Call to Action */
.spo-tile--cta {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    /* Als Property, damit die Sperre in 50-grid.css ihn zurückholen kann */
    --spo-tile-padding: 12px 16px;
    text-align: left;
}

.spo-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Design: 22px, Gewicht 400, Laufweite -.02em – Größe und Gewicht kommen aus .spo-tile--cta */
.spo-cta-label {
    line-height: 1;
    letter-spacing: -.02em;
}

/*
 * Design: 14px, Gewicht 500, volle Deckkraft — nicht die gedämpften 11px der
 * zweiten Zeile von Button und CTA Button. Für die gibt das Design keine Werte
 * vor; für diese hier schon, und sie ist deutlich größer gemeint.
 */
.spo-cta-sublabel {
    margin-top: 3px;
    /* 14px auf dem Schreibtisch, 11px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-cta-note);
    font-weight: 500;
}

.spo-cta-arrow {
    flex-shrink: 0;
}