/* Container für das Lightbox-Bild anvisieren */
.lightbox {
  position: relative;
  display: inline-block;
  float: left;
  margin-right: 15px; /* Abstand zum Text */
  margin-bottom: 10px;
}

/* Nur das Lupen-Symbol beim Hovern anzeigen */
.lightbox:hover::before {
  content: "\f52a";
  font-family: "bootstrap-icons";

  /* Exakt in der Mitte des Bildes platzieren */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Styling der Lupe */
  color: #eeeeee;
  font-size: 2.0rem; /* Größe der Lupe */
  z-index: 10;
  pointer-events: none;

  /* Scharfkantiger Schatten, damit die Lupe auch auf weißem Grund lesbar ist */
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   NUR DIE ÄUSSERE BOX WIRD GRAU (INNERE BOXEN BLEIBEN NORMAL)
   ========================================================================== */
/* --- 1. LIGHT MODE (Hellgrau) --- */
.quarto-light .callout.my-gray-box > .callout-header {
  background-color: #eeeeee !important; /* Betrifft NUR den äußeren Header */
}
.quarto-light .callout.my-gray-box > .callout-container > .callout-header {
  background-color: #e2e8f0 !important; /* Greift, falls Quarto einen Container-Zwischenschritt nutzt */
}

/* --- 2. DARK MODE (Mittelgrau) --- */
.quarto-dark .callout.my-gray-box > .callout-header {
  background-color: #555555 !important;
  color: #ffffff !important;
}
.quarto-dark .callout.my-gray-box > .callout-container > .callout-header {
  background-color: #4a5568 !important;
  color: #ffffff !important;
}

/* Ränder nur für die äußere Box anpassen */
.quarto-light .callout.my-gray-box { border-left-color: #cbd5e1 !important; }
.quarto-dark .callout.my-gray-box { border-color: #555555 !important; }
.quarto-dark .callout.my-gray-box { border-left-color: #718096 !important; }