body {
    margin: 0;
    min-height: 100vh;
    display: flex; /* Wird genutzt, um den initialen Punkt zu zentrieren */
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Leicht anderer Hintergrund */
    position: relative; /* Wichtig für absolute Positionierung von Kindelementen */
    overflow: hidden; /* Verhindert Scrollbalken durch positionierte Elemente */
}

#punkt {
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease; /* Fügt Fade-Out hinzu */
    opacity: 1; /* Explizit sichtbar machen */
}

#punkt:hover {
    transform: scale(1.1);
}

/* Gemeinsamer Stil für klickbare Bilder/Links */
.clickable-image {
    display: none; /* Initial versteckt (wird durch JS geändert) */
    position: absolute; /* Absolute Positionierung für Visitenkarte und Logo */
    cursor: pointer;
    transition: transform 0.2s ease;
    background-color: white; /* Hintergrund, falls Bilder transparent sind */
    padding: 5px; /* Kleiner Rand um die Bilder */
    border-radius: 3px; /* Leicht abgerundete Ecken */
}

/* Spezifische Positionierung für die Visitenkarte (mittig) */
.center-image {
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert das Element genau */
    max-width: 400px; /* Maximale Breite der Visitenkarte */
    max-height: 400px; /* Maximale Höhe der Visitenkarte */
}

/* Spezifische Positionierung für das Logo (unten rechts) */
.bottom-right-image {
    bottom: 50px;
    right: 50px;
    max-width: 300px; /* Maximale Breite des Logos */
}

/* Stellt sicher, dass Bilder innerhalb der Links korrekt angezeigt werden */
.clickable-image img {
    display: block; /* Verhindert extra Platz unter dem Bild */
    width: 100%; /* Bild füllt den Link aus */
    height: auto;
}