* {
  box-sizing: border-box;
  padding:0;
  margin:0;
  font-family: 'Roboto', sans-serif;
}
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #161d24;
	font-family: 'Roboto', sans-serif;
  /*background-image: url('img/skyline2.svg');*/
  overflow:auto;
}
body {
  background-image: url('../img/bgs/1.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}
#container{
	margin: 0;
	padding:0;
	
    overflow: auto;
	
	width:100%;
	height:100%;
}
#animation{
	margin: auto;
	width:100%;
	height:100%;
}
.preload img {
  display: none;
}
#login{
	position: absolute;
	top:10px;
	right:10px;
	color: white;
}
#login a{
	color: white;
	text-decoration:none;
	font-size:10px;
}
.wrapper {
  display: flex;
  height: 100%;
  transition: background 0.5s ease; 
}
.left, .right {
  flex-grow: 1;
  display: flex;
  z-index: 2;
}
.left {
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
  /*flex-direction: column;*/
}
.right {
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}
.middle {
  width: 256px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.middle img {
  max-width: 100%;
  max-height: 100%;
}
.menu-item {
  margin: 5px 0;
  color: white;
  border-radius: 5px;
}
.menu-item:hover, .button:hover {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.button {
  cursor: pointer;
}

/* Hinzugefügte und überarbeitete Regeln */
#logo {
  transition: opacity 0.2s; /* Überblendungseffekt auf 0.2 Sekunden gesetzt */
}
#nav {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  align-items: center;
  border-radius:15px;
}
footer {
  position: fixed; /* Fixed position, damit der Footer immer sichtbar ist */
  left: 0;
  bottom: 0; /* Unten am Bildschirmrand */
  width: 100%; /* Breite auf gesamte Bildschirmbreite setzen */
  height: 50px; /* Höhe des Footers */
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: 1000; /* Stellt sicher, dass der Footer über anderen Elementen liegt */
  display: flex;
  justify-content: center; /* Zentriert den Inhalt horizontal */
  align-items: center; /* Zentriert den Inhalt vertikal */
  color: white; /* Textfarbe */
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); /* Textschatten für bessere Lesbarkeit */
  padding: 10px 0; 
  color: white; 
}
.footer-container {
  display: flex; /* Aktiviert Flexbox für diesen Container */
  justify-content: center; /* Zentriert die Inhalte horizontal */
  align-items: center; /* Zentriert die Inhalte vertikal */
  gap: 10px; /* Fügt einen Abstand zwischen den Elementen hinzu */
  flex-wrap: wrap; /* Erlaubt das Umbruch der Elemente bei wenig Platz */
}

.footer-container a {
  color: white; /* Weißer Text für Links */
  text-decoration: none; /* Keine Unterstreichung für Links */
  padding: 0 5px; /* Abstand links und rechts von den Links */
}

.footer-container a:hover {
  text-decoration: underline; /* Fügt eine Unterstreichung beim Hover hinzu */
}

.footer-container span {
  padding: 0 5px; /* Abstand links und rechts vom Copyright-Text */
}

#cloud {
  background-image: url('../img/cloud.png');
  background-size: cover; /* Je nach Bedarf anpassen */
  width: 270px;
  height: 100px;
}
.menu-item {
  width: 270px;
  height: 100px;

}

#pas {
  background-image: url('../img/pas.png');
  background-size: cover; 

}

#stream {
  background-image: url('../img/stream.png');
  background-size: cover; 

}

#mail {
  background-image: url('../img/mail.png');
  background-size: cover; 

}

#docs {
  background-image: url('../img/nav/docs.png');
  background-size: cover; 

}

#admin {
  background-image: url('../img/admin.png');
  background-size: cover; 

}

#status {
  background-image: url('../img/status.png');
  background-size: cover; 
}

#monitor {
  background-image: url('../img/monitor.png');
  background-size: cover; 
}
#logo{
	background-image: url('../img/logo/ilk.png');
	background-size: cover;
	min-width:50px;
	width:256px;
	max-width:256px;
	min-height:50px;
	height:256px;
	max-height:256px;
}
#hoverlogo{
	background-size: cover;
	min-width:50px;
	width:256px;
	max-width:256px;
	min-height:50px;
	height:256px;
	max-height:256px;
	opacity: 0;
	transition: opacity 2s ease; 
}
#online {
	width:270px;
	height:100px;
	background-image: url('../img/online.png');
	background-size: cover; 
}
#uhrzeit{
	color:white;
	font-size: 3em;
	position:absolute;
	right:20px;
	bottom: 200px;
}
.hovercloud{
	background-image: url('../img/logo/cloud.png');
	transition: opacity 0.5s ease;
}
.hoverpas{
	background-image: url('../img/logo/pas.png');
	transition: opacity 0.5s ease;
}
.hoverstream{
	background-image: url('../img/logo/stream.png');
	transition: opacity 0.5s ease;
}
.hovermail{
	background-image: url('../img/logo/logo2.png');
	transition: opacity 0.5s ease;
}
.hoveradmin{
	background-image: url('../img/logo/logo2.png');
	transition: opacity 0.5s ease;
}
.hoverstatus{
	background-image: url('../img/logo/logo2.png');
	transition: opacity 0.5s ease;
}
.hovermonitor{
	background-image: url('../img/logo/logo2.png');
	transition: opacity 0.5s ease;
}
#overbg{
	display:block;
	transition: opacity 1s ease;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
.bg-cloud{
	background-image: url('https://cloud.ilk.online/apps/theming/image/background?v=27');
	background-size: cover;
	opacity: 1;
}
.bg-pas{
	background-image: url('../img/bgs/pas.jpg');
	background-size: cover;
	opacity: 1;
}
.bg-stream{
	background-image: url('../img/bgs/stream.jpg');
	background-size: cover;
	opacity: 1;
}
.bg-mail{
	background-image: url('../img/bgs/mail.webp');
	background-size: cover;
	background-position: center bottom;
	opacity: 1;
}
.bg-admin{
	background-image: url('../img/bgs/admin5.webp');
	background-size: cover;
	opacity: 1;
}
.bg-status{
	background-image: url('../img/bgs/status.jpg');
	background-size: cover;
	opacity: 1;
}
.bg-monitor{
	background-image: url('../img/bgs/monitor.jpg');
	background-size: cover;
	opacity: 1;
}
#footer{
	height:100px;
	position:absolute;
	z-index:0;
	Bottom:100px;
	width:800px;
	right:20px;
}