/* Sichtbarkeit Desktop vs Mobile (bleibt gleich) */
.price-desktop-view { display: none; }
.price-mobile-view { display: block; }
@media (min-width: 1200px) {
    .price-desktop-view { display: block; }
    .price-mobile-view { display: none; }
}

/* ================================================= */
/* ========= Styling für den neuen Slider ========= */
/* ================================================= */
.price-mobile-view {
    overflow-x: hidden; /* Verhindert horizontales Scrollen für die gesamte Seite */
}
.standard-price-slider {
    width: 100%;
    /* NEU: Begrenzt die maximale Breite des Sliders und zentriert ihn. */
    max-width: 600px; 
    margin: 0 auto;
    
    padding: 20px 0;
    
    /* GEÄNDERT: Erlaubt, dass die seitlichen Karten außerhalb des Containers sichtbar sind. */
    overflow: visible; 
}
.standard-price-slider .swiper-wrapper {
    align-items: center; /* Vertikal zentrieren */
}

.standard-price-slider .swiper-slide {
    height: auto;
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0.5; /* Leicht reduziert für besseren Kontrast */
    transform: scale(0.9); /* Etwas kleiner für einen deutlicheren Effekt */
}

/* Die aktive Slide in der Mitte */
.standard-price-slider .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 10; /* Stellt sicher, dass die aktive Karte immer im Vordergrund ist */
}

.standard-price-slider .price-card {
    width: 100%;
    max-width: 320px;
    min-height: 455px; /* min-height statt height verwenden für mehr Flexibilität */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: white; /* Stellt sicher, dass Karten nicht durchsichtig sind */
}

/* Styling für das "Beliebteste Wahl"-Paket */
.price-card-popular {
    border: 2px solid #6fbf4a; /* Beispiel-Farbe */
}

.popular-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #6fbf4a; /* Beispiel-Farbe */
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 15;
}


/* ================================================= */
/* ========= Styling für die Tab-Navigation ======== */
/* ================================================= */

.price-nav-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
    padding-bottom: 5px;
}

.price-nav-tab {
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    position: relative;
    transition: color 0.3s ease;
}

.price-nav-tab:hover {
    color: #111;
}

/* Styling für den aktiven Balken */
.price-nav-tab.is-active {
    color: var(--theme-color);
    font-weight: bold;
}

.price-nav-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background-color: var(--theme-color);
    border-radius: 2px;
}

.mobile-title_price{
    margin: 0;
}

/* ================================================= */
/* ========= Styling für die Tab-Navigation ======== */
/* ================================================= */

.price-nav-tabs {
    display: flex;
    justify-content: center;
    gap: 20px; /* Abstand zwischen den Tabs */
    margin-top: 25px;
    padding-bottom: 5px;
}

.price-nav-tab {
	cursor: pointer;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	position: relative;
	transition: color 0.3s ease;
	text-transform: uppercase;
}

.price-nav-tab:hover {
    color: #111;
}

/* Styling für den aktiven Balken */
.price-nav-tab.is-active {
    color: var(--theme-color);
    font-weight: bold;
}

.price-nav-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Position des Balkens unter dem Text */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background-color: var(--theme-color);
    border-radius: 2px;
}

.price-card_content {
	flex-grow: 1;
	display: flex;
	align-items: center;
}

/* 2. Zentriere die <ul> vertikal mit automatischen Rändern */