:root {
    --dynamic-hue-start: oklch(0.83 0.3 15);
    /* Initialer Hue-Wert */
}


.haupt {
    height: calc(100vh - 16px);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; /* Setze das SVG auf relative Position */
    z-index: 0; /* Setze das SVG unter das Bild */
}

.haupt svg {
    height: 100vh;
    width: auto; 
}

@keyframes spur {

    0% {
        fill: oklch(100% 0 0);
    }

    15% {
        fill: var(--dynamic-hue-start); /* Verwende die Startfarbe */
    }

    100% {
        fill: oklch(100% 0 0);
    }
}

@keyframes highlighter {

    0% {
        fill: oklch(100% 0 0);
    }

    100% {
        fill: var(--dynamic-hue); /* Verwende die spezifische Farbe */
    }
}

.current_event {
    animation: highlighter 1s ease forwards 0.3s !important;
    animation-fill-mode: forwards !important;
}

svg #jahre,
svg #oxil,
svg #zofingen,
svg #glitzerparty_01,
svg #glitzerparty,
svg #museum_03,
svg #museum,
svg #outside_04,
svg #outside,
svg #saisonschluss_05,
svg #saisonschluss,
svg #zapfenstreich_07,
svg #zapfenstreich,
svg #cycloton_07,
svg #cycloton,
svg #kunsthaus_09,
svg #kunsthaus,
svg #kultur_09,
svg #kultur,
svg #alle_10,
svg #alle,
svg #jubilaeum_12,
svg #jubilaeum,
svg #www {
    fill: white;
    animation: spur 2s ease forwards; /* Kurzschreibweise für die obigen Eigenschaften */
}

/* Definiere die spezifischen Hue-Werte */
#museum.current_event { --dynamic-hue: oklch(0.83 0.3 127); }
#museum_03.current_event { --dynamic-hue: oklch(0.83 0.3 111); }
#outside_04.current_event { --dynamic-hue: oklch(0.83 0.3 143); }
#outside.current_event { --dynamic-hue: oklch(0.83 0.3 159); }
#saisonschluss_05.current_event { --dynamic-hue: oklch(0.83 0.3 175); }
#saisonschluss.current_event { --dynamic-hue: oklch(0.83 0.3 191); }
#zapfenstreich_07.current_event { --dynamic-hue: oklch(0.83 0.3 207); }
#zapfenstreich.current_event { --dynamic-hue: oklch(0.83 0.3 223); }
#cycloton_07.current_event { --dynamic-hue: oklch(0.83 0.3 239); }
#cycloton.current_event { --dynamic-hue: oklch(0.83 0.3 255); }
#kunsthaus_09.current_event { --dynamic-hue: oklch(0.83 0.3 271); }
#kunsthaus.current_event { --dynamic-hue: oklch(0.83 0.3 287); }
#kultur_09.current_event { --dynamic-hue: oklch(0.83 0.3 303); }
#kultur.current_event { --dynamic-hue: oklch(0.83 0.3 319); }
#alle_10.current_event { --dynamic-hue: oklch(0.83 0.3 335); }
#alle.current_event { --dynamic-hue: oklch(0.83 0.3 351); }
#jubilaeum_12.current_event { --dynamic-hue: oklch(0.83 0.3 7); }
#jubilaeum.current_event { --dynamic-hue: oklch(0.83 0.3 23); }


.stern1 {
    animation: stern1 9s ease infinite 0.3s;
}

@keyframes stern1 {

    0% {
        fill: oklch(100% 0 0);
    }

    30% {
        fill: rgb(22, 22, 22);
    }

    60% {
        fill: oklch(100% 0 0);
    }

    85% {
        fill: rgb(22, 22, 22);
    }

    100% {
    fill: oklch(100% 0 0);
    }
}

.stern2 {
    animation: stern2 9s ease infinite 0.3s;
}

@keyframes stern2 {

    0% {
        fill: rgb(22, 22, 22);
    }

    80% {
        fill: oklch(100% 0 0);
    }

    100% {
        fill:rgb(22, 22, 22);
    }
}

.stern3 {
    animation: stern3 9s ease infinite 0.3s;
}

@keyframes stern3 {

    0% {
        fill: rgb(22, 22, 22);
    }
    40% {
        fill: oklch(100% 0 0);
    }

    65% {
        fill: rgb(22, 22, 22);
    }

    80% {
        fill: oklch(100% 0 0);
    }

    100% {
        fill: rgb(22, 22, 22);
    }
}

.mund {
    animation: mund 3s ease infinite 0.3s;
    transform-origin: 45% 40%;
}

@keyframes mund {

    0% {
        transform: scaleY(1.1);
        translate: 0px 0px;
    }
    50% {
        transform: scaleY(0.5) scaleX(0.9);
        translate: 15px -8px;
    }

    100% {
        transform: scaleY(1.1);
    }
}

.mund2 {
    animation: mund2 3s ease infinite 0.3s;
    transform-origin: 50% 40%;
}

@keyframes mund2 {

    0% {
        transform: scaleY(1);
        translate: 0px 0px;
    }
    50% {
        transform: scaleY(0.7) scaleX(0.8);
        translate: 14px -8px;
        stroke: black;
        stroke-width: 1px;
    }

    100% {
        stroke-width: 0px;
    }
}

.mund3 {
    animation: mund3 3s ease infinite 0.3s;
    transform-origin: 50% 40%;
}

@keyframes mund3 {

    0% {
        transform: scaleY(1);
        translate: 0px 0px;
    }
    50% {
        transform: scaleY(0.7) scaleX(0.8);
        translate: 14px -8px;
    }
}

.blume {
    animation: blume 3s ease infinite 0.3s;
    transform-origin: 40% 40%;
}

@keyframes blume {

    0% {
        transform: scaleY(1);
        translate: 0px 0px;
    }
    50% {
        transform: scaleX(0.9) scaleY(0.9);
        translate: 14px -8px;
    }
}

.klickfarbe {
    opacity: 0;
}

.klickgruppe {
    opacity: 0;
}

.klickfarbe2 {
    display: none;
}

#mundweiss {
    fill: white !important;
}

.blumefarbe {
    animation: blumefarbe 3s ease infinite 0.3s;
    transform-origin: 0% 0%;
}

@keyframes blumefarbe {

    0% {
        scale: 1;
        translate: 0px 0px;
    }

    50% {
        scale: 0.9;
        translate: 61px 60px;
    }
}

.blumefarbe2 {
    animation: blumefarbe2 3s ease infinite 0.3s;
    transform-origin: 0% 0%;
}

@keyframes blumefarbe2 {

    0% {
        scale: 1;
        translate: 0px 0px;
    }

    50% {
        scale: 0.909;
        translate: 54px 53px;
    }
}

.blume2 {
    animation: blume2 3s ease infinite 0.3s;
    transform-origin: 40% 40%;
    fill: white;
}

@keyframes blume2 {

    0% {
        transform: scaleX(1);
        translate: 0px 0px;
    }
    50% {
        transform: scaleX(0.9) scaleY(0.9);
        translate: 14px -8px;
    }

    100% {
    }
}

.note1 {
    animation: note1 3s ease infinite 0.3s;
    fill: oklch(100% 0 0);
}

@keyframes note1 {

    0% {
        opacity: 0;
        translate: 0px 60px;
    }

    10% {
        opacity: 0;
        translate: 0px 60px;
    }

    70% {
        opacity: 1;
        translate: 0px -10px;
    }

    78% {
        opacity: 1;
    }

    83% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
        translate: 0px -10px;
    }
}

.note2 {
    animation: note2 3s ease infinite 0.3s;
    fill: oklch(100% 0 0);
}

@keyframes note2 {

    0% {
        opacity: 0;
        translate: 0px 40px;
    }
    
    15% {
        opacity: 0;
    }

    75% {
        opacity: 1;
        translate: 0px -10px;
    }

    85% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.note3 {
    animation: note3 3s ease infinite 0.3s;
    fill: oklch(100% 0 0);
}

@keyframes note3 {

    0% {
        opacity: 0;
        translate: 0px 40px;
    }
    
    20% {
        opacity: 0;
    }

    85% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.note4 {
    animation: note4 3s ease infinite 0.3s;
    fill: oklch(100% 0 0);
}

@keyframes note4 {

    0% {
        opacity: 0;
        translate: 0px 40px;
    }
    
    30% {
        opacity: 0;
    }

    85% {
        opacity: 1;
        translate: 0px -55px;
    }

    95% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
        translate: 0px -55px;
    }
}

.note5 {
    animation: note5 3s ease infinite 0.3s;
    fill: oklch(100% 0 0);
}

@keyframes note5 {

    0% {
        opacity: 0;
        translate: 0px 40px;
    }
    
    30% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.note6 {
    animation: note6 3s ease infinite 0.3s;
    fill: oklch(100% 0 0);
}

@keyframes note6 {

    0% {
        opacity: 0;
        translate: 0px 40px;
    }
    
    30% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    95% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.note5x {
    opacity: 0;
}

#fuss {
    fill: white;
}

.text {
    pointer-events: none;
}

.wolke {
    animation: wolke 6s ease infinite alternate;
}

@keyframes wolke {

    0% {
        translate: -15px 0px;
    }
    
    100% {
        translate: 35px 0px;
    }
}

.smiley {
    animation: smiley 6s ease infinite alternate;
}

@keyframes smiley {

    0% {
        translate: -5px 0px;
    }
    
    100% {
        translate: 5px 0px;
    }
}

.auge {
    animation: auge 6s ease infinite alternate;
}

@keyframes auge {

    0% {
        translate: -2px 0px;
    }
    
    100% {
        translate: 8px 0px;
    }
}

.pupille {
    animation: pupille 6s ease infinite alternate;
    transform-origin: 49% 39%;
}

@keyframes pupille {

    34% {
        transform: scaleY(1);
    }

    40% {
        transform: scaleY(0.2);
    }
    
    44% {
        transform: scaleY(1);
    }

    75% {
        transform: scaleY(1);
    }
    85% {
        transform: scaleY(0.2);
    }
    100% {
        transform: scaleY(0.2);
    }
}

svg .img {
    position: relative; /* Setze die Position auf relative */
    z-index: 10; /* Setze einen hohen z-index-Wert, um die Elemente zuoberst zu platzieren */
}

svg .blumefarbe {
    position: relative; /* Setze die Position auf relative */
    z-index: 1; /* Setze einen tiefen z-index-Wert, um die Elemente zuunterst zu platzieren */
}

#museum-image {
    animation: museum-image 6s ease infinite alternate;
    transform-origin: 0% 50%;
}

@keyframes museum-image {

    0% {
        translate: 0px -4px;
        transform: scaleY(1.008);
    }

    100% {
        translate: 0px -4px;
        transform: scaleY(1.008);
    }
}

.img-outside {
    height: 1089px;
}

.img-saisonschluss {
    height: 1088px;
}

.img-zapfenstreich {
    height: 1089px;
}

.img-cycloton {
    height: 1090px;
}

.img-kunsthaus {
    height: 1089px;
    translate: 0px -4px;
}

.img-kultur {
    height: 1090px;
    width: 771.5px;
    translate: -2px -2px;
}

.img-alle {
    height: 1090px;
    translate: 0.5px -2px;
}

.img-jubilaeum {
    height: 1092px;
}

body {
    background-color: rgb(214, 214, 214);
}

svg {
    filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 1));
}

body.glitzerparty-bg {
    background-color: #c0dbdf; /* Beispiel-Hintergrundfarbe für Glitzerparty */
}

body.museum-bg {
    background-color: #decae6; /* Beispiel-Hintergrundfarbe für Museum */
}

body.outside-bg {
    background-color: #f7e9bb; /* Beispiel-Hintergrundfarbe für Outside */
}

body.saisonschluss-bg {
    background-color: #eecec2; /* Beispiel-Hintergrundfarbe für Saisonschluss */
}

body.zapfenstreich-bg {
    background-color: #b2caec; /* Beispiel-Hintergrundfarbe für Zapfenstreich */
}

body.cycloton-bg {
    background-color: #c1c1c7;  /* Beispiel-Hintergrundfarbe für Cycloton */
}

body.kunsthaus-bg {
    background-color: #b3ced6; /* Beispiel-Hintergrundfarbe für Kunsthaus */
}

body.kultur-bg {
    background-color: #f0dddf; /* Beispiel-Hintergrundfarbe für Kultur */
}

body.alle-bg {
    background-color: #f7e9bb; /* Beispiel-Hintergrundfarbe für Alle */
}

body.jubilaeum-bg {
    background-color: #c1c1c7; /* Beispiel-Hintergrundfarbe für Jubiläum */
}

.img-glitzerparty,
.img-museum,
.img-saisonschluss,
.glitzerparty,
.museum,
.outside,
.saisonschluss,
.zapfenstreich,
.cycloton,
.kunsthaus,
.kultur,
.alle,
.jubilaeum, 
svg .klickfarbe,
svg .klickgruppe {
    cursor: pointer;
}