/* Block: CTA-Box (blau, halbe Breite)
   Sollwerte (User, 2026-08-07):
   Box          BG #263864 · Radius 8px · Padding 24px · halbe Inhaltsbreite (col-6)
   Überschrift  D 34px/normal · T/M 22px/26px · Literata Bold weiß
   Text         Poppins 400 16px/1.6 weiß
   Button       .btn-primary (grün #6BE381, Schrift #263864)
   Auf Mobil und Tablet läuft die Box über die volle Inhaltsbreite.
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css */

.cta-box {
    background-color: var(--color-dark);
    border-radius: var(--radius-md);           /* 8px */
    padding: 24px;
}

.cta-box-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    font-size: 22px;
    line-height: 26px;
    margin-top: 0;
    margin-bottom: var(--space-sm);            /* 16px */
}

.cta-box-text {
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-white);
    margin-bottom: var(--space-md);            /* 32px */
}

.cta-box-btn {
    font-size: var(--fs-copy-xs);              /* 14px */
}

/* ── Desktop (≥1200px) ───────────────────────────────────── */
@media (min-width: 1200px) {
    .cta-box-headline {
        font-size: 34px;
        line-height: normal;
    }
}

/* ── Volle Breite: Text links, Button rechts ──────────────
   Die Variante aus dem Blog-Entwurf (2026-09-09). Ausgewählt wird sie am
   Block über das Feld „Breite"; die Spaltenklasse wechselt in
   weser_cta_box() (inc/template-helpers.php).

   Erst ab Tablet nebeneinander – darunter ist zu wenig Platz, dort bleibt
   es bei Text oben, Knopf darunter, also exakt beim bisherigen Verhalten. */
@media (min-width: 768px) {
    .cta-box--breit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);                  /* 32px */
        padding: var(--space-md);
    }

    /* Der Abstand unter dem Text trennt sonst nichts mehr – der Knopf steht
       jetzt daneben, nicht darunter. */
    .cta-box--breit .cta-box-text {
        margin-bottom: 0;
    }

    /* Nicht schrumpfen lassen: Ohne das bricht die Beschriftung um, sobald
       der Text links lang wird. */
    .cta-box--breit .cta-box-btn {
        flex: 0 0 auto;
    }

    /* ⚠️ Eigene Schriftstufen, NICHT die der halbbreiten Box.
       Die springt ab 1200px auf 34px – das ist eine Abschnitts-Überschrift.
       Der breite Banner ist ein Einschub im Fließtext und hat eigene Werte
       (Vorgabe des Users vom 2026-09-09):
         Überschrift  Literata Bold  24/34
         Text         Poppins Regular 15/22,5
         Knopf        Poppins SemiBold 15/22,5
       Steht bewusst hier und nicht in der 1200er-Abfrage: Die zwei Klassen
       schlagen die eine dort, unabhängig von der Reihenfolge. */
    .cta-box--breit .cta-box-headline {
        font-size: 24px;
        line-height: 34px;
        font-weight: var(--fw-bold);
    }

    .cta-box--breit .cta-box-text {
        font-size: 15px;
        line-height: 22.5px;
    }

    .cta-box--breit .cta-box-btn {
        font-size: 15px;
        line-height: 22.5px;
        font-weight: var(--fw-semibold);
    }
}