/* ===== Container ===== */
.header-hero{
  position: relative;
  z-index: 0;                          
  width: 100%;
  min-height: var(--hero-min);          
  overflow: clip;
  background: #000;    
  margin-top: -64px;
}


/* ===== Track ====
.header-hero .hero-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: var(--hero-min);
  scroll-snap-type: x mandatory;
 overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
	overflow-y: hidden;
}

 */
/* ===== Track ==== */
/* Ermöglicht natives Swipe-Scrollen + Snap, aber ohne sichtbare Scrollbar */
.header-hero .hero-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  height: var(--hero-min);
  scroll-snap-type: x mandatory;

  overflow-x: auto;                 /* <-- war: hidden  (DAS ist der Swipe-Fix) */
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  overscroll-behavior-x: contain;   /* verhindert Back/Forward-Geste */
  touch-action: pan-y;              /* vertikal scrollen bleibt normal */

  scrollbar-width: none;            /* Firefox: Scrollbar aus */
  -ms-overflow-style: none;         /* Alt-Edge/IE: Scrollbar aus */
}

/* WebKit: Scrollbar aus */
.header-hero .hero-track::-webkit-scrollbar{
  display: none;
}


/* ===== Slide & Media ===== */
.header-hero .hero-slide{
  position: relative;                  
  height: var(--hero-min);
  scroll-snap-align: start;
}

.header-hero .hero-media{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;                          
}

/* ===== Overlay/Text ===== */
.header-hero .hero-overlay{
  position: absolute;
  inset: 0;                             
  display: flex;
  align-items: flex-end;                
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 20%);
  z-index: 2;
	

}

.header-hero .hero-content{
	    padding: 12px 5vw 12px 5vw;
position: relative;
  z-index: 3;
  width: 100%;
  color: var(--fontb);
  text-shadow: 0 0px 4px rgba(255,255,255,1);
  margin-bottom: 166px;
	padding: 22px 5vw 22px 5vw;
 background-color: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
}




.header-hero .hero-title{
  margin: 0 0 .25em;
	color:var(--fontb2);
  font-family: "Roboto SLab", serif;
  font-size: 31px;
  font-weight: 600;
  line-height: 31px;
  text-align: left;
  text-shadow: 0px 0px 22px #fff;
}
.header-hero .hero-text{ margin: 0 0 1rem; max-width: 75ch; text-shadow: 0px 0px 22px #fff; }
.header-hero .hero-text p{ 
	margin: 0 0 .75rem 0; 
	color: var(--fontb);
	hyphens: none;

font-family: "Roboto Flex", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
}

.header-hero .hero-button{
  display:inline-block;
  background:var(--gradientbutton); color:rgba(245,245,245,1); text-decoration:none;
  padding:.75rem 1rem; border-radius:999px; font-weight:600;
	font-family: "Roboto Flex", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 22px;
  text-align: left;
	text-shadow:none;
}
.header-hero .hero-button:hover{  }




/*####################################################################################*/
/*####################################################################################*/
/*####################################################################################*/

#hero-slide-0 > .hero-overlay > .hero-content{
padding-top: 30px;
padding-bottom:20px;
padding-left: 168px;
	 background-color: rgba(255,255,255,0.6);
backdrop-filter: blur(9px);
}

@media (max-width: 700px){
	#hero-slide-0 > .hero-overlay > .hero-content{padding-left:90px;}
}


#hero-slide-0 > .hero-overlay > .hero-content::before{
background-image: url("../../pix/logo-ba.png");
  background-size: 100% auto;
  background-position: left center;
  background-repeat: no-repeat;
  height: 90px;
  width: 90px;
  position: absolute;
top: 12px;
  margin-left: -90px;
  content: "";
}


#hero-slide-0 > .hero-overlay > .hero-content > .hero-title{
text-shadow: 0px 0px 33px #fff;
  color: #222;
  font-family: "Roboto Slab", serif;
  font-size: 33px;
  font-weight: 650;
  line-height: 32px;
}

#hero-slide-0 > .hero-overlay > .hero-content > .hero-text{
  color: #111;
  font-family: "Roboto Flex", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 22px;
	text-shadow: 0px 0px 33px #fff;
}




/* ===== Controls (Pfeile & Dots) ===== */
.header-hero .hero-controls{
  position: absolute;
  inset: 0;                             
  pointer-events: none;                 
  z-index: 4;
}

/* Pfeile vertikal zentrieren */
.header-hero .hero-prev,
.header-hero .hero-next{
  position: absolute;
top: 33%;
  pointer-events: auto;
  border: 0;
  background: rgba(0,0,0,0.35);
  color: #fff;
    padding: 0.6rem 1.1rem;
  border-radius: 999px;
	backdrop-filter: blur(3px);
  cursor: pointer;
	line-height: 1;
    font-size: 34px;
}
.header-hero .hero-prev{ left: 12px; }
.header-hero .hero-next{ right: 22px; }
.header-hero .hero-prev:focus,
.header-hero .hero-next:focus{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
}

/* Dots oben mittig */
.header-hero .hero-dots{
  position: absolute;
  left: 0; right: 0; top:var(--bb2);
  display: flex;
  gap: .4rem;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
	opacity:0.75;
}
.header-hero .hero-dots button{
  width:10px; height:10px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(255,45,55,0.5); padding:0; 
}
@media (max-width: 767px){.header-hero .hero-dots button{
  width:20px; height:20px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(255,45,55,0.5); padding:0; }
.header-hero .hero-dots{ top:var(--bb2);}
	
	
	.header-hero .hero-content{  margin-bottom:177px;}
}

.header-hero .hero-dots button[aria-selected="true"]{ background:#fff; }

.admin-bar .header-hero{ min-height: calc(100svh - var(--header-height) - 32px); }
@media (max-width:782px){
  .admin-bar .header-hero{ min-height: calc(100svh - var(--header-height) - 46px); }
	
	.header-hero .hero-content{  margin-bottom:139px;}
}

@media (max-width: 420px){
  .header-hero .hero-prev{ left: 6px; }
  .header-hero .hero-next{ right: 6px; }
}

.header-hero .hero-slide {
  position: relative;           
}

.header-hero .hero-slide picture {
  position: absolute;
  inset: 0;                   
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;                  
}

.header-hero .hero-slide .hero-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           
  object-position: center;      
}

.header-hero .hero-overlay {
  position: absolute;
  inset: 0;       
  z-index: 1;
}












@media (max-width: 330px) {
	
	#hero-slide-0 > .hero-overlay > .hero-content > .hero-title {
    font-size: 8vw;
		line-height:8.5vw;
}

	#hero-slide-0 > .hero-overlay > .hero-content > .hero-text p {
    font-size: 4.4vw;
	
}


}