/* Allgemeine Elemente */
body {
    margin: 0;
    font-family: Tahoma, sans-serif;
    background-color: #000;
    color: #ccc;
  }
  
  a {
    color: #00ccff;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* Blinken */
  .blinken {
    animation: blinken 1s steps(2, start) infinite;
    color: #ff0000;
  }
  
  /* Container-Layout */
  .container {
    display: flex;
    min-height: 100vh;
  }
  
  /* Geld (hervorgehobene Preise oder Beträge) */
  .geld {
    color: #ffd700;
    font-weight: bold;
  }
  
  /* Gelber Text */
  .gelb {
    color: #ffd700;
    font-weight: bold;
  }
  
  /* Hauptinhalt */
  .content {
    flex: 1;
    padding: 2rem;
    box-sizing: border-box;
    text-align: center;
  }
  
  .content h1,
  .content h2 {
    color: #00ff99;
  }
  
  /* Letzte Aktualisierung */
  .last-update {
    font-size: 0.9em;
    color: #888;
    text-align: right;
    margin-top: -1.5em;
    margin-bottom: 2em;
  }
  
  /* Logo */
  .logo img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 10px #00ff99);
    margin-bottom: 2rem;
  }
  
  /* Schatten-Effekt */
  .schatten {
    text-shadow: 0 0 5px #00ff99, 0 0 10px #00ff99;
    color: #00ff99;
  }
  
  /* Seitenleiste (linkes Menü) */
  .sidebar {
    width: 15%;
    background-color: #000;
    padding: 1rem;
    box-sizing: border-box;
    border-right: 1px solid #333;
  }
  
  .sidebar h3 {
    color: #ffd700;
    font-size: 1.2em;
    margin-bottom: 1em;
  }
  
  .sidebar li {
    margin: 0;
    padding: 0.1em 0;
    line-height: 1.2em;
  }
  
  .sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  /* Trennlinie im Menü */
  .trennlinie {
    height: 0.8em;
    line-height: 0;
    margin: 0;
    padding: 0;
  }
  
  /* Blink-Animation */
  @keyframes blinken {
    to {
      visibility: hidden;
    }
  }

  .logo img[src*="blarks_de.png"] {
    filter: none !important;
  }

  .no-shadow {
    filter: none !important;
  }

  .glow {
    filter: drop-shadow(0 0 10px #00ff99);
  }

  #system-info {
    font-size: 0.9em;
  }
  

  #system-info { font-size: 0.9em; }

/* === Avatar: Ring + Bild sauber zentriert === */
.avatar-ring {
  position: relative;
  width: 320px;          /* Avatar-Durchmesser */
  aspect-ratio: 1;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nur der RING im ::before (Bild bleibt sichtbar) */
.avatar-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 8px; /* Ringbreite */
  background: conic-gradient(#ffd54a, #ff7a00, #ff2d00, #ffd54a);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  /* Wenn du Rotation willst, auskommentieren: */
  animation: spin 12s linear infinite;
}

.avatar-ring img {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  transition: transform .3s ease, box-shadow .3s ease;
}

.avatar-ring img:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* === Rock-Titel (Blockschrift) === */
.rock-title {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 20px 0;
  color: #ffcc00;
  text-shadow:
    0 0 5px #ffcc00,
    0 0 10px #ff9900,
    0 0 20px #ff6600,
    0 0 40px #ff3300,
    0 0 80px #ff0000;
  animation: glowTitle 2s ease-in-out infinite;
}

/* Puls für .rock-title (inkl. leichtem Scale) */
@keyframes glowTitle {
  0%, 100% {
    text-shadow:
      0 0 5px #ffcc00,
      0 0 10px #ff9900,
      0 0 20px #ff6600,
      0 0 40px #ff3300,
      0 0 80px #ff0000;
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 10px #ffee33,
      0 0 20px #ffbb33,
      0 0 40px #ff7733,
      0 0 80px #ff3333,
      0 0 120px #ff0000;
    transform: scale(1.05);
  }
}

/* === Gebogener SVG-Text (Glow ohne Scale) === */
.curved-title text {
  text-shadow:
    0 0 5px #ffcc00,
    0 0 10px #ff9900,
    0 0 20px #ff6600,
    0 0 40px #ff3300,
    0 0 80px #ff0000;
  animation: glowText 2s ease-in-out infinite;
}

@keyframes glowText {
  0%, 100% {
    text-shadow:
      0 0 5px #ffcc00,
      0 0 10px #ff9900,
      0 0 20px #ff6600,
      0 0 40px #ff3300,
      0 0 80px #ff0000;
  }
  50% {
    text-shadow:
      0 0 10px #ffee33,
      0 0 20px #ffbb33,
      0 0 40px #ff7733,
      0 0 80px #ff3333,
      0 0 120px #ff0000;
  }
}

.hero{
  width: 400px;          /* passt zur viewBox-Breite oben */
  margin: 0 auto 40px;
  text-align: center;
}

.curved-title{
  display:block;
  width:400px;           /* gleich wie hero */
  height:120px;          /* sichtbarer Bereich für den Bogen */
  margin:0 auto -18px;   /* leicht über den Kreis ziehen */
}