/**
 * In-Text- und Pillar-CTAs – eigenes Stylesheet, unabhängig vom Theme-Modus.
 * Die untere Standard-Box (#cta-section.cta-section) bleibt unangetastet.
 */

.inline-cta,
.cta-block,
.cta-buttons,
aside.pillar-cta-block,
.ps-cta-block {
    --cta-accent: var(--cta-accent-resolved, #2271b1);
    --cta-on: var(--cta-on-resolved, #fff);
    --cta-ink: color-mix(in srgb, var(--cta-accent) 18%, #14181f);
    box-sizing: border-box;
    max-width: 100%;
}

.inline-cta *,
.cta-block *,
aside.pillar-cta-block *,
.ps-cta-block * {
    box-sizing: border-box;
}

/* ----- In-Text-CTA (Beitragsmitte) ----- */

.inline-cta {
    margin: 2.4em 0 !important;
    padding: 1.45em 1.55em 1.5em !important;
    background: color-mix(in srgb, var(--cta-accent) 11%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--cta-accent) 42%, transparent) !important;
    border-left-width: 1px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--cta-accent) 16%, transparent);
}

.inline-cta > p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.95em;
    margin: 0 !important;
    color: var(--cta-ink) !important;
    font-size: 1.05em !important;
    line-height: 1.55;
}

.closing-cta > p + p {
    margin-top: 0.7em !important;
}

.closing-cta__title {
    font-weight: 700;
    font-size: 1.22em;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.closing-cta__text {
    font-weight: 400;
}

.inline-cta a.cta-button {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0.85em 1.5em !important;
    background: var(--cta-accent) !important;
    color: var(--cta-on) !important;
    border: 1px solid var(--cta-accent) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cta-accent) 28%, transparent);
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.inline-cta a.cta-button:hover,
.inline-cta a.cta-button:focus-visible {
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--cta-accent) 34%, transparent);
}

.inline-cta a.cta-button:focus-visible {
    outline: 2px solid var(--cta-accent);
    outline-offset: 3px;
}

a.cta-color {
    color: var(--cta-accent, #2271b1) !important;
    background: color-mix(in srgb, var(--cta-accent, #2271b1) 16%, #fff) !important;
    padding: 0.08em 0.35em;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 4px;
}

/* ----- In-Content-CTA-Block (nicht die untere Standard-Box) ----- */

.cta-block:not(.cta-section),
.gsc-cta {
    margin: 2.6em 0 !important;
    padding: 1.85em 1.7em 1.75em !important;
    background: var(--cta-accent) !important;
    color: var(--cta-on) !important;
    border: 0 !important;
    border-radius: 14px !important;
    text-align: center;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--cta-accent) 28%, transparent);
}

.cta-block:not(.cta-section) h2,
.cta-block:not(.cta-section) h3,
.cta-block:not(.cta-section) p,
.gsc-cta h3,
.gsc-cta p {
    color: inherit !important;
}

.cta-block:not(.cta-section) h2,
.cta-block:not(.cta-section) h3,
.gsc-cta h3 {
    margin: 0 0 0.45em !important;
}

.cta-block:not(.cta-section) p,
.gsc-cta p {
    margin: 0 0 1.1em;
    opacity: 0.92;
}

.cta-block:not(.cta-section) p:last-child,
.gsc-cta p:last-child {
    margin-bottom: 0;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    margin: 1.6em 0;
}

/* ----- Pillar-CTA (Classic + Seitenstruktur) ----- */

aside.pillar-cta-block,
.ps-cta-block {
    margin: 2.6em 0;
    padding: 2em 1.75em 1.8em !important;
    border-radius: 14px;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--cta-accent) 28%, transparent);
}

aside.pillar-cta-block:not(.cta-theme-neutral) {
    background: var(--cta-accent) !important;
    color: var(--cta-on) !important;
}

aside.pillar-cta-block.cta-theme-neutral,
.ps-cta-block {
    background: var(--cta-accent);
    color: var(--cta-on);
    border: 0;
}

aside.pillar-cta-block h2,
.ps-cta-block h2 {
    margin: 0 0 0.4em !important;
    color: inherit !important;
    border: 0 !important;
    padding: 0 !important;
}

aside.pillar-cta-block > p,
.ps-cta-block > p {
    margin: 0 0 1.15em;
    color: inherit;
    opacity: 0.92;
    line-height: 1.55;
}

aside.pillar-cta-block .pillar-cta-actions,
.ps-cta-block .pillar-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    margin: 0;
}

aside.pillar-cta-block a.pillar-cta-btn,
.ps-cta-block a.pillar-cta-btn,
.ps-cta-block a.ps-btn,
.cta-block:not(.cta-section) a.cta-button,
.gsc-cta a.cta-button,
.cta-buttons a.cta-button {
    display: inline-block !important;
    padding: 0.9em 1.55em !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

aside.pillar-cta-block a.pillar-cta-btn-primary,
.ps-cta-block a.pillar-cta-btn-primary,
.ps-cta-block a.ps-btn,
.cta-block:not(.cta-section) a.cta-button,
.gsc-cta a.cta-button {
    background: var(--cta-on) !important;
    color: var(--cta-accent) !important;
    border: 1px solid var(--cta-on) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, #000 18%, transparent);
}

.cta-buttons a.cta-button,
.cta-buttons a.cta-button--solid,
.cta-buttons a.cta-button:first-child {
    background: var(--cta-accent) !important;
    color: var(--cta-on) !important;
    border: 1px solid var(--cta-accent) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cta-accent) 28%, transparent);
}

aside.pillar-cta-block a.pillar-cta-btn-secondary {
    background: transparent !important;
    color: var(--cta-on) !important;
    border: 1px solid var(--cta-on) !important;
    box-shadow: none;
}

aside.pillar-cta-block a.pillar-cta-btn:hover,
aside.pillar-cta-block a.pillar-cta-btn:focus-visible,
.ps-cta-block a.pillar-cta-btn:hover,
.ps-cta-block a.ps-btn:hover,
.cta-block:not(.cta-section) a.cta-button:hover,
.gsc-cta a.cta-button:hover,
.cta-buttons a.cta-button:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

aside.pillar-cta-block a.pillar-cta-btn:focus-visible,
.ps-cta-block a.pillar-cta-btn:focus-visible,
.ps-cta-block a.ps-btn:focus-visible,
.cta-block:not(.cta-section) a.cta-button:focus-visible,
.gsc-cta a.cta-button:focus-visible,
.cta-buttons a.cta-button:focus-visible {
    outline: 2px solid var(--cta-on);
    outline-offset: 3px;
}

/* Seitenstruktur: Rahmen bleibt Fläche-plus-Linie, Schlicht bleibt Linie. */

body.ps-cta--rahmen .ps-cta-block,
body.ps-cta--rahmen .ps-page aside.pillar-cta-block {
    background: color-mix(in srgb, var(--cta-accent) 10%, #fff) !important;
    color: var(--cta-ink) !important;
    border: 1px solid var(--cta-accent) !important;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--cta-accent) 14%, transparent);
}

body.ps-cta--rahmen .ps-cta-block a.ps-btn,
body.ps-cta--rahmen .ps-page aside.pillar-cta-block a.pillar-cta-btn,
body.ps-cta--rahmen .ps-cta-block a.pillar-cta-btn-primary,
body.ps-cta--rahmen .ps-page aside.pillar-cta-block a.pillar-cta-btn-primary {
    background: var(--cta-accent) !important;
    color: var(--cta-on) !important;
    border-color: var(--cta-accent) !important;
}

body.ps-cta--schlicht .ps-cta-block,
body.ps-cta--schlicht .ps-page aside.pillar-cta-block {
    padding: 1.55em 0 0 !important;
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
    border-top: 1px solid var(--cta-accent) !important;
    border-radius: 0 !important;
    box-shadow: none;
}

body.ps-cta--schlicht .ps-cta-block a.ps-btn,
body.ps-cta--schlicht .ps-page aside.pillar-cta-block a.pillar-cta-btn {
    background: var(--cta-accent) !important;
    color: var(--cta-on) !important;
    border-color: var(--cta-accent) !important;
}

@media (max-width: 560px) {
    .inline-cta a.cta-button,
    aside.pillar-cta-block a.pillar-cta-btn,
    .ps-cta-block a.pillar-cta-btn,
    .ps-cta-block a.ps-btn,
    .cta-block:not(.cta-section) a.cta-button,
    .gsc-cta a.cta-button {
        width: 100%;
        text-align: center;
    }

    aside.pillar-cta-block .pillar-cta-actions,
    .ps-cta-block .pillar-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inline-cta a.cta-button,
    aside.pillar-cta-block a.pillar-cta-btn,
    .ps-cta-block a.pillar-cta-btn,
    .ps-cta-block a.ps-btn,
    .cta-block:not(.cta-section) a.cta-button,
    .cta-buttons a.cta-button {
        transition: none;
        transform: none;
    }
}