body {
    background-image: url('christmaskugel.jpg');
    background-size: cover; /* oder contain */
    background-position: above; /* zentriert das Bild */
    background-repeat: no-repeat; /* verhindert die Wiederholung des Bildes */
	max-width: 100%;
	} 
flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
/* The navigation bar */
.navbar {
 
  background-color: transparent;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #00bfff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background:gold;
  color: black;
}

.submit{
	border: 3px solid;
	border-style: ridge;
	border-color: navy;
background-color: goldenRod;}


/* Main content */
.main {
  margin-top: 100px; /* Add a top margin to avoid content overlay */
}

a:link, a:visited {
	  background-color: goldenRod;
	  color: white;
	  padding: 14px 25px;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	}

	a:hover, a:active {
	  background-color: yellow;
	}

h2 {
  color: navy;
}
.wl {
	max-width: 100%;
}
.wishlist{
  color: navy;
  width: 300px;
  height: 100px;  
  padding: 50px;
  position: absolute;
  right: 50px;
  top: 300px;
  border: 2px solid red;
  border-color: goldenRod;
  background-color: gold;
}
.container {
    width: 100%; /* oder eine feste Breite */
}
.anrede{
  color: navy;
  width: 300px; 
  margin: 0 auto;
  height: 100px;  
  padding: 50px;
  position: absolute;
  border-color: goldenRod;
  background-color: transparent;
}	
.h4{
text-decoration: underline;
}

.log{
  color: navy;
  width: 300px;
  height: 100px;  
  padding: 50px;
  position: absolute;
  right: 50px;
  top: 150px;
  border: 2px solid red;
  border-color: goldenRod;
  background-color: gold;}
  .leer{
	  color: navy;
  width: 200px;
  height: 50px;  
  padding: 10px;
  position: absolute;
  right: 500px;
  top: 250px;
  border: 2px solid;
  border-color: goldenRod;
  background-color: transparent;}
  .voll{
		  color: navy;
  width: 200px;
  height: 50px;  
  padding: 10px;
  position: absolute;
  right: 500px;
  top: 350px;
  border: 2px solid;
  border-color: goldenRod;
  background-color: gold;}  
  
 .pseu   {
	color: navy;
  width: 400px;
  height: 400px;  
  padding: 50px;
  position: absolute;
  right: 50px;
  top: 50px;
  border: 2px solid red;
  border-color: transparent;
 background-color: transparent;} 
 
 .listen{
  color: navy;
  width: 250px;
  height: 400px;  
  padding: 50px;
  position: absolute;
  right: 150px;
  top: 100px;
  border: 2px solid red;
  border-color: goldenRod;
  background-color: gold;
}
.verb a{
  color: navy;
  width: 300px;
  height: 20px;  
  padding: 3px;
  position: absolute;
  right: 70px;
  top: 0px;
  border: 2px solid red;
  border-color: gold;
  background-color: blue;
}
.sonst {
    /* Positionierung auf der linken Seite */
    float: left; /* Lässt das Element links floaten */
    /* oder */
    /* margin-right: auto;
    margin-left: 0; */ /* Zentriert das Element nicht, aber platziert es links, wenn eine Breite gesetzt ist */
    
    /* Optional: Abstand vom Seitenrand */
    margin-top: 20px;
    margin-left: 10px; 
    
    /* Optional: Begrenzung der Breite */
    /* width: 200px; */ 
}

.sonst a {
    /* Die Links (Buttons) sollen als Block-Elemente erscheinen,
       damit sie die gesamte verfügbare Breite einnehmen 
       und jeweils in einer neuen Zeile beginnen. */
    display: block;
    
    /* Optional: Style für Button-Optik */
    padding: 10px; /* Innenabstand */
    margin-bottom: 5px; /* Abstand zwischen den "Buttons" */
    background-color: #f0f0f0; /* Hintergrundfarbe */
    color: #333; /* Textfarbe */
    text-decoration: none; /* Unterstreichung entfernen */
    border: 1px solid #ccc; /* Rand */
    border-radius: 5px; /* Abgerundete Ecken */
    text-align: center; /* Text zentrieren */
}

.sonst br {
    /* Die <br><br> im HTML sind unnötig, wenn Sie das CSS
       mit margin-bottom: 5px; bei den a-Tags verwenden.
       Sie könnten diese im CSS verstecken, falls Sie das HTML
       nicht ändern können. */
    display: none;
}
  .light {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px 5px currentColor; /* Erzeugt den Leuchteffekt */
    transition: background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

/* Beispiel für Farben und Positionierung */
.light.red {
    background-color: red;
    top: 20%;
    left: 45%;
}
.light.blue {
    background-color: blue;
    top: 30%;
    left: 55%;
}
.light.green {
    background-color: green;
    top: 40%;
    left: 38%;
}
/* Füge weitere Positionen hinzu */

body {
    margin: 0; /* Entfernt den Standard-Rand des Browsers */
    font-family: Arial, sans-serif;
}

header {
    /* Wichtig: Nutzt Flexbox, um Elemente auszurichten */
    display: flex;
    justify-content: flex-end; /* Schiebt Inhalte nach rechts */
    align-items: center; /* Zentriert Inhalte vertikal */
    padding: 10px 20px; /* Innenabstand oben/unten und links/rechts */
    background-color: #333; /* Dunkler Hintergrund für den Header */
    color: white;
}

.logout-button {
    /* Styling für den Link/Button */
    position: relative; /* Wichtig für z-index */
    z-index: 9999;     /* Stellt sicher, dass er über allen liegt */
}
    padding: 8px 15px;
    background-color: #dc3545; /* Rote Farbe für den Logout-Button */
    color: white;
    text-decoration: none; /* Entfernt die Unterstreichung beim Link */
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.logout-button:hover {
    background-color: #c82333; /* Dunkleres Rot beim Hover */
}