/* === Info-Icons & Tooltips (vereinheitlicht mit Pflichtfeld-Kreis) === */
.info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;            /* gleicher Abstand wie roter Kreis */
  vertical-align: middle;
}

/* Einheitliche runde Info-Icons
   Hinweis: Wir überschreiben globale Button-Styles (z.B. aus components.css),
   damit das Icon NICHT auf ~46px hochskaliert. */
button.info-icon,
.info-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  min-width: 24px;
  min-height: 24px;   /* überschreibt min-height aus globalen Button-Styles */
  padding: 0;         /* überschreibt padding aus globalen Button-Styles */
  aspect-ratio: 1 / 1;

  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(37,99,235,.25);
  user-select: none;
  transition: background .2s ease, transform .1s ease;
  vertical-align: middle;
}

.info-icon:hover,
.info-icon:focus {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.info-icon:active {
  transform: scale(0.95);
}

/* === Tooltip-Bubble (Basis) === */
.tooltip {
  position: absolute;
  z-index: 1000;

  /* Box */
  min-width: 260px;
  max-width: 420px;
  padding: 12px 14px;
  background: #ffffff !important; /* harter, deckender Hintergrund */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(2,12,70,.12);
  color: #1f2937;
  line-height: 1.4;

  /* Versteckt per Default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}

/* Sichtbar-Schalter (wird auf Mobile/JS gesetzt) */
.tooltip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* === Desktop-Positionierung & Hover-Verhalten ===
   Auf Desktop soll die Bubble "oben rechts" relativ zum Icon erscheinen.
   Wir lassen CSS das Anzeigen via :hover machen – kein JS nötig. */
@media (hover: hover) and (pointer: fine) {
  /* Position: oberhalb + rechts vom Icon */
  .info-wrap .tooltip {
    bottom: 100%;          /* über dem Icon */
    left: 100%;            /* rechts vom Icon */
    transform: translate(8px, -8px); /* kleiner Versatz nach außen/oben */
  }

  /* Hover auf die gesamte Wrap-Fläche erlaubt leichtes Verlassen des Icons */
  .info-wrap:hover .tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* === Mobile Modal (zentriert) – wird nur bei geöffnetem Popup per JS ergänzt === */
@media (hover: none), (pointer: coarse) {
  .tooltip.mobile-center {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* Breite: groß & lesbar; Basis-Desktopgrenzen (260/420) deaktivieren */
    min-width: 0 !important;
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: min(720px, calc(100vw - 32px)) !important;

    /* Popup-Look */
    background: #ffffff !important;         /* deckend weiß */
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.15) !important;
    padding: 16px 18px !important;
    color: #1f2937 !important;
    text-align: left;

    z-index: 10001 !important;

    /* Deine Anforderung: kein internes Scrollen – Box wächst mit dem Inhalt */
    max-height: none !important;
    overflow: visible !important;
  }
}
/* Scroll-Lock ohne graue Flächen / iOS-Jump */
body.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}