/* ==============================================================
   BALLOON ANIMATION CSS
   Wind-Effekt, Parallax, Balloon-Level-Animationen
   Pure CSS - Kein JavaScript erforderlich
   ============================================================== */

/* ----------------------------------------------
   PRICE SLIDER SKY - Support Bereich
---------------------------------------------- */
.price-slider-sky {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: visible !important;
    background: linear-gradient(180deg, #e8f4fc 0%, #f5f9fc 40%, #ffffff 100%);
    border-radius: 16px;
    /* Mehr Padding für Animation-Spielraum - Ballon darf nicht abgeschnitten werden */
    padding: 60px 30px;
    box-sizing: border-box;
}

.img-wrapper {
    overflow: visible !important;
}

/* Parent-Elemente müssen auch overflow:visible haben */
.bb-section-widget-3,
.bb-section-widget-3 .row,
.bb-section-widget-3 .col-md-5,
.bb-section-widget-3 .container,
section.bb-section-widget-3 {
    overflow: visible !important;
}

/* Sicherstellen dass die Animation nicht abgeschnitten wird */
.bb-section-widget-3 .img-wrapper {
    overflow: visible !important;
    position: relative;
}

/* ----------------------------------------------
   CLOUDS — Wind Animation mit mehr Bewegung
---------------------------------------------- */
.price-slider-sky .cloud {
    position: absolute;
    pointer-events: none;
}

/* Cloud 1 - oben rechts */
.price-slider-sky .cloud-1 {
    width: 100px;
    height: auto;
    top: 8%;
    right: 15%;
    animation: cloud-drift-1 8s ease-in-out infinite;
}

/* Cloud 2 - mitte links gross */
.price-slider-sky .cloud-2 {
    width: 140px;
    height: auto;
    top: 38%;
    left: 8%;
    animation: cloud-drift-2 10s ease-in-out infinite;
}

/* Cloud 3 - unten rechts - mehr Abstand vom Rand */
.price-slider-sky .cloud-3 {
    width: 90px;
    height: auto;
    bottom: 18%;
    right: 18%;
    animation: cloud-drift-3 9s ease-in-out infinite;
}

/* Cloud 4 - oben links klein */
.price-slider-sky .cloud-4 {
    width: 75px;
    height: auto;
    top: 18%;
    left: 15%;
    animation: cloud-drift-4 7s ease-in-out infinite;
}

/* Cloud 5 - mitte rechts */
.price-slider-sky .cloud-5 {
    width: 85px;
    height: auto;
    top: 58%;
    right: 22%;
    animation: cloud-drift-5 11s ease-in-out infinite;
}

/* Verschiedene Cloud Drift Animationen für mehr Dynamik */
@keyframes cloud-drift-1 {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-20px) translateY(5px); }
    50% { transform: translateX(-8px) translateY(-3px); }
    75% { transform: translateX(-25px) translateY(2px); }
}

@keyframes cloud-drift-2 {
    0%, 100% { transform: translateX(0) translateY(0); }
    30% { transform: translateX(30px) translateY(-8px); }
    60% { transform: translateX(15px) translateY(5px); }
    80% { transform: translateX(35px) translateY(-3px); }
}

@keyframes cloud-drift-3 {
    0%, 100% { transform: translateX(0) translateY(0); }
    20% { transform: translateX(-15px) translateY(-6px); }
    50% { transform: translateX(-25px) translateY(4px); }
    70% { transform: translateX(-10px) translateY(-2px); }
}

@keyframes cloud-drift-4 {
    0%, 100% { transform: translateX(0) translateY(0); }
    35% { transform: translateX(18px) translateY(6px); }
    65% { transform: translateX(8px) translateY(-4px); }
    85% { transform: translateX(22px) translateY(2px); }
}

@keyframes cloud-drift-5 {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-12px) translateY(-5px); }
    55% { transform: translateX(-20px) translateY(6px); }
    80% { transform: translateX(-8px) translateY(-2px); }
}

/* ----------------------------------------------
   BALLOON — 50% größer, nicht abgeschnitten
---------------------------------------------- */
.price-slider-balloon {
    position: absolute;
    left: 40%;
    bottom: 8%;
    transform: translateX(-50%);
    animation: balloon-sway 5s ease-in-out infinite;
    transition: bottom 1s ease;
    z-index: 10;
}

.price-slider-balloon svg {
    width: 100px;
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.12));
    transition: transform 1s ease;
}

/* Balloon wind sway */
@keyframes balloon-sway {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    25% { transform: translateX(calc(-50% + 6px)) translateY(-8px) rotate(-2deg); }
    50% { transform: translateX(calc(-50% - 4px)) translateY(5px) rotate(2deg); }
    75% { transform: translateX(calc(-50% + 3px)) translateY(-4px) rotate(-1deg); }
}

/* Balloon Levels - Ballon bleibt IMMER im sichtbaren Bereich */
.price-slider-balloon.level-1 {
    bottom: 60px;
}
.price-slider-balloon.level-1 svg {
    transform: scale(0.65);
}

.price-slider-balloon.level-2 {
    bottom: 100px;
}
.price-slider-balloon.level-2 svg {
    transform: scale(0.75);
}

.price-slider-balloon.level-3 {
    bottom: 140px;
}
.price-slider-balloon.level-3 svg {
    transform: scale(0.85);
}

.price-slider-balloon.level-4 {
    bottom: 180px;
}
.price-slider-balloon.level-4 svg {
    transform: scale(0.95);
}

.price-slider-balloon.level-5 {
    bottom: 220px;
}
.price-slider-balloon.level-5 svg {
    transform: scale(1.0);
}

/* ----------------------------------------------
   MOBILE Anpassungen
---------------------------------------------- */
@media (max-width: 991px) {
    .price-slider-sky {
        height: 420px;
    }
    
    .price-slider-sky .cloud-1 { width: 85px; }
    .price-slider-sky .cloud-2 { width: 130px; }
    .price-slider-sky .cloud-3 { width: 80px; }
    .price-slider-sky .cloud-4 { width: 65px; }
    .price-slider-sky .cloud-5 { width: 70px; }
    
    .price-slider-balloon svg {
        width: 100px;
    }
}

@media (max-width: 767px) {
    .price-slider-sky {
        height: 320px;
        margin-top: 20px;
    }
    
    .price-slider-sky .cloud-1 { width: 65px; }
    .price-slider-sky .cloud-2 { width: 100px; }
    .price-slider-sky .cloud-3 { width: 60px; }
    .price-slider-sky .cloud-4 { width: 50px; }
    .price-slider-sky .cloud-5 { width: 55px; }
    
    .price-slider-balloon svg {
        width: 80px;
    }
    
    .price-slider-balloon.level-5 {
        bottom: 50%;
    }
}

/* ==============================================================
   LEGAL PAGES - Datenschutz, Impressum, etc.
   ============================================================== */
.legal-content {
    max-width: 900px;
}

.legal-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-dark, #1a1a1a);
}

.legal-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-dark, #1a1a1a);
    margin-top: 2rem;
}

.legal-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark, #1a1a1a);
}

.legal-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text, #4a4a4a);
}

.legal-content a {
    color: var(--color-primary, #1E76B9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-content a:hover {
    color: var(--color-primary-dark, #155a8a);
    text-decoration: underline;
}

.legal-content address {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text, #4a4a4a);
}

.legal-list {
    list-style: none;
    padding-left: 0;
}

.legal-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text, #4a4a4a);
}

.legal-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary, #1E76B9);
    font-weight: bold;
}

@media (max-width: 767px) {
    .legal-content h2 {
        font-size: 1.75rem;
    }
    
    .legal-content h3 {
        font-size: 1.25rem;
    }
    
    .legal-content h4 {
        font-size: 1.1rem;
    }
}