/* 1. Animation REIN: Drehung + Verschiebung auf der X-Achse */
@keyframes flyIn {
    0% { 
        /* Start: Weit links draußen (-1000px) und unsichtbar */
        transform: translate(-1000px, -50%) rotate(0deg) scale(0.3); 
        opacity: 0; 
    }
    100% { 
        /* Ende: Genau in der Mitte (0px Verschiebung vom Zentrum) */
        transform: translate(-50%, -50%) rotate(360deg) scale(1); 
        opacity: 1; 
    }
}

/* 2. Animation RAUS: Weiterdrehen und nach Rechts weg fliegen */
@keyframes flyOut {
    0% { 
        transform: translate(-50%, -50%) rotate(360deg); 
        opacity: 1; 
    }
    100% { 
        /* Ziel: Weit rechts draußen (+1000px) */
        transform: translate(1000px, -50%) rotate(1080deg); 
        opacity: 0; 
    }
}

#slide-box {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important; /* Wir fixieren den Ankerpunkt genau in der Mitte */
    z-index: 99999 !important;
    display: block !important;
    cursor: pointer;
    
    /* Start-Animation */
    animation: flyIn 2.5s ease-out forwards !important;
}

/* Wenn die Checkbox (durch den Klick aufs Bild) aktiviert wird */
#check-exit:checked + #slide-box {
    animation: flyOut 2.8s ease-in forwards !important;
    pointer-events: none;
}

#check-exit {
    display: none !important;
}

.slide-img {
    max-width: 150px;
    height: auto;
    box-shadow: 0 0px 0px rgba(0,0,0,0.5);
    border-radius: 12px;
}
/* Das X-Symbol erstellen */
#slide-box::after {
    content: "×"; /* Das ist ein spezielles Mal-Zeichen, sieht schöner aus als ein x */
    position: absolute;
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    background: #b30000; /* Roter Hintergrund */
    color: white;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    text-align: center;
    border-radius: 50%; /* Macht es kreisrund */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 2px solid white;
    transition: transform 0.2s ease;
}

/* Kleiner Effekt beim Drüberfahren mit der Maus */
#slide-box:hover::after {
    transform: scale(1.2);
    background: #cc0000;
}
@media (max-width: 150px) {
    .slide-image {
        max-width: 70vw; /* Nur 70% der Bildschirmbreite auf Handys */
    }
}



/* Styling für die Social Media SVGs */
.custom-social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.custom-social-links a {
    text-decoration: none;
    color: #333;     /* Standardfarbe der Icons */
    transition: all 0.3s ease;
}

/* Hover-Effekte mit den Originalfarben */
.custom-social-links a:hover {
    transform: translateY(-3px); /* Leichter Sprung-Effekt */
}

.custom-social-links a[aria-label="Instagram"]:hover { color: #E1306C; }
.custom-social-links a[aria-label="Facebook"]:hover { color: #1877F2; }
.custom-social-links a[aria-label="WhatsApp"]:hover { color: #25D366; }

/* Die SVG-Größe steuern */
.icon-svg {
    width: 28px;    /* Hier kannst du die Größe anpassen */
    height: 28px;
    stroke-width: 1.5; /* Dicke der Linien */
}

/* Hintergrundfarbe des Footers ändern */
.footer {
    background-color: #b30000; /* Ihr gewünschter Farbcode */
    color: #ffffff; /* Schriftfarbe im Footer */
}

/* Falls Sie auch die Links im Footer farblich anpassen wollen */
.footer a {
    color: #ffcc00;
}