/* styles.css */
.blog-thumbnail {
    max-width: 300px; /* Passe die Breite nach Bedarf an */
    height: auto;
    border-radius: 5px;
}

/* Optional: Begrenze die Größe der Profilbilder */
/* Benutzername in roten Schrift für Admins */
.badge.bg-danger {
    background-color: #dc3545 !important;
}

/* Popup-Modal Anpassungen */
.modal-body img {
    display: block;
    margin: 0 auto;
}

/* Weitere individuelle Styles hier */
.no-underline {
    text-decoration: none !important;
}
.post-thumbnail {
    max-width: 500px; /* Maximale Breite auf 500px beschränken */
    max-height: 500px; /* Maximale Höhe auf 500px beschränken */
    width: 25%; /* Responsiv an den Container anpassen */
    height: auto; /* Seitenverhältnis beibehalten */
    border-radius: 5px;
    cursor: pointer; /* Zeigt an, dass das Bild anklickbar ist */
    object-fit: cover; /* Optional: Zuschneiden des Bildes, um den Bereich zu füllen */
}

/* Hover-Effekt für anklickbare Bilder */
.clickable-image:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}
.profile-image {
    width: 50px;             /* Festgelegte Breite */
    height: 50px;            /* Festgelegte Höhe */
    object-fit: cover;       /* Bild füllt den Container ohne Verzerrung */
    border-radius: 50%;      /* Rundes Profilbild */
    transition: opacity 0.3s; /* Sanfte Übergangsanimation beim Hover */
    cursor: pointer;         /* Zeigt an, dass das Bild anklickbar ist */
}

/* Profilbilder in Kommentaren */
.profile-image-sm {
    width: 40px;             /* Festgelegte Breite */
    height: 40px;            /* Festgelegte Höhe */
    object-fit: cover;       /* Bild füllt den Container ohne Verzerrung */
    border-radius: 50%;      /* Rundes Profilbild */
    transition: opacity 0.3s; /* Sanfte Übergangsanimation beim Hover */
    cursor: pointer;         /* Zeigt an, dass das Bild anklickbar ist */
}