/* Wärmepumpen spezifisches Styling */

/* Spezifisches Styling für den Vorher-Nachher Slider */
#comparison-heatpump {
    /* Erzwingt ein einheitliches Seitenverhältnis, damit beide Bilder deckungsgleich sind */
    aspect-ratio: 4/3;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #eee; /* Lade-Hintergrund */
}

#comparison-heatpump .comparison-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Wichtig: Füllt den Bereich komplett aus, schneidet Ränder ab falls nötig */
    object-position: center;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    #comparison-heatpump {
        aspect-ratio: 1/1; /* Quadratisch auf mobilen Geräten für bessere Sichtbarkeit */
        max-height: 500px;
    }
}

/* Karussell Anpassungen (werden teils aus gallery.css übernommen) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 56, 101, 0.5);
    border-radius: 50%;
    padding: 20px;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--primary-blue);
}

/* Fade In Animation für Sektionen */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.italic { font-style: italic; }