/* 1. Grundzustand der Boxen definieren & Animation aktivieren */
.order__confirmed--area {
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    background-color: #ffffff; /* Falls kein Hintergrund gesetzt ist */
    border: 1px solid #e0e0e0; /* Falls kein Rahmen gesetzt ist */
}

/* 2. Der Mouseover-Effekt (Hover) */
.order__confirmed--area:hover {
    transform: translateY(-5px) !important; /* Bewegt die Box elegant nach oben */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important; /* Erzeugt einen weichen Schatten */
    border-color: #007bff !important; /* Färbt den Rahmen z.B. blau (hier deine Wunschfarbe eintragen) */
}