/* ============================================================
   SFT-HIGHLIGHTBOX — (29.08. v5: dunkle Box BLEIBT, weiße
   flächenfüllende Wabenmuster, 12px Waben — User-Korrektur)
   ============================================================ */
.sft-hl {
  position: relative;
  background-color: rgba(180, 140, 255, 1);
  background-image:
    url("/hexagons.svg?v=2"),
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 1) 85%),
    linear-gradient(135deg, #5B1FA8 0%, #B48CFF 22%, #E55DB4 48%, #4FC3F7 74%, #B48CFF 100%);
  background-size: 125%, 100% 100%, 300% 300%;
  background-position: center center, center center, 0% 50%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border: 3px solid #000000;
  box-shadow: none;
  border-radius: 5px;
  padding: 10px 12px 9px;
  margin: 10px 0 0;
  text-align: center;
}
/* BLUNA-Aurora: fließender Farbverlauf hinter den Waben.
   Performance-Doktrin (27.08.): statisch beim ersten Frame,
   volle Animation erst bei Interaktion (Hover/Touch/Fokus). */
.sft-hl:hover,
.sft-hl:active,
.sft-hl:focus {
  animation: bluna-aurora 9s ease-in-out infinite;
}
@keyframes bluna-aurora {
  0%   { background-position: center center, center center, 0% 50%; }
  50%  { background-position: center center, center center, 100% 50%; }
  100% { background-position: center center, center center, 0% 50%; }
}
/* Alle Texte in die vorderste Ebene – Inset-Schatten & Vignette
   (::before/::after) wirken nur noch auf den Hintergrund, nie auf Text */
.sft-hl > * {
  position: relative;
  z-index: 1;
}
.sft-hl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(5px - 3px);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}
.sft-hl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(5px - 3px);
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
}
.sft-hl-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #B9A8D9;
  text-shadow: 0 0 1px #000000, 0 0 3px #000000, 0 1px 2px #000000;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 8px;
  background: #000000;
  border: 2px solid #000000;
  padding: 3px 7px;
  display: inline-block;
}
/* Marken-Farben wie "BLUNA HUB": BLUNA=weiß, HUB=gold -> SFT=weiß, HIGHLIGHT=gold; BLUNA=weiß, STRING VECTOR=gold */
.sft-hl-label .sft-hl-w, .sft-hl-footer .sft-hl-w { color: #FFFFFF; }
.sft-hl-label .sft-hl-g, .sft-hl-footer .sft-hl-g { color: #fcd34d; }
.sft-hl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sft-hl-grid .sft-hl-m:nth-child(1),
.sft-hl-grid .sft-hl-m:nth-child(2) {
  margin-bottom: 6px;
}
.sft-hl-grid .sft-hl-m:nth-child(even) {
  border-left: none;
}
.sft-hl-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2px 4px;
  min-width: 0;
}
.sft-hl-k {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #00E5FF;
  text-shadow: 0 0 1px #000000, 0 0 3px #000000, 0 1px 2px #000000;
  text-transform: uppercase;
  margin-bottom: 3px;
  white-space: nowrap;
  background: #000000;
  border: 2px solid #000000;
  padding: 3px 7px;
  display: inline-block;
}
.sft-hl-v {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-shadow: 0 0 2px #000000, 0 0 5px #000000, 0 2px 4px #000000;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Glas-Box: transparent mit Blur, Ecken 3px */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 3px;
  padding: 4px 10px;
  display: inline-block;
}
/* Rev-Share-Prozentwert: Neon-Grün (4. Zelle = REV-SHARE) */
.sft-hl-m:nth-child(4) .sft-hl-v {
  color: #39FF14;
}
/* Platz-Überschuss unter der Highlightbox: Die DETAILS-Zeile (pt-2 +
   äußeres space-y) erzeugt 22px Abstand – auf 10px reduziert, damit
   unten genauso viel Luft ist wie oben (Symmetrie-Doktrin).
   Zusätzlich: horizontale Trennlinie entfernen + Text zentrieren. */
#year3000-gallery-module .bluna-rainbow div[class*="pt-2"] {
  margin-top: -12px !important;
  border-top: none !important;
  justify-content: center !important;
  color: #FFFFFF !important;
}
/* "DETAILS"-Text-SPAN (hat eigene text-fuchsia-400-Klasse): Weiß erzwingen */
#year3000-gallery-module .bluna-rainbow div[class*="pt-2"] span {
  color: #FFFFFF !important;
}
.sft-hl-trenner {
  width: 1px;
  background: linear-gradient(180deg, rgba(180, 140, 255, 0), rgba(180, 140, 255, 0.8), rgba(180, 140, 255, 0));
  margin: 2px 6px;
}
.sft-hl-footer {
  margin-top: 8px;
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #8E7FB5;
  text-shadow: 0 0 1px #000000, 0 0 3px #000000, 0 1px 2px #000000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #000000;
  border: 2px solid #000000;
  padding: 3px 7px;
  display: inline-block;
}