/* ==== Discord Card – isoliert in .dc-scope (final) ==== */

/* Aside strecken, damit die Card volle Höhe bekommt */
.dc-scope{ display:flex; align-items:stretch; }
.dc-scope > .dc-card{ flex:1 1 auto; min-height:0; }

/* Sicherheit: frühere Inlays deaktivieren */
.dc-scope::before,
.dc-scope .dc-card::before{ display:none !important; }

/* Card-Container */
.dc-scope .dc-card{
  --dc-accent: #5865F2;
  --dc-frame: 4px;                       /* schmaler Innenrand */
  --dc-radius: 18px;
  --dc-bleed: clamp(12px, 1.6vw, 16px);  /* bündig in der Spalte */
  --dc-border: rgba(255,255,255,.08);

  position: relative;
  display: flex; flex-direction: column;
  width: calc(100% + var(--dc-bleed)*2);
  margin: calc(-1 * var(--dc-bleed));
  padding: var(--dc-frame);
  border-radius: var(--dc-radius);
  box-sizing: border-box;
  isolation: isolate;
  overflow: visible;                      /* Hover-Glow nicht abschneiden */
  background: transparent !important;     /* Inlay übernimmt die Fläche */
}

/* EIN blaues Inlay: füllt die gesamte Card-Innenfläche (auch unten) */
.dc-scope .dc-card::after{
  content: "";
  position: absolute;
  inset: var(--dc-frame); /* respektiert den schmalen Rahmen */
  border-radius: calc(var(--dc-radius) - var(--dc-frame));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(88,101,242,.22), rgba(32,38,86,.16) 60%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.12));
  box-shadow: inset 0 0 0 1px var(--dc-border);
  z-index: 0;             /* unter Content, über dem Sonar */
  pointer-events: none;
}

/* Full-bleed BG + Sonar (liegt HINTER dem Inlay) */
.dc-scope .dc-card__bg{
  position:absolute; inset:0;
  pointer-events:none; display:grid; place-items:center;
  z-index: -1 !important;
}
.dc-scope .dc-card__bg::after{
  content:""; position:absolute; inset:-25%;
  background: radial-gradient(circle at 50% 30%, rgba(88,101,242,.28), transparent 60%);
  filter: blur(22px); opacity:.55;
}
.dc-scope .dc-sonar{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, rgba(88,101,242,.5), rgba(88,101,242,0) 60%);
  animation: dc-sonar 2.8s linear infinite; filter: blur(.35px);
}
.dc-scope .dc-sonar.dc-sonar--delay{  animation-delay:.6s; opacity:.8; }
.dc-scope .dc-sonar.dc-sonar--delay2{ animation-delay:1.2s; opacity:.6; }
@keyframes dc-sonar{ 0%{transform:scale(.55);opacity:.9}70%{transform:scale(2.0);opacity:.2}100%{transform:scale(2.3);opacity:0} }

/* Body: Header (auto) – Stats (1fr) – CTA (absolut unten) */
.dc-scope .dc-card__body{
  position: relative !important; z-index: 1;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: .45rem;

  /* unten Platz reservieren: CTA-Höhe + Abstand */
  --pad: clamp(12px, 1.8vw, 16px);
  --cta-h: 48px;     /* Buttonhöhe */
  --gap-cta: 18px;   /* Abstand Stats <-> CTA */
  padding:
    var(--pad)
    var(--pad)
    calc(var(--pad) + var(--gap-cta) + var(--cta-h))
    var(--pad) !important;

  border-radius: calc(var(--dc-radius) - var(--dc-frame));
  background: transparent !important;     /* Inlay sichtbar lassen */
  box-shadow: none !important;
  overflow: visible !important;
}

/* Header kompakt */
.dc-scope .dc-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.dc-scope .dc-brand{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.dc-scope .dc-icon{ width:18px; height:18px; border-radius:6px; object-fit:cover; }
.dc-scope .dc-title{ margin:0; font-weight:800; letter-spacing:-.01em; font-size:clamp(.9rem,1.7vw,.98rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-scope .dc-badge{ flex-shrink:0; display:inline-flex; align-items:center; padding:.28rem .5rem;
  border-radius:999px; font-size:.7rem; font-weight:800; backdrop-filter: blur(4px); }
.dc-scope .dc-badge--ok{    background: rgba(76,217,100,.18); color:#1f7a34; }
.dc-scope .dc-badge--muted{ background: rgba(255,255,255,.35); color:#444; }
.dc-scope .dc-badge--warn{  background: rgba(255,149, 0,.18); color:#7a3a00; }

/* Stats: UNTEREINANDER, kompakt, füllen Resthöhe */
.dc-scope .dc-stats{
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(50px, 1fr)) !important;
  gap: .48rem;
}
.dc-scope .dc-stat{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:.46rem .65rem; border-radius:.72rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.12);
}
.dc-scope .dc-value{ font-variant-numeric:tabular-nums; font-weight:900; letter-spacing:-.01em;
  font-size: clamp(.90rem, 2.0vw, 1.02rem); line-height: 1.05; }
.dc-scope .dc-label{ margin-top:.06rem; font-size:.72rem; opacity:.9; }

/* CTA absolut am unteren Rand – überlappt nichts */
.dc-scope .dc-cta{
  position: absolute !important;
  left: var(--pad); right: var(--pad); bottom: var(--pad);
  height: var(--cta-h) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-weight: 900; color: #fff; text-decoration: none;
  border-radius: 12px; padding: 0 1rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--dc-accent) 90%, white 10%), var(--dc-accent));
  box-shadow: 0 10px 24px color-mix(in oklab, var(--dc-accent) 40%, black 60%);
  transition: transform .15s ease, box-shadow .2s ease;
  overflow: hidden; /* nur für Blitz-Overlay */
}
.dc-scope .dc-cta::before{
  content:""; position:absolute; inset:-45% -25%;
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,0) 0 18%, rgba(255,255,255,.45) 22% 28%, rgba(255,255,255,0) 32% 100%),
    linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-120%) rotate(8deg); filter: blur(6px); transition: transform .45s ease; pointer-events: none;
}
.dc-scope .dc-cta:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in oklab, var(--dc-accent) 50%, black 50%); }
.dc-scope .dc-cta:hover::before{ transform: translateX(20%) rotate(8deg); }
.dc-scope .dc-cta::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 36px rgba(88,101,242,.5);
  opacity: 0; transition: opacity .2s ease; pointer-events:none;
}
.dc-scope .dc-cta:hover::after{ opacity:.8; }




/* === CI-Gelb Palette für die Discord-Badges === */
.dc-scope .dc-badge{
  --badge-text: #5b4700;              /* dunkles Gelb/Braun für gute Lesbarkeit */
  color: var(--badge-text);
  box-shadow: inset 0 0 0 1px rgba(255, 205, 41, .22);
}

/* ruhig – sehr helles Gelb */
.dc-scope .dc-badge--muted{
  background: rgba(255, 224, 102, .16);    /* #FFE066 @16% */
  color: #6d5400;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 102, .28);
}

/* belebt – mittleres CI-Gelb */
.dc-scope .dc-badge--ok{
  background: rgba(255, 205, 41, .22);     /* #FFCD29 @22% */
  color: #634c00;
  box-shadow: inset 0 0 0 1px rgba(255, 205, 41, .35);
}

/* Hochbetrieb – kräftig/amber */
.dc-scope .dc-badge--warn{
  background: rgba(255, 179, 0, .26);      /* #FFB300 @26% */
  color: #573f00;
  box-shadow: inset 0 0 0 1px rgba(255, 179, 0, .38);
}

/* Optional: kleiner gelber Statuspunkt links im Badge */
.dc-scope .dc-badge::before{
  content:"";
  width:.5rem; height:.5rem; border-radius:50%;
  margin-right:.35rem; flex:0 0 .5rem;
  background: currentColor;
  opacity:.55;
}




/* === CI-Gelb Badges: opak + hohe Lesbarkeit === */
.dc-scope .dc-badge{
  /* Basis: kleinere Pill etwas kräftiger, ohne Transparenz */
  padding: .32rem .70rem;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .01em;
  color: #2b2100;                 /* dunkles Braun für maximalen Kontrast */
  background: linear-gradient(180deg, #FFF3B0, #FFE17A); /* helles Gelb */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.18);
  backdrop-filter: none !important;   /* kein Mischen mit dem Blau */
  mix-blend-mode: normal !important;
}

/* Statuspunkt links */
.dc-scope .dc-badge::before{
  content:"";
  width:.5rem; height:.5rem; border-radius:50%;
  margin-right:.35rem; flex:0 0 .5rem;
  background: #FFB300;              /* CI-Gelb Punkt */
  opacity: 1;                        /* sichtbar auf hellem Grund */
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset;
}

/* Stufen (ruhig → belebt → hochbetrieb) */
.dc-scope .dc-badge--muted{
  background: linear-gradient(180deg, #FFF6C4, #FFE98E);
  border-color: #FFE17A;
  color: #3b2e00;
}
.dc-scope .dc-badge--ok{
  background: linear-gradient(180deg, #FFE17A, #FFD34A);
  border-color: #FFC933;
  color: #2b2100;
}
.dc-scope .dc-badge--warn{
  background: linear-gradient(180deg, #FFD34A, #FFB300);
  border-color: #FFA000;
  color: #231a00; /* noch einen Tick dunkler für "hochbetrieb" */
}