/* Info-Icon + Sprechblase (siehe js/info-tip.js) */
.info-i {
  display: inline-flex;
  vertical-align: -0.22em;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  color: var(--text-dim, #9fb0c0);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  border-radius: 50%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.info-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-i:hover, .info-i.open, .info-i:focus-visible { color: var(--accent-2, #a855f7); }
.info-i .info-tip { display: none; }
.info-bubble {
  position: fixed;
  z-index: 10000;
  background: var(--panel-2, #1c2a38);
  border: 1px solid #2c3d50;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text, #eef3f8);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.info-bubble[hidden] { display: none; }
.info-bubble::before {
  content: '';
  position: absolute;
  top: -5px;
  left: var(--arrow-x, 16px);
  width: 8px;
  height: 8px;
  background: var(--panel-2, #1c2a38);
  border-left: 1px solid #2c3d50;
  border-top: 1px solid #2c3d50;
  transform: rotate(45deg);
}
.info-bubble.above::before { top: auto; bottom: -5px; transform: rotate(225deg); }
.info-bubble code { font-size: 0.72rem; background: rgba(255, 255, 255, 0.07); padding: 1px 4px; border-radius: 4px; }
.info-bubble b { color: var(--text, #eef3f8); }