/* --- BASIS-STYLING (Für beide Welten) --- */
span.fn-trigger {
  display: inline-block;
  position: relative; 
  color: #046158;
  cursor: help;
  text-decoration: underline;
  vertical-align: super;
  font-size: 0.85em;
  font-weight: bold;
  outline: none;
}

span.fn-text {
  display: none;
  pointer-events: none;
}

/* Fokus-Effekt für Tastaturnutzer */
span.fn-trigger:focus {
  background-color: rgba(4, 97, 88, 0.1);
  outline: 2px solid #046158;
  outline-offset: 2px;
}

/* --- LARGE DEVICES (Ab 1024px) --- */
@media screen and (min-width: 1024px) {
  /* Tooltip direkt an der Zahl positionieren */
  span.fn-trigger:hover ~ span.fn-text,
  span.fn-trigger:focus ~ span.fn-text {
    display: block;
    position: absolute;
    margin-top: .7em;
    margin-left: 3px;
    width: 320px;
    background: #ffffff;
    color: #333;
    padding: 15px;
    border: 1.5px solid #046158;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    white-space: normal;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    /* Sanftes Einblenden */
    animation: fnFadeInDesktop 0.2s ease-out forwards;
  }

  /* Der Pfeil zur Zahl (Nur Desktop) */
  /*span.fn-trigger:hover ~ span.fn-text::before,
  span.fn-trigger:focus ~ span.fn-text::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 15px;
    border-width: 0 8px 9px 8px;
    border-style: solid;
    border-color: transparent transparent #046158 transparent;
  }*/
}

/* --- MOBILE & TABLET (Unter 1024px) --- */
@media screen and (max-width: 1023px) {

  /* Spezifischer Selektor, um !important zu vermeiden */
  body span.fn-trigger:focus ~ span.fn-text {
    display: block;
    position: fixed;
    
    /* Mittige Positionierung (50% der Höhe) */
    bottom: 50%;
    left: 5%;
    transform: translateY(50%);
    
    width: 90%;
    max-height: 45vh; /* Begrenzung der Höhe */
    overflow-y: auto; /* Scrollbar bei langem Text */
    
    background: #ffffff;
    color: #333;
    padding: 50px 25px;
    border: 2px solid #046158;
    border-radius: 12px;
    /* Overlay-Effekt verdunkelt den Hintergrund */
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4), 0 10px 40px rgba(0,0,0,0.3);
    z-index: 999999;
    
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    font-style: normal;
    animation: fnFadeIn 0.3s ease-out;
  }

  /* Das Schließen-X für Touch-Geräte */
  body span.fn-trigger:hover ~ span.fn-text::after,
  body span.fn-trigger:focus ~ span.fn-text::after {
    content: "✕";
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 22px;
    color: #046158;
    font-weight: bold;
    pointer-events: auto;
  }
}

/* Die Animation für Desktop (sanftes Gleiten) */
@keyframes fnFadeInDesktop {
  from {
    opacity: 0;
    transform: translateY(5px); /* Startet 5px tiefer */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* Gleitet an die Zielposition */
  }
}

/* Sanftes Einblenden für Mobile */
@keyframes fnFadeIn {
  from { opacity: 0; transform: translateY(60%); }
  to { opacity: 1; transform: translateY(50%); }
}