.status-overview {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    .status-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5em;
      justify-content: center;
    }
    .status-card {
      flex: 1 1 140px;
      max-width: 200px;
      min-width: 200px;
      border-radius: 14px;
      box-shadow: 0 2px 10px #0004;
      padding: 0.8em 0.5em 0.7em 0.5em;
      margin-bottom: 0.7em;
      text-align: center;
      color: #fff;
      position: relative;
      z-index: 1;
      overflow: hidden;
      font-size: 0.98em;
      transition: transform 0.18s cubic-bezier(.4,2,.3,1), box-shadow 0.18s;
      box-shadow: 0 2px 16px #0004;
    }
    .status-card::before {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border-radius: 20px;
      padding: 0;
      /* Dunklere, gedecktere Farben */
      background: linear-gradient(120deg, #176d68, #6d5c1e, #7a2e2e, #4b2e7a, #176d68 90%);
      background-size: 300% 300%;
      animation: border-rainbow 4s linear infinite;
      /* Weniger Blur, weniger Helligkeit */
      filter: blur(10px) brightness(2);
    }
    @keyframes card-fadein {
      to { opacity: 1; }
    }
    @keyframes border-rainbow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    /* Optional: Card-Hintergrund bleibt dunkel */
    .status-card {
      background: linear-gradient(135deg, #232323 60%, #232323 100%);
      box-shadow: 0 2px 16px #0004;
    }
    .status-card:hover {
      transform: translateY(-8px) scale(1.03) rotate(-1deg);
      box-shadow: 0 8px 32px #03dac666, 0 2px 16px #0004;
      z-index: 2;
    }
    .status-card.offline {
      background: linear-gradient(135deg, #232323 60%, #e53935 100%);
    }
    .status-card .status-icon {
      font-size: 2.5em;
    }
    .status-card .status-title {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 0.2em;
    }
    .status-card .status-address {
      font-size: 0.95em;
      color: #aaa;
      margin-bottom: 0.5em;
    }
    .status-card .status-state {
      margin-bottom: 0.3em;
      font-size: 1.5em;
      text-transform: uppercase;
    }
    .status-card .status-ping {
      font-size: 1.1em;
      font-weight: bold;
    }
    .status-card .status-latencybar {
      height: 8px;
      border-radius: 4px;
      margin: 0.5em 0 0.2em 0;
      background: #444;
      overflow: hidden;
    }
    .status-card .status-latencybar-inner {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s;
    }
    .status-card.online .status-latencybar-inner {
      background: linear-gradient(90deg, #03dac6, #00bfa5);
      /* Uppercase the Status */
    }
    .status-card.offline .status-latencybar-inner {
      background: #e53935;
    }
    @media (max-width: 900px) {
      .status-row { gap: 1em; }
      .status-card { min-width: 160px; max-width: 98vw; }
    }
    @media (max-width: 600px) {
      .status-row { flex-direction: column; align-items: center; }
      .status-card { width: 98vw; min-width: unset; }
    }
    .status-news {
      margin-top: 3em;
      margin-bottom: 2em;
    }

    .status-news h3 {
      margin-bottom: 1em;
      color: #03dac6;
      font-weight: bold;
      text-shadow:
        0 0 8px #03dac6,
        0 0 16px #03dac6,
        0 0 32px #03dac699,
        0 0 48px #03dac6cc;
      letter-spacing: 1px;
      font-family: 'Orbitron', 'Arial', sans-serif;
      /* Optional: Orbitron ist eine kostenlose Google-Font für Neon-Look */
      animation: neon-flicker 2.5s infinite alternate;
    }

    @keyframes neon-flicker {
      0%, 100% { opacity: 1; text-shadow:
        0 0 8px #03dac6,
        0 0 16px #03dac6,
        0 0 32px #03dac699,
        0 0 48px #03dac6cc;
      }
      90% { opacity: 0.85; text-shadow:
        0 0 2px #03dac6,
        0 0 8px #03dac6,
        0 0 16px #03dac699,
        0 0 24px #03dac6cc;
      }
      95% { opacity: 0.7; text-shadow:
        0 0 1px #03dac6,
        0 0 2px #03dac6,
        0 0 4px #03dac699,
        0 0 8px #03dac6cc;
      }
}

    @keyframes online-glow {
      0%   { box-shadow: 0 0 16px #03dac6cc, 0 2px 16px #0004; }
      50%  { box-shadow: 0 0 32px #03dac6cc, 0 2px 16px #0004; }
      100% { box-shadow: 0 0 16px #03dac6cc, 0 2px 16px #0004; }
    }
    .status-card.online {
      animation: online-glow 2.2s infinite;
    }

    .status-card:hover .status-icon {
      animation: icon-pop 0.4s;
    }
    @keyframes icon-pop {
      0%   { transform: scale(1);}
      30%  { transform: scale(1.25) rotate(-8deg);}
      60%  { transform: scale(0.95) rotate(4deg);}
      100% { transform: scale(1);}
    }

.hostsystem-card {
  border: 2px solid #03dac6;
  background: linear-gradient(135deg, #232323 60%, #176d68 100%);
  box-shadow: 0 2px 16px #03dac633, 0 2px 10px #0004;
  margin-left: auto;
  margin-right: auto;
  max-width: 340px;
  min-width: 120px;
  max-height: 180px;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 1em;
  position: relative;
}
.hostsystem-card .status-title {
  font-size: 1.2em;
}

/* Status News Cards */
.status-news-entry {
  background: #23272b;
  border-radius: 14px;
  box-shadow: 0 2px 16px #0003;
  margin-bottom: 1.5em;
  padding: 1.2em 1.5em 1em 1.5em;
  color: #fff;
  position: relative;
  border-left: 6px solid #03dac6;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.status-news-entry.info    { border-color: #03dac6; }
.status-news-entry.success { border-color: #43a047; }
.status-news-entry.warning { border-color: #ffc107; }
.status-news-entry.danger  { border-color: #e53935; }

.status-news-badge {
  display: inline-block;
  font-size: 1.3em;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 8px;
  margin-bottom: 0.5em;
  letter-spacing: 1px;
  background: #03dac6;
  color: #181818;
  text-transform: uppercase;
}
.status-news-entry.info    .status-news-badge { background: #03dac6; color: #181818; }
.status-news-entry.success .status-news-badge { background: #43a047; color: #fff; }
.status-news-entry.warning .status-news-badge { background: #ffc107; color: #181818; }
.status-news-entry.danger  .status-news-badge { background: #e53935; color: #fff; }

.status-news-title {
  font-size: 1.5em;
  font-family: 'Orbitron', Arial, sans-serif;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
  color: #fff;
  letter-spacing: 1px;
}
.status-news-servers {
  font-size: 1.2em;
  color: #03dac6;
  margin-bottom: 0.4em;
  margin-top: 0.2em;
  font-family: monospace;
  word-break: break-all;
}
.status-news-meta {
  font-size: 1.2em;
  color: #aaa;
  margin-bottom: 0.5em;
}
.status-news-text {
  font-size: 1.2em;
  margin-top: 0.3em;
  white-space: pre-line;
}

.btn.btn-warning {
  background: #ffc107;
  color: #181818;
  border: none;
  border-radius: 8px;
  padding: 0.5em 1.2em;
  font-size: 1.1em;
  box-shadow: 0 2px 8px #0002;
  transition: background 0.2s, box-shadow 0.2s;
}
.btn.btn-warning:hover {
  background: #ffb300;
  box-shadow: 0 4px 16px #ffc10744;
}

.archived-news {
  opacity: 0.85;
  filter: grayscale(0.15);
}