/* JorgeTown Status — FiveM-Ingame-Look (Vollumbau 2026-10-02): volle Breite,
   Lage-Panel + zwei Spalten, Verlauf Coral → Magenta → Lila. Prefix: st-* */
:root {
  /* FiveM-Ingame-Look wie jorge_admin / img.jorgetown.de (seit 2026-10-02, vorher Nexus) */
  --bg: #0b0b0e;
  --surface: #0e0e12;
  --elev: #16161b;
  --elev2: #1c1c22;
  --line: #23232a;
  --line2: #34343d;
  --text: #f5f5f7;
  --muted: #a8a8b0;
  --faint: #6a6a74;
  --violet: #e2199a;
  --pink: #8b2fd6;
  --blue: #da6652;
  --grad: linear-gradient(100deg, #da6652 0%, #e2199a 68%, #8b2fd6 100%);
  --grad-v: linear-gradient(178deg, #da6652, #e2199a 58%, #8b2fd6);
  --soft: rgba(226, 25, 154, 0.14);
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #ef4444;
  --bad: #ef4444;
  --maint: #60a5fa;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.st { position: relative; min-height: 100dvh; display: flex; flex-direction: column; isolation: isolate; }
.st-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 12% -10%, rgba(218, 102, 82, 0.12), transparent 60%),
    radial-gradient(50rem 28rem at 95% 8%, rgba(139, 47, 214, 0.09), transparent 60%),
    radial-gradient(40rem 30rem at 50% 110%, rgba(226, 25, 154, 0.08), transparent 60%);
}

/* ── Kopf ─────────────────────────────────────────── */
.st-top {
  position: sticky;
  flex-wrap: wrap;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
}
.st-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.st-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(226, 25, 154, 0.3));
  transition: transform 0.3s var(--ease);
}
.st-brand:hover img { transform: rotate(-6deg) scale(1.05); }
.st-brand-text { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }
.st-brand-text small {
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-top-links { display: flex; align-items: center; gap: 6px; }
.st-link {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.st-link:hover { color: var(--text); background: var(--elev); }
.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--line2);
  background: var(--surface);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), filter 0.16s var(--ease);
}
.st-btn-primary {
  border-color: transparent;
  color: #fff;
  background: #5865f2;
  box-shadow: 0 10px 28px -12px rgba(88, 101, 242, 0.9);
}
.st-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
@media (max-width: 620px) { .st-link { display: none; } }

/* ── Inhalt ───────────────────────────────────────── */
.st-main {
  flex: 1;
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 32px) 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.st-hero { display: flex; flex-direction: column; gap: 14px; }
.st-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--violet);
}
.st-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  animation: st-puls 2.4s ease-in-out infinite;
}
.st-hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.st-hero h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.st-lead { margin: 0; max-width: 60ch; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.st-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.st-pill {
  --c: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c) 40%, var(--line));
  background: color-mix(in oklab, var(--c) 12%, transparent);
  color: color-mix(in oklab, var(--c) 70%, #fff);
  font-size: 0.86rem;
  font-weight: 700;
}
.st-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 60%, transparent);
  animation: st-ping 2s var(--ease) infinite;
}
.st-meta { font-size: 0.82rem; color: var(--faint); }

/* Zustände */
.is-up { --c: var(--ok); }
.is-down { --c: var(--danger); }
.is-pending { --c: var(--warn); }
.is-maint { --c: var(--maint); }

/* ── Meldungen (Störung / Wartung aus Kuma) ─────────── */
.st-meldung {
  --c: var(--warn);
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--c) 40%, var(--line));
  background: color-mix(in oklab, var(--c) 8%, var(--surface));
}
.st-meldung + .st-meldung { margin-top: 10px; }
.st-meldung svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--c); margin-top: 2px; }
.st-meldung b { display: block; font-size: 1rem; }
.st-meldung p { margin: 4px 0 0; color: var(--muted); line-height: 1.55; white-space: pre-line; }
.st-meldung small { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--faint); }

/* ── Kennzahlen ───────────────────────────────────── */
.st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
@media (max-width: 700px) { .st-kpis { grid-template-columns: 1fr 1fr; } .st-kpis > :last-child { grid-column: 1 / -1; } }
.st-kpi {
  --tint: var(--violet);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.st-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 80% at 100% 0%, color-mix(in oklab, var(--tint) 16%, transparent), transparent 70%);
}
.st-kpi:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--tint) 45%, var(--line)); }
.st-kpi span { position: relative; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.st-kpi b {
  position: relative;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.st-kpi small { position: relative; font-size: 0.76rem; color: var(--faint); }

/* ── Gruppen + Dienste ────────────────────────────── */
.st-gruppen { display: flex; flex-direction: column; gap: 26px; }
.st-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.st-gruppe-kopf h2 { margin: 0; font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; }
.st-gruppe-kopf span { font-size: 0.8rem; color: var(--faint); }
.st-liste {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.st-dienst {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "ic name status" "ic bar bar";
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  transition: background 0.16s var(--ease);
}
.st-dienst:first-child { border-top: 0; }
.st-dienst::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c);
  transform: scaleY(0);
  transition: transform 0.2s var(--ease);
}
.st-dienst:hover { background: var(--elev); }
.st-dienst:hover::before { transform: scaleY(1); }
.st-ic {
  grid-area: ic;
  align-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--c);
}
.st-ic svg { width: 19px; height: 19px; }
.st-name { grid-area: name; min-width: 0; }
.st-name b { display: block; font-size: 0.98rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-name small { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: 0.78rem; color: var(--faint); }
.st-name small span { white-space: nowrap; }
.st-status {
  grid-area: status;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 13%, transparent);
  color: color-mix(in oklab, var(--c) 75%, #fff);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.st-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* Verlaufsbalken: ein Strich je Prüfung */
.st-bar { grid-area: bar; margin-top: 10px; }
.st-beats { display: flex; gap: 2px; height: 26px; }
.st-beats i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--ok);
  opacity: 0.85;
  transition: opacity 0.12s, transform 0.12s var(--ease);
}
.st-beats i:hover { opacity: 1; transform: scaleY(1.15); }
.st-beats i.b0 { background: var(--danger); }
.st-beats i.b2 { background: var(--warn); }
.st-beats i.b3 { background: var(--maint); }
.st-beats i.leer { background: var(--elev2); opacity: 1; }
.st-bar-achse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; color: var(--faint); font-family: var(--mono); }
@media (max-width: 560px) {
  .st-dienst { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ic name" "ic status" "bar bar"; }
  .st-status { justify-self: start; margin-top: 6px; }
  .st-ic { width: 36px; height: 36px; }
}

/* Kurzhinweis beim Überfahren eines Balkens */
.st-tip {
  position: fixed;
  z-index: 50;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line2);
  background: var(--elev2);
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.4;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8);
}
.st-tip small { color: var(--faint); }

/* Laden */
.st-skel {
  height: 190px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 30%, var(--elev) 50%, var(--surface) 70%);
  background-size: 200% 100%;
  animation: st-shimmer 1.4s linear infinite;
}
.st-fehler {
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed var(--line2);
  color: var(--muted);
  text-align: center;
}

/* ── Fuß ──────────────────────────────────────────── */
.st-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 18px clamp(16px, 4vw, 40px) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--faint);
}
.st-foot a { color: var(--muted); text-decoration: none; }
.st-foot a:hover { color: var(--text); }
.st-foot-hint { margin-left: auto; }
@media (max-width: 560px) { .st-foot-hint { margin-left: 0; width: 100%; } }

@keyframes st-puls { 50% { opacity: 0.45; } }
@keyframes st-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 55%, transparent); }
  80%, 100% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes st-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Navigation: alle JorgeTown-Seiten ────────────── */
.st-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.st-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.st-nav::-webkit-scrollbar { display: none; }
.st-nav a {
  position: relative;
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.st-nav a:hover { color: var(--text); background: var(--elev); }
.st-nav a.is-on { color: var(--text); background: var(--elev2); box-shadow: inset 0 0 0 1px var(--line2); }
.st-nav a.is-on::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.st-top-acts { display: flex; align-items: center; gap: 8px; }
.st-btn svg { width: 17px; height: 17px; }
@media (max-width: 1100px) {
  .st-top { grid-template-columns: auto 1fr; row-gap: 8px; padding-bottom: 8px; }
  .st-top-acts { justify-self: end; }
  .st-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin: 0 -6px; }
}

/* ── Spielserver: große Karten mit Artwork ─────────── */
.st-spiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 980px) { .st-spiele { grid-template-columns: 1fr 1fr; } .st-spiel.is-gross { grid-column: 1 / -1; } }
@media (max-width: 640px) { .st-spiele { grid-template-columns: 1fr; } }
.st-spiel {
  --tint: var(--violet);
  --tint2: var(--pink);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 404px;
  padding: 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.st-spiel::before {
  /* Artwork */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bild) center / cover no-repeat;
  transform: scale(1.02);
  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
}
.st-spiel::after {
  /* Abdunklung nach unten + Farbschimmer der Karte */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 15, 19, 0.08) 0%, rgba(14, 15, 19, 0.2) 24%, rgba(14, 15, 19, 0.5) 39%, rgba(14, 15, 19, 0.85) 47%, rgba(14, 15, 19, 0.95) 100%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in oklab, var(--tint) 30%, transparent), transparent 70%);
}
.st-spiel:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--tint) 55%, var(--line));
  box-shadow: 0 24px 60px -28px color-mix(in oklab, var(--tint) 80%, transparent);
}
.st-spiel:hover::before { transform: scale(1.07); }
.st-spiel-naht { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tint), var(--tint2)); }

.st-spiel-kopf { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-spiel-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 15, 19, 0.6);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.st-spiel-tag b { color: var(--tint); font-weight: 700; }
.st-spiel .st-status { background: rgba(14, 15, 19, 0.7); backdrop-filter: blur(10px); border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); }

.st-spiel-name {
  margin: 0;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.st-spiel-name em {
  font-style: normal;
  background: linear-gradient(100deg, var(--tint), var(--tint2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.st-spiel-sub { margin: 6px 0 0; font-size: 0.86rem; color: rgba(231, 232, 235, 0.78); line-height: 1.45; }

.st-spiel-werte { display: flex; gap: 18px; margin-top: 14px; }
.st-spiel-werte div { display: flex; flex-direction: column; gap: 2px; }
.st-spiel-werte span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(231, 232, 235, 0.6); }
.st-spiel-werte b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-spiel-werte b small { font-size: 0.75em; font-weight: 600; color: rgba(231, 232, 235, 0.6); }
.st-spieler { margin-top: 12px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.st-spieler i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tint), var(--tint2)); transition: width 0.8s var(--ease); }
.st-spiel .st-beats { height: 18px; margin-top: 14px; }
.st-spiel .st-beats i.leer { background: rgba(255, 255, 255, 0.08); }
.st-spiel-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
}
.st-spiel-cta svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.st-spiel:hover .st-spiel-cta svg { transform: translateX(4px); }
.st-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); vertical-align: 1px; animation: st-puls 1.6s ease-in-out infinite; }

/* Im Aufbau */
.st-spiel.is-aufbau::before { filter: grayscale(0.6) brightness(0.7); }
.st-aufbau {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #1a1204;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, #ffd166 0 10px, #ffbf3f 10px 20px);
  background-size: 28px 28px;
  animation: st-baustelle 1.2s linear infinite;
  box-shadow: 0 6px 20px -8px rgba(255, 209, 102, 0.8);
}
.st-aufbau svg { width: 14px; height: 14px; }
.st-spiel-baustreifen {
  position: absolute;
  left: -40px;
  right: -40px;
  top: 46%;
  z-index: -1;
  height: 22px;
  transform: rotate(-6deg);
  opacity: 0.18;
  background: repeating-linear-gradient(135deg, #ffd166 0 16px, #111 16px 32px);
}
@keyframes st-baustelle { to { background-position: 28px 0; } }

/* ── Websites als Kacheln ─────────────────────────── */
.st-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .st-kacheln { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .st-kacheln { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .st-webblock { padding-left: 12px; } .st-webkopf { gap: 9px; padding: 9px 12px; } .st-webkopf-logo { max-width: 84px; } }
.st-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
/* Linke Kante + Farbhauch = Zugehoerigkeit zum Spielserver (--tint kommt vom Block),
   Status steckt weiterhin im Punkt, im Text und in den Balken (--c). */
.st-kachel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tint, var(--c)), color-mix(in oklab, var(--tint2, var(--tint, var(--c))) 80%, transparent));
}
.st-kachel {
  background:
    linear-gradient(100deg, color-mix(in oklab, var(--tint, transparent) 9%, transparent), transparent 42%),
    var(--surface);
  border-color: color-mix(in oklab, var(--tint, var(--line)) 16%, var(--line));
}
a.st-kachel:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--tint, var(--c)) 50%, var(--line));
  box-shadow: 0 14px 30px -22px color-mix(in oklab, var(--tint, var(--c)) 85%, transparent);
}
.st-kachel-kopf { display: flex; align-items: center; gap: 9px; min-width: 0; }
.st-kachel-kopf b { flex: 1; min-width: 0; font-size: 0.93rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-kachel-punkt { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.st-kachel-status { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: color-mix(in oklab, var(--c) 75%, #fff); }
.st-kachel-host { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }
a.st-kachel:hover .st-kachel-host { color: var(--muted); }
.st-kachel-werte { display: flex; gap: 12px; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-kachel .st-beats { height: 14px; margin-top: 4px; gap: 1.5px; }

/* ── Scrollleiste im Marken-Verlauf ───────────────── */
/* Scrollleiste: siehe Vollumbau-Block am Dateiende (scrollbar-color nur für Firefox, sonst ignoriert Chrome den Verlauf) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0b0c10; border-left: 1px solid var(--line); }
::-webkit-scrollbar-thumb {
  border: 3px solid #0b0c10;
  border-radius: 999px;
  background: linear-gradient(180deg, #4f7dff 0%, #8b5cf6 50%, #ff2e88 100%);
  background-attachment: fixed;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background: linear-gradient(180deg, #6b93ff 0%, #a47bff 50%, #ff5aa3 100%);
  box-shadow: 0 0 12px rgba(226, 25, 154, 0.6);
}
::-webkit-scrollbar-corner { background: #0b0c10; }
/* Waagerechte Leisten (z. B. Navigation am Handy) bleiben unsichtbar */
.st-nav::-webkit-scrollbar { display: none; }

/* ── Kommunikations-Baender (Discord + TeamSpeak) ──
   Gleiche Bauform, nur die Markenfarbe unterscheidet sich (--bandfarbe). */
.st-ts, .st-band {
  --bandfarbe: #8b2fd6;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid color-mix(in oklab, var(--bandfarbe) 40%, var(--line));
  background:
    radial-gradient(70% 140% at 0% 50%, color-mix(in oklab, var(--bandfarbe) 28%, transparent), transparent 60%),
    radial-gradient(50% 120% at 100% 50%, rgba(226, 25, 154, 0.16), transparent 60%),
    var(--surface);
}
.st-ts::before, .st-band::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 36px solid color-mix(in oklab, var(--bandfarbe) 9%, transparent);
}
.st-ts-ic, .st-band-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--bandfarbe), color-mix(in oklab, var(--bandfarbe) 55%, #06080d));
  box-shadow: 0 14px 34px -14px color-mix(in oklab, var(--bandfarbe) 90%, transparent);
}
.st-ts-ic svg, .st-band-ic svg { width: 34px; height: 34px; }
.st-ts-kopf, .st-band-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-ts-kopf h2, .st-band-kopf h2 { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; }
.st-ts-text p, .st-band-text p { margin: 6px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.st-ts-text p b, .st-band-text p b { color: var(--text); }
.st-ts .st-beats { height: 14px; margin-top: 12px; max-width: 520px; }
.st-ts-acts, .st-band-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 220px; }
.st-ts-adresse, .st-band-adresse {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px dashed color-mix(in oklab, var(--bandfarbe) 55%, var(--line2));
  background: rgba(14, 15, 19, 0.6);
  color: var(--text);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.st-ts-adresse svg, .st-band-adresse svg { width: 16px; height: 16px; color: var(--muted); }
.st-ts-adresse:hover, .st-band-adresse:hover { border-style: solid; background: var(--elev); }
.st-ts-adresse.is-ok, .st-band-adresse.is-ok { border-color: var(--ok); color: var(--ok); }
.st-ts-adresse.is-ok svg, .st-band-adresse.is-ok svg { color: var(--ok); }
.st-ts-go, .st-dc-go {
  justify-content: center;
  padding: 12px 16px;
  border-color: transparent;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--bandfarbe), color-mix(in oklab, var(--bandfarbe) 78%, #06080d));
  box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--bandfarbe) 95%, transparent);
}
.st-ts-go:hover, .st-dc-go:hover { transform: translateY(-1px); filter: brightness(1.1); }
/* ── Discord: zwei Server nebeneinander, darunter das TeamSpeak-Band ──
   --bandfarbe ist Discord-Blurple, --zu die Farbe des zugehoerigen Spielservers. */
.st-dcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.st-dc {
  --bandfarbe: #e2199a;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 18px 20px;
}
.st-dc .st-band-ic { width: 54px; height: 54px; border-radius: 16px; }
.st-dc .st-band-ic svg { width: 28px; height: 28px; }
.st-dc .st-band-kopf h2 { font-size: 1.25rem; }
.st-dc-zu {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--zu, var(--blue)) 45%, transparent);
  background: color-mix(in oklab, var(--zu, var(--blue)) 14%, transparent);
  color: var(--zu, var(--blue));
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Lage bei Discord selbst – Kopf des Community-Bereichs */
.st-dc-lage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.st-dc-lage i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--faint));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c, var(--faint)) 22%, transparent);
}
.st-dc-lage.is-up { --c: var(--ok); }
.st-dc-lage.is-pending { --c: var(--warn); }
.st-dc-lage.is-down { --c: var(--bad); }
.st-dc-lage.is-maint { --c: var(--blue); }
.st-dc .st-band-kopf .st-status { margin-left: auto; }
.st-dc-zahlen {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}
.st-dc-zahlen b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 3px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.st-dc-zahlen.is-leer { font-size: 0.86rem; }
.st-dc-trenn { width: 1px; height: 16px; background: var(--line2); }
.st-dc .st-band-acts { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; min-width: 0; margin-top: 4px; }
.st-dc .st-band-adresse { flex: 1 1 auto; min-width: 0; }
.st-dc .st-band-adresse span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dc .st-dc-go { flex: none; }
/* TeamSpeak gehoert nur zum Roleplay-Server – Chip in der Kopfzeile */
.st-ts-zu { --zu: #da6652; }
@media (max-width: 860px) { .st-dcgrid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  /* Nebeneinander wird die Einladung abgeschnitten – untereinander bleibt sie lesbar */
  .st-dc .st-band-acts { flex-direction: column; align-items: stretch; }
  .st-dc .st-dc-go { justify-content: center; }
}
@media (max-width: 760px) {
  .st-ts, .st-band { grid-template-columns: auto minmax(0, 1fr); }
  .st-ts-acts, .st-band-acts { grid-column: 1 / -1; min-width: 0; }
  .st-ts-ic, .st-band-ic { width: 52px; height: 52px; }
}

/* ── Websites je Server ───────────────────────────── */
.st-webblock {
  position: relative;
  padding-left: 16px;
}
.st-webblock::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tint), var(--tint2));
  opacity: 0.55;
}
.st-webblock + .st-webblock { margin-top: 22px; }
.st-webkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--tint) 30%, var(--line));
  background: linear-gradient(90deg, color-mix(in oklab, var(--tint) 14%, transparent), transparent 70%);
}
.st-webkopf-logo {
  display: block;
  height: var(--h, 20px);
  width: auto;
  max-width: 110px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.st-webkopf i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: linear-gradient(135deg, var(--tint), var(--tint2)); box-shadow: 0 0 12px var(--tint); }
.st-webkopf b { font-size: 1rem; font-weight: 750; }
.st-webkopf small { font-size: 0.8rem; color: var(--muted); }
.st-webkopf span { margin-left: auto; font-size: 0.78rem; color: var(--faint); white-space: nowrap; }
.st-webleer {
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed var(--line2);
  color: var(--muted);
  font-size: 0.88rem;
}
.st-webleer .st-aufbau { margin-right: 10px; vertical-align: middle; }
@media (max-width: 560px) { .st-webkopf { flex-wrap: wrap; } .st-webkopf span { margin-left: 22px; width: 100%; } }

/* ── Hub-Knopf im Kopf ────────────────────────────── */
.st-btn-hub {
  border-color: transparent;
  color: #fff;
  background: var(--grad);
  background-size: 160% 160%;
  box-shadow: 0 10px 28px -12px rgba(226, 25, 154, 0.9);
}
.st-btn-hub:hover { transform: translateY(-1px); background-position: 100% 0; filter: brightness(1.06); }
.st-btn-hub svg { width: 16px; height: 16px; }
@media (max-width: 520px) { .st-btn-hub span { display: none; } .st-btn-hub { padding: 9px 11px; } }

/* ── „Bald dabei": JorgeCity, klar abgesetzt von den laufenden Servern ── */
#st-bald:empty { display: none; }
.st-bald {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 270px;
  padding: 34px 24px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Das Artwork bleibt bewusst unscharf – es gibt noch nichts zu zeigen.
   scale(1.15) deckt die weichen Raender des Blurs ab. */
.st-bald::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bild) center / cover no-repeat;
  filter: blur(20px) saturate(1.4) contrast(1.15) brightness(0.92);
  transform: scale(1.15);
  transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}
.st-bald::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 100% at 50% 48%, rgba(14, 15, 19, 0.5), rgba(14, 15, 19, 0.88) 82%),
    radial-gradient(55% 90% at 12% 18%, color-mix(in oklab, var(--tint) 46%, transparent), transparent 68%),
    radial-gradient(60% 100% at 88% 96%, color-mix(in oklab, var(--tint2) 42%, transparent), transparent 70%);
}
.st-bald:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--tint) 45%, var(--line)); box-shadow: 0 20px 50px -28px color-mix(in oklab, var(--tint) 75%, transparent); }
.st-bald:hover::before { transform: scale(1.19); filter: blur(17px) saturate(1.55) contrast(1.2) brightness(1); }

/* Riesiger, sehr leiser Schriftzug hinter dem Inhalt */
.st-bald-wasser {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-family: var(--mono);
  font-size: clamp(2.6rem, 1.2rem + 7vw, 6.4rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  user-select: none;
}
.st-bald-badge { position: static; }
/* Baustreifen tiefer und leiser, damit sie nicht durch den Schriftzug laufen */
.st-bald .st-spiel-baustreifen { top: auto; bottom: 16px; opacity: 0.1; }
.st-bald-name { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.st-bald-sub { margin: 0; max-width: 56ch; }
.st-bald-cta { margin-top: 6px; }
@media (max-width: 620px) {
  .st-bald { min-height: 240px; padding: 28px 18px; }
}

/* ── Marken-Zeile der Spielkarte ──────────────────
   Feste Position auf JEDER Karte (top + min-height), damit die Trennlinie
   ueber alle Spielserver hinweg auf einer Hoehe liegt. Die Logos stehen auf
   einer gemeinsamen Grundlinie, die Abdunklung der Karte setzt genau an der
   Linie an - darueber Artwork, darunter Inhalt. */
.st-spiel-marken {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 96px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  min-height: 52px;
  padding-bottom: 14px;
}
.st-spiel-marken::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--tint), rgba(255, 255, 255, 0.22) 34%, rgba(255, 255, 255, 0.06) 72%, transparent);
}
.st-marke {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  color: #fff;
}
.st-marke img {
  display: block;
  height: var(--h, 36px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}
.st-marke .st-mark { height: var(--h, 22px); width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)); }
.st-marke b {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.st-marke-trenn {
  flex: none;
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.45), transparent);
}
/* Markenzeichen sind gefuellte Pfade - die Strich-Regeln der Icons duerfen sie nicht treffen */
.st-mark { fill: currentColor; stroke: none; }
@media (max-width: 620px) {
  .st-spiel-marken { left: 16px; right: 16px; top: 80px; gap: 16px; min-height: 44px; padding-bottom: 12px; }
  .st-marke img { height: calc(var(--h, 36px) * 0.82); max-width: 150px; }
  .st-marke .st-mark { height: calc(var(--h, 22px) * 0.9); }
  .st-marke b { font-size: 0.9rem; }
  .st-marke-trenn { height: 22px; }
}

/* ── Störfall-Modus ────────────────────────────────
   Die Gesamtlage steht als data-lage am <html> und faerbt Kopf und Hero.
   Laeuft alles, sieht die Seite aus wie immer. */
:root[data-lage="down"] body::before,
:root[data-lage="maint"] body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 380px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, var(--lagefarbe), transparent 68%);
  animation: st-lage-auf 0.6s var(--ease) both;
}
:root[data-lage="down"] { --lagefarbe: rgba(240, 85, 95, 0.2); }
:root[data-lage="maint"] { --lagefarbe: rgba(218, 102, 82, 0.2); }
@keyframes st-lage-auf { from { opacity: 0; } to { opacity: 1; } }
:root[data-lage="down"] .st-top { border-bottom-color: color-mix(in oklab, var(--danger) 40%, var(--line)); }
:root[data-lage="maint"] .st-top { border-bottom-color: color-mix(in oklab, var(--maint) 40%, var(--line)); }
:root[data-lage="down"] .st-kicker { color: var(--danger); }
:root[data-lage="down"] .st-kicker i { background: var(--danger); }
.st-main { position: relative; z-index: 1; }

/* Aktionen im Kopf – nur bei einer Störung sichtbar */
.st-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.st-hero-acts[hidden] { display: none; }
.st-hero-dc { border-color: transparent; color: #fff; font-weight: 700; background: linear-gradient(135deg, #5865f2, #4653cf); box-shadow: 0 12px 30px -14px rgba(88, 101, 242, 0.95); }
.st-hero-dc:hover { transform: translateY(-1px); filter: brightness(1.1); }
#st-melden[data-an="1"] { border-color: color-mix(in oklab, var(--ok) 50%, var(--line2)); color: var(--ok); }
#st-melden:disabled { opacity: 0.6; cursor: default; }

/* Schmales Band, das beim Scrollen unter der Kopfzeile hervorkommt – nur bei
   einer Störung oder Wartung, im Normalfall ist es nicht da. */
.st-toplage-wrap {
  flex-basis: 100%;
  width: 100%;
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s var(--ease), margin-top 0.35s var(--ease);
}
:root.ist-gescrollt .st-toplage-wrap { max-height: 40px; margin-top: 9px; }
:root[data-lage="ok"] .st-toplage-wrap { display: none; }
.st-toplage {
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c, var(--faint)) 42%, transparent);
  background: color-mix(in oklab, var(--c, var(--faint)) 16%, var(--bg));
  color: color-mix(in oklab, var(--c, var(--faint)) 80%, #fff);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.st-toplage.is-up { --c: var(--ok); }
.st-toplage.is-down { --c: var(--danger); }
.st-toplage.is-maint { --c: var(--maint); }
.st-toplage.is-pending { --c: var(--warn); }
.st-toplage i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--faint)); }
:root.ist-gescrollt .st-toplage { opacity: 1; transform: none; }
@media (max-width: 560px) { .st-toplage { font-size: 0.72rem; padding: 4px 11px; } }

/* ── Wartungsband mit Countdown ───────────────────── */
.st-wartung { align-items: center; }
.st-wartung-zeit { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.st-wartung-rest {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  padding-left: 16px;
  white-space: nowrap;
}
.st-wartung-rest small { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.st-wartung-rest b { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-wartung.ist-jetzt { border-color: color-mix(in oklab, var(--maint) 45%, var(--line)); }
@media (max-width: 620px) { .st-wartung-rest { margin-left: 0; padding-left: 0; align-items: flex-start; } }

/* Eigene Antwortzeit als vierte Kennzahl */
.st-kpi-eigen b { transition: color 0.3s var(--ease); }

/* Bei Störung/Wartung folgt auch der Titel der Lage statt dem Marken-Verlauf */
:root[data-lage="down"] .st-hero h1 em {
  background: linear-gradient(100deg, var(--danger), #ff8a5c);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-lage="maint"] .st-hero h1 em {
  background: linear-gradient(100deg, var(--maint), #7aa2ff);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-lage="maint"] .st-kicker { color: var(--maint); }
:root[data-lage="maint"] .st-kicker i { background: var(--maint); }

/* Nur noch ein Discord (JorgeIsland raus, 2026-09-26) → volle Breite */
.st-dcgrid > .st-dc:only-child { grid-column: 1 / -1; }


/* ============================================================
   VOLLUMBAU 2026-10-02 — Ingame-Look (jorge_admin), volle Breite
   Lage-Panel oben, darunter Hauptspalte (Spielserver, Websites)
   + Nebenspalte (Discord, TeamSpeak, Bald dabei).
   ============================================================ */
.st-glow {
  background:
    radial-gradient(60rem 26rem at 15% -12%, rgba(218, 102, 82, 0.08), transparent 60%),
    radial-gradient(50rem 26rem at 95% 0%, rgba(226, 25, 154, 0.07), transparent 60%);
}

/* Kopf: deckend, Verlaufskante, Marke wie im Admin-Panel */
.st-top { background: linear-gradient(180deg, rgba(226, 25, 154, 0.05), transparent), rgba(14, 14, 18, 0.97); backdrop-filter: none; padding: 12px clamp(16px, 3vw, 32px); }
.st-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); }
.st-brand img { width: 38px; height: 38px; padding: 3px; border-radius: 10px; background: var(--grad); filter: none; box-shadow: 0 6px 18px rgba(226, 25, 154, 0.35); }
.st-brand-text { display: inline-flex; flex-direction: column; gap: 2px; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.st-brand-text small { font-family: var(--mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.st-nav a { border-radius: 9px; }
.st-nav a.is-on { background: rgba(255, 255, 255, 0.05); }
.st-nav a.is-on::after { background: var(--grad); }
.st-btn { border-radius: 9px; font-weight: 700; }
.st-btn-hub { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 8px 22px -6px rgba(226, 25, 154, 0.55); }
.st-btn-hub:hover { box-shadow: 0 10px 26px -6px rgba(226, 25, 154, 0.75); filter: none; }
.st-btn-primary { color: var(--text); border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.03); box-shadow: none; }
.st-btn-primary:hover { border-color: var(--violet); background: var(--soft); box-shadow: none; }

/* Inhalt: volle Breite */
.st-main { width: 100%; max-width: none; padding: clamp(18px, 2.4vw, 30px) clamp(16px, 3vw, 32px) 40px; gap: 24px; }

/* Lage-Panel: links die Lage, rechts die Kennzahlen als Admin-Leiste */
.st-lage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(218, 102, 82, 0.09), rgba(226, 25, 154, 0.05) 45%, transparent 75%), rgba(14, 14, 18, 0.97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.st-lage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad); }
.st-lage::after { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; background: var(--grad-v); }
:root[data-lage="down"] .st-lage::before, :root[data-lage="down"] .st-lage::after { background: linear-gradient(100deg, var(--danger), #ff8a5c); }
:root[data-lage="maint"] .st-lage::before, :root[data-lage="maint"] .st-lage::after { background: linear-gradient(100deg, var(--maint), #93c5fd); }
.st-hero { gap: 12px; }
.st-hero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); letter-spacing: -0.035em; }
.st-kicker { font-weight: 800; letter-spacing: 0.24em; color: var(--violet); }
.st-kicker i { background: var(--violet); }
.st-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
}
.st-kpi { border: 0; border-radius: 0; background: transparent; padding: 16px 18px 16px 20px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.st-kpi:nth-child(odd) { border-left: 0; }
.st-kpi:nth-child(-n + 2) { border-top: 0; }
.st-kpi::before { inset: 16px auto 16px 0; width: 3px; background: var(--grad-v); }
.st-kpi:hover { transform: none; background: rgba(255, 255, 255, 0.025); }
.st-kpi span { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.st-kpi b { font-family: var(--mono); font-size: 1.65rem; letter-spacing: -0.02em; }
.st-kpi small { font-size: 0.74rem; }
@media (min-width: 1500px) {
  .st-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-kpi { border-top: 0; }
  .st-kpi:nth-child(odd) { border-left: 1px solid var(--line); }
  .st-kpi:first-child { border-left: 0; }
}

/* Zwei Spalten */
.st-raster { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 28vw, 440px); gap: 24px; align-items: start; }
.st-haupt, .st-neben { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.st-neben > section:empty { display: none; }
@media (max-width: 1150px) { .st-raster { grid-template-columns: 1fr; } .st-lage { grid-template-columns: 1fr; } }

/* Abschnittsköpfe wie die Karten-Köpfe im Admin-Panel */
.st-gruppe-kopf { position: relative; align-items: center; padding-left: 13px; margin-bottom: 12px; }
.st-gruppe-kopf::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--grad-v); }
.st-gruppe-kopf h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.st-gruppe-kopf > span { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); }

/* Karten: Admin-Radien, deckend */
.st-spiel { border-radius: 14px; }
.st-kachel { border-radius: 10px; background: rgba(14, 14, 18, 0.95); }
.st-kacheln { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.st-webblock { border-radius: 0; }
.st-webkopf { border-radius: 10px; }
.st-ts, .st-band { border-radius: 14px; }
.st-bald { border-radius: 14px; }
.st-pill, .st-status { border-radius: 999px; }
.st-meldung { border-radius: 12px; }

/* Nebenspalte: Bänder stapeln statt nebeneinander */
.st-neben .st-dcgrid { grid-template-columns: 1fr; margin-bottom: 0; }
.st-neben .st-ts { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; }
.st-neben .st-ts .st-ts-acts { grid-column: 1 / -1; min-width: 0; flex-direction: row; flex-wrap: wrap; }
.st-neben .st-ts .st-ts-acts > * { flex: 1 1 160px; }
.st-neben .st-ts .st-beats { max-width: none; }
.st-neben .st-ts-ic { width: 54px; height: 54px; border-radius: 14px; }
.st-neben .st-ts-ic svg { width: 28px; height: 28px; }
.st-neben .st-ts-kopf h2 { font-size: 1.25rem; }
.st-neben .st-bald { min-height: 240px; }
.st-ts-go, .st-dc-go { border-radius: 9px; }
.st-hero-dc { background: var(--grad); box-shadow: 0 8px 22px -6px rgba(226, 25, 154, 0.55); }

/* Scrollleisten + Markierung im Hausstil */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-color: #e2199a #0b0b0e; scrollbar-width: thin; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0b0e; }
::-webkit-scrollbar-thumb { border: 2px solid #0b0b0e; border-radius: 999px; background: linear-gradient(180deg, #da6652, #e2199a 58%, #8b2fd6); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f07a64, #ff2fb0 58%, #a24ae8); }
.st-nav::-webkit-scrollbar { height: 0; }
::selection { background: rgba(226, 25, 154, 0.45); color: #fff; }
/* Baustreifen im „Bald dabei“-Teaser ragen sonst 1 px über (seitliches Scrollen am Handy) */
.st-bald { overflow: hidden; }
.st { overflow-x: clip; }

/* Neuer Biber frei ohne Box (2026-10-17) */
.st-brand img { width: 46px; height: 46px; margin: -4px 0; padding: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }