/* ========================================
   CallToAction Content Element
   Grüner Full-Width Bereich mit zentriertem Text
   Adobe XD Design
   ======================================== */

/* ========================================
   Base CTA Section
   ======================================== */
.cta-section-green {
    background-color: var(--green, #28a745);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* ========================================
   Background Color Options
   ======================================== */
.cta-section.bg-green {
    background-color: var(--green, #28a745);
}

.cta-section.bg-none {
    background: transparent;
}

.cta-section.bg-light {
    background-color: #f8f9fa;
    color: #212529;
}

.cta-section.bg-white {
    background-color: #ffffff;
    color: #212529;
}

.cta-section.bg-gray {
    background-color: #e9ecef;
    color: #212529;
}

/* Grüner Verlauf (nach XD Vorlage "Sprechen Sie mit uns über Lösungen...") */
.cta-section.bg-gradient {
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #1e7e34 100%);
    color: #ffffff;
}

.cta-section.bg-gradient-green-black {
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #000000 100%);
    color: #ffffff;
}

.cta-section.bg-gradient-dark-black {
    background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
    color: #ffffff;
}

.cta-section.bg-gradient-green-light {
    background: linear-gradient(135deg, var(--green, #28a745) 0%, #f8f9fa 100%);
    color: #212529;
}

.cta-section.bg-gradient-dark-green {
    background: linear-gradient(135deg, #1e272e 0%, var(--green, #28a745) 100%);
    color: #ffffff;
}

.cta-section.bg-gradient-green-diagonal {
    background: linear-gradient(45deg, var(--green, #28a745) 0%, #20873a 50%, var(--green, #28a745) 100%);
    color: #ffffff;
}

/* ========================================
   Typography
   ======================================== */
.cta-headline {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.cta-text {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   Button Styles
   ======================================== */
.cta-button {
    font-size: 1.125rem;
    border-width: 2px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cta-button:active {
    transform: translateY(0);
}

/* ========================================
   Responsive Padding
   ======================================== */
@media (min-width: 768px) {
    .cta-section-green {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (min-width: 992px) {
    .cta-section-green {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

/* ========================================
   Accessibility
   ======================================== */
.cta-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 4px;
}

/* Light backgrounds need different button styles */
.cta-section.bg-light .cta-button,
.cta-section.bg-white .cta-button,
.cta-section.bg-gray .cta-button,
.cta-section.bg-gradient-green-light .cta-button {
    border-color: var(--green, #28a745);
    color: var(--green, #28a745);
}

.cta-section.bg-light .cta-button:hover,
.cta-section.bg-white .cta-button:hover,
.cta-section.bg-gray .cta-button:hover,
.cta-section.bg-gradient-green-light .cta-button:hover {
    background-color: var(--green, #28a745);
    color: #ffffff;
}