.elementor-15434 .elementor-element.elementor-element-bc0b571{--slides-per-view:1;}.elementor-15434 .elementor-element.elementor-element-dced0f0{--slides-per-view:1;}.elementor-15434 .elementor-element.elementor-element-62ae81d > .elementor-widget-container{margin:-86px 0px -82px 0px;}.elementor-15434 .elementor-element.elementor-element-62ae81d .swiper-wrapper{align-items:center;}@media(max-width:767px){.elementor-15434 .elementor-element.elementor-element-dced0f0 .swiper-entry{--arrow-size:24px;}}/* Start custom CSS for html, class: .elementor-element-561533e *//* EXOVOLT – ENERGY STORY */

/* Elementor- und XStore-Wrapper */

.exo-story-host,
.exo-story-host .elementor-widget-html,
.exo-story-host .elementor-widget-container,
.exo-story-host .e-con-inner {
    min-width: 0;
    overflow: visible !important;
}

.exo-story-host {
    width: 100%;
}

.exo-story-host .elementor-widget-html {
    width: 100%;
    align-self: stretch;
}

.template-container:has(.exo-energy-story) {
    overflow: visible !important;
}

/* Grundstruktur */

.exo-energy-story {
    --exo-magenta: #ba2c73;
    --exo-yellow: #ffd700;
    --exo-sticky-top: 0px;

    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible !important;
    color: #20222a;
    background: #f4f5f7;
}

.exo-energy-story,
.exo-energy-story * {
    box-sizing: border-box;
}

.exo-energy-story > .exo-energy-story__sticky {
    display: block;
    padding: 24px 0;

    background:
        radial-gradient(
            ellipse at 95% 15%,
            rgba(186, 44, 115, 0.07),
            transparent 45%
        ),
        #f4f5f7;
}

.exo-energy-story.is-scroll-ready > .exo-energy-story__sticky {
    position: sticky !important;
    top: var(--exo-sticky-top) !important;
}

/* Überschrift */

.exo-energy-story .exo-energy-story__header {
    width: 90%;
    margin: 0 auto 20px;
}

.exo-energy-story__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--exo-magenta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.exo-energy-story .exo-energy-story__header h2 {
    margin: 0 0 14px;
    color: #20222a;
    font-size: clamp(28px, 3.6vw, 50px);
    font-weight: 750;
    line-height: 1.12;
}

.exo-energy-story .exo-energy-story__header p {
    max-width: 700px;
    margin: 0;
    color: #606571;
    font-size: 16px;
    line-height: 1.6;
}

/* Sichtbarer Ausschnitt */

.exo-energy-story .exo-energy-story__viewport {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.exo-energy-story.is-scroll-ready .exo-energy-story__viewport {
    overflow: hidden;
    scroll-snap-type: none;
}

/* Horizontale Spur – selbst NICHT auf 400 % setzen */

.exo-energy-story .exo-energy-story__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0 !important;

    width: 100% !important;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Jede Szene nimmt genau einen sichtbaren Ausschnitt ein */

.exo-energy-story .exo-energy-story__track > .exo-energy-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 64px);

    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 5%;
    scroll-snap-align: start;
}

/* Bildbereich */

.exo-energy-story .exo-energy-panel__visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    min-height: 240px;
    overflow: hidden;
    border: 1px solid #e0e2e7;
    border-radius: 26px;
    background: linear-gradient(145deg, #fff, #e4e7ed);
}

.exo-energy-story .exo-visual-placeholder {
    padding: 12px 20px;
    border-radius: 30px;
    background: #fff;
    color: #20222a;
    font-size: 18px;
    font-weight: 700;
}

.exo-energy-story .exo-energy-panel__visual--image {
    display: block;
    min-height: 0;
    height: clamp(220px, calc(100svh - 340px), 520px);
    aspect-ratio: auto;
    background: transparent;
    border: 0;
}

.exo-energy-story .exo-energy-panel__visual--image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
}

.exo-energy-story .exo-energy-panel__visual::before,
.exo-energy-story .exo-energy-panel__visual::after {
    content: none;
    display: none;
}

/* Text */

.exo-energy-story .exo-energy-panel__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 16px 0;
}

.exo-energy-story .exo-energy-panel__label {
    color: var(--exo-magenta);
    font-size: 13px;
    font-weight: 700;
}

.exo-energy-story .exo-energy-panel__counter {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0;
}

.exo-energy-story .exo-energy-panel__counter strong {
    color: #20222a;
    font-size: 48px;
    line-height: 1;
}

.exo-energy-story .exo-energy-panel__counter span {
    color: #747985;
    font-size: 17px;
}

.exo-energy-story .exo-energy-panel__content h3 {
    margin: 0 0 18px;
    color: #20222a;
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 750;
    line-height: 1.15;
}

.exo-energy-story .exo-energy-panel__content p {
    max-width: 510px;
    margin: 0;
    color: #606571;
    font-size: 16px;
    line-height: 1.7;
}

.exo-energy-story .exo-energy-panel__button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--exo-magenta);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.exo-energy-story .exo-energy-panel__button:focus-visible {
    outline: 3px solid #20222a;
    outline-offset: 4px;
}

/* Fortschritt */

.exo-energy-story .exo-energy-story__progress {
    display: none;
    width: 90%;
    height: 3px;
    margin: 20px auto 0;
    overflow: hidden;
    background: #dfe1e7;
    border-radius: 3px;
}

.exo-energy-story.is-scroll-ready .exo-energy-story__progress {
    display: block;
}

.exo-energy-story .exo-energy-story__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--exo-magenta),
        var(--exo-yellow)
    );
    transform: scaleX(0);
    transform-origin: left;
}

/* Tablet und Mobil */

@media (max-width: 1024px) {
    .exo-energy-story .exo-energy-story__track > .exo-energy-panel {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 8px;
    }

    .exo-energy-story .exo-energy-panel__visual--image {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .exo-energy-story .exo-energy-panel__visual--image img {
        height: auto !important;
    }

    .exo-energy-story .exo-energy-panel__content {
        padding: 22px 0 12px;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-7e90bda *//* =====================================================
   EXOVOLT — ENERGY EDITION
   Vollständiges Produktdesign für .exo-products-rings
===================================================== */

.exo-products-rings {
    --ev-magenta: #ba2c73;
    --ev-pink: #f075b4;
    --ev-yellow: #ffd700;
    --ev-dark: #14161d;

    width: 100%;
    min-width: 0;
    padding: clamp(14px, 2vw, 30px) !important;
    border-radius: 28px;

    background:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(255, 215, 0, .12),
            transparent 40%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(186, 44, 115, .10),
            transparent 45%
        ),
        #eeeff3 !important;
}

.exo-products-rings,
.exo-products-rings *,
.exo-products-rings *::before,
.exo-products-rings *::after {
    box-sizing: border-box;
}

/* GRID */

.exo-products-rings .products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 24px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.exo-products-rings .products::before,
.exo-products-rings .products::after {
    content: none !important;
    display: none !important;
}

/* KARTENKÖRPER */

.exo-products-rings .products .product {
    position: relative;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;

    overflow: hidden;
    border: 1px solid #dadce4 !important;
    border-radius: 25px !important;
    background: var(--ev-dark) !important;

    box-shadow:
        0 3px 5px rgba(20, 22, 29, .03),
        0 18px 40px rgba(20, 22, 29, .09);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.exo-products-rings .product .content-product {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

/* PRODUKTBÜHNE */

.exo-products-rings .product .product-image-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #f9f9fb !important;
}

.exo-products-rings .product .product-content-image {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1;

    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: hidden;
    border-radius: 0 !important;

    background: #f9f9fb !important;
}

/* Große, vollständig sichtbare Bilder */

.exo-products-rings .product .product-content-image > img,
.exo-products-rings .product .product-content-image .image-swap img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;

    object-fit: contain !important;
    object-position: center !important;
}

.exo-products-rings .product .product-content-image .image-swap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Alte Bilddekoration entfernen */

.exo-products-rings .product .product-content-image::before,
.exo-products-rings .product .product-content-image::after {
    content: none !important;
    display: none !important;
}

/* MwSt.-Badge als schmale Markenplakette */

.exo-products-rings .product .exovolt-zero-vat-badge {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 5;

    display: inline-block !important;
    max-width: calc(100% - 28px);
    margin: 0 !important;
    padding: 8px 11px !important;

    border: 0 !important;
    border-left: 3px solid #ffd700 !important;
    border-radius: 4px 10px 10px 4px !important;

    background: #ba2c73 !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    transform: none !important;

    box-shadow: 0 6px 20px rgba(186, 44, 115, .18);
}

/* AKTIONSBEREICH — IMMER UNTER DEM BILD */

.exo-products-rings .product .product-image-wrapper .footer-product {
    position: relative !important;
    inset: auto !important;
    z-index: 2;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    gap: 9px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 16px 17px !important;

    border: 0 !important;
    background: #f9f9fb !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* Fokus auf die Kaufaktion */

.exo-products-rings .product .footer-product > .xstore-wishlist,
.exo-products-rings .product .footer-product > .show-quickly {
    display: none !important;
}

/* Breite magentafarbene Aktionsleiste */

.exo-products-rings .product .footer-product > a.button,
.exo-products-rings .product .footer-product > a.added_to_cart {
    position: relative !important;
    inset: auto !important;
    order: 1;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 14px 18px !important;

    border: 1px solid #ba2c73 !important;
    border-radius: 12px !important;

    background: #ba2c73 !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    box-shadow: 0 6px 15px rgba(186, 44, 115, .13);
    transition: background .2s ease, box-shadow .2s ease;
}

.exo-products-rings .product .footer-product > a.button::before {
    content: none !important;
    display: none !important;
}

/* Versandkostenhinweis bleibt sichtbar */

.exo-products-rings .product .footer-product > .shipping-costs-info {
    position: static !important;
    order: 2;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #616572 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    text-align: center !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.exo-products-rings .product .footer-product > .shipping-costs-info a {
    position: static !important;
    display: inline !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    background: transparent !important;
    color: #434650 !important;
    font-size: inherit !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* INFORMATIONSFLÄCHE */

.exo-products-rings .product .product-details {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 34px 20px 54px !important;

    overflow: hidden;
    border: 0 !important;
    background:
        radial-gradient(
            ellipse at 100% 100%,
            rgba(186, 44, 115, .12),
            transparent 60%
        ),
        linear-gradient(145deg, #242630, #14161d) !important;

    color: #ffffff !important;
    text-align: left !important;
}

/* Schräge Energielinie am Übergang */

.exo-products-rings .product .product-details::before {
    content: "" !important;
    position: absolute;
    z-index: 0;

    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 10px;

    border: 0;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        #ba2c73 0%,
        #e853a0 78%,
        #ffd700 78%,
        #ffd700 86%,
        #30333e 86%
    );

    clip-path: polygon(0 0, 100% 0, 100% 28%, 0 100%);
    transform: none;
    box-shadow: none;
    filter: none;
    pointer-events: none;
}

/* Dezente technische Markierung am Kartenfuß */

.exo-products-rings .product .product-details::after {
    content: "" !important;
    position: absolute;
    z-index: 0;

    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    width: 54px;
    height: 8px;

    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(
        115deg,
        transparent 0 7px,
        rgba(240, 117, 180, .60) 7px 10px,
        transparent 10px 15px
    );

    transform: none;
    box-shadow: none;
    pointer-events: none;
}

.exo-products-rings .product .product-details > * {
    position: relative;
    z-index: 1;
}

/* Kategorien ausblenden */

.exo-products-rings .product .products-page-cats,
.exo-products-rings .product .product-categories,
.exo-products-rings .product .posted_in {
    display: none !important;
}

/* Titel */

.exo-products-rings .product .product-title,
.exo-products-rings .product .product-title a,
.exo-products-rings .product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
    letter-spacing: -.015em;
    text-align: left !important;
    text-decoration: none !important;
    overflow-wrap: break-word;
}

.exo-products-rings .product .product-title {
    margin: 0 0 26px !important;
    padding: 0 !important;
}

/* Preise */

.exo-products-rings .product .price {
    display: block !important;
    margin: auto 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .10);

    color: #f075b4 !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

.exo-products-rings .product .price .amount,
.exo-products-rings .product .price bdi,
.exo-products-rings .product .price .woocommerce-Price-currencySymbol {
    color: inherit !important;
}

.exo-products-rings .product .price .pv-price-with-tax {
    color: #b7bac5 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

.exo-products-rings .product .price .pv-price-without-tax {
    color: #f075b4 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.exo-products-rings .product .price .pv-price-without-tax > .amount {
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
}

.exo-products-rings .product .price del {
    color: #b7bac5 !important;
    opacity: 1 !important;
}

.exo-products-rings .product .price ins {
    background: transparent !important;
    color: #f075b4 !important;
    text-decoration: none !important;
}

/* Interaktion */

@media (hover: hover) {
    .exo-products-rings .products .product:hover {
        transform: translateY(-5px);
        border-color: rgba(186, 44, 115, .50) !important;
        box-shadow:
            0 8px 20px rgba(20, 22, 29, .06),
            0 24px 48px rgba(20, 22, 29, .16);
    }

    .exo-products-rings .product .footer-product > a.button:hover,
    .exo-products-rings .product .footer-product > a.added_to_cart:hover {
        background: #9e205f !important;
        border-color: #9e205f !important;
        box-shadow: 0 8px 20px rgba(186, 44, 115, .24);
    }
}

.exo-products-rings .product a:focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: -4px !important;
}

/* Tablet */

@media (max-width: 1024px) {
    .exo-products-rings .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Mobil: seitlich wischen */

@media (max-width: 767px) {
    .exo-products-rings {
        padding: 14px !important;
        border-radius: 22px;
    }

    .exo-products-rings .products {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 16px !important;

        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: #ba2c73 #dedfe6;
        padding: 6px 0 16px !important;
    }

    .exo-products-rings .products .product {
        flex: 0 0 88% !important;
        width: 88% !important;
        min-width: 88% !important;
        max-width: 88% !important;
        scroll-snap-align: start;
        border-radius: 22px !important;
    }

    .exo-products-rings .product .product-details {
        padding: 30px 18px 48px !important;
    }

    .exo-products-rings .product .product-title,
    .exo-products-rings .product .product-title a {
        font-size: 16px !important;
    }
}

/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
    .exo-products-rings *,
    .exo-products-rings *::before,
    .exo-products-rings *::after {
        transition: none !important;
    }

    .exo-products-rings .products .product:hover {
        transform: none;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-83de19b *//* Mobil: alte Höhen-Abschaltung überschreiben */

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .volt-stack .volt-stack__intro {
    position: sticky !important;
    top: var(--volt-top, 24px) !important;
  }

  .volt-stack .volt-stack__card {
    position: sticky !important;
    top: calc(
      var(--volt-top, 24px) +
      var(--i, 0) * var(--volt-step, 10px)
    ) !important;
  }

  .volt-stack .volt-stack__card + .volt-stack__card {
    margin-top: clamp(90px, 20svh, 180px) !important;
  }
}
/* Mobil: Stapeln auch auf niedrigen Displays aktiv halten */

@media (max-width: 900px) {
  .volt-stack .volt-stack__intro {
    position: sticky;
    top: var(--volt-top);
  }

  .volt-stack .volt-stack__card {
    position: sticky;
    top: calc(
      var(--volt-top) + var(--i, 0) * var(--volt-step)
    );

    /* Lange Antworten bleiben innerhalb der Karte erreichbar */
    max-height: calc(
      100svh - var(--volt-top)
      - var(--i, 0) * var(--volt-step) - 16px
    );
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .volt-stack .volt-stack__card + .volt-stack__card {
    margin-top: clamp(90px, 20svh, 180px);
  }

  .volt-stack .volt-stack__card img {
    height: clamp(140px, 28svh, 260px);
  }

  .volt-stack .volt-stack__caption {
    padding: 18px;
  }
}

/* Niedrige Desktopfenster: normale Darstellung */

@media (min-width: 901px) and (max-height: 700px) {
  .volt-stack .volt-stack__intro,
  .volt-stack .volt-stack__card {
    position: relative;
    top: auto;
  }

  .volt-stack .volt-stack__card + .volt-stack__card {
    margin-top: 32px;
  }
}

/* Systemeinstellung „Bewegung reduzieren“ berücksichtigen */

@media (prefers-reduced-motion: reduce) {
  .volt-stack .volt-stack__intro,
  .volt-stack .volt-stack__card {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .volt-stack .volt-stack__card + .volt-stack__card {
    margin-top: 32px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-875db46 *//* ==========================================================
   EXOVOLT ENERGIE BANNER
   Desktop / Tablet / Mobile
   ========================================================== */

.exo-energy-stage {

    --exo-magenta: #BA2C73;
    --exo-magenta-hover: #cf347f;

    position: relative;

    width: 100%;
    min-height: 650px;

    overflow: hidden;

    background-color: #07090d;

    /* DESKTOP-BILD HIER EINSETZEN */
    background-image:
        url("https://exovolt.de/wp-content/uploads/2026/09/Exovolt-Batteriespeicher-.jpg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}


/* ==========================================================
   DUNKLER VERLAUF
   ========================================================== */

.exo-energy-stage::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(5,7,11,.98) 0%,

            rgba(5,7,11,.95) 19%,

            rgba(5,7,11,.82) 35%,

            rgba(5,7,11,.40) 53%,

            rgba(5,7,11,.06) 72%,

            rgba(5,7,11,0) 100%
        );

}


/* leichter Magenta Glow */

.exo-energy-stage::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 520px;
    height: 250px;

    z-index: 1;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at bottom left,
            rgba(186,44,115,.13),
            transparent 68%
        );

}


/* ==========================================================
   CONTENT
   ========================================================== */

.exo-energy-inner {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1600px;

    min-height: 650px;

    margin: 0 auto;

    padding:

        70px
        clamp(30px,5vw,82px)
        45px;

    display: flex;

    align-items: center;

}


/* Text Panel */

.exo-energy-panel {

    width: 100%;

    max-width: 610px;

    color: #fff;

}


/* ==========================================================
   HEADLINE
   ========================================================== */

.exo-energy-title {

    margin: 0;

    color: #fff;

    font-size:
        clamp(40px,4vw,61px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -.7px;

}


.exo-energy-title span {

    color: var(--exo-magenta);

}


/* ==========================================================
   SUBTITLE
   ========================================================== */

.exo-energy-subtitle {

    max-width: 550px;

    margin:

        24px
        0
        0;

    color: #fff;

    font-size: 20px;

    line-height: 1.5;

    font-weight: 400;

}


/* Magenta Linie */

.exo-energy-accent {

    width: 80px;

    height: 3px;

    margin:

        28px
        0;

    background:

        var(--exo-magenta);

}


/* ==========================================================
   BESCHREIBUNG
   ========================================================== */

.exo-energy-description {

    max-width: 565px;

    margin: 0;

    color:

        rgba(255,255,255,.82);

    font-size: 16px;

    line-height: 1.68;

}


/* ==========================================================
   BUTTON
   ========================================================== */

.exo-energy-button {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 28px;

    padding:

        15px
        20px;

    background:

        var(--exo-magenta);

    color: #fff !important;

    text-decoration: none !important;

    border-radius: 2px;

    font-size: 14px;

    font-weight: 700;

    box-shadow:

        0 7px 22px
        rgba(186,44,115,.18);

    transition:

        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.exo-energy-button-arrow {

    font-size: 21px;

    line-height: 1;

}


.exo-energy-button:hover {

    color: #fff !important;

    background:

        var(--exo-magenta-hover);

    transform:

        translateY(-2px);

    box-shadow:

        0 11px 30px
        rgba(186,44,115,.28);

}


/* ==========================================================
   PIKTOGRAMME / TRUST BEREICH
   ========================================================== */

.exo-energy-benefits {

    width: 100%;

    max-width: 650px;

    margin-top: 43px;

    display: grid;

    grid-template-columns:

        repeat(4,minmax(0,1fr));

    gap: 22px;

}


/* Einzelelement */

.exo-energy-benefit {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}


/* ICON */

.exo-energy-benefit-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.exo-energy-benefit-icon svg {

    width: 46px;

    height: 46px;

    overflow: visible;

    fill: none;

    stroke: rgba(255,255,255,.92);

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* Magenta Details */

.exo-energy-benefit-icon
.exo-svg-accent {

    stroke:

        var(--exo-magenta);

}


/* Text unter Icons */

.exo-energy-benefit-text {

    color:

        rgba(255,255,255,.92);

    font-size: 12px;

    font-weight: 400;

    line-height: 1.3;

}


/* ==========================================================
   ICON HOVER
   ========================================================== */

.exo-energy-benefit {

    transition:

        transform .25s ease;

}


.exo-energy-benefit-icon svg {

    transition:

        transform .25s ease,
        filter .25s ease;

}


.exo-energy-benefit:hover {

    transform:

        translateY(-3px);

}


.exo-energy-benefit:hover
.exo-energy-benefit-icon svg {

    transform:

        scale(1.06);

    filter:

        drop-shadow(
            0 0 7px
            rgba(186,44,115,.35)
        );

}


/* ==========================================================
   TABLET
   ========================================================== */

@media
(max-width: 1199px) {


    .exo-energy-stage {

        min-height: 620px;


        /* TABLET-BILD HIER EINSETZEN */

        background-image:

            url("https://exovolt.de/wp-content/uploads/2026/09/Exovolt-Batteriespeicher-lager-tablet.jpg");


        background-position:

            center center;

    }


    .exo-energy-stage::before {

        background:

            linear-gradient(

                90deg,

                rgba(5,7,11,.98) 0%,

                rgba(5,7,11,.94) 33%,

                rgba(5,7,11,.70) 53%,

                rgba(5,7,11,.20) 77%,

                transparent 100%

            );

    }


    .exo-energy-inner {

        min-height: 620px;

        padding:

            55px
            38px
            42px;

    }


    .exo-energy-panel {

        max-width: 560px;

    }


    .exo-energy-title {

        font-size:

            clamp(
                37px,
                5vw,
                51px
            );

    }


    .exo-energy-subtitle {

        font-size:

            18px;

    }


}


/* ==========================================================
   MOBILE
   ========================================================== */

@media
(max-width: 767px) {


    .exo-energy-stage {

        min-height: 720px;


        /* MOBILE-BILD HIER EINSETZEN */

        background-image:

            url("https://exovolt.de/wp-content/uploads/2026/09/Batteriespeicher-exovolt-lager.png");


        background-position:

            center center;

    }


    /*
     * Mobile deutlich stärker abdunkeln,
     * damit der Text unabhängig vom Foto
     * immer lesbar bleibt.
     */

    .exo-energy-stage::before {

        background:

            linear-gradient(

                90deg,

                rgba(5,7,11,.98) 0%,

                rgba(5,7,11,.95) 50%,

                rgba(5,7,11,.82) 100%

            );

    }


    .exo-energy-stage::after {

        width: 100%;

        height: 250px;

    }


    .exo-energy-inner {

        min-height: 720px;

        align-items: flex-start;

        padding:

            48px
            28px
            35px;

    }


    .exo-energy-panel {

        max-width: 100%;

    }


    .exo-energy-title {

        font-size:

            clamp(
                33px,
                9vw,
                43px
            );

        line-height:

            1.07;

    }


    .exo-energy-subtitle {

        max-width: 430px;

        margin-top:

            19px;

        font-size:

            16px;

        line-height:

            1.45;

    }


    .exo-energy-accent {

        width:

            60px;

        margin:

            22px
            0;

    }


    .exo-energy-description {

        max-width:

            430px;

        font-size:

            14px;

        line-height:

            1.58;

    }


    .exo-energy-button {

        margin-top:

            23px;

        padding:

            14px
            18px;

    }


    /*
     * Wichtig:
     * alle vier Icons bleiben wie in deinem
     * Beispiel NEBENEINANDER
     */

    .exo-energy-benefits {

        grid-template-columns:

            repeat(
                4,
                minmax(0,1fr)
            );

        gap:

            5px;

        margin-top:

            37px;

    }


    .exo-energy-benefit-icon {

        width:

            42px;

        height:

            42px;

        margin-bottom:

            7px;

    }


    .exo-energy-benefit-icon svg {

        width:

            37px;

        height:

            37px;

    }


    .exo-energy-benefit-text {

        font-size:

            10px;

        line-height:

            1.22;

    }


}


/* ==========================================================
   KLEINE SMARTPHONES
   ========================================================== */

@media
(max-width: 430px) {


    .exo-energy-stage {

        min-height:

            700px;

    }


    .exo-energy-inner {

        min-height:

            700px;

        padding:

            40px
            21px
            30px;

    }


    .exo-energy-title {

        font-size:

            34px;

    }


    .exo-energy-subtitle {

        font-size:

            15px;

    }


    .exo-energy-description {

        font-size:

            13px;

    }


    .exo-energy-button {

        font-size:

            13px;

    }


    .exo-energy-benefits {

        margin-top:

            32px;

        gap:

            2px;

    }


    .exo-energy-benefit-icon {

        width:

            38px;

        height:

            38px;

    }


    .exo-energy-benefit-icon svg {

        width:

            34px;

        height:

            34px;

    }


    .exo-energy-benefit-text {

        font-size:

            9px;

    }

}/* End custom CSS */