/* 
 * animation.css
 * Animationen und spezielle Effekte
 */

/* Bild-Animationen für Startseite */
.container__overlay2 {
    background-color: var(--farbe-schwarz);
}

.bild__ueberlagern2 {
    width: 100%;
    height: auto;
    animation: bildEinblenden ease 10s;
    -webkit-animation: bildEinblenden ease 10s;
    -moz-animation: bildEinblenden ease 10s;
    -o-animation: bildEinblenden ease 10s;
    -ms-animation: bildEinblenden ease 10s;
    animation-fill-mode: forwards;
}

@keyframes bildEinblenden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes bildEinblenden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes bildEinblenden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes bildEinblenden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes bildEinblenden {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Preload und Animation für Unterseiten */
.preload__bild {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 25000;
    animation: preloadEinblenden 3s ease forwards;
    animation-delay: 0s;
}

.overlay__schwarz {
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20000;
    animation: overlayAusblenden 3s ease forwards;
    animation-delay: 2s;
}

.preload__bild,
.overlay__schwarz {
    pointer-events: none;
}

@keyframes preloadEinblenden {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes overlayAusblenden {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

body.geladen .preload__bild,
body.geladen .overlay__schwarz {
    display: none;
}

/* Über Mich - Anzeige-Steuerung */
.frueher {
    display: none;
}

.heute {
    display: block;
}

/* Anzeige-Effekte */
.erscheinen {
    animation: erscheinen 0.5s ease-in;
}

@keyframes erscheinen {
    0% {
        opacity: 0;
        transform: translateY(1rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.verschwinden {
    animation: verschwinden 0.5s ease-out forwards;
}

@keyframes verschwinden {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(1rem);
        display: none;
    }
}

/* Hover-Effekte */
.hover__vergrossern {
    transition: transform 0.3s ease;
}

.hover__vergrossern:hover {
    transform: scale(1.05);
}

.hover__heben {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover__heben:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Link-Hover-Effekte */
.link__unterstrich {
    position: relative;
    text-decoration: none;
}

.link__unterstrich::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}

.link__unterstrich:hover::after {
    width: 100%;
}

/* Farbübergänge */
.farbuebergang {
    transition: background-color 0.5s ease, color 0.5s ease;
}

.farbuebergang__blau:hover {
    background-color: var(--farbe-blau);
    color: var(--farbe-weiss);
}

.farbuebergang__rot:hover {
    background-color: var(--farbe-rot);
    color: var(--farbe-weiss);
}