@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

body{
    background-color: transparent;
}

#Nav_CloseButton_Menu_Anmeldungen{
    position: fixed;
    display: block;
    left: calc(100% - 100px);
    top: 20px;
    width: 40px;
    height: 40px;
    z-index: 25;
}

#nav_btn_CloseButton_Anmeldungen{
	position: relative;
	display: block;
	background: url(../img/close_black.png);
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
    height: 35px;
    width: 35px;
    background-size: 25px 25px;
}

.Div_Container_Anmeldung_Titel{
    position: absolute;
    display: flex;
    width: auto;
    height: 100px;
    left: -9999;
    top: 0px;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.Div_Container_Anmeldung_Titel_Label{
    color: rgba(255, 160, 0, 1);
    font-family: 'Open Sans', sans-serif;
	list-style: none;
	font-weight: normal;
	text-decoration: none;
    background: transparent;
    height: auto;
    width: 100%;
}


.Div_Container_Anmeldung_Titel.on{
    opacity: 1;
}

/* CSS Document 
border: #FF0004 solid 1px;
*/
.li_anmeldung,
.li_anmeldung table,
.li_anmeldung table tr,
.li_anmeldung table tr td,
.li_anmeldung table tr td label
{
    cursor: pointer;
}

.li_anmeldung
{
    opacity: 0;
}

.Tabelle_Anmeldung_Zeile_1, .Tabelle_Anmeldung_Zeile_2{
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.li_anmeldung:hover .Tabelle_Anmeldung
{
    border-bottom: rgba(255, 160, 0, 1) solid 1px;
}
.li_anmeldung:hover .Tabelle_Anmeldung .Tabelle_Anmeldung_Zeile_1, .li_anmeldung:hover .Tabelle_Anmeldung .Tabelle_Anmeldung_Zeile_2
{
    opacity: 0.3;
}

.Div_Container_Anmeldung{
    position: absolute;
    display: block;
    top: 100px;
    justify-content: flex-start;
    align-items: center;
	background-color: transparent;
	overflow-y: auto;
	overflow-x: hidden;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    opacity: 1;
}

.Nav_Container_Anmeldung{
    position: absolute;
    top: 0px;
    left: 0px;
    height: auto;
    width: calc(100% - 45px);
}

.li_anmeldung{
    height: auto;
    max-width: 400px;
    min-width: 250px;
}

.Tabelle_Anmeldung, .Tabelle_Anmeldung_Zeile_1, .Tabelle_Anmeldung_Feld_1, #Tabelle_Anmeldung_Label_Feld_1, .Tabelle_Anmeldung_Zeile_2, .Tabelle_Anmeldung_Feld_2, #Tabelle_Anmeldung_Label_Feld_2, .Tabelle_Anmeldung_Feld_3, #Tabelle_Anmeldung_Label_Feld_3, .Tabelle_Anmeldung_Feld_4, #Tabelle_Anmeldung_Label_Feld_4{
    border: transparent solid 1px;
}

.Tabelle_Anmeldung{
    position: relative;
    color: white;
    font-family: 'Open Sans', sans-serif;
	list-style: none;
	font-weight: normal;
	text-decoration: none;
    background: transparent;
    width: 100%;
    max-width: 400px;
    min-width: 250px;
    height: auto;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    border-bottom: rgba(255, 255, 255, 0.3) solid 1px;
}

.Tabelle_Anmeldung_Feld_1, .Tabelle_Anmeldung_Feld_2{
    padding-bottom: 15px;
}
.Tabelle_Anmeldung_Feld_4{
    width: 5px;
}


@-webkit-keyframes Start_Menu_Anmeldung {
    0% {transform:scale(0.4); opacity: 0;}
    100% {transform:scale(1); opacity: 1;}
}
@keyframes Start_Menu_Anmeldung {
    0% {transform:scale(0.4); opacity: 0;}
    100% {transform:scale(1); opacity: 1;}
}

.menu_online_anmeldung{
    display: block;
    visibility: visible;
    position: fixed;
    top: calc(100% - 70px);
    left: calc(100% - 460px);
    width: 430px;
    height: 45px;
    z-index: 20;
    clip-path: inset(0 0 0 0);
}

.menu_online_anmeldung.off, .menu_online_anmeldung_handy.off, .menu_online_anmeldung.no_aktiv, .menu_online_anmeldung_handy.no_aktiv{
    display: none;
    visibility: hidden;
    left: -9999px;
}

.menu_online_anmeldung_btn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 4px);
    width: 121px;
    border: 2px groove rgba(67,81,89,0.58);
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F7F7F7 50%, #D6D6D6 100%);
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #F7F7F7 50%, #D6D6D6 100%);
    background: linear-gradient(to bottom, #FFFFFF 0%, #F7F7F7 50%, #D6D6D6 100%);
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	-ms-transition: all 1s linear;
	transition: all 1s linear;
    cursor: pointer;
}

.menu_online_anmeldung_label{
    position: absolute;
    width: 100%;
    top: 14px;
    text-align: center;
    font-family: 'Noto Serif', serif;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
	color: rgba(255,255,255,.5);
	text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
    cursor: pointer;
}

.menu_online_anmeldung_open_over{
    display: block;
    visibility: visible;
    position: absolute;
    width: 240px;
    height: calc(100% - 3px);
    left: calc(50% - 120px);
    cursor: pointer;
}

.menu_online_anmeldung_open_over.off{
    display: none;
    visibility: hidden;
}

#menu_online_anmeldung_btn_1{
    top: 0px;
    left: 95px;
    border-radius: 20px;
    border-right-color: #ECECEC;
    border-right-style: solid;
    border-right-width: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

#menu_online_anmeldung_btn_2{
    top: 0px;
    right: 90px;
    border-radius: 20px;
    border-left-color: #ECECEC;
    border-left-style: solid;
    border-left-width: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

#menu_online_anmeldung_btn_3{
    width: 240px;
    border-radius: 20px;
    left: calc(50% - 120px);
    justify-content: center;
}

#id_menu_online_anmeldung_label_1{
    left: 20px;
}

#id_menu_online_anmeldung_label_2{
    left: -37px;
}



#menu_online_anmeldung_btn_1.it{
    width: 131px;
}

#menu_online_anmeldung_btn_2.it{
    width: 110px;
}

#id_menu_online_anmeldung_label_1.it{
    left: 34px;
}

#id_menu_online_anmeldung_label_2.it{
    left: -33px;
}



#id_menu_online_anmeldung_label_1:after{
    content: attr(data-text-1);
    left: 45px;
}

#id_menu_online_anmeldung_label_2:after{
    content: attr(data-text-1);
    right: 15px;
}

#id_menu_online_anmeldung_label_3:after{
    content: attr(data-text-1);
}

#id_menu_online_anmeldung_label_1.on_hover, #id_menu_online_anmeldung_label_2.on_hover{
    animation-name: hover_in_geschl;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_1.off_hover, #id_menu_online_anmeldung_label_2.off_hover{
    animation-name: hover_out_geschl;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_3.on_hover{
    animation-name: hover_in_pos_geschl;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_3.off_hover{
    animation-name: hover_out_pos_geschl;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_3.on_hover:after{
    animation-name: Label_Rotation_Close_after;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_3.off_hover:after{
    animation-name: Label_Rotation_Close_after_return;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_1.open.on_hover, #id_menu_online_anmeldung_label_2.open.on_hover{
    animation-name: hover_in_menu;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_1.open.off_hover, #id_menu_online_anmeldung_label_2.open.off_hover{
    animation-name: hover_out_menu;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#menu_online_anmeldung_btn_1.open{
    left: 0px;
    justify-content: flex-start;
    border-right-color: rgba(67,81,89,0.58);
    border-right-style: groove;
    border-right-width: 2px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}

#menu_online_anmeldung_btn_2.open{
    right: 0px;
    justify-content: flex-end;
    border-left-color: rgba(67,81,89,0.58);
    border-left-style: groove;
    border-left-width: 2px;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

#id_menu_online_anmeldung_label_1.open{
    left: 0px;
    animation-name: Label_Rotation_Elmshorn_Tornesch;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_2.open{
    left: 0px;
    animation-name: Label_Rotation_Elmshorn_Tornesch;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_1.open:after{
    animation-name: Label_Rotation_Elmshorn_after;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    width: 100%;
}

#id_menu_online_anmeldung_label_2.open:after{
    animation-name: Label_Rotation_Tornesch_after;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    width: 100%;
}

#id_menu_online_anmeldung_label_1.close{
    left: 0px;
    animation-name: Label_Rotation_Online_Elmshorn;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_2.close{
    left: 0px;
    animation-name: Label_Rotation_Online_Tornesch;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_1.close_it{
    left: 0px;
    animation-name: Label_Rotation_Online_Elmshorn_it;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_2.close_it{
    left: 0px;
    animation-name: Label_Rotation_Online_Tornesch_it;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#id_menu_online_anmeldung_label_2.close:after{
    animation-name: Label_Rotation_Tornesch_Close_after;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    width: 100%;
}

#id_menu_online_anmeldung_label_1.close:after{
    animation-name: Label_Rotation_Elmshorn_Close_after;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    width: 100%;
}

@keyframes Label_Rotation_Elmshorn_Tornesch {
  0% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 10px; 
        opacity: 1;
    }
  50% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
}

@keyframes Label_Rotation_Online_Elmshorn {
  0% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 15px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        left: 20px;
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        left: 20px;
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        left: 20px;
        opacity: 1;
    }
}

@keyframes Label_Rotation_Online_Tornesch {
  0% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 15px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        left: -37px;
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        left: -37px;
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        left: -37px;
        opacity: 1;
    }
}

@keyframes Label_Rotation_Online_Elmshorn_it {
  0% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 15px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        left: 34px;
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        left: 34px;
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        left: 34px;
        opacity: 1;
    }
}

@keyframes Label_Rotation_Online_Tornesch_it {
  0% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-weight: bold;
        font-style: normal;
        font-size: 15px;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        left: -33px;
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        left: -33px;
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        left: -33px;
        opacity: 1;
    }
}

@keyframes Label_Rotation_Close_after {
  0% {
        content: attr(data-text-1);
    }
  50% {
        content: attr(data-text-1);
    }
  55% {
        content: attr(data-text-2);
    }
  100% {
        content: attr(data-text-2);
    }
}

@keyframes Label_Rotation_Close_after_return {
  0% {
        content: attr(data-text-2);
    }
  50% {
        content: attr(data-text-2);
    }
  55% {
        content: attr(data-text-1);
    }
  100% {
        content: attr(data-text-1);
    }
}

@keyframes Label_Rotation_Elmshorn_after {
  0% {
        content: attr(data-text-1);
    }
  50% {
        content: attr(data-text-1);
    }
  55% {
        left: 45px;
        content: "VHS Elmshorn";
    }
  100% {
        left: 45px;
        content: "VHS Elmshorn";
    }
}

@keyframes Label_Rotation_Tornesch_after {
  0% {
        content: attr(data-text-1);
    }
  50% {
        content: attr(data-text-1);
    }
  55% {
        left: 45px;
        content: "VHS Tornesch";
    }
  100% {
        left: 45px;
        content: "VHS Tornesch";
    }
}

@keyframes Label_Rotation_Elmshorn_Close_after {
  0% {
        content: "VHS Elmshorn";
    }
  50% {
        content: "VHS Elmshorn";
    }
  55% {
        left: 45px;
        content: attr(data-text-1);
    }
  100% {
        left: 45px;
        content: attr(data-text-1);
    }
}

@keyframes Label_Rotation_Tornesch_Close_after {
  0% {
        content: "VHS Tornesch";
    }
  50% {
        content: "VHS Tornesch";
    }
  55% {
        right: 45px;
        content: attr(data-text-1);
    }
  100% {
        right: 45px;
        content: attr(data-text-1);
    }
}

@keyframes hover_in_geschl {
  0% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: -20px; 
        opacity: 0;
    }
  90% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 25px; 
        opacity: 1;
    }
  100% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 10px; 
        opacity: 1;
    }
}

@keyframes hover_out_geschl {
  0% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 10px; 
        opacity: 1;
    }
  50% {
        font-family: 'Parisienne', cursive;
        font-size: 16px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 15px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
}

@keyframes hover_in_pos_geschl {
  0% {
        top: 14px; 
        opacity: 1;
    }
  50% {
        top: 50px; 
        opacity: 0;
    }
  55% {
        top: -20px; 
        opacity: 0;
    }
  90% {
        top: 25px; 
        opacity: 1;
    }
  100% {
        top: 14px; 
        opacity: 1;
    }
}

@keyframes hover_out_pos_geschl {
  0% {
        top: 14px; 
        opacity: 1;
    }
  50% {
        top: 50px; 
        opacity: 0;
    }
  55% {
        top: -20px; 
        opacity: 0;
    }
  90% {
        top: 25px; 
        opacity: 1;
    }
  100% {
        top: 14px; 
        opacity: 1;
    }
}

@keyframes hover_in_menu {
  0% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Dancing Script', cursive;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: -20px; 
        opacity: 0;
    }
  90% {
        font-family: 'Dancing Script', cursive;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 25px; 
        opacity: 1;
    }
  100% {
        font-family: 'Dancing Script', cursive;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
}

@keyframes hover_out_menu {
  0% {
        font-family: 'Dancing Script', cursive;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
  50% {
        font-family: 'Dancing Script', cursive;
        font-size: 14px;
        font-weight: bold;
        font-style: normal;
        color: #000000;
        text-shadow: 0px 0px 0px rgba(255,255,255,.5), 0px 0px 0px rgba(0,0,0,.7);
        top: 50px; 
        opacity: 0;
    }
  55% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: -20px; 
        opacity: 0;
    }
  90% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 25px; 
        opacity: 1;
    }
  100% {
        font-family: 'Noto Serif', serif;
        font-size: 12px;
        font-weight: bold;
        font-style: normal;
        color: rgba(255,255,255,.5);
        text-shadow: 1px 1px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(0,0,0,.7);
        top: 14px; 
        opacity: 1;
    }
}


#id_li_anmeldung_1.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-duration: 1s;
}
#id_li_anmeldung_2.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 0.3s;
    animation-duration: 1s;
}
#id_li_anmeldung_3.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 0.6s;
    animation-duration: 1s;
}
#id_li_anmeldung_4.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 0.9s;
    animation-duration: 1s;
}
#id_li_anmeldung_5.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 1.2s;
    animation-duration: 1s;
}
#id_li_anmeldung_6.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 1.5s;
    animation-duration: 1s;
}
#id_li_anmeldung_7.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 1.8s;
    animation-duration: 1s;
}
#id_li_anmeldung_8.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 2.1s;
    animation-duration: 1s;
}
#id_li_anmeldung_9.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 2.4s;
    animation-duration: 1s;
}
#id_li_anmeldung_10.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 2.7s;
    animation-duration: 1s;
}
#id_li_anmeldung_11.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.0s;
    animation-duration: 1s;
}
#id_li_anmeldung_12.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.3s;
    animation-duration: 1s;
}
#id_li_anmeldung_13.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.6s;
    animation-duration: 1s;
}
#id_li_anmeldung_14.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.9s;
    animation-duration: 1s;
}
#id_li_anmeldung_15.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.2s;
    animation-duration: 1s;
}
#id_li_anmeldung_16.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.5s;
    animation-duration: 1s;
}
#id_li_anmeldung_17.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 3.8s;
    animation-duration: 1s;
}
#id_li_anmeldung_18.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 4.1s;
    animation-duration: 1s;
}
#id_li_anmeldung_19.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 4.4s;
    animation-duration: 1s;
}
#id_li_anmeldung_20.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 4.7s;
    animation-duration: 1s;
}
#id_li_anmeldung_21.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 5.0s;
    animation-duration: 1s;
}
#id_li_anmeldung_22.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 5.3s;
    animation-duration: 1s;
}
#id_li_anmeldung_23.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 5.6s;
    animation-duration: 1s;
}
#id_li_anmeldung_24.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 5.9s;
    animation-duration: 1s;
}
#id_li_anmeldung_25.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 6.2s;
    animation-duration: 1s;
}
#id_li_anmeldung_26.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 6.5s;
    animation-duration: 1s;
}
#id_li_anmeldung_27.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 6.8s;
    animation-duration: 1s;
}
#id_li_anmeldung_28.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 7.1s;
    animation-duration: 1s;
}
#id_li_anmeldung_29.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 7.4s;
    animation-duration: 1s;
}
#id_li_anmeldung_30.active{
    animation-name: Start_Menu_Anmeldung;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-delay: 7.7s;
    animation-duration: 1s;
}


.menu_online_anmeldung_handy{
    display: block;
    visibility: visible;
    left: calc(50% - 50px);
    position: fixed;
    top: calc(100% - 70px);
    width: 100px;
    height: 45px;
    z-index: 20;
    cursor: pointer;
}

 .main__menu,
 .main__menu ul
{
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
/* Start Style*/
 .main__menu {
	 display: grid;
}
 .menu_online_anmeldung_handy.aktiv .main__menu .list-item .drop-menu li {
	 display: block;
   position: absolute;
   width: 200px;
   height: 30px;
   left: calc(50% - 100px);
}


.menu_online_anmeldung_handy.aktiv .main__menu .list-item .menu-2 {
	 perspective: 1000px;
}
.menu_online_anmeldung_handy.aktiv .main__menu .list-item .menu-2 .drop-item {
	 opacity: 0;
	 transform-origin: bottom center;
}
 .menu_online_anmeldung_handy.aktiv .main__menu .list-item .menu-2 .drop-item:nth-child(1) {
	 animation-name: topToBottom;
	 animation-duration: 400ms;
	 animation-delay: -150ms;
	 animation-timing-function: ease-in-out;
	 animation-fill-mode: forwards;
   bottom: 15px;
}
.menu_online_anmeldung_handy.aktiv .main__menu .list-item .menu-2 .drop-item:nth-child(2) {
	 animation-name: topToBottom;
	 animation-duration: 400ms;
	 animation-delay: 0ms;
	 animation-timing-function: ease-in-out;
	 animation-fill-mode: forwards;
   bottom: 55px;
}
.main__menu .list-item:hover .kabobs {
   background: rgb(255,255,255);
   background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 47%, rgba(158,158,158,1) 100%);
   border: #4f4f4f solid 1px;
   color: black;
}
 .main__menu .list-item a {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
	 height: 40px;
	 color: #fff;
	 cursor: unset;
}
 .main__menu .list-item a:hover {
	 cursor: pointer;
}
 .main__menu .list-item a span {
	 font: 600 14px 'Roboto', sans-serif;
	 order: 2;
   position: absolute;
}
 .main__menu .list-item a.kabobs {
    display: flex;
    position: absolute;
    width: 100px;
    height: 45px;
    border-radius: 15px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(48,48,48,1) 47%, rgba(79,79,79,1) 100%);
    border: #FFFFFF solid 1px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}
 .main__menu .list-item a i {
	 color: #fff;
	 font-size: 100px;
}
 .main__menu .list-item .drop-menu .drop-item {
	 display: none;
}
 .main__menu .list-item .drop-menu .drop-item a {
	 height: 40px;
	 font: 300 22px 'Roboto', sans-serif;
}
 .main__menu .list-item .drop-menu .drop-item a.item--1 {
	 background: rgba(255, 160, 0, 1);
}

 .main__menu .list-item .drop-menu .drop-item a.item--1:hover {
   background: #3C6D88;
}

 @keyframes topToBottom {
	 0% {
		 opacity: 0;
		 transform: rotateX(-90deg);
	}
	 100% {
		 opacity: 1;
		 transform: rotateX(0deg);
	}
}