/**
 * idf-hilfe-griff - das Fragezeichen hinter einem Feldnamen (#1423)
 *
 * JS: `idf-hilfe-griff.js` im selben Ordner. Laedt immer.
 *
 * So klein und leise wie moeglich: der Griff soll nicht auffallen, bis man
 * ihn sucht. Er erbt die Schriftgroesse des Labels, hinter dem er steht, und
 * steht in --soft; erst beim Ueberfahren wird er Akzent-Blau.
 */

.idf-hilfe-griff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 var(--space-1, 4px);
  padding: 0 2px;
  border: 0;
  border-radius: var(--radius-xs, 3px);
  background: transparent;
  color: var(--ink-50);
  font: inherit;
  font-weight: var(--weight-regular, 400);
  line-height: 1;
  vertical-align: baseline;
  cursor: pointer;
  transition: color var(--motion-base, 120ms);
}
.idf-hilfe-griff:hover,
.idf-hilfe-griff:focus-visible {
  color: var(--accent);
}
.idf-hilfe-griff:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Mit dem Finger: Trefferflaeche groesser, ohne die Zeile zu sprengen. */
html[data-input-mode="touch"] .idf-hilfe-griff {
  min-width: 32px;
  min-height: 32px;
}