/* ===== Scope & Tokens ===== */
#hh-inline-tax{
  --ink:#0f172a; --muted:#475569; --border:#e2e8f0; --surface:#ffffff;
  --ring:rgba(59,130,246,.5);
  --ease:cubic-bezier(.22,.8,.24,1); --dur:400ms;
  --gradA:#3366cc; --gradB:#00aeef; --gradC:#00cc99;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink);
}
#hh-inline-tax .hh-tax-container{ max-width: 950px; margin: 0 auto; }

/* Safeguard (keine fremden Hintergründe) */
#hh-inline-tax .hh-tax-section,
#hh-inline-tax .hh-tax-container,
#hh-inline-tax h2, #hh-inline-tax p, #hh-inline-tax .lead, #hh-inline-tax .hh-tax-footnote{
  background:transparent !important; background-color:transparent !important;
}

/* Heading / Lead */
#hh-inline-tax #tax-heading{
  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-tax .lead{
  text-align:center; font-size:clamp(16px,2.2vw,18px); color:var(--muted);
  line-height:1.55; max-width:720px; margin:0 auto 30px; font-weight:600;
}

/* Grid: 3 Kacheln */
#hh-inline-tax .hh-tax-grid{
  display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ #hh-inline-tax .hh-tax-grid{ grid-template-columns:1fr; gap:12px; } }

/* Kachel – Aqua Glow + Pointer-Follow */
#hh-inline-tax .hh-tax-box{
  position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; padding:18px;
  text-align:center; box-shadow:0 6px 14px rgba(0,0,0,.06);
  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);
  will-change: transform, box-shadow;
  --mx:50%; --my:40%;
}
#hh-inline-tax .hh-tax-box > *{ position:relative; z-index:1; }
#hh-inline-tax .hh-tax-box::before{
  content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0; z-index: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;
}

/* Hover/Fokus Glow */
@media (hover:hover) and (pointer:fine){
  #hh-inline-tax .hh-tax-box:hover,
  #hh-inline-tax .hh-tax-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-tax .hh-tax-box:hover::before,
  #hh-inline-tax .hh-tax-box:focus-visible::before{ opacity:1; }
}

/* Touch Auto-Glow */
@media (hover:none) and (pointer:coarse){
  #hh-inline-tax .hh-tax-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-tax .hh-tax-box.is-active::before{ opacity:1; }
}

/* Inhalte */
#hh-inline-tax .hh-tax-icon{
  font-size:28px; line-height:1; margin-bottom:6px;
  transition:transform 300ms ease, filter 300ms ease;
}

/* ===== Emoji-Hover: robust ===== */
/* 1) Kachel-Icon direkt (wie in deinem Beispiel) */
@media (hover:hover) and (pointer:fine){
  #hh-inline-tax .hh-tax-box:hover .hh-tax-icon,
  #hh-inline-tax .hh-tax-box:focus-visible .hh-tax-icon{
    transform:scale(1.2) !important;
    filter:drop-shadow(0 2px 4px rgba(14,165,233,.30)) !important;
  }
}
@media (hover:none) and (pointer:coarse){
  #hh-inline-tax .hh-tax-box.is-active .hh-tax-icon{
    transform:scale(1.2);
    filter:drop-shadow(0 2px 4px rgba(14,165,233,.30));
  }
}

/* 2) Zusätzlich: beliebige Emojis im Text, wenn vorhanden (werden via JS zu .hh-emoji gewrappt) */
#hh-inline-tax .hh-emoji{
  display:inline-block;
  line-height:1;
  transition: transform 300ms ease, filter 300ms ease;
}
@media (hover:hover) and (pointer:fine){
  #hh-inline-tax .hh-tax-box:hover .hh-emoji,
  #hh-inline-tax .hh-tax-box:focus-visible .hh-emoji{
    transform:scale(1.2) !important;
    filter:drop-shadow(0 2px 4px rgba(14,165,233,.30)) !important;
  }
}

/* Typo */
#hh-inline-tax .hh-tax-title{
  font-size:clamp(18px,2.2vw,20px); font-weight:800; letter-spacing:-.01em;
  margin:0 0 8px; color:#0f172a;
}
#hh-inline-tax .hh-tax-text{ margin:0; color:var(--muted); }

/* Zahlen in den drei Haupt-Kacheln (prominent) */
#hh-inline-tax .hh-tax-value{
  margin:10px 0 2px; font-weight:800; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(26px,4.6vw,36px);
  background:linear-gradient(90deg,var(--gradA),var(--gradB),var(--gradC));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#hh-inline-tax .hh-tax-sub{ margin:0; color:var(--muted); font-size:13.5px; }
#hh-inline-tax .hh-tax-pill{
  display:inline-block; margin:6px 0 2px; padding:6px 10px; border-radius:999px;
  font-weight:800; font-size:12.5px; color:#1e40af;
  background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.22);
}

#hh-inline-tax .hh-tax-footnote{
  text-align:center; color:var(--muted); font-size:14.5px; max-width:800px; margin:16px auto 0;
}

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