/*  Alert‑Box (Bootstrap‑ähnlich, aber ohne externe libs) */
.alert {
    background: #f8d7da;      /* leicht rötlich */
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;           /* zentrieren */
    box-sizing: border-box;
}

/*  Hover‑Box (der Bereich, der auf Hover reagiert) */
.hover-box {
    position: relative;   /* nötig für das absolute Bild */
    width: 100%;          /* die komplette Breite des Containers */
    text-align: center;
    cursor: pointer;
    padding: 15px 0;      /* etwas Abstand zum Rand */
}

/*  Das Bild, das beim Hover angezeigt wird */
.hover-box img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -100%;            /* direkt auf Box */
    width: 200px;         /* gewünschte Bildbreite */
    margin-top: 5px;      /* Abstand zwischen Box und Bild */
    display: none;        /* zunächst ausgeblendet */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/*  Bild einblenden, wenn die Box gehovt wird */
.hover-box:hover img {
    display: block;
      width: 900px;   /* größer */
    /* height bleibt automatisch skalieren */
}

/* Desktop */
@media (hover: hover) and (pointer: fine) {
    .hover-box:hover img { display:block; width:900px; transform:scale(1.05); }
}