/* DAS „i“ — EIN BAUSTEIN FÜR MERCOFINA, GO, MITGLIEDERBEREICH UND WEBAUFTRITT (17.10.2026, Regelwerk
   `hinweise-stehen-hinter-einem-i`; 25.10.2026: „Mach das mit dem i bitte überall wie vorgeschlagen.“).
   Markup und Verhalten: frontend/js/infoZeichen.js. Mercofina und GO laden diese Datei über style.css, der Webauftritt als
   /assets/info-zeichen.css (shop/routes/app.js) — Form und Größe stehen NUR hier; die Farben kommen aus dem Thema der
   Oberfläche (Mercofina: --line-2/--fg/--card-2, Shop: --card-border/--light/--card), wie beim „?“ (hilfe-knopf.css).

   Ein kleiner Kreis direkt hinter dem Namen, die Erklärung als Blase darunter. Kein Knopf im Sinn von „EIN KNOPF“ — ein
   Zeichen in der Zeile wie das Häkchen; es muss die Zeile so niedrig lassen wie ihre Nachbarn (Befund 095). Die Zustände
   stehen hier ausdrücklich: `button:hover` ist spezifischer als die Klasse und färbte das Zeichen sonst grün. */
.info-zeichen,.info-blase{
  --iz-linie:var(--line-2,var(--card-border,rgba(127,127,127,.45)));--iz-ring:var(--muted,#888);
  --iz-text:var(--fg,var(--light,var(--text,inherit)));--iz-flaeche:var(--card-2,var(--card,#fff));
  --iz-fokus:var(--accent-border,var(--accent,currentColor));
}
.info-zeichen{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  /* Der negative Außenrand oben und unten: das Zeichen ist größer als die Schrift daneben und machte die Namenszeile
     sonst 3 px höher als die ohne „i“ (gemessen von info-zeichen.spec.js, Befund 095). */
  width:16px;height:16px;min-width:16px;min-height:16px;padding:0;margin:-4px 0 -4px var(--s-1,4px);vertical-align:middle;
  /* AUF DER MITTE DER SCHRIFT DANEBEN (23.10.2026, Regelwerk `infos-stehen-ueberall-gleich`; Michael: „nicht überall
     unterschiedliche grössen und Positionen der Infos“). `vertical-align: middle` zielt auf die Mitte der
     Kleinbuchstaben — gemessen lag das „i“ damit überall um 0,16 der Schriftgröße daneben unter der Textmitte (2 px bei
     13 px, 4,5 px im Seitentitel). Das Zeichen erbt deshalb die Größe seiner Zeile und hebt sich um genau so viel; das
     „i“ selbst bleibt 11 px (::before). `top` verschiebt nur die Zeichnung, die Zeile bleibt so hoch wie ihre Nachbarn. */
  position:relative;top:-.16em;font-size:inherit;
  border:1px solid var(--iz-linie);border-radius:50%;background:transparent;color:var(--iz-ring);box-shadow:none;
  cursor:help;
  /* Am Handy: die Tippfläche ist größer als der Kreis (WCAG 2.5.8 verlangt 24 px), die Zeile bleibt gleich hoch. */
  -webkit-tap-highlight-color:transparent;
}
.info-zeichen::after{content:"";position:absolute;inset:-5px}
/* Der Abstand hinter dem Text gilt auch dort, wo Knöpfe in einer Reihe ihren Rand verlieren (`.row-between button` u. a.
   in Mercofina) — im Seitentitel klebte das „i“ sonst am Wort (gemessen 0 statt 4 px). */
:is(.row,.row-between,.tbl-actions,.btn-group,.ident-row,.actions,.tbl td,.noch-nicht li,.noch-nicht-empfohlen li) .info-zeichen{margin:-4px 0 -4px var(--s-1,4px)}
.info-zeichen:hover,.info-zeichen:active,.info-zeichen:focus-visible,.info-zeichen[aria-expanded="true"]{background:transparent;filter:none;color:var(--iz-text);border-color:var(--iz-ring)}
.info-zeichen:focus-visible{outline:2px solid var(--iz-fokus);outline-offset:1px}
/* Das Zeichen selbst steht nicht im Text der Zeile (sonst „Titeli“) — CSS zeichnet es. */
.info-zeichen::before{content:"i";font:italic 600 11px/1 Georgia,"Times New Roman",serif}
/* KNOPF MIT „i“ (26.10.2026, Regelwerk `das-i-steht-wo-es-hingehoert`, infoZeichen.js `knopfMitInfo`): Knopf und „i“ in
   EINER Zeile, das „i“ direkt dahinter. `voll`: der Knopf nimmt den Rest der Breite (Webauftritt, volle Knöpfe am Handy). */
.mit-info{display:inline-flex;align-items:center;gap:var(--s-2,8px);max-width:100%;vertical-align:middle}
.mit-info>.info-zeichen{margin:0;top:0}
.mit-info.voll{display:flex;width:100%;margin:0 0 var(--s-2,8px)}
.mit-info.voll>:first-child{flex:1 1 auto;min-width:0}
.info-blase{
  position:fixed;z-index:10600;max-width:min(320px,calc(100vw - 16px));padding:var(--s-2,8px) var(--s-3,12px);
  background:var(--iz-flaeche);color:var(--iz-text);border:1px solid var(--iz-linie);border-radius:var(--r-inner,.5rem);
  box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.25));font-size:var(--t-2,13px);font-weight:400;line-height:1.45;white-space:normal;
  text-align:left;
}
/* Die Blase nimmt die Maus an (Befund 129): wer hineinfährt, kann weiterlesen und den Verweis aufs Handbuch klicken. */
.info-blase .info-handbuch{color:var(--info,var(--accent,inherit));display:inline-block;margin-top:var(--s-1,4px)}