/* Scoped Tokens */
#hh-difference{
  --ink:#0f172a;
  --ink-muted:#475569;
  --border:rgba(0,0,0,.06);
  --shadow:0 12px 32px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.04);
  --shadow-hover:0 12px 32px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.06);
  --shadow-glow:0 0 30px rgba(56,189,248,.45),0 0 60px rgba(37,99,235,.30),0 12px 32px rgba(0,0,0,.08);
  --r:20px;
}

#hh-difference .hh-diff-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
@media(max-width:800px){
  #hh-difference .hh-diff-grid{grid-template-columns:1fr;}
}

#hh-difference .hh-diff-col{
  position:relative;
  background:#ffffff;
  border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:28px;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  outline:none;
}

#hh-difference .hh-diff-col.highlight{
  border-color:rgba(56,189,248,.35);
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.98) 0%,
    rgba(224,242,254,.60) 100%
  );
}

#hh-difference .hh-diff-head{
  font-size:18px;
  font-weight:800;
  margin:0 0 14px;
  color:var(--ink);
}

#hh-difference .hh-diff-list{
  list-style:none;
  padding:0;
  margin:0;
}

#hh-difference .hh-diff-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  font-size:14.5px;
  line-height:1.55;
  color:#334155;
}

/* Default bullets (blau) */
#hh-difference .hh-diff-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#38bdf8;
  font-size:22px;
  line-height:1;
}

/* Classic bullets grau */
#hh-difference [data-col="classic"] .hh-diff-list li::before{
  color: rgba(15,23,42,.45);
}

/* A11y Focus */
#hh-difference .hh-diff-col:focus-visible{
  outline: 3px solid rgba(56,189,248,.55);
  outline-offset: 4px;
}

/* Desktop hover */
@media (hover:hover) and (pointer:fine){
  #hh-difference [data-col="classic"]:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0,0,0,.10);
  }

  #hh-difference .hh-diff-col.highlight:hover{
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
    border-color: rgba(56,189,248,.32);
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(224,242,254,.78) 100%);
  }

  #hh-difference .hh-diff-col.highlight::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:calc(var(--r) + 2px);
    pointer-events:none;
    opacity:0;
    background:
      radial-gradient(520px 260px at 18% 12%, rgba(56,189,248,.18), transparent 60%),
      radial-gradient(520px 260px at 85% 20%, rgba(37,99,235,.16), transparent 60%),
      radial-gradient(520px 260px at 55% 110%, rgba(16,185,129,.10), transparent 60%);
    transition: opacity .25s ease;
    z-index:0;
  }
  #hh-difference .hh-diff-col.highlight > *{ position:relative; z-index:1; }
  #hh-difference .hh-diff-col.highlight:hover::before{ opacity:1; }
}

/* Base glow layer for HHC card (used by mobile state too) */
#hh-difference [data-col="hhc"]::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:calc(var(--r) + 2px);
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(520px 260px at 18% 12%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(520px 260px at 85% 20%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(520px 260px at 55% 110%, rgba(16,185,129,.10), transparent 60%);
  transition: opacity .25s ease;
  z-index:0;
}
#hh-difference [data-col="hhc"] > *{ position:relative; z-index:1; }

/* ✅ Mobile active glow */
#hh-difference [data-col="hhc"].hh-mobile-glow{
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(56,189,248,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(224,242,254,.78) 100%);
}
#hh-difference [data-col="hhc"].hh-mobile-glow::before{ opacity:1; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #hh-difference .hh-diff-col{transition:none!important; transform:none!important;}
  #hh-difference [data-col="hhc"]::before{transition:none!important;}
  #hh-difference [data-col="hhc"].hh-mobile-glow{
    box-shadow: var(--shadow);
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(224,242,254,.60) 100%);
    border-color: rgba(56,189,248,.35);
  }
}