/* ── TOOLTIP SYSTEM — #667 ─────────────────────────────── */
.tip-wrap{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.tip-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(100,116,139,.15);color:#64748b;font-size:10px;font-weight:700;cursor:default;margin-left:4px;flex-shrink:0;line-height:1;user-select:none;transition:background .15s,color .15s;border:1px solid rgba(100,116,139,.2)}
.tip-icon:hover{background:rgba(0,120,174,.18);color:#0078AE;border-color:rgba(0,120,174,.3)}
.tip-bubble{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#153D64;color:#fff;font-size:12px;font-weight:400;line-height:1.5;padding:7px 11px;border-radius:7px;white-space:normal;max-width:220px;min-width:100px;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:8000;box-shadow:0 4px 14px rgba(0,0,0,.22);text-align:left}
.tip-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#153D64}
/* #1287: `tip-offen` kommt vom Antippen (static/js/tooltips_tippen.js). Hover deckt
   die Maus ab, focus-within die Tastatur - auf dem Handy gibt es weder das eine noch
   verlaesslich das andere. */
.tip-wrap:hover .tip-bubble,.tip-wrap:focus-within .tip-bubble,.tip-wrap.tip-offen .tip-bubble{opacity:1}
/* Angetippt bleibt die Blase stehen und ist dann auch anklickbar (Verweise darin). */
.tip-wrap.tip-offen .tip-bubble{pointer-events:auto}
/* Ein Zeichen, das man antippen soll, sieht auch antippbar aus. */
.tip-icon{cursor:pointer}
/* Aufzaehlung: Zeilenumbrueche im Text bleiben erhalten (stil='liste').
   max-width bewusst 250px und nicht mehr: bei 375px Geraetebreite muss die Blase mit
   ihrer Zentrierung noch vollstaendig auf den Schirm passen. */
.tip-bubble.tip-liste{white-space:pre-line;max-width:250px;line-height:1.55}
/* Position: bottom */
.tip-bubble.tip-b{bottom:auto;top:calc(100% + 8px)}
.tip-bubble.tip-b::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#153D64}
/* Position: right */
.tip-bubble.tip-r{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}
.tip-bubble.tip-r::after{top:50%;left:-10px;transform:translateY(-50%);border-top-color:transparent;border-right-color:#153D64}
/* Label row helper */
.tip-lr{display:flex;align-items:center;gap:2px;margin-bottom:3px}
.tip-lr>label{margin-bottom:0!important;font-size:11px;font-weight:500;color:var(--muted,#64748b)}
/* Dark mode */
[data-theme="dark"] .tip-icon{background:rgba(148,163,184,.18);color:#94a3b8;border-color:rgba(148,163,184,.2)}
[data-theme="dark"] .tip-icon:hover{background:rgba(0,120,174,.25);color:#60a5fa;border-color:rgba(0,120,174,.4)}
[data-theme="dark"] .tip-bubble{background:#0f172a;border:1px solid #334155;box-shadow:0 4px 14px rgba(0,0,0,.5)}
[data-theme="dark"] .tip-bubble::after{border-top-color:#0f172a}
[data-theme="dark"] .tip-bubble.tip-b::after{border-top-color:transparent;border-bottom-color:#0f172a}