/* CSS Document für Hover Bild Effekt history */
.wrapper {
    border: 1px solid; 
    margin: auto;
    width: 80%;
    padding: 30px;
    color: white;
}

img {
    max-width: 300px;
    max-height: 300px;    
}

/* Standard Hover-Effekte für Desktop */
@media (hover: hover) {
    .hover-text span.hover-card {
        display: block; /* Ändern Sie display: none auf block */
        opacity: 0; /* Starten Sie mit opacity 0 */
        transition: opacity 0.5s ease-in-out; /* Übergangseffekt */
        position: absolute;
        left: 0;
        top: 100%;
        padding: 2px;
        background: transparent; /* Hintergrund transparent gemacht */
        border-radius: 10px;
        z-index: 50;
        pointer-events: none; /* Verhindert Interaktionen, wenn unsichtbar */
    }

    .hover-text:hover span.hover-card {
        opacity: 1; /* Sichtbar bei Hover */
    }

    .hover-text {    
        position: relative;
    }

    .hover-text:hover {
        color: blue;
        text-decoration: none;    
    }
}

/* Alternative Stile für Touch-Geräte */
@media (hover: none) {
    .hover-text span.hover-card {
        display: block; /* Stellen Sie sicher, dass die Karte immer angezeigt wird */
        opacity: 1; /* Immer sichtbar auf Touch-Geräten */
        position: static; /* Positionierung anpassen, wenn nötig */
        padding: 2px;
        background: transparent; /* Hintergrund transparent gemacht */
        border-radius: 10px;
        z-index: 50;
        pointer-events: auto; /* Interaktionen zulassen */
    }

    .hover-text {
        color: green; /* Alternativer Stil für Touch-Geräte */
    }

    .hover-text:active span.hover-card {
        opacity: 0.5; /* Sichtbarkeit bei Berührung ändern, wenn gewünscht */
    }
}