<!-- Avatar mit Statusanzeige -->
<link href="fonts.googleapis.com" rel="stylesheet">
 
<style>
:root {
  --gold-matt: #f0c36d; 
  --rot-matt: #ff4d4d;
  --grau-matt: #888888;
  --bg-dunkel: #0a0a0a;
}
 
.sidebarcontent .messageUser span img {
display:none;
}
 
.sidebarcontent {text-align: center !important;
}
     
    
.messageAvatar {
  position: relative;
  width: 260px;
  min-height: 520px;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
}
 
/* Der matte Rahmen */
.modern-frame {
  position: relative;
  width: 170px;
  height: 170px;
  background: var(--bg-dunkel);
  padding: 1px;
  border-radius: 42px;
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.4s ease;
  overflow: hidden;
}
 
.messageAvatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* BILD-POSITION: Schiebt den Ausschnitt nach unten */
  object-position: center 10%; 
  border-radius: 41px;
  filter: grayscale(0.2) contrast(1.1);
  transition: 0.5s ease;
}
 
/* Hover-Effekte */
.messageAvatar:hover .modern-frame { 
  transform: translateY(-5px); 
  border-color: var(--st-farbe); 
}
.messageAvatar:hover img { 
  filter: grayscale(0) brightness(1.05); 
  transform: scale(1.05); 
}
 
/* Info-Sektion */
.author-info {
  margin-top: 25px;
  text-align: center;
  width: 100%;
}
 
.status-anzeige {
  font: 800 11px 'JetBrains Mono', monospace;
  color: var(--st-farbe);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
 
.author-name-v38 {
  font: 900 34px 'Inter', sans-serif;
  color: #ffffff;
  line-height: 1.0;
  display: block;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}
 
.messageAvatar:hover .author-name-v38 {
  color: var(--st-farbe);
}
 
/* System-Daten Gitter (Deutsch) */
.system-grid-v38 {
  width: 230px;
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 10px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
 
.data-item { display: flex; flex-direction: column; }
.data-label { font: 800 8px 'JetBrains Mono', monospace; color: #555; text-transform: uppercase; }
.data-value { font: 700 11px 'Inter', sans-serif; color: #bbb; margin-top: 4px; }
 
/* Untere Signal-Leiste */
.signal-footer-v38 {
  margin-top: 30px;
  font: 700 10px 'Inter', sans-serif;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 15px;
  border-radius: 4px;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
 
.signal-footer-v38 b { color: var(--st-farbe); }
 
/* Status Configs */
.st-online { --st-farbe: var(--gold-matt); }
.st-offline { --st-farbe: var(--rot-matt); }
.st-gast { --st-farbe: var(--grau-matt); }
</style>
 
<script>
document.addEventListener('DOMContentLoaded', () => {
  {{message.startlist}}
  (function(id) {
    const wrap = document.querySelector(`#post${id} .messageAvatar`);
    if (!wrap) return;
 
    let sClass = 'st-offline', sAnzeige = 'OFFLINE';
    {{user_registered==true.start}}
      {{message:online==true.start}} sClass = 'st-online'; sAnzeige = 'ONLINE'; {{message:online==true.else}}
      sClass = 'st-offline'; sAnzeige = 'ABWESEND'; {{message:online==true.end}}
    {{user_registered==true.else}} sClass = 'st-gast'; sAnzeige = 'GAST'; {{user_registered==true.end}}
 
    wrap.className = `messageAvatar ${sClass}`;
    wrap.innerHTML = `
      <div class="modern-frame">${wrap.innerHTML}</div>
      
      <div class="author-info">
        <span class="status-anzeige">${sAnzeige}</span>
        <span class="author-name-v38">{{message:author_name}}</span>
      </div>
 
      <div class="system-grid-v38">
        <div class="data-item"><span class="data-label">Identität</span><span class="data-value">KNOTEN_${id}</span></div>
        <div class="data-item"><span class="data-label">Uplink</span><span class="data-value">12.01.2026</span></div>
        <div class="data-item"><span class="data-label">Sicherheit</span><span class="data-value">VERIFIZIERT</span></div>
        <div class="data-item"><span class="data-label">Latenz</span><span class="data-value">12ms</span></div>
        <div class="data-item"><span class="data-label">Protokoll</span><span class="data-value">AURUM_V38</span></div>
        <div class="data-item"><span class="data-label">Status</span><span class="data-value">AKTIV</span></div>
      </div>
      
      <div class="signal-footer-v38">VERSCHLÜSSELTES SIGNAL // <b>AKTIV</b></div>
    `;
  })('{{message:pt}}');
  {{message.end}}
});
</script>