/* Basisstil für den Block */
.revealator-block {
    position: -webkit-sticky; /* Für Safari */
    position: sticky;
    top: 10px; /* Abstand von oben */
    max-height: 80vh; /* Maximale Höhe */
    overflow-y: auto; /* Vertikales Scrollen ermöglichen */
    width: 100%; /* Maximale Breite */
    padding: 15px; /* Innenabstand */
    border: 1px solid #ccc; /* Rahmen für bessere Sichtbarkeit */
    background-color: #fff; /* Hintergrundfarbe */
    z-index: 10; /* Sicherstellen, dass es über anderen Inhalten liegt */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Schatten für bessere Sichtbarkeit */
}

/* Revealator-Effekte */
.revealator-fade,
.revealator-slideup,
.revealator-slideleft,
.revealator-slideright,
.revealator-slidedown,
.revealator-zoomin,
.revealator-zoomout,
.revealator-rotateleft,
.revealator-rotateright {
    transition: all 600ms;
}

.revealator-fade {
    opacity: 0;
}

.revealator-fade.revealator-within,
.revealator-fade.revealator-partially-above,
.revealator-fade.revealator-above {
    opacity: 1;
}

/* Slide Up */
.revealator-slideup {
    transform: translate(0, 100px);
    opacity: 0;
}

.revealator-slideup.revealator-within,
.revealator-slideup.revealator-partially-above,
.revealator-slideup.revealator-above {
    transform: translate(0, 0);
    opacity: 1;
}

/* Slide Left */
.revealator-slideleft {
    transform: translate(100px, 0);
    opacity: 0;
}

.revealator-slideleft.revealator-within,
.revealator-slideleft.revealator-partially-above,
.revealator-slideleft.revealator-above {
    transform: translate(0, 0);
    opacity: 1;
}

/* Slide Right */
.revealator-slideright {
    transform: translate(-100px, 0);
    opacity: 0;
}

.revealator-slideright.revealator-within,
.revealator-slideright.revealator-partially-above,
.revealator-slideright.revealator-above {
    transform: translate(0, 0);
    opacity: 1;
}

/* Slide Down */
.revealator-slidedown {
    transform: translate(0, -100px);
    opacity: 0;
}

.revealator-slidedown.revealator-within,
.revealator-slidedown.revealator-partially-above,
.revealator-slidedown.revealator-above {
    transform: translate(0, 0);
    opacity: 1;
}

/* Zoom In */
.revealator-zoomin {
    transform: scale(0.75);
    opacity: 0;
}

.revealator-zoomin.revealator-within,
.revealator-zoomin.revealator-partially-above,
.revealator-zoomin.revealator-above {
    transform: scale(1);
    opacity: 1;
}

/* Zoom Out */
.revealator-zoomout {
    transform: scale(1.5);
    opacity: 0;
}

.revealator-zoomout.revealator-within,
.revealator-zoomout.revealator-partially-above,
.revealator-zoomout.revealator-above {
    transform: scale(1);
    opacity: 1;
}

/* Rotate Left */
.revealator-rotateleft {
    transform: rotate(20deg);
    opacity: 0;
}

.revealator-rotateleft.revealator-within,
.revealator-rotateleft.revealator-partially-above,
.revealator-rotateleft.revealator-above {
    transform: rotate(0);
    opacity: 1;
}

/* Rotate Right */
.revealator-rotateright {
    transform: rotate(-20deg);
    opacity: 0;
}

.revealator-rotateright.revealator-within,
.revealator-rotateright.revealator-partially-above,
.revealator-rotateright.revealator-above {
    transform: rotate(0);
    opacity: 1;
}

/* Verzögerungseffekte */
.revealator-delay1 { transition-delay: 100ms !important; }
.revealator-delay2 { transition-delay: 200ms !important; }
.revealator-delay3 { transition-delay: 300ms !important; }
.revealator-delay4 { transition-delay: 400ms !important; }
.revealator-delay5 { transition-delay: 500ms !important; }
.revealator-delay6 { transition-delay: 600ms !important; }
.revealator-delay7 { transition-delay: 700ms !important; }
.revealator-delay8 { transition-delay: 800ms !important; }
.revealator-delay9 { transition-delay: 900ms !important; }
.revealator-delay10 { transition-delay: 1000ms !important; }
.revealator-delay11 { transition-delay: 1100ms !important; }
.revealator-delay12 { transition-delay: 1200ms !important; }
.revealator-delay13 { transition-delay: 1300ms !important; }
.revealator-delay14 { transition-delay: 1400ms !important; }
.revealator-delay15 { transition-delay: 1500ms !important; }
.revealator-delay16 { transition-delay: 1600ms !important; }
.revealator-delay17 { transition-delay: 1700ms !important; }
.revealator-delay18 { transition-delay: 1800ms !important; }
.revealator-delay19 { transition-delay: 1900ms !important; }
.revealator-delay20 { transition-delay: 2000ms !important; }
.revealator-delay21 { transition-delay: 2100ms !important; }
.revealator-delay22 { transition-delay: 2200ms !important; }
.revealator-delay23 { transition-delay: 2300ms !important; }
.revealator-delay24 { transition-delay: 2400ms !important; }
.revealator-delay25 { transition-delay: 2500ms !important; }
.revealator-delay26 { transition-delay: 2600ms !important; }
.revealator-delay27 { transition-delay: 2700ms !important; }
.revealator-delay28 { transition-delay: 2800ms !important; }
.revealator-delay29 { transition-delay: 2900ms !important; }
.revealator-delay30 { transition-delay: 3000ms !important; }

/* Geschwindigkeits- und Daueranpassungen */
.revealator-speed1, .revealator-duration1 { transition-duration: 100ms !important; }
.revealator-speed2, .revealator-duration2 { transition-duration: 200ms !important; }
.revealator-speed3, .revealator-duration3 { transition-duration: 300ms !important; }
.revealator-speed4, .revealator-duration4 { transition-duration: 400ms !important; }
.revealator-speed5, .revealator-duration5 { transition-duration: 500ms !important; }
.revealator-speed6, .revealator-duration6 { transition-duration: 600ms !important; }
.revealator-speed7, .revealator-duration7 { transition-duration: 700ms !important; }
.revealator-speed8, .revealator-duration8 { transition-duration: 800ms !important; }
.revealator-speed9, .revealator-duration9 { transition-duration: 900ms !important; }
.revealator-speed10, .revealator-duration10 { transition-duration: 1000ms !important; }
.revealator-speed11, .revealator-duration11 { transition-duration: 1100ms !important; }
.revealator-speed12, .revealator-duration12 { transition-duration: 1200ms !important; }
.revealator-speed13, .revealator-duration13 { transition-duration: 1300ms !important; }
.revealator-speed14, .revealator-duration14 { transition-duration: 1400ms !important; }
.revealator-speed15, .revealator-duration15 { transition-duration: 1500ms !important; }

/* Media Queries für mobile Geräte */
@media (max-width: 768px) {
    .revealator-block {
        max-height: 70vh; /* Niedrigere maximale Höhe auf mobilen Geräten */
        padding: 10px; /* Weniger Padding */
    }
}

/* Stil für den Toggle-Button */
#toggleButton {
    background-color: #007bff; /* Button-Hintergrundfarbe */
    color: white; /* Textfarbe */
    border: none; /* Kein Rahmen */
    padding: 10px 20px; /* Innenabstand */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Cursoränderung beim Hover */
    font-size: 16px; /* Schriftgröße */
    transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */
}

#toggleButton:hover {
    background-color: #0056b3; /* Dunklere Farbe beim Hover */
}

/* Modales Popup */
.modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    z-index: 9999; /* Über anderen Inhalten */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scrollbar hinzufügen */
    background-color: rgba(0,0,0,0.5); /* Halbtransparent */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Breite des Inhalts */
    max-width: 600px; /* Maximale Breite für Desktop */
    border-radius: 5px; /* Abgerundete Ecken */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Schatten für Popup */
}

/* Stil für Schließen-Button im Modal */
.close {
    color: #aaa; /* Farbe für den Schließen-Button */
    float: right; /* Rechts ausrichten */
    font-size: 28px; /* Schriftgröße */
    font-weight: bold; /* Fett */
}

.close:hover,
.close:focus {
    color: black; /* Farbe ändern beim Hover oder Fokus */
    text-decoration: none; /* Unterstreichung entfernen */
    cursor: pointer; /* Cursoränderung beim Hover */
}