/* Globals */

.section .container {
    max-width: 1440px !important;
}

.section .container.contmedium {
    max-width: 900px !important;
    text-align: center;
}

.greybg {
    background-color: rgba(217, 217, 217, 0.2);
}

button.buybutton{

    display: inline-block;
    padding: 5px 15px 7px;
    background-color: var(--blue);
    color: var(--white);
    font-weight: var(--medium);
    font-size: 20px;
    text-decoration: none;
    border: none;
}

ul.numbered{
        margin: 20px 0 20px 20px;
    list-style: decimal;
    padding: 0;
    text-align: left;
}

ul.normal{
        margin: 20px 0 20px 20px;
    list-style: disc;
    padding: 0;
    text-align: left;
}

.additional-padding-bottom{
    padding-bottom: 300px !important;
}

/* Accordion */
.accordion-text-left {
    text-align: left;
}

.accordion, .accordion-living, .accordion-3 {
    background-color: transparent;
    color: var(--blue);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    border-top: 2px solid var(--blue);
    text-transform: uppercase;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion:last-of-type, .accordion-living:last-of-type, .accordion-3:last-of-type {
    border-bottom: 2px solid var(--blue);
}

.accordion.active:last-of-type,
.accordion-living.active:last-of-type,
.accordion-3.active:last-of-type {
    border-bottom: none;
}

.accordion-wrapper .accordion-living:last-child.active {
    border-bottom: none;
}

.accordion:after, .accordion-living:after, .accordion-3:after {
    content: '+'; /* Plus */
    font-size: 32px;
    color: var(--blue) !important;
    margin-left: auto;
}

.accordion.active:after, .accordion-living.active:after, .accordion-3.active:after {
    content: "-"; /* Minus */
    color: var(--blue) !important;
}

.accordion-wrapper {
        padding: 60px 20px;

}

.panel, .panel-living, .panel-3 {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0px 18px 0px 18px;
}

/* Slider */
.slider {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 35px auto;
}


.slider-headline, .slider-infotext, .button-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 10px;
    font-size: 18px;
    flex-grow: 1;
    overflow: hidden;
}


.swiper {
    width: 100% !important;
    
}

.swiper-slide {
    /*width: 320px !important; /* Slide nimmt natürliche Breite */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.swiper-pagination {
    position: static !important;
    margin-top: 20px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--blue) !important; /* deine Farbe */
}

.swiper-pagination-bullet-active {
    background: var(--blue) !important; /* aktiver Punkt */
}

.slider-box {
    width: 100%;
    max-width: 350px;
    height: 580px; /* feste Höhe für Einheitlichkeit */
    display: flex;
    flex-direction: column;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
    padding: 10px;
}

.slider-box-link{
    text-decoration: none;;
}

.slider-box:hover .slider-img img {
    transform: scale(1.10); /* Bild leicht vergrößern */
    transition: transform 0.3s ease; /* sanfte Animation */
}

.slider-img {
    width: 100%;
    height: 250px; /* feste Bildhöhe */
    flex-shrink: 0;
    overflow: hidden;
}

.slider-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.slider-headline {
    text-align: center;
    margin: 10px 0;
    flex-shrink: 0;
    text-decoration: none;
}

.slider-infotext {
    flex-grow: 1;           /* nimmt den restlichen Platz */
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Text oben anfangen */
    overflow-wrap: break-word;   /* Zeilen umbrechen */
    align-items: center;

}

.button-wrapper {
    flex-shrink: 0;          /* Button bleibt immer sichtbar */
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Lebensbereiche Abstände inside*/
.accordion-paddingbottom{
    padding: 0px 0px 20px 0px !important;
}

/*Productboxes*/

.product-fs-box{
    display: flex;
    width: 100%;
    height: 100%;
}

.product-item{
    flex: 1; /* alle 3 gleich breit */
    display: flex;
    flex-direction: column;
    justify-content: center; /* horizontal zentriert */
    align-items: center;     /* vertikal zentriert */
}

.product-item img{
    width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain; /* wichtig → Bild bleibt sauber */
}

.img-living{
width: 75% !important;
}

.product-item a {
    text-decoration: none;
    color: inherit;
}

.product-caption{
    margin-top: 10px;
    text-align: center;
    display: block;
}


.image-container-wrapper{
    position: relative;
    width: 100%;
    padding-top: 120px !important;   /* Abstand nach oben */
    padding-bottom: 60px !important; /* Abstand nach unten */
}

.image-container-wrapper img{
    position: absolute;
    top: -300px; /* statt -300px → skaliert mit Bildschirm */
    left: 50%;
    transform: translateX(-50%);

    width: 100%;     /* responsive Breite */
    max-width: 900px;
    height: auto;
}

@media only screen and (max-width: 1080px) {
    .image-container-wrapper img{
    top: -280px; /* statt -300px → skaliert mit Bildschirm */
    }
}

@media only screen and (max-width: 900px) {
    .image-container-wrapper img{
    top: -270px; /* statt -300px → skaliert mit Bildschirm */
    }
}

@media (min-width: 768px) {
  .sticky-bagua {
    position: sticky;
    top: 300px; /* Abstand zum oberen Rand / Header */
    align-self: flex-start;
  }
}

@media only screen and (max-width: 768px) {
    .image-container-wrapper img{
    top: -240px; /* statt -300px → skaliert mit Bildschirm */
    }

    .product-item img{
        width: 75%;
    }
}

@media only screen and (max-width: 580px) {
    .image-container-wrapper img{
    top: -200px; /* statt -300px → skaliert mit Bildschirm */
    }
}

@media only screen and (max-width: 480px) {
    .image-container-wrapper img{
    top: -150px; /* statt -300px → skaliert mit Bildschirm */
    }

    .slider-box{
        height: 600px; /* feste Höhe für Einheitlichkeit */
    }
}