.greenbg {
position: relative;
background: #99c011!important;
width: 449px;
white-space: normal!important;
text-align: right!important;
padding: 0px 30px!important;
z-index: 3000!important;
}

.greenbglast {
	
	padding-bottom: 30px!important;
	
}

.greenbgfirst {
	
	padding-top: 30px!important;
	padding-bottom: 20px!important;
	font-weight: 700!important;
	line-height: 28px!important;
	
}

.hauptbild_padding {
	
	margin: auto;
	max-width: 1920px;
	padding-bottom: 15px!important;
	
} 

.mobilgreen {
	
	background: #99c011!important;
	padding: 10px;
	font-size: 20px;
	
}

.mod_top_mail a {
	margin-right: 20px;
	
	line-height: 20px !important;
	padding: 5px 0px;
	
}

.ce_popup_start .ce_popup_content {
	
	
	  position: fixed;
    top: 60%!important;
    left: 50%;
	
}	
	  
 


@media only screen and (max-width: 768px) {
	
	.mod_top_mail a {
	margin-top: 5px;	
	margin-right: 20px;
	display: block;
	line-height: 20px !important;
	padding: 5px 0px;
	
}
	
	.logo {
	 padding-top: 10px;
		
	}
	
	 #slider  {
        margin-top: 30px !important;
    }
	
	
		#wrapper {
        margin-top: 50px !important;
    }

    .stickyheader .header.cloned {
        height: 120px !important;
    }

}
	
	
	}
.social-sidebar {
  position: fixed;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.social-link {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid #d4d4cc;
  background: rgba(255,255,255,0.95);
  color: #3d3d3a;
  text-decoration: none;
  transition: all 0.25s;
}
.social-link:hover {
  background: #99c011;
  border-color: #99c011;
  color: white;
  transform: scale(1.12);
}
.social-link svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
@media (max-width: 960px) {
  .social-sidebar { display: none; }
}
/* Logo weiss - muss ganz am Ende stehen */
div.logo a {
  background-image: url('https://test.buntspeicher.com/files/buntspeicher/img/Buntspeicher_Logo_Schrift_weis.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

div.logo a:hover {
  background-image: url('https://test.buntspeicher.com/files/buntspeicher/img/Buntspeicher_Logo_Schrift_weis.png') !important;
}

#header.header.original.bs-scrolled div.logo a {
  background-image: url('https://test.buntspeicher.com/files/buntspeicher/img/Buntspeicher_Logo_300dpi.png') !important;
}
/* ============================================================
   START: BS-HERO ULTIMATIVE LÖSUNG (LÖSUNG 3)
   ============================================================ */

/* ── 1. DER NEUE KÄFIG-FREIE CONTAINER ── */
#hero-full-width {
    width: 100% !important;
    position: relative;
    z-index: 10;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden; /* Verhindert Wackeln durch die Wave */
}

/* ── 2. HERO HAUPTCONTAINER (FLEXBOX WIEDER AN!) ── */
.bs-hero {
    position: relative;
    width: 100%;
    /* 110vh zieht das Bild bis ganz nach unten, über den Browserrand */
    height: 110vh !important;
    min-height: 600px;
    display: flex;
    /* Vertikale Ausrichtung: Mitte */
    align-items: center !important; 
    /* Horizontale Ausrichtung: Mitte */
    justify-content: center;
    /* Zieht das Bild unter den Header */
    margin-top: -200px !important; 
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* ── 3. HINTERGRUND-BILD (MIT ANIMATION & FIX) ── */
.bs-hero-bg {
    position: absolute;
    inset: 0;
    /* Dein Bild aus Contao */
    background-image: url('https://test.buntspeicher.com/files/buntspeicher/img/hero.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    z-index: 0;
    /* KenBurns Animation wieder einschalten */
    animation: bsKenBurns 20s ease-in-out infinite alternate !important;
}

/* Die KenBurns Animation */
@keyframes bsKenBurns {
    0%   { transform: scale(1.0); }
    100% { transform: scale(1.08); }
}

/* ── 4. CONTENT BEREICH (TEXT-ZENTRIERUNG & POSITION) ── */
.bs-hero-content {
    position: relative;
    z-index: 2;
    color: white !important;
    text-align: center;
    max-width: 800px;
    /* Ein Padding oben sorgt dafür, dass der Text nicht vom Header überlagert wird */
    padding-top: 100px; 
    box-sizing: border-box;
}

/* ── 5. DER BUTTON "JETZT ENTDECKEN" ── */
.bs-hero-btn {
    display: inline-block;
    /* Dein grüner Farbton */
    background-color: #99c011 !important; 
    color: white !important;
    padding: 1rem 2.5rem !important;
    border-radius: 40px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin-top: 1.5rem !important;
    transition: background 0.2s, transform 0.2s !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    z-index: 10;
    position: relative;
}

.bs-hero-btn:hover {
    background-color: #7a9a0d !important;
    transform: translateY(-3px) !important;
}

/* ── 6. MOBILE ANPASSUNG ── */
@media (max-width: 960px) {
    #hero-full-width {
        margin-left: 0 !important; 
    }
    .bs-hero-content {
        padding-left: 0 !important;
        padding-top: 150px;
    }
    .bs-hero {
        height: auto !important;
        min-height: 400px;
        margin-top: -120px !important;
    }
}
/* Hero aus allen Contao-Containern befreien */
#hero-full-width .inside,
#hero-full-width > .inside {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.bs-hero {
  height: 100vh !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.bs-hero-bg {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
}
.bs-hero-content h1 {
  font-weight: 700 !important;
  color: white !important;
  text-align: center !important;
  font-size: 4rem !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
/* Hero-Artikel aus Container befreien */
#article-14072 {
  padding: 0 !important;
  margin: 0 !important;
}

#article-14072 .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
/* Hero nach links aus dem Wrapper-Padding herausziehen */
#article-14072 {
  margin-left: -4rem !important;
  width: calc(100% + 4rem) !important;
  padding: 0 !important;
}

#article-14072 .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}