main.fi-main {
    max-width: 100% !important; /* Erzwingt volle Breite */
    width: 100% !important;
}

main.fi-main.fi-resource-issue-resource {
    max-width: 100% !important; /* Volle Breite für IssueResource */
    width: 100% !important;
}

.fi-modal {
    max-width: 90% !important; /* Passe die Breite des Modals an */
}


body .fi-modal {
    max-width: 90% !important; /* Passe die Breite des Modals an */
}

body .fi-modal-content {
    width: 100% !important; /* Passe den Inhalt des Modals an */
}


/* tailwind-debug.css */
@media (min-width: 640px) {
    body::after {
        content: 'sm';
        position: fixed;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 5px;
        font-size: 12px;
        z-index: 9999;
    }
}

@media (min-width: 768px) {
    body::after {
        content: 'md';
    }
}

@media (min-width: 1024px) {
    body::after {
        content: 'lg';
    }
}

@media (min-width: 1280px) {
    body::after {
        content: 'xl';
    }
}

@media (min-width: 1536px) {
    body::after {
        content: '2xl';
    }
}

[id^="data."]::placeholder {
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.3s ease; /* Sanfter Übergang */
}

[id^="data."]:hover::placeholder,
[id^="data."]:focus::placeholder {
    opacity: 1; /* Sichtbar bei Hover oder Fokus */
}

/* Ausnahme für data.communication1_type bis data.communication4_type */
[id="data.communication1_type"]::placeholder,
[id="data.communication2_type"]::placeholder,
[id="data.communication3_type"]::placeholder,
[id="data.communication4_type"]::placeholder, 
[id="data.communication5_type"]::placeholder {
    opacity: 1 !important; /* Immer sichtbar */
    transition: none !important; /* Keine Übergangseffekte */
}

.choices__placeholder {
    opacity: 0 !important;
}

.choices__inner:hover .choices__placeholder,
.choices__inner:focus-within .choices__placeholder {
    opacity: 1 !important;
}

.resizable-rich-editor {
    resize: vertical; /* Allows both vertical and horizontal resizing */
    min-height: 150px; /* Set a minimum height */
    min-width: 100%; /* Set a minimum width */
    overflow: auto; /* Ensures the content doesn't overflow */
}

/* -------- sidebar -----------------------------------------------------------------*/



/* -------- sidebar -----------------------------------------------------------------*/

/* Ziel: Medienvorschau nebeneinander als Galerie */
/* FilePond Galerie: responsive Darstellung */

.filepond--list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
}

.filepond--item {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Ab 640px: 2 Spalten */
@media (min-width: 640px) {
    .filepond--item {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

/* Ab 768px: 3 Spalten */
@media (min-width: 768px) {
    .filepond--item {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}

/* Ab 1024px: 4 Spalten */
@media (min-width: 1024px) {
    .filepond--item {
        flex: 0 0 calc(25% - 1rem);
        max-width: calc(25% - 1rem);
    }
}

/* -------- meine lightbox -----------------------------------------------------------------*/

.ps-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.ps-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}