/* style.css */


body   { 
	background-color: black; 
	color: grey;
}
  .header {
                display: flex;
                max-width: 100%;
                height: auto;
                display: block;          
          }


  .logo   {
           width: 100%;
           height: auto;
          }

  .box   {
          margin: 0 auto;
          display: -webkit-flex;
          display: flex;
          display: -webkit-justify-content: center;
          display: justify-content: center;
          max-width: fit-content;
          background-color: grey;
          opacity: 0.7; /* 70% transparent */
         }

  .boxtext1  {
        text-align: center;
              }

          h4 {
             font-family: 'Arial', sans-serif;
             font-size: 12px;
             color: #f0f0f0;
              }






nav {
    background-color: #221e1f; /* Dunkler Hintergrund */
}

nav ul {
    list-style-type: none; /* Keine Aufzählungszeichen */
    margin: 0;             /* Kein Außenabstand */
    padding: 0;            /* Kein Innenabstand */
    display: flex;         /* Flexbox für horizontale Anordnung */
}

nav li {
    margin-right: 20px; /* Abstand zwischen den Links */
}

nav a {
    color: white;           /* Weiße Schriftfarbe */
    text-decoration: none;  /* Unterstreichung entfernen */
    padding: 14px 20px;     /* Innenabstand für Links */
    display: block;         /* Block-Display für bessere Klickfläche */
}

nav a:hover {
    background-color: #575757; /* Hintergrundfarbe beim Hover */
}
   
 .startbild 
             {
               max-width: 100%;
               height: auto;             
             }

  .zoom-hover 
            {
              transition: transform 0.9s ease; /* Macht den Übergang weich */
              cursor: pointer;
             }

  .zoom-hover:hover 
            {
             transform: scale(4.5); /* Vergrößert das Bild auf das 4,5-fache */
             position: relative;
             z-index: 100; /* Sorgt dafür, dass das Bild über anderen Elementen liegt */
            }

    .spacer 
             {
               height: 250px;
               width: 100%;
             }

     video {
             height: 250px;
             display: flex;
             justify-content: center;
             align-items: center;
           }

   .footer 
              { 
                display: flex;
                position: fixed;
                bottom: 0;
                max-width: 100%;
                height: auto;
                display: block; 
                background-color: #5c5e5d;
margin: 0 auto;
               }