/* Standard: WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px; /* Dünn */
  border-radius: 10px; /* Abgerundet */
}

::-webkit-scrollbar-track {
  background: transparent; /* Hintergrund der Scrollbar */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #555; /* Farbe des Scrollbalkens */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #777; /* Heller beim Hover */
}

/* Firefox */
html {
  scrollbar-width: thin; /* Dünne Scrollbar */
  scrollbar-color: #555 transparent; /* Balkenfarbe & Hintergrund */
}



* {
			box-sizing: border-box;
		}
        body { 
			background-color: #0F0F0F;
            background-size: cover; /* This ensures the image covers the whole screen */
			background-position: center; /* Centers the image */
			background-repeat: no-repeat; /* Prevents the image from repeating */
			background-attachment:fixed;
            color: #ECECEC; 
            font-family: 'Merriweather', serif;
            text-align: center; 
            margin: 0; 
            overflow-y: auto; 
            display: flex; 
            flex-direction: column; 
            min-height: 100vh; 
            overflow-x: hidden;
			width: 100%;
			height: 100vh;
			font-size: 1.2rem;
        }
		.bg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover; /* This ensures the image covers the whole screen */
			background-position: center; /* Centers the image */
			background-repeat: no-repeat; /* Prevents the image from repeating */
			pointer-events: none;
			z-index:1;
			  
			}
			#bg-red {
			  background-image: url('BackgroundStapler.webp');
			  z-index: 2;
			}
			#bg-blue {
			  background-image: url('BackgroundKamera.webp');
			  z-index: 3;
			  opacity: 0;
			  transition: opacity 0.1s ease-out;
			}
		
		
		
        .header { 
            position: relative; 
            top: 5vh; 
            width: 100%; 
            text-align: center; 
            font-size: 1.4rem; 
			height: 25vh;
			z-index:4;
        }
        .logo { 
            width: 5vw; 
            height: auto; 
			min-width: 80px; 
        }
        /* Den Container als Spalten-Container zentrieren */
        .container { 
            padding: 20px; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            margin-top: 5vh; 
        }
        
        .grid { 
            display: flex; 
            gap: 15vw; 
            justify-content: center; 
            flex-wrap: wrap; 
            max-width: 90%;
			z-index:6
        }
        .card { 
            
            border-radius: 15px; 
            position: relative; 
            min-width: 250px; 
            max-width: 15vw; 
			min-height: 200px;
            height: 20vh; 
            text-align: center; 
            display: flex; 
            align-items: center; 
            flex-direction: column; 
            justify-content: center; 
            box-shadow: 0 0 20px rgba(0,0,0,0.5); 
			border: 3px outset #000; /* 3px border, solid black color */
            cursor: pointer; 
            z-index: 60; 
			padding: 20px; 
        }
        .card:hover { 
            transform: scale(1.05); 
        }
        .banner { 
			width: calc(600px + 10vw);
            border-radius: 15px; 
            padding: 20px; 
            display: inline-block; 
            margin-top: 10vh; 
			max-width: 100vw;
			z-index: 55;
        }
        .banner h2 { 
            margin: 0 0 10px; 
        }
        .banner p { 
            margin: 0; 
        }
		.button { 		
            border-radius: 10px; 
            box-shadow: 0 0 10px rgba(0,0,0,0.5); 
            padding-left: 20px;
			padding-right: 20px;			
            display: inline-block; 
            margin-top: 10px; 
			max-width: 100vw;
			z-index: 55;
			cursor: pointer;
			border: 3px outset #000; /* 3px border, solid black color */
        }
		.button h2 { 
            margin: 0 0 1px; 
        }
		.button:hover { 
            transform: scale(1.05); 
        }
        .hover-images img { 
            position: absolute; 
            width: 12vw; 
            height: auto; 
            border-radius: 50%; 
            opacity: 0; 
            transition: opacity 0.8s ease-in-out; 
            pointer-events: none; 
            z-index:100; 
			box-shadow: 0 0 10px rgba(80,80,80,0.5); 
        }
		.hover-images { 
            
            z-index:100; 
			
        }
        .footer { 
			z-index:4;
            margin-top: auto; 
            text-align: center; 
            padding: 5px; 
            background: #333; 
            color: white; 
            width: 100%; 
			text-decoration: none;
			font-size:1rem;
        }
		.footer a{
		text-decoration: none;
		}
        .about { 
            margin-top: 10vh; 
            text-align: center; 
            z-index: 55;
			max-width: 80vw;
        }
		.about a {
			color: #ECECEC;
		
		}
		.about a:hover {
			color: #1E90FF; 
		}
		.about a:active {
		  color: #1E90FF;          /* Ändert die Textfarbe */
		}
		a:focus {
		  color: #1E90FF;          
		}
        .about img { 
			min-width: 150px; 
            width: 8vw; 
            height: auto;; 
            border-radius: 50%; 
            margin-bottom: 10px; 
        }
		#hoverDiv {
		  position: relative;    /* Damit es sich im Container einfügt */
		  z-index: 5;
		  width: 3vw;
		  height: auto;
		  border-radius: 10px;
		  cursor: pointer;
		  margin-top: 10vh;       /* Abstand zum Button (anpassbar) */
		  /* Animation: Vertikale Bewegung mittels translateY */
		  animation: hoverUpDown 2s ease-in-out infinite;
		  transition: transform 0.2s ease-out;
		}
		
		#hoverDiv img{
		    width: 100%;
			height: auto;
		    
		}
		/* Keyframes definieren den vertikalen Bewegungsablauf */
			@keyframes hoverUpDown {
			  0%   { bottom: 20px; }
			  50%  { bottom: 0px; }
			  100% { bottom: 20px; }
			}
			
			/* Beim Hover soll die Animation pausiert werden und das Div am unteren Rand bleiben */
			#hoverDiv:hover {
				animation-play-state: paused;
				//transform: translateY(20px);
			}
			#hoverDiv:hover img{
				transform: translateY(20px);
			}
		@media (min-width: 2500px) { /* 4K-Auflösung */
			  body {
				font-size: 2.5rem;
			  }
			  .header { 
				
				font-size: 3rem; 
				
				}
				.footer { 
				
				font-size: 2rem; 
				
				}
				.card { 
					width: 18vw; 
					max-width: 18vw; 
					height: 25vh; 
				}
			}
		@media (max-width: 844px) {
            body { 
				background-image: url('Background.jpg');
			}
			.banner { 
			width: 80vw;
			max-width: 300px;
            padding: 10px; 
            margin-top: 50px; 
			}
			.grid { 
                flex-direction: column; 
                align-items: center; 
				gap: 10vw; 
            }
            .card { 
                width: 90vw; 
                height: 150px; 
            }
			.bg {
			  display: none;
			}
			#hoverDiv {
			  width: 50px;
			  height: auto;
			}
			.hover-images img { 
				display: none;
			}
			
        }
		
 @keyframes floating {
            from { transform: translateY(-5px); }
            to { transform: translateY(5px); }
        }