* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}


body, html {
 height: 100%;
 width: 100%;
}


.background { 
 background-size: cover; 
 background-position: center; 
 position: relative; 
}

.button-container {
 position: absolute;
 top: 20px;
 right: 20px;
 background-color: rgba(0, 0, 0, 0.5);
 border-radius: 10px;
 padding: 20px;
 
}

.homeb {
 position: absolute;
 top: 85%;
 left: 2%;
 background-color: black;
 border-radius: 10px;
 padding: 5%;

}

.homeb {
  appearance: button;
  background-color: #1899D6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: din-round,sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 20px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 8px 16px;
  text-align: center;
  text-transform: uppercase;
  touch-action: manipulation;
  transform: translateZ(0);
  transition: filter .2s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 15%;
}

.homeb:after {
  background-clip: padding-box;
  background-color: #1CB0F6;
  border: solid transparent;
  border-radius: 16px;
  border-width: 0 0 4px;
  bottom: -4px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.homeb,
.homeb:focus {
  user-select: auto;
}

.homeb:hover:not(:disabled) {
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
}

.homeb:disabled {
  cursor: auto;
}

.homeb:active {
  border-width: 4px 0 0;
  background: none;
}

.button {
 background-color: rgba(255, 255, 255, 0.7);
 border: none;
 border-radius: 5px;
 padding: 10px 15px;
 margin: 5px;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s;
}

.button:hover {
 background-color: rgba(255, 255, 255, 1);
}

.buttonFuture, .buttonEnd, .buttonPerma {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 20px 13px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.buttonFuture:after {
  content: "";
  background-color: #0cc2ff;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}

.buttonEnd:after {
 content: "";
 background-color: #a929c6;
 width: 100%;
 z-index: -1;
 position: absolute;
 height: 100%;
 top: 7px;
 left: 7px;
 transition: 0.2s;
}

.buttonPerma:after {
 content: "";
 background-color: #18d428;
 width: 100%;
 z-index: -1;
 position: absolute;
 height: 100%;
 top: 7px;
 left: 7px;
 transition: 0.2s;
}

.buttonFuture:hover:after, .buttonEnd:hover:after, .buttonPerma:hover:after {
  top: 0px;
  left: 0px;
}

@media (min-width: 768px) {
  .buttonFuture, .buttonEnd, .buttonPerma {
    padding: 13px 50px 13px;
  }
}

.Liste {
 position: absolute;
 top: 50%; /* Vertikale Mitte */
 left: 50%; /* Horizontale Mitte */
 transform: translate(-50%, -50%); /* Exakte Zentrierung */
 background-color: rgba(0, 0, 0, 0.6); /* Halbtransparenter dunkler Hintergrund */
 color: white; /* Textfarbe */
 padding: 20px; /* Innenabstand der Box */
 border-radius: 10px; /* Abgerundete Ecken */
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
 list-style: none; /* Entfernt Standard-Punkte der Liste */
}

.Liste ul {
 margin: 0; /* Entfernt Standard-Abstand */
 padding: 0; /* Entfernt Standard-Innenabstand */
 text-align: center; /* Zentriert den Text */
 font-size: 18px; /* Größere Schrift */
}