<!-- Wer ist online - In der Forum Übersicht -->
<style>
  .user_online {
    --Größe_Avatar: 40px; /* 20px bis 100px */
    --Schriftgröße: 15px; /* 12px bis 20px */
  }
  .user_online {display:inline-block; background: #ffffff; color: #000000; font-weight: bold; border-radius: 5px; overflow:auto; height: calc(var(--Größe_Avatar) + 32px); padding-top:2px; max-width: 1000px; margin-bottom:10px; z-index: 999999;}
  .user_online span {font: bold calc(var(--Schriftgröße) * 1.2) Arial; background-color: #bbbbbb; display:inline-flex; align-items: center; line-height: calc(var(--Größe_Avatar) + 20px); margin: 5px 9px 5px 7px; padding: 0 5px; border-right:1px solid #aaaaaa; border-radius: 5px 0 0 5px; white-space: nowrap;}
  .user_online a {font: bold var(--Schriftgröße) Arial; display: inline-flex; align-items: center; white-space: nowrap; margin:10px 10px 10px 5px; padding: 5px; transition: all 0.3s ease-in-out; box-shadow: 2px 2px 4px 0px #333333; border-radius: 3px;}
  .user_online a:hover {background-color: #dddddd; box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4) !important; transform: scale(1.05);}
  .user_online a img {height: var(--Größe_Avatar); margin-left:5px;}
 
  /* Größe Avatar mobil */
  @media (max-width: 900px){
  .user_online {max-height: calc((var(--Größe_Avatar) / 2.0) + 35px);}
  .user_online span {line-height: calc((var(--Größe_Avatar) / 2.0) + 0px); padding-top:10px; padding-bottom:10px;}
  .user_online a img {height: calc(var(--Größe_Avatar) / 2.0); margin-left:5px;}
  .user_online a {margin: 5px !important; }
  }
</style>
 
{{useronline==true.start}}
  <div class="user_online">
    <span>Wer ist online:</span>	
    {{useronline.startlist}}
      <a href="{{useronline:link}}" style="text-decoration: none !important;">{{useronline:name}} <img src="{{useronline:avatar==true.start}}{{useronline:avatar}}{{useronline:avatar==true.else}}//files.homepagemodules.de/b2001010/a_551.png{{useronline:avatar==true.end}}"></a>
    {{useronline.end}}
  </div>
{{useronline==true.end}}