.sale-badge-hero {
		  color: white;
		  font-weight: bold;
		  font-size: 1.125rem;
		  padding: 4px 8px;
		  border-radius: 4px;
		  background-color: #e74c3c;
		  position: absolute;
		  top: 20px;
		  right: 20px;
		  z-index: 10;
		  max-height:3em;
	}
    .hero-4 {
            height: 80vh;
            background: url("");
            background-size: cover;
            background-position: center;
            position: relative;
        }
	.hero-image {
	 
	  height: 500px;
	 
	  margin:auto;
	  margin-bottom: 10px;background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	}
        .hero-container {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            background: white;
            margin: auto;
            max-width: 1400px;
        }

        .hero-slider {
            height: 500px;
            position: relative;
            overflow: hidden;
        }

        .slider-track {
            display: flex;
            transition: transform 0.6s ease-in-out;
            height: 100%;
        }

        .slide {
            min-width: 100%;
            height: 100%;
            background-size: cover;
            background-position: bottom;
            position: relative;
		}
 
        .slide-1 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/rechteckige-edelrost-hochbeete-breit-startseite.webp");
        }

        .slide-2 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/runde-edelrost-hochbeete-breit-startseite.webp");
        }

        .slide-3 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/l-form-edelrost-hochbeete-breit-startseite.webp");
        }

        .slide-4 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/u-form-edelrost-hochbeete-breit-startseite.webp");
        }
        .slide-5 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/abgesetzte-edelrost-hochbeete-breit-startseite.webp");
        }
        .hero-content-4 {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255,255,255,0.85);
            padding: 15px 40px;
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.5s ease;
			visibility: hidden;
        }

        .hero-content-4.active {
            opacity: 1;visibility: visible;
        }

        .text-content {
            display: flex;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .category-name {
            font-size: 2.2rem;
            font-weight: 400;
            color: #333;
            letter-spacing: 0.5px;
            margin: 0;
            transition: opacity 0.3s ease;
        }

        .category-subtitle {
            font-size: 1rem;
            opacity: 0.8;
            font-style: italic;
            color: #666;
            margin: 0;
            transition: opacity 0.3s ease;
        }

        .cta-button {
            background: #8b4513;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .cta-button:hover {
            background: #6d3410;
            transform: translateY(-1px);
        }

        /* Slider Navigation */
        .slider-nav {
            position: absolute;
			bottom: 100px;
			  right: 50%;
            display: flex;
            gap: 10px;
            z-index: 15;
        }

        .nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            border: 2px solid rgba(255,255,255,0.8);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-dot.active {
            background: rgba(255,255,255,0.9);
            transform: scale(1.2);
        }

        .nav-dot:hover {
            background: rgba(255,255,255,0.8);
        }

        /* Slider Arrows */
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            font-size: 24px;
            padding: 15px 18px;
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.3s ease;
            z-index: 15;
            backdrop-filter: blur(5px);
        }

        .slider-arrow:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-50%) scale(1.1);
        }

        .arrow-left {
            left: 20px;
        }

        .arrow-right {
            right: 20px;
        }

        .info-section {
            padding: 40px;
            background: #fff;
            text-align: center;
            border-top: 1px solid #eee;
        }

        .info-text {
            font-size: 1rem;
            max-width: 1400px;
            margin: 0 auto;
            color: #666;
            line-height: 1.7;
			text-align:left;
        }

        /* Responsive Design */
        @media (max-width: 790px) {
			.info-section {padding:10px;}
			 
        .slide-1 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/rechteckige-edelrost-hochbeete-1zu1-startseite.webp");
        }

        .slide-2 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/runde-edelrost-hochbeete-1zu1-startseite.webp");
        }

        .slide-3 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/l-form-edelrost-hochbeete-1zu1-startseite.webp");
        }

        .slide-4 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/u-form-edelrost-hochbeete-1zu1-startseite.webp");
        }
        .slide-5 {
            background-image: url("https://www.hochbeete-nach-mass.de/images/startseite/abgesetzte-edelrost-hochbeete-1zu1-startseite.webp");
        }
			
			
            .hero-content-4 {
 
                gap: 15px;
                padding: 0 20px;
 
            }
 
            .text-content {
 
                gap: 10px;
            }
            
            .category-name {
                font-size: 1.8rem;
            }
            
            .cta-button {
                align-self: stretch;
                text-align: center;
            }

            .slider-nav {
                bottom: 100px;
                right: 20px;
            }

            .slider-arrow {
                display: none;
            }
        }

 
 
  /* Responsive Design */
        @media (max-width: 968px) {

            
            .category-name {
                font-size: 1.6rem;
                line-height: 1.2;
            }
            
            .category-subtitle {
                font-size: 0.9rem;
                margin-bottom: 5px;
            }
            
            .cta-button {
                align-self: stretch;
                text-align: center;
                padding: 10px 20px;
                font-size: 0.9rem;
            }

            .slider-nav {
                bottom: 85px;
                right: 20px;
            }

            .slider-arrow {
                display: none;
            }
        }
       
	   @media (max-width: 480px) {
			.hero-content-4 {
                flex-direction: column;
                align-items: flex-start; 
            }
 
            .text-content {
                flex-direction: column;
                align-items: flex-start; 
            }
	   }
        @media (max-width: 480px) {
            .hero-content-4 {
                padding: 12px 15px;
                gap: 8px;
            }
            
            .text-content {
                gap: 3px;
            }
            
            .category-name {
                font-size: 1.4rem;
                line-height: 1.1;
            }
            
            .category-subtitle {
                font-size: 0.85rem;
                margin-bottom: 3px;
            }

            .cta-button {
                padding: 8px 16px;
                font-size: 0.85rem;
            }

            .slider-nav {
                bottom: 75px;
            }
		
			
        }