/* ============================================================
   bacap – Komponente: Rich-Tooltip (.tt + .tt-pop)
   ------------------------------------------------------------
   Erscheinungsbild und Verhalten der "i"-Tooltips für alle
   Rechner. Aktivierung über Klasse .tt am Trigger-Element:

     <span class="i tt" tabindex="0" aria-label="Info: …">i
       <span class="tt-pop" role="tooltip" aria-hidden="true">
         <span class="tt-title">Titel</span>
         <span class="tt-body">
           <span class="tt-lead">Kurztext</span>
         </span>
       </span>
     </span>

   Sichtbarkeit: hover, focus, focus-within (Tastatur + Touch).
   ============================================================ */

.calc-app .tt{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:0;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:11px;
  line-height:1;
  cursor:help;
  user-select:none;
}

.calc-app .tt:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Popup-Container */
.calc-app .tt .tt-pop{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  min-width:var(--tt-min-w, 240px);
  max-width:var(--tt-max-w, min(420px, 85vw));
  padding:10px 12px;
  border-radius:var(--radius-lg);
  border:1px solid var(--tt-border, var(--br));
  background:var(--tt-bg, var(--card));
  box-shadow:var(--shadow-tooltip);
  z-index:50;
  display:none;
  white-space:normal;
  text-align:left;
}

/* Pfeil oben */
.calc-app .tt .tt-pop::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:var(--tt-bg, var(--card));
  border-left:1px solid var(--tt-border, var(--br));
  border-top:1px solid var(--tt-border, var(--br));
}

/* Sichtbar bei Hover/Fokus */
.calc-app .tt:hover .tt-pop,
.calc-app .tt:focus .tt-pop,
.calc-app .tt:focus-within .tt-pop{
  display:block;
}

/* Inhaltsteile */
.calc-app .tt .tt-title{
  display:block;
  font-weight:800;
  margin-bottom:6px;
  color:var(--txt);
  font-size:13px;
}
.calc-app .tt .tt-body{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.calc-app .tt .tt-lead{ display:block; }
.calc-app .tt .tt-list{
  margin:6px 0 0;
  padding-left:18px;
}
.calc-app .tt .tt-list li{ margin:2px 0; }
.calc-app .tt .tt-note{
  display:block;
  margin-top:6px;
  font-style:italic;
  opacity:.85;
}

/* Auf kleinen Screens darf das Popup nicht aus dem Viewport ragen */
@media (max-width: 520px){
  .calc-app .tt .tt-pop{
    left:0;
    transform:none;
    min-width:0;
    max-width:90vw;
  }
  .calc-app .tt .tt-pop::before{ left:20px; }
}