/* Logo NAV */
	#welogonav {
		opacity: 0; /* Standardmäßig unsichtbar */
		transition: opacity 1.0s ease-in, opacity 0.2s ease-out; /* Unterschiedliche Zeiten für Ein- und Ausblenden */
		position: absolute; /* Absolute Positionierung innerhalb des Containers */
		top: 0; /* Ganz oben im Container */
		left: 0; /* Ganz links im Container */
		max-height: 100%; /* Höhe des Bildes maximal 100% des Containers */
	}

/* Cookie Banner */
	#cookie-banner {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(0, 0, 0, 0.8);
		color: white;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		display: none; /* Standardmäßig ausgeblendet */
		z-index: 1000;
		max-width: 90%;
		text-align: center;
	}

	#cookie-banner h2 {
		margin: 0 0 10px;
		padding: 0;
	}

	#cookie-banner p {
		margin: 0 0 10px;
		padding: 0;
	}

	#cookie-banner a {
		color: #1E90FF;
		text-decoration: underline;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
	}

	#cookie-banner button {
		background-color: #1E90FF;
		color: white;
		border: none;
		padding: 10px 20px;
		cursor: pointer;
		border-radius: 5px;
		width: 48%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	#cookie-banner button:hover {
		background-color: #104E8B;
	}

/* Tooltip */
	/* Tooltip-Stil */
	.tooltip {
		display: none;
		position: absolute;
		background-color: #333; /* Hintergrundfarbe */
		color: white;
		padding: 10px 15px;
		font-size: 18px;
		border-radius: 8px;
		max-width: 80%; /* Maximale Breite */
		width: auto; /* Breite dynamisch basierend auf Inhalt */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
		z-index: 1000;
		opacity: 0;
		transition: opacity 1s ease, visibility 0s linear 1s; /* Langsame Ein- und Ausblendung */
	}

	/* Tooltip anzeigen beim Hover über li */
	.tooltip-trigger:hover .tooltip {
		display: block;
		opacity: 1;
		transition: opacity 1s ease; /* Langsame Einblendung */
	}

	/* Sicherstellen, dass der li-Tag relativ positioniert ist, damit der Tooltip richtig platziert wird */
	.tooltip-trigger {
		position: relative;
	}

	/* Tooltip-Positionierung: Oben 50px über dem Text und horizontal zentriert */
	.tooltip-trigger .tooltip {
		bottom: 100%; /* 100% des li-Elements - Tooltip erscheint über dem Text */
		left: 50%; /* Horizontal zentrieren */
		transform: translateX(-50%); /* Um die Breite des Tooltips auszugleichen */
		margin-bottom: 10px; /* Abstand nach oben - Tooltip erscheint 50px über dem Text */
	}

/* Pic Referenz Background Info Hover*/
	.hover-section .col-4 {
	  position: relative; /* Basis für absolut positionierte Elemente */
	  overflow: hidden; /* Verhindert Überschneidungen */
	}

	.hover-section .col-4 img {
		  pointer-events: none; /* Deine Regel wird durchgesetzt */
	  display: block; /* Verhindert Lücken durch Inline-Elemente */
	  width: 100%; /* Stellt sicher, dass das Bild die volle Breite des Containers einnimmt */
	  height: auto; /* Beibehaltung des Seitenverhältnisses */
	  transition: opacity 0.3s ease; /* Sanfter Übergang */
	}

	.hover-section .col-4 .hover-text {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%; /* Exakte Breite des Containers */
	  height: 100%; /* Exakte Höhe des Containers */
	  background-color: rgba(128, 128, 128, 0.9); /* Grauer Hintergrund */
	  color: white; /* Textfarbe */
	  display: flex; /* Zentrierung */
	  justify-content: center; /* Horizontale Zentrierung */
	  align-items: center; /* Vertikale Zentrierung */
	  text-align: center; /* Text bleibt auch bei mehreren Zeilen zentriert */
	  opacity: 0; /* Unsichtbar bis Hover */
	  transition: opacity 0.3s ease; /* Sanfter Übergang */
	  font-size: clamp(8px, 2vw, 22px); /* Dynamisch skalierende Schriftgröße */
	  line-height: 1.5; /* Angenehmer Zeilenabstand */
	  padding: 10px; /* Bessere Lesbarkeit */
	  box-sizing: border-box; /* Padding wird innerhalb der Dimensionen berücksichtigt */
	  border-radius: 10px; /* Abgerundete Ecken */
	}

	.hover-section .col-4:hover img {
	  opacity: 0; /* Bild wird bei Hover ausgeblendet */
	}

	.hover-section .col-4:hover .hover-text {
	  opacity: 1; /* Text wird bei Hover eingeblendet */
	}

	/* Ergänzungen zur Vermeidung von Flackern */
	.hover-section .col-4 .hover-text {
	  pointer-events: none; /* Hover-Text ignoriert Mausereignisse */
	}

	.hover-section .col-4:hover img {
	  pointer-events: none; /* Bild ignoriert Mausereignisse, um Konflikte zu vermeiden */
	}