.elementor-3437 .elementor-element.elementor-element-f5250cd{margin-top:50px;margin-bottom:0px;}.elementor-3437 .elementor-element.elementor-element-5369ab9 > .elementor-element-populated, .elementor-3437 .elementor-element.elementor-element-5369ab9 > .elementor-element-populated > .elementor-background-overlay, .elementor-3437 .elementor-element.elementor-element-5369ab9 > .elementor-background-slideshow{border-radius:8px 8px 8px 8px;}.elementor-3437 .elementor-element.elementor-element-5369ab9 > .elementor-element-populated{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);padding:20px 30px 10px 030px;}.elementor-3437 .elementor-element.elementor-element-df9990a{color:#000000;}.elementor-3437 .elementor-element.elementor-element-8772741{margin-top:0px;margin-bottom:0px;}.elementor-3437 .elementor-element.elementor-element-70600ca{--icon-box-icon-margin:15px;}.elementor-3437 .elementor-element.elementor-element-70600ca .elementor-icon-box-description{color:#000000;font-weight:500;}.elementor-3437 .elementor-element.elementor-element-88c68aa{--icon-box-icon-margin:15px;}.elementor-3437 .elementor-element.elementor-element-88c68aa .elementor-icon-box-description{color:#000000;font-weight:500;}.elementor-3437 .elementor-element.elementor-element-75eea01{--icon-box-icon-margin:15px;}.elementor-3437 .elementor-element.elementor-element-75eea01 .elementor-icon-box-description{color:#000000;font-weight:500;}.elementor-3437 .elementor-element.elementor-element-848bae0{--divider-border-style:solid;--divider-color:var( --e-global-color-primary );--divider-border-width:1px;}.elementor-3437 .elementor-element.elementor-element-848bae0 .elementor-divider-separator{width:100%;}.elementor-3437 .elementor-element.elementor-element-848bae0 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-3437 .elementor-element.elementor-element-3cc37b9 > .elementor-widget-container{margin:20px 0px 0px 0px;border-radius:5px 5px 5px 5px;}.elementor-3437 .elementor-element.elementor-element-3cc37b9 .elementor-icon-box-wrapper{text-align:center;}.elementor-3437 .elementor-element.elementor-element-3cc37b9{--icon-box-icon-margin:2px;}.elementor-3437 .elementor-element.elementor-element-a5314a3 .elementor-button{background-color:#FB236A;font-size:17px;font-weight:700;fill:#FFFFFF;color:#FFFFFF;border-radius:5px 5px 5px 5px;padding:15px 15px 15px 15px;}.elementor-3437 .elementor-element.elementor-element-a5314a3 .elementor-button:hover, .elementor-3437 .elementor-element.elementor-element-a5314a3 .elementor-button:focus{background-color:var( --e-global-color-primary );}.elementor-3437 .elementor-element.elementor-element-a5314a3{width:100%;max-width:100%;}.elementor-3437 .elementor-element.elementor-element-a5314a3 > .elementor-widget-container{margin:0px 0px 20px 0px;padding:0px 0px 0px 0px;}.elementor-3437 .elementor-element.elementor-element-f67cc6d > .elementor-element-populated{margin:0px 0px 0px 40px;--e-column-margin-right:0px;--e-column-margin-left:40px;}.elementor-3437 .elementor-element.elementor-element-47a45a2 .elementor-heading-title{font-size:22px;}.elementor-3437 .elementor-element.elementor-element-0284096{margin-top:020px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-3437 .elementor-element.elementor-element-df85753 > .elementor-element-populated, .elementor-3437 .elementor-element.elementor-element-df85753 > .elementor-element-populated > .elementor-background-overlay, .elementor-3437 .elementor-element.elementor-element-df85753 > .elementor-background-slideshow{border-radius:8px 8px 8px 8px;}.elementor-3437 .elementor-element.elementor-element-df85753 > .elementor-element-populated{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-3437 .elementor-element.elementor-element-accd0ce > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-3437 .elementor-element.elementor-element-df672d5 .elementor-button{background-color:var( --e-global-color-primary );font-size:17px;font-weight:700;fill:#FFFFFF;color:#FFFFFF;border-radius:5px 5px 5px 5px;padding:20px 20px 20px 20px;}.elementor-3437 .elementor-element.elementor-element-df672d5 .elementor-button:hover, .elementor-3437 .elementor-element.elementor-element-df672d5 .elementor-button:focus{background-color:var( --e-global-color-primary );}.elementor-3437 .elementor-element.elementor-element-df672d5{width:100%;max-width:100%;}.elementor-3437 .elementor-element.elementor-element-df672d5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 25px 0px 25px;}.elementor-3437 .elementor-element.elementor-element-ba4084f > .elementor-element-populated, .elementor-3437 .elementor-element.elementor-element-ba4084f > .elementor-element-populated > .elementor-background-overlay, .elementor-3437 .elementor-element.elementor-element-ba4084f > .elementor-background-slideshow{border-radius:8px 8px 8px 8px;}.elementor-3437 .elementor-element.elementor-element-ba4084f > .elementor-element-populated{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);padding:20px 30px 10px 030px;}.elementor-3437 .elementor-element.elementor-element-2c40707 > .elementor-element-populated{margin:0px 0px 0px 40px;--e-column-margin-right:0px;--e-column-margin-left:40px;}.elementor-3437 .elementor-element.elementor-element-bf08425 > .elementor-container{max-width:1600px;}.elementor-3437 .elementor-element.elementor-element-bf08425{margin-top:-595px;margin-bottom:0px;padding:0px 10px 0px 0px;}.elementor-3437 .elementor-element.elementor-element-8f495c3 > .elementor-element-populated, .elementor-3437 .elementor-element.elementor-element-8f495c3 > .elementor-element-populated > .elementor-background-overlay, .elementor-3437 .elementor-element.elementor-element-8f495c3 > .elementor-background-slideshow{border-radius:8px 8px 8px 8px;}.elementor-3437 .elementor-element.elementor-element-8f495c3 > .elementor-element-populated{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:20px 0px 20px 0px;}.elementor-3437 .elementor-element.elementor-element-cba8edf{text-align:center;}.elementor-3437 .elementor-element.elementor-element-cba8edf .elementor-heading-title{font-size:22px;}.elementor-3437 .elementor-element.elementor-element-e749214{text-align:center;}.elementor-3437 .elementor-element.elementor-element-e749214 img{width:63%;}@media(max-width:767px){.elementor-3437 .elementor-element.elementor-element-f67cc6d > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-3437 .elementor-element.elementor-element-47a45a2 > .elementor-widget-container{margin:30px 0px 0px 0px;}.elementor-3437 .elementor-element.elementor-element-47a45a2{text-align:center;}.elementor-3437 .elementor-element.elementor-element-2c40707 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-3437 .elementor-element.elementor-element-bf08425{margin-top:0px;margin-bottom:0px;padding:0px 10px 0px 12px;}}@media(min-width:768px){.elementor-3437 .elementor-element.elementor-element-5369ab9{width:48.559%;}.elementor-3437 .elementor-element.elementor-element-f67cc6d{width:51.441%;}.elementor-3437 .elementor-element.elementor-element-ba4084f{width:48.667%;}.elementor-3437 .elementor-element.elementor-element-2c40707{width:51.333%;}}/* Start custom CSS for html, class: .elementor-element-accd0ce */<!-- HTML START -->

<div class="info-banner pink-banner">
    <p><span class="highlight-text">Du hast <strong>30 Tage</strong> Zeit, das Produkt <strong>Local-Listing</strong> kostenfrei zu testen. Bis dahin berechnen wir nichts.</span></p>
</div>

<div class="cart-summary-card">
    <h2>Deine Zusammenfassung</h2>

    <div class="price-details">
        <div class="price-item">
            <span>Produkt:</span>
            <span>Local-Listing</span>
        </div>

        <div class="free-trial-badge">
            <span>1 Monat kostenlos testen*</span>
        </div>

        <div class="price-item">
            <span>Einzelpreis:</span>
            <span>898,80 €</span>
        </div>
        <div class="price-item">
            <span>Menge:</span>
            <span>1</span>
        </div>

        <div class="total-price">
            <span>Gesamtsumme:</span>
            <span>898,80 €</span>
        </div>
    </div>

    <div class="cart-coupon">
        <form action="/warenkorb/" method="post" class="apply-coupon-form">
            <input type="text" name="coupon_code" placeholder="Rabattcode eingeben" required class="input-text">
            <button type="submit" name="apply_coupon" class="apply-coupon-button">Rabatt anwenden</button>
        </form>
    </div>

    <a href="/kasse/" class="checkout-button">Weiter zur Kasse</a>
</div>

<!-- HTML ENDE -->

<!-- CSS START -->
<style>
/* Info-Banner */
.info-banner.pink-banner {
    background-color: #fb236a1a;
    padding: 20px;
    border-radius: 12px;
    color: #FB236A;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: left;
    margin-bottom: 30px;
}

/* Textfarbe im Banner */
.highlight-text {
    color: #FB236A;
}

/* Warenkorb Zusammenfassung */
.cart-summary-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-size: 16px;
    color: #333;
}

.cart-summary-card h2 {
    color: #FB236A;
    margin-bottom: 20px;
}

.price-details {
    margin-bottom: 20px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.total-price {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 18px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

/* Free Trial Badge (Pink Version) */
.free-trial-badge {
    background-color: #fb236a1a;
    color: #FB236A;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    margin: 8px 0 16px 0;
    animation: pulse 2s infinite;
}

/* Pulsieren Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Rabattcode Bereich */
.cart-coupon {
    margin-top: 20px;
}

.apply-coupon-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.apply-coupon-form input.input-text {
    flex: 2;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.apply-coupon-button {
    flex: 1;
    background-color: #FB236A;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.apply-coupon-button:hover {
    background-color: #e01f5d;
}

/* Weiter zur Kasse Button */
.checkout-button {
    display: block;
    background-color: #FB236A;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.checkout-button:hover {
    background-color: #e01f5d;
}
</style>
<!-- CSS ENDE -->/* End custom CSS */