/* ===== Scoped base ===== */
#hh-inline-esg-impact-fusion{
  --ease:cubic-bezier(.22,.8,.24,1);
  --dur:400ms;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0f172a;
}
#hh-inline-esg-impact-fusion .hh-esg-inner{max-width:950px;margin:0 auto;}
#hh-inline-esg-impact-fusion #esg-impact-title{
  text-align:center; font-size:clamp(26px,4vw,36px); font-weight:800;
  line-height:1.2; letter-spacing:-.02em; margin:0 0 18px;
}
#hh-inline-esg-impact-fusion .lead{
  text-align:center; font-size:clamp(16px,2.2vw,18px); color:#475569;
  line-height:1.55; max-width:720px; margin:0 auto 32px; font-weight:600;
}

/* Grid */
#hh-inline-esg-impact-fusion .esg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:1024px){#hh-inline-esg-impact-fusion .esg-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){#hh-inline-esg-impact-fusion .esg-grid{grid-template-columns:1fr;gap:12px;}}

/* Card – Aqua Hover Glow + Pointer-Follow */
#hh-inline-esg-impact-fusion .esg-box{
  position:relative; overflow:hidden; background:#ffffff;
  border-radius:20px; padding:25px 20px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 8px 18px rgba(0,0,0,0.05);
  transform:translateY(0) scale(1);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  text-align:center; color:#0f172a;
  --mx:50%; --my:40%;
}
#hh-inline-esg-impact-fusion .esg-box > *{ position:relative; z-index:1; }
#hh-inline-esg-impact-fusion .esg-box::before{
  content:""; position:absolute; inset:-1px; pointer-events:none; z-index:0; opacity:0;
  background:
    radial-gradient(160px circle at var(--mx) var(--my), rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    radial-gradient(280px circle at var(--mx) var(--my), rgba(56,189,248,.18), transparent 70%);
  transition:opacity .4s ease;
}

/* Desktop Hover + Tastaturfokus */
@media (hover:hover) and (pointer:fine){
  #hh-inline-esg-impact-fusion .esg-box:hover,
  #hh-inline-esg-impact-fusion .esg-box:focus-visible{
    transform: translateY(-6px);
    background: rgba(224,242,254,0.55);
    box-shadow: 0 8px 25px rgba(56,189,248,0.35), inset 0 0 8px rgba(14,165,233,0.15);
    border-color: rgba(56,189,248,0.25);
    outline:none;
  }
  #hh-inline-esg-impact-fusion .esg-box:hover::before,
  #hh-inline-esg-impact-fusion .esg-box:focus-visible::before{ opacity:1; }
}

/* Mobile/Touch: Auto-Glow */
@media (hover:none) and (pointer:coarse){
  #hh-inline-esg-impact-fusion .esg-box.is-active{
    transform: translateY(-6px);
    background: rgba(224,242,254,0.55);
    box-shadow: 0 8px 25px rgba(56,189,248,0.35), inset 0 0 8px rgba(14,165,233,0.15);
    border-color: rgba(56,189,248,0.25);
  }
  #hh-inline-esg-impact-fusion .esg-box.is-active::before{ opacity:1; }
}

/* Icon/Emoji Stil */
#hh-inline-esg-impact-fusion .esg-icon{
  font-size:28px; margin-bottom:10px;
  color:#38bdf8;
  transition: transform 300ms ease, filter 300ms ease, color 300ms ease;
}

/* ===== Emoji-Vergrößerung beim Hover/Fokus ===== */
/* 1) Die Icon-Emojis */
@media (hover:hover) and (pointer:fine){
  #hh-inline-esg-impact-fusion .esg-box:hover .esg-icon,
  #hh-inline-esg-impact-fusion .esg-box:focus-visible .esg-icon{
    transform: scale(1.25) !important;
    color:#0ea5e9;
    filter: drop-shadow(0 2px 4px rgba(14,165,233,.30)) !important;
  }
}
@media (hover:none) and (pointer:coarse){
  #hh-inline-esg-impact-fusion .esg-box.is-active .esg-icon{
    transform: scale(1.25);
    color:#0ea5e9;
    filter: drop-shadow(0 2px 4px rgba(14,165,233,.30));
  }
}

/* 2) Emojis im Fließtext – via JS zu .esg-emoji gewrappt */
#hh-inline-esg-impact-fusion .esg-emoji{
  display:inline-block; line-height:1;
  transition: transform 300ms ease, filter 300ms ease;
}
@media (hover:hover) and (pointer:fine){
  #hh-inline-esg-impact-fusion .esg-box:hover .esg-emoji,
  #hh-inline-esg-impact-fusion .esg-box:focus-visible .esg-emoji{
    transform: scale(1.25) !important;
    filter: drop-shadow(0 2px 4px rgba(14,165,233,.30)) !important;
  }
}

/* Text */
#hh-inline-esg-impact-fusion .esg-title{
  text-align:center; font-size:18px; font-weight:800; margin:0 0 10px;
}
#hh-inline-esg-impact-fusion .esg-text{
  text-align:center; font-size:14px; line-height:1.5; color:#475569; margin:0;
}

/* Optional: Betrag inline sauber anzeigen */
#hh-inline-esg-impact-fusion .esg-text .hh-amount{ font-weight:700; color:#0f172a; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #hh-inline-esg-impact-fusion .esg-box,
  #hh-inline-esg-impact-fusion .esg-icon,
  #hh-inline-esg-impact-fusion .esg-emoji{ transition:none !important; }
}