/* --- CTA-Banner (207:15) ------------------------------------------------
   Eine Frage, ein Satz, ein Button. Genau ein primaerer CTA je Ansicht. Die
   dunkle Ausfuehrung steht hoechstens einmal je Seite und nie auf einer
   cremefarbenen Sektion, sonst verliert der Abschluss seine Kante. */

.epi-cta {
    position: relative;
    display: grid;
    gap: var(--wp--preset--spacing--md);
    justify-items: center;
    text-align: center;
    padding-block: 4.5rem;
    padding-inline: var(--wp--preset--spacing--lg);
    border-radius: var(--radius-lg);
    background-color: var(--color-dark);
    color: var(--color-base);
}

/* Der Inhalt liegt ueber dem Kaestchenraster der eigenen Flaeche. */
.epi-cta > * {
    position: relative;
    margin: 0;
}

.epi-cta :is(h1, h2, h3) {
    max-width: 720px;
    color: var(--color-base);
}

.epi-cta p {
    max-width: 640px;
}

/* Mobil bleiben sonst nur 240 px fuer Frage und Satz. */
@media screen and (max-width: 767px) {
    .epi-cta {
        padding-block: 3rem;
        padding-inline: var(--wp--preset--spacing--md);
    }
}

/* Helle Ausfuehrung (93:161 "Flaeche=Hell", Pattern epi/cta-hell): fuer einen
   Handlungsaufruf mitten auf der Seite, etwa zum passenden Produkt, oder
   wenn die dunkle Zaesur nicht passt, z. B. nach einer cremefarbenen Sektion
   (DESIGN.md 2.8/2.4). Kaestchenraster
   ueber .epi-paper/.epi-paper--edge (sections.css) — beschnitten am Kastenrand
   (Design-Tokens signatur.kaestchenraster.kante: harte Kante an einer sichtbaren
   Flaeche). Keine eigene Breitenbegrenzung: die Flaeche ist exakt so breit wie
   .epi-container (layout.sektionsflaechen.schwebendeFlaeche), identisch zur
   dunklen Ausfuehrung auf den Produktseiten (.epi-cta ohne Modifier). */
.epi-cta--light {
    background-color: var(--color-primary-light);
    color: var(--color-text);
}

.epi-cta--light :is(h1, h2, h3) {
    color: var(--color-text);
}