/* BERNGUARD CVE-Ticker – Frontend-Styles (alles unter .bg-cve, Schrift erbt vom Theme) */
.bg-cve {
  --navy: #0b1220; --blue: #0ea5e9; --cyan: #22d3ee; --ink: #0f172a; --muted: #64748b; --line: #e6eaf0;
  --sev-kritisch: #dc2626; --sev-hoch: #f59e0b; --sev-mittel: #eab308; --sev-niedrig: #22c55e;
}
.bg-cve, .bg-cve * { box-sizing: border-box; }
/* Theme-Resets */
.bg-cve h3 { margin: 0; padding: 0; font-family: inherit; }
.bg-cve img { margin: 0; box-shadow: none; }

/* =====================================================================
   WIDGET – nur die Walze, kein Rahmen drumherum
   ===================================================================== */
.bg-cve {
  --card-h: 172px;
  --gap: 14px;
  --pad: 20px;   /* Luft für Schatten, da die Maske am Rand der Bühne abschneidet */
  --stage-h: 520px;
  --brand: var(--blue);

  position: relative;
  width: 100%;
  font-family: inherit;
  color: var(--ink);
  user-select: none;
}

/* ---------- Bühne (Walze) ---------- */
.bg-cve__stage {
  position: relative; height: var(--stage-h);
  perspective: 1400px; perspective-origin: 50% 50%;
  /* nur oben/unten beschneiden – Schatten und Unschärfe dürfen seitlich hinauslaufen */
  clip-path: inset(0 -120px);
  cursor: grab; outline: none;
  touch-action: pan-y;   /* Touch: Seite scrollt normal über die Walze */
}
.bg-cve.is-dragging .bg-cve__stage { cursor: grabbing; }
.bg-cve__track { position: absolute; inset: 0; transform-style: preserve-3d; }

.bg-cve__card {
  position: absolute; left: var(--pad); right: var(--pad);
  top: calc(50% - var(--card-h) / 2); margin: 0 !important;
  height: var(--card-h);
  padding: 16px 20px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(2, 6, 23, .35);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .35s ease;
}
.bg-cve__card.is-center {
  cursor: pointer;
  border-color: rgba(14, 165, 233, .35);
  box-shadow: 0 18px 40px -22px rgba(2, 6, 23, .28);
}
.bg-cve.is-dragging .bg-cve__card { cursor: grabbing; transition: none; }

/* Zeile 1: Logo · Hersteller · Score */
.bg-cve__row { display: flex; align-items: center; gap: 12px; }
.bg-cve__logo {
  flex: none; height: 46px; min-width: 46px; max-width: 108px; padding: 0 9px; border-radius: 12px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(2,6,23,.06);
  overflow: hidden;
}
.bg-cve__logo img { display: block; max-height: 28px; max-width: 88px; width: auto; height: auto; object-fit: contain; pointer-events: none; }
.bg-cve__logo.is-mono { width: 46px; padding: 0; background: var(--brand); border-color: transparent; }
.bg-cve__logo.is-mono span { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: .02em; }
.bg-cve__who { min-width: 0; flex: 1; line-height: 1.25; }
.bg-cve__who strong { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-cve__who span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-cve__score {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; height: 46px; padding: 0 10px; border-radius: 12px;
  color: #fff; background: var(--sev); line-height: 1;
  box-shadow: 0 8px 20px -10px var(--sev);
}
.bg-cve__score b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bg-cve__score small { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; opacity: .85; margin-top: 3px; }
.bg-cve__score.sev-mittel, .bg-cve__score.sev-hoch { color: #1a1200; }

/* Zeile 2: Titel */
.bg-cve__title {
  margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Zeile 3: Meta */
.bg-cve__meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; font-size: 12px; color: var(--muted); margin-top: auto; white-space: nowrap; overflow: hidden; }
.bg-cve__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bg-cve__meta > span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; }
.bg-cve__tag { font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sev); }
.bg-cve__meta .bg-cve__patch { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 11px; background: #ecfdf5; color: #047857; }
.bg-cve__meta .bg-cve__patch::before { display: none; }
.bg-cve__meta .bg-cve__patch.is-none { background: #fef2f2; color: #b91c1c; }

/* Verlauf oben/unten als Maske: zeigt den echten Seitenhintergrund, egal ob weiß oder farbig */
.bg-cve__stage {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 22%, #000 78%, rgba(0,0,0,0) 100%);
}
.bg-cve__fade { display: none; }

.bg-cve.is-empty { display: none; }

/* Schmale Container (Handy): Meta-Zeile umbrechen statt abschneiden */
@media (max-width: 640px) {
  .bg-cve__meta { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 4px; }
  .bg-cve__meta .bg-cve__patch { margin-left: 0; }
  .bg-cve__title { font-size: 14.5px; }
  .bg-cve__card { overflow: hidden; }
}

.bg-cve__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; padding: 40px; text-align: center; }