.server-overview {
  position: absolute;
  z-index: 7;
  top: clamp(118px, 14vh, 180px);
  left: clamp(18px, 2vw, 42px);
  display: grid;
  width: clamp(330px, 23vw, 450px);
  gap: 8px;
}

/* Die Schildgrafik der Navigation ohne ihren Grasblockbereich. */
.server-card {
  position: relative;
  min-width: 0;
  align-self: start;
  padding: 0;
  border: solid transparent;
  border-width: 26px 34px 15px 0;
  border-image-source: url("../images/ui/navbar.png");
  border-image-slice: 34 45 18 100 fill;
  border-image-width: 26px 34px 15px 0;
  border-image-repeat: stretch;
  background: transparent;
  filter: drop-shadow(0 4px 1px #130a06) drop-shadow(0 9px 11px rgba(0,0,0,.42));
}

/* Das rechte Metall-Endstück gespiegelt als linker Abschluss:
   beide Seiten behalten die Nieten aus derselben Originalgrafik. */
.server-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -26px;
  bottom: -15px;
  left: 0;
  box-sizing: border-box;
  width: 34px;
  border: solid transparent;
  border-width: 26px 34px 15px 0;
  border-image-source: url("../images/ui/navbar.png");
  border-image-slice: 34 45 18 100 fill;
  border-image-width: 26px 34px 15px 0;
  border-image-repeat: stretch;
  pointer-events: none;
  transform: scaleX(-1);
}

/* Nur den fest in der Vorlage stehenden Nav-Text überdecken. */
.server-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #665449, #635147 34%, #493e38 52%, #453a34);
}

.server-card__inner {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-left: 34px;
  padding: 6px 7px 7px;
  border: 1px solid rgba(180, 132, 83, .56);
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent 45%, rgba(16,10,7,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 -1px rgba(23,14,9,.65);
}

.server-card h2 {
  margin: 0;
  color: #fff6e8;
  font-size: .97rem;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 2px #15100e, 1px 1px 0 #15100e;
}

.server-card__address {
  display: grid;
  gap: 1px;
  margin: 5px 0 7px;
  color: #f1e8df;
  font-size: .875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 2px #15100e;
}

.server-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(216, 168, 110, .48);
}

.server-card__state,
.server-card__slots {
  margin: 0;
  color: #f6eee5;
  font-size: .875rem;
  line-height: 1.35;
  white-space: nowrap;
}
.server-card__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.server-card__state::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #92938c;
  box-shadow: 0 0 0 2px #382a24;
}
.server-card__state strong,
.server-card__slots strong { color: #fff6e8; font-weight: 800; }
.server-card[data-state="online"] .server-card__state::before { background: #9cdd6b; }
.server-card[data-state="online"] .server-card__state strong { color: #baf08c; }
.server-card[data-state="offline"] .server-card__state::before { background: #d67463; }
.server-card[data-state="offline"] .server-card__state strong { color: #ffd3c7; }
.server-card[data-state="unknown"] .server-card__state::before { background: #c7ae79; }

.server-card--planned .server-card__inner { padding-top: 10px; padding-bottom: 10px; }
.server-card--planned .server-card__state { margin-top: 6px; }
.server-card--planned .server-card__state strong { color: #e8cba0; }

@media (max-width: 1440px) {
  .startseite:not(.profilseite) { grid-template-rows: auto auto auto; }
  .server-overview {
    position: relative;
    top: auto;
    left: auto;
    width: min(760px, calc(100% - 32px));
    margin: 0 auto 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
  }
}

@media (max-width: 760px) {
  .server-overview {
    width: min(440px, calc(100% - 24px));
    grid-template-columns: 1fr;
    gap: 12px;
  }
}