/* ════════════════════════════════════════════════════════════════════
   SPRECHBLASEN · gemeinsam fuer Clubs, Leagues, Events und Mitgliederbereich
   2026-08-02 (p50): Bis hierher lag dieses System nur in Clubs. Leagues und
   Events hatten gar keine eigenen Blasen und zeigten stattdessen die graue
   Browserblase des title-Attributs — ungestaltbar, traege, auf Touchgeraeten
   unsichtbar. Der Block ist unveraendert aus app/index.html hierher gezogen.

   Nutzung: <span class="has-tip" data-tip="Erklaerung">Label</span>
   Zusaetze: .tip-below · .tip-left-anchor · .tip-right-anchor · .no-underline
   ════════════════════════════════════════════════════════════════════ */
/* ─────────── HOVER TOOLTIP SYSTEM (band & range legends) ─────────── */
/* Usage: <span class="has-tip" data-tip="Plain-English explanation">Label</span>
   The dotted underline signals 'this has a definition'. The popup uses a CSS-only
   hover state — no JS — and stays inside the viewport via right-edge anchoring on
   elements that opt in via .has-tip.tip-right. */
.has-tip {
  position: relative;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.has-tip[data-tip]::before,
.has-tip[data-tip]::after {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease 0.08s, visibility 0.12s ease 0.08s;
}
.has-tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 9000;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  background: #0D3D2D;
  /* 2026-08-02 (p50): Auf den dunkelgruenen Flaechen im Ergebnis verschmolz die
     Blase mit dem Grund — gleiche Farbe, kein Schatten. Ein duenner heller Rand
     grenzt sie dort ab und faellt auf hellem Grund nicht auf. */
  border: 1px solid rgba(242, 239, 232, 0.30);
  color: #F7F5F0;
  font-size: 12px;
  /* p86 Etappe D · Fund. Die Blase erbte bisher Schriftart, Laufweite und
     Versalien vom Element, an dem sie haengt. An der grossen Serifenzahl der
     Null-bis-Hundert-Skala sah dieselbe Blase deshalb ganz anders aus als an
     einer Textzeile. Ein Tooltip ist Beiwerk und sieht ueberall gleich aus. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  font-variant: normal;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: left;
  border-radius: 2px;
  box-shadow: none;
  white-space: normal;
}
.has-tip[data-tip]::before {
  content: '';
  position: absolute;
  z-index: 9001;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #0D3D2D;
}
/* 2026-07-23 (Konsistenz-Sweep): Info-Icon neben Question-Prompt — Tooltip statt zwei Boxen */
.q-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  margin-left: 8px;
  border-radius: 999px;
  background: rgba(235, 112, 51, 0.14);
  color: #953B0F;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: help;
  vertical-align: 3px;
  border-bottom: 0 !important;
  user-select: none;
}
.q-info-icon:hover { background: rgba(235, 112, 51, 0.28); }
.q-info-icon[data-tip]::after { max-width: 380px; white-space: pre-line; }
.has-tip:hover[data-tip]::before,
.has-tip:hover[data-tip]::after,
.has-tip:focus[data-tip]::before,
.has-tip:focus[data-tip]::after {
  opacity: 1;
  visibility: visible;
}
/* Below-anchor variant (use .tip-below when the element is near the top of the viewport) */
.has-tip.tip-below[data-tip]::after {
  bottom: auto;
  top: calc(100% + 10px);
}
.has-tip.tip-below[data-tip]::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top: 6px solid transparent;
  border-bottom: 6px solid #0D3D2D;
}
/* Right-anchored variant for chips at the right edge of a card — popup grows leftward */
.has-tip.tip-left-anchor[data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}
.has-tip.tip-left-anchor[data-tip]::before {
  left: auto;
  right: 14px;
  transform: none;
}
/* Left-anchored variant for chips at the left edge of a card — popup grows rightward */
.has-tip.tip-right-anchor[data-tip]::after {
  left: 0;
  right: auto;
  transform: none;
}
.has-tip.tip-right-anchor[data-tip]::before {
  left: 14px;
  right: auto;
  transform: none;
}
/* The decision-band chips (GO / FAST TRACK / CONSIDER / PARK) opt into has-tip
   but should not show the dotted underline — their pill chrome already signals
   they are interactive. The cursor:help + focus ring carry the affordance. */
.qs-pill.has-tip,
.ic-band.has-tip,
.pt-band.has-tip {
  border-bottom: none;
  outline: none;
}
.qs-pill.has-tip:focus-visible,
.ic-band.has-tip:focus-visible,
.pt-band.has-tip:focus-visible {
  box-shadow: none;
  border-radius: 2px;
}
/* When the tipped element is on a dark background (e.g. KPI chip), keep the dotted underline subtle */
.has-tip.on-dark { border-bottom-color: rgba(247, 245, 240, 0.55); }
/* For pill/chip targets the chip itself is the affordance — suppress the dotted underline */
.has-tip.no-underline { border-bottom: none; }

/* ------------------------------------------------------------------
   2026-08-02 (p50) · Handy und schmale Fenster
   Gemessen auf iPhone 13: die ueber dem Element zentrierte Blase lief
   links aus dem Bild, der Text war abgeschnitten. Unter 640px erscheint
   die Erklaerung deshalb als Leiste am unteren Bildrand — immer
   vollstaendig lesbar, egal wo das angetippte Element steht.
   Der Zeiger entfaellt dort, weil er keinen Bezug mehr haette. Sie sitzt
   direkt unter der Kopfleiste (68px), damit diese frei bleibt.
   ------------------------------------------------------------------ */
/* p82 Block D-5 (2026-08-04): the bar was only applied while the element was touched. In its
   resting state the bubble kept its 320px absolute box, which pushed the page 67px wider than
   the 390px viewport and produced a sideways scroll on every screen with a tipped element.
   The bar geometry now applies at all times below 640px; only its visibility still switches. */
@media (max-width: 640px) {
  .has-tip[data-tip]::after {
    position: fixed;
    box-sizing: border-box;
    left: 12px;
    right: 12px;
    top: 68px;
    bottom: auto;
    width: auto;
    max-width: none;
    min-width: 0;
    transform: none;
    white-space: normal;
    z-index: 9500;
  }
  .has-tip[data-tip]::before {
    display: none;
  }
}