/* css/layout.css */





.background-container, .bg-layer, .bg-layer video {	
      position: absolute;
      top: 0;
      
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;}

      .bg-layer {
         opacity: 0.03;
        
      }

      .bg-layer video {
         object-fit: cover;
         object-position: center;
        
     }

/* Media Queries für das grundlegende Layout */

   

/* Content Container - Layout with Sidebar Support */
.content-container {
  width: calc(100vw - 260px);   
  max-width: calc(100vw - 260px);
  min-width: 0; /* Ermöglicht Schrumpfen bei kleinen Bildschirmen */
  margin-left: 260px;
  margin-right: 0;
  padding-top: 70px;
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  margin-top: 75px;
}

.content-container img {
   max-width: 100%;
  z-index: 23;
}

/* site-info-content replaced by .top-nav in header.css */

/* Großer Desktop (ab 1400px) – mehr Platz */
@media (min-width: 1400px) {
  .content-container {
    width: calc(100vw - 260px);
    max-width: calc(100vw - 260px);
    margin-right: 0;
  }
}

/* Mittlerer Desktop (1080px bis 1400px) – Standard-Layout */
@media (min-width: 1081px) and (max-width: 1399px) {
  .content-container {
    width: calc(100vw - 260px);
    max-width: calc(100vw - 260px);
    margin-right: 0;
  }
}
 
/* Tablet/Small Desktop (768px - 1080px) - No sidebar */
@media (max-width: 1080px) {
  .content-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 70px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mobil (unter 768px) – kompaktes Layout */
@media (max-width: 768px) {
 
   .content-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 80px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
   }
 
   .background-container {
     left: 0;
     width: 100%;
   }
 }

/* Kleines Mobil (unter 480px) – sehr kompakt */
@media (max-width: 480px) {
  .content-container {
    padding-top: 90px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}