/*
.content, 

.nav-cta{
	position: relative;
	left:5px;
}

#menu-hauptmenue li.cta a{
	position: relative;
	top:5px;

} 
*/


html, body {
    height: 100%;
    margin: 0;
     background-color:#2f3444;
    padding: 0;
}

.main-background {
    min-height: 100vh; /* Nutzt 100% der Viewport-Höhe */
    display: flex;
    flex-direction: column;
    
}



.content.hero .color-layer{
  background: rgba(21, 29, 38, 0.7); /* Sehr transparent */
  backdrop-filter: blur(12px);         /* Der Weichzeichner-Effekt */
  border: 1px solid rgba(21, 29, 38, 0.2);
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 3. Der Container füllt den Raum aus */
.main-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Lässt den Container den verfügbaren Platz einnehmen */
    min-height: 100vh;
    min-height:calc(100vh - 80px);
}

header{
	width:100%;
	max-width:1200px;
	margin:0 auto !important;
	left:auto;
	background-color:#151d26;
}


footer {
	    left: auto !important;
    right: auto !important;
    width: 100%;
     max-width: 1200px !important; 
    max-width: calc(1200px - 160px) !important;
    position: inherit !important;
    bottom: 0;
}


 .main-background{
 	min-width:100%;
 	background-color:#2f3444;
 }

 .nav-cta{
 	background-color:#282c39;

 }

 .main-container{
 	border-top: 1px solid transparent;
 	position: relative;
 	width:100%;
 	max-width:1200px;
 	margin: 0 auto;
 	background-color:#282c39;
    overflow-x:hidden;
 	padding-bottom:50px;
 }


 .sidebar{
 	left:auto;
 }

 .content.hero{
 	    height: 1000px;
 }

     .hero h1 {
        font-size: 30px;}


   .content.hero:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* WIE HOCH soll der Verlauf sein? */
  height: 40%; /* Beispiel: Der Verlauf nimmt die unteren 40% des Bildes ein */

  /* Der Verlauf: Von oben (transparent) nach unten (deine Farbe) */
  background: linear-gradient(to bottom, transparent, #282c39);

  /* Optional: Damit man trotzdem auf Links im Bild klicken kann (falls vorhanden) */
  pointer-events: none;
   }


   .content-map ~ footer {
     position: fixed !important;
     bottom:0 !important;
   }


   .feed{
   	width:100%;
   }


   .event{
   	        padding-top: 220px;
        padding-left: 50px;
        padding-bottom: 35px;
   }


   .event img {
        width: 100%;
        height: 200px;
        margin-top: 0;
        top: 0;
        bottom: auto;
        left: 0;
    }

@media screen AND (min-width:769px){

footer{
        width: calc(100% - 160px);
}
}
@media screen AND (min-width:1200px){

      #map{
     max-width:600px;
 }



    .events > * {
    /* (100% / 2) - (20px / 2) */
    flex: 0 1 calc(50% - 10px);
    box-sizing: border-box;
}

}