/* ============================================================================ Abo-Tooltips — Trigger in der Vergleichstabelle + Popover-Karte. Die Karte hängt am (außerhalb jedes Token-Scopes) -> Literalwerte. Flat (RR-Design): Karte mit Linie + moderatem Schatten, kein Glow/Gradient. ========================================================================== */ /* ── Trigger: Feature-Label mit Tooltip ── */ .inst-cmp__tipbtn{ appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit; cursor:help;display:inline-flex;align-items:center;gap:6px;text-align:left; text-decoration:underline dotted rgba(30,69,108,.5);text-underline-offset:3px; } .inst-cmp__tipbtn:hover,.inst-cmp__tipbtn:focus-visible{color:#1c7291;background:none;outline:none;} .inst-cmp__tipbtn:focus-visible{text-decoration-style:solid;} .inst-cmp__tipico{width:14px;height:14px;flex:none;stroke:#8298ad;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;} .inst-cmp__tipbtn:hover .inst-cmp__tipico,.inst-cmp__tipbtn:focus-visible .inst-cmp__tipico{stroke:#1c7291;} /* ── Trigger: Fußnoten-Ziffer ── */ sup.inst-cmp__fn[data-tip]{cursor:help;} sup.inst-cmp__fn[data-tip]:hover,sup.inst-cmp__fn[data-tip]:focus{color:#1c7291;outline:none;} /* ── Popover-Karte ── */ .inst-tipcard{ position:fixed;z-index:100020;max-width:330px;background:#fff; border:1px solid #ccd6e2;border-radius:12px;overflow:hidden; box-shadow:0 12px 34px rgba(16,40,70,.20); opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none; font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } .inst-tipcard.on{opacity:1;visibility:visible;} .inst-tipcard img,.inst-tipcard video{display:block;width:100%;height:auto;border-bottom:1px solid #dbe3ec;} .inst-tipcard b{display:block;font-size:13.5px;font-weight:700;color:#1e456c;padding:11px 14px 0;} .inst-tipcard b:last-child{padding-bottom:11px;} .inst-tipcard p{margin:4px 0 0;font-size:13px;line-height:1.5;color:#64748b;padding:0 14px 12px;} @media (max-width:560px){ .inst-tipcard{max-width:calc(100vw - 16px);} }