/* === Bildvergrößerung im Artikel ===
   Gestaltet die eingebaute Vergrößerung von WordPress (.wp-lightbox-overlay):
   schwarzer Grund, Bild eckig mit dem üblichen Eckschnitt, weißes X oben rechts.
   Hinweis: Die Knöpfe heißen im Kern .wp-lightbox-close-button bzw.
   .wp-lightbox-navigation-button-*, nicht .close-button. */

/* Die Fläche hinter dem Bild. WordPress setzt sie auf Weiß mit 0.9 Deckkraft. */
.wp-lightbox-overlay .scrim {
  background-color: #000 !important;
  opacity: 0.96 !important;
}

/* Bild: keine Rundung, stattdessen der Eckschnitt oben links / unten rechts. */
.wp-lightbox-overlay .lightbox-image-container img,
.wp-lightbox-overlay .wp-block-image img,
.wp-lightbox-overlay figure img {
  border-radius: 0;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
  -webkit-clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

/* Bildunterschrift, falls vorhanden */
.wp-lightbox-overlay .wp-block-image figcaption {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  text-align: center;
}

/* Schließen-Kreuz oben rechts, weiß. */
.wp-lightbox-overlay .wp-lightbox-close-button {
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.5rem;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible {
  color: var(--yellow, #f8ef02);
  transform: scale(1.15);
}
.wp-lightbox-overlay .wp-lightbox-close-icon svg {
  width: 1.6em;
  height: 1.6em;
  fill: currentColor;
}

/* Vor/Zurück in derselben Handschrift, damit nichts hell dazwischenfunkt. */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
  color: #fff;
  transition: color 0.15s ease;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover {
  color: var(--yellow, #f8ef02);
}
.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
  fill: currentColor;
}

/* Der kleine Vergrößern-Knopf am Bild im Artikel: eckig und in den Farben der
   Seite statt im hellen Standardgrau. */
.wp-lightbox-container button {
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff;
  width: 28px;
  height: 28px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.wp-lightbox-container button:hover {
  background-color: var(--yellow, #f8ef02);
  color: #000;
}