@charset "UTF-8";
/* CSS Document */
/* Animation */
.header-home {
    margin: -2px -15px 0 -15px;
}
.header-blau {
    background: #FDC72F;
    min-height: 200px;
    margin-top: -8px;
}
#hase-ohr-rechts {
    animation: winken 3s infinite;
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
#hase-ohr-links {
    animation: winken 3s infinite;
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
@keyframes winken {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
#handy-arm {
    animation: winken 3s infinite;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
#krokodil-note {
    animation: note 3s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
@keyframes note {
    50% {
        -webkit-transform: translateY(-15px) rotate(8deg);
        -ms-transform: translateY(-15px) rotate(8deg);
        -o-transform: translateY(-15px) rotate(8deg);
        transform: translateY(-15px) rotate(8deg);
        -webkit-animation-timing-function: ease;
        -o-animation-timing-function: ease;
        animation-timing-function: ease;
    }
}
#igel-arm {
    animation: winken 8s infinite;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
path#lasso {
    stroke-dasharray: 1605.957275390625;
    stroke-dashoffset: 1605.957275390625;
    fill: none;
    animation: dash 5s linear forwards;
    -webkit-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}
@keyframes dash {
    to {
        -webkit-stroke-dashoffset: 0;
        -moz-stroke-dashoffset: 0;
        -ms-stroke-dashoffset: 0;
        -o-stroke-dashoffset: 0;
        stroke-dashoffset: 0;
    }
}
#eichhoernchen-fussball {
    position: relative;
    animation: ball 2.5s infinite;
    -webkit-animation-delay: 0.45s;
    -o-animation-delay: 0.45s;
    animation-delay: 0.45s;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
@-webkit-keyframes ball {
    0% {
        bottom: 0px;
    }
    15% {
        bottom: 9px;
    }
    25% {
        bottom: 0px;
    }
    45% {
        bottom: 12px;
    }
    65% {
        bottom: 0px;
    }
    85% {
        bottom: 22px;
    }
    100% {
        bottom: 0px;
    }
}
#reiter-hut, #wolke-koerper {
    position: relative;
    animation: wolke 3.5s infinite ease;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
#reiter-hut {
    animation-delay: 0.5s;
    animation: wolke 1.5s infinite ease;
}
@keyframes wolke {
    0% {
        transform: translatey(-1px);
    }
    50% {
        transform: translatey(2px);
    }
    100% {
        transform: translateY(-1px);
    }
}
#frosch-krone {
    position: relative;
    animation: krone 2.5s infinite ease;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
}
@keyframes krone {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-12deg);
        -ms-transform: rotate(-12deg);
        -o-transform: rotate(-12deg);
        transform: rotate(-12deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
#vogel-muetze {
    position: relative;
    animation: muetze 2.5s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@keyframes muetze {
    50% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    55% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    65% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
#vogel-muetze g {
    position: relative;
    animation: hoehe 2.5s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@keyframes hoehe {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    52% {
        -webkit-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    55% {
        -webkit-transform: translate(0, -10px);
        -ms-transform: translate(0, -10px);
        -o-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    100% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
#app-gaggenau {
    position: relative;
    animation: app-gaggenau 6s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@keyframes app-gaggenau {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    52% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    55% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
#app-igel {
    position: relative;
    animation: app-igel 6s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@keyframes app-igel {
    0% {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
    50% {
        -webkit-transform: translate(3px, 90%);
        -ms-transform: translate(3px, 90%);
        -o-transform: translate(3px, 90%);
        transform: translate(3px, 90%);
    }
    52% {
        -webkit-transform: translate(3px, 90%);
        -ms-transform: translate(3px, 90%);
        -o-transform: translate(3px, 90%);
        transform: translate(3px, 90%);
    }
    55% {
        -webkit-transform: translate(3px, 90%);
        -ms-transform: translate(3px, 90%);
        -o-transform: translate(3px, 90%);
        transform: translate(3px, 90%);
    }
    100% {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        -o-transform: translate(0);
        transform: translate(0);
    }
}
#app-smiley > path {
    position: relative;
    animation: app-smiley 6s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
@keyframes app-smiley {
    0% {
        fill: #FDC72F;
    }
    20% {
        fill: #ee85b4;
    }
    40% {
        fill: #d3d800;
    }
    60% {
        fill: #7598cf;
    }
    80% {
        fill: #71b62b;
    }
    100% {
        fill: #FDC72F;
    }
}
/* Zeitstrahl*/
.datum-7, .datum-4, .datum-5 {
    cursor: pointer;
}
.datum-7:hover .datum-7-uhrzeit, 
.datum-4:hover .datum-4-uhrzeit, 
.datum-5:hover .datum-5-uhrzeit {
    opacity: 1;
    transition: opacity 0.5s;
}
.datum-7-uhrzeit, .datum-4-uhrzeit, .datum-5-uhrzeit {
    opacity: 0;
}