header {
	color: #FFFFFF;
	text-align: center;
	background-color:#222625;
	
}

nav {
  color: #FFFFFF;
  text-align: center;
  font-family: Sans-serif,	Arial;
  background-color: #222625;
}

footer {
  color: #666363;
  background-color: #222625
}

html {
  background-color: #222625;
  color: #FFFFFF;
}

/* Der Hauptbalken - Deine dunkle Farbe */
.topnav {
  background-color: #222625 !important;
  overflow: hidden;
}

/* Links links ausrichten */
.nav-left {
  display: flex;
  height: 100%;
}

.nav-left a {
  color: #f2f2f2;
  text-align: center;
  padding: 0 16px;
  text-decoration: none;
  font-size: 17px;
  display: flex;
  align-items: center; /* Text im Link mittig */
  height: 55px;
}

.nav-left a:hover {
  background-color: #ddd;
  color: black;
}

.nav-left a.active {
  background-color: #2d4c58;
  color: white;
}

/* Profil rechts ausrichten */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.u-name {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

/* DAS RUNDE BILD MIT BLAUEM RAND */
.u-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid #4285F4; /* DEIN BLAUER RAND */
  object-fit: cover;
  background: #333; /* Falls das Bild lädt */
}

.u-logout {
  color: #ff4d4d !important;
  font-size: 12px;
  text-decoration: none;
}

.u-logout:hover {
  text-decoration: underline;
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a.active {
  background-color: #2d4c58;
  color: white;
}

.topnav a:hover {
background-color: #747474;
transition: 0.8s;
}

/* Das schiebt nur das Profil nach rechts */
.user-profile-right {
    float: right;            /* Das Bild wandert nach rechts */
    display: flex;           /* Name, Bild und Logout bleiben in einer Zeile */
    align-items: center;     /* Alles auf eine Höhe bringen */
    height: 48px;            /* Höhe deines schwarzen Balkens */
    padding-right: 15px;     /* Kleiner Abstand zum Rand */
    gap: 10px;               /* Abstand zwischen Name und Bild */
}

.u-avatar:hover {
	scale:1.1
  }

  .topnav a.active:hover {
background-color: #2d4c58;
transition: 0.8s;
}