/* Der Zustand, wenn das Bild klein ist */
  .sv1885tt-blog-zoom img {
    margin: 10px;
	padding: 10px;  
	width: 200px !important;
    height: 200px !important;
    object-fit: contain;
    background-color: #DDDDDD;
    transition: all 0.3s ease; /* Macht das Vergrößern geschmeidig */
  }
 /* Der Zustand, wenn das Bild angeklickt (geöffnet) wurde */
  .sv1885tt-blog-zoom[open] img {
    width: 100% !important;
    height: auto !important;
    max-height:600px
	max-width: 600px; /* Begrenzt die maximale Größe beim Vergrößern */
  }

img.sv1885tt-bild-zoom {
	margin: 10px;
	padding: 10px;
  width: 200px !important;
  height: 200px !important;
  object-fit: contain !important;
  background-color: #EEEEEE !important;
  cursor: zoom-in !important; /* Zeigt eine Lupe beim Drüberfahren */
  transition: all 0.5s ease-in-out !important; /* Macht den Übergang flüssig */
  outline: none !important; /* Versteckt den Standard-Browser-Rahmen */
}
	
img.sv1885tt-bild-zoom:focus {
  width: 100% !important;
  height: auto !important;
  max-height: 400px !important
  max-width: 400px !important; /* Verhindert das Sprengen deines Layouts */
  cursor: zoom-out !important; /* Zeigt eine "Minus"-Lupe zum Verkleinern */
}	

/* Für das Zentrieren aller Bilder im p-TAg*/
p:has(img.sv1885tt-bild-zoom) {
  display: flex !important;
  justify-content: center !important;
}