/* Accessibility helper (Utility) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Box styling – immer hell (kein Dark-Mode) */
#hh-risk-fees .hh-risk-fees{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 1100px; margin: 0 auto;
  background: #f8fafc;              /* slate-50 */
  border: 1px solid #e2e8f0;        /* slate-200 */
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(2,6,23,.05);
  color: #0f172a;                   /* slate-900 */
}

/* Rows */
#hh-risk-fees .hf-row{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0;
  border-top: 1px dashed rgba(2,6,23,.08);
}
#hh-risk-fees .hf-row:first-of-type{ border-top:none; padding-top:0; }

/* Emoji (Leading) */
#hh-risk-fees .hf-emoji{
  font-size:20px; line-height:1; margin-top:.15em;
  display:inline-block; transform-origin:center;
  transition: transform 300ms ease, filter 300ms ease;
}

/* Emojis, die im Fließtext erkannt/umwickelt werden */
#hh-risk-fees .hf-emoji-inline{
  display:inline-block; line-height:1;
  transition: transform 300ms ease, filter 300ms ease;
}

/* Hover/Fokus: Emoji-Boost */
@media (hover:hover) and (pointer:fine){
  #hh-risk-fees .hf-row:hover .hf-emoji,
  #hh-risk-fees .hf-row:focus-within .hf-emoji,
  #hh-risk-fees .hf-row:hover .hf-emoji-inline,
  #hh-risk-fees .hf-row:focus-within .hf-emoji-inline{
    transform: scale(1.2);
    filter: drop-shadow(0 2px 4px rgba(14,165,233,.30));
  }
}

/* Mobile: Boost, wenn Zeile sichtbar (per JS .is-active) */
@media (hover:none) and (pointer:coarse){
  #hh-risk-fees .hf-row.is-active .hf-emoji,
  #hh-risk-fees .hf-row.is-active .hf-emoji-inline{
    transform: scale(1.2);
    filter: drop-shadow(0 2px 4px rgba(14,165,233,.30));
  }
}

/* Text/Links */
#hh-risk-fees .hf-text{ margin:0; font-size:14.5px; line-height:1.6; }
#hh-risk-fees .hf-link{ color:#2563eb; text-underline-offset:2px; }
#hh-risk-fees .hf-link:focus-visible{
  outline:3px solid rgba(37,99,235,.35); outline-offset:2px; border-radius:6px;
}
#hh-risk-fees .hf-footnote{ margin:8px 0 0 32px; font-size:13px; color:#475569; }

/* Optional: Beträge via globalem Währungs-Switcher */
#hh-risk-fees .hh-amount{ font-weight:700; color:#0f172a; }

/* Mobile Tweaks */
@media (max-width:768px){
  #hh-risk-fees{ padding:22px 16px !important; }
  #hh-risk-fees .hh-risk-fees{ padding:14px; border-radius:14px; }
  #hh-risk-fees .hf-text{ font-size:14px; line-height:1.6; }
  #hh-risk-fees .hf-footnote{ margin-left:28px; font-size:12.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  #hh-risk-fees *{ transition:none !important; }
}