:root {
    --deepblue: #029cc0;
    --backgroundgrey: #e9e9e9;
    --backgroundgreyhover: #cdcdcd;
    --backgroundblue: #bebeff;
    --backgroundbluelight: #efefff; /*75% bebeff*/
    --backgroundselected: #ef6060;
    --backgroundtoday: #4bdc73;
    --lightcornflowerblue: #bcd1f7; /* 50% cornflowerblue*/
    /*
    Sonstige Farbcodes:
        #f1585e = 70% red
    */
}
  body {
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    font-family: 'Aptos Display', Arial, sans-serif;
  }
  a, .link {
    text-decoration: none;
    color: var(--backgroundblue);
    font-family: "Open Sans", Arial, serif;
    font-size: 19px;
  }
  a:hover {
    text-decoration: none;
    color: var(--backgroundbluelight);
    font-family: "Open Sans", Arial, serif;
    scale: 1.025;
  }
  h1 {
    margin-top: 2%;
    margin-bottom: 2%;
    font-family: 'Arial Rounded MT Bold', sans-serif, serif;
  }
  h2 {
    font-family: 'Eras Bold ITC', sans-serif, serif;
  }
  p {
    font-family: Rockwell, Arial, sans-serif;
  }
  fieldset {
    width: 90%;
    margin: auto;
    margin-bottom: 25px;
    flex-direction: column;
    border-color: var(--deepblue);
    border-style: solid;
	border-width: 3px;
	border-radius: 25px;
  }
  legend {
    background-color: white;
	border: 2px solid var(--deepblue);
	border-radius: 15px;
    font-family: 'Bahnschrift SemiBold', sans-serif, verdana;
  }
  @media screen and (min-width: 1000px) {
    h1 {
        font-size: 32px;
    }
    h2 {
        font-size: 26px;
    }
    p {
        font-size: 19px;
    }
    legend {
        padding: 8px;
    }
  }
  @media screen and (max-width: 1000px) {
    h1 {
        font-size: 53px;
    }
    h2 {
        font-size: 47px;
    }
    p {
        font-size: 40px;
    }
    fieldset {
        padding: 3%;
    }
    legend {
        min-width: 50%;
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 40px;
    }
    label {
        font-size: 40px;
    }
    audio {
        scale: 1.75;
    }
  }
/*-------------------------------*/
/*Container*/
#containerMenu {
    width: 100%;
    z-index: 5;
}
#containerUsermenu {
    width: 500px;
    margin: auto;
    margin-top: 75px;
}
#containerUserData {
    align-items: baseline;
}
#containerMenuBackground {
    width: 110%;
    height: 110%;
    margin: -20px;
    margin-top: -20%;
    position: fixed;
    z-index: 4;
}
@media screen and (min-width: 1000px) {
    #containerMenu {
        height: 75px;
        margin: -10px;
        padding: 10px;
        justify-content: flex-start;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: -1px;
        background-color: white;
        border-bottom: 2px solid var(--deepblue);
    }
    #containerMenuDisplay {
        display: none;
    }
    #containerWeekSelection {
        flex-direction: row;
    }
    #containerSearch {
        width: 30%;
    }
    #containerArticle {
        width: 400px;
        /* height: 575px; */
    }
    #containerAllNews {
        width: 80%;
    }
    #containerFileControls {
        /* width: 1600px; */
        width: 100%;
        height: 50px;
    }
    #containerFileStat {
        width: 100%;
    }
    #containerFooter {
        width: 100%;
    }
}
@media screen and (max-width: 1000px) {
    #containerMenu {
        height: 100%;
        flex-direction: column;
        margin: auto;
        margin-top: -35%;
        position: fixed;
        scale: 3.5;
        display: none;
    }
    #containerMenuMobile {
        height: 10%;
        width: 110%;
        margin: -10px;
        margin-bottom: 4%;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: white;
        border-bottom: 4px solid var(--deepblue);
    }
    #containerMenuBackground {
        display: none;
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    #containerMenuDisplay {
        display: inline-block;
    }
    #containerUsermenu {
        scale: 1.65;
        margin-top: 185px;
    }
    #containerUserList {
        max-width:950px;
    }
    #containerUserData {
        align-items: center;
    }
    #containerWeekSelection {
        flex-direction: column;
    }
    #containerContent {
        margin-left: 3%;
    }
    #containerWeekSelection {
        display: flex;
    }
    #containerSearch {
        width: 79%;
    }
    #containerArticle {
        width: 700px;
        /* height: 590px; */
        /* height: 750px; */
        /* height: 800px; */
    }
    #containerAllNews {
        width: 100%;
    }
    #containerFiles {
        margin-top: 5%;
        margin-left: 2.4%;
        scale: 1.1;
    }
    #containerFileControls {
        flex-direction: column;
    }
    #containerFileOverview {
        max-width: 800px;
        overflow-x: auto;
    }
    #containerFileStat {
        width: 1600px;
        margin: auto;
    }
    #containerFooter {
        width: 107.75%;
    }
}
#containerContent {
    width: 100%;
    /*margin-bottom: 75px;*/
    margin-bottom: 90px!important;
}
#containerWeekday {
    justify-content: flex-start;
    width: 95%;
    margin: auto;
    margin-top: 25px;
    /*padding: 5px;*/
    overflow-y: hidden;
    overflow-x: auto;
    border: 2px solid var(--deepblue);
    border-radius: 10px;
}
#containerWeekspan {
    width: 24.5%;
    height: 50px;
    margin: auto;
    margin-bottom: 20px;
    border: 2px solid var(--deepblue);
    border-radius: 10px;
    font-size: 28px;
}
#containerDayGroup {
    margin-left: 40px;
}
#containerSearch {
    margin: auto;
}
#containerAllArticles {
    flex-direction: row;
    flex-wrap: wrap;
}
#containerArticle {
    /*height: 590px;*/
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 2%;
    /*border: 2px solid var(--deepblue);*/
    border-radius: 10px;
}
#containerAllNews {
    margin: auto;
}
#containerFiles {
    width: 98%;
}
#containerFileControls {
    margin-top: 15px;
    margin-bottom: 15px;
}
#containerFileOverview {
    padding: 15px;
    border: 2px solid var(--deepblue);
    border-radius: 15px;
}
#containerFileStat {
    /* width: 1600px; */
    /* width: 100%; */
    height: 50px;
    margin-bottom: 10px;
    background-color: lightgrey;
    border: 2px solid black;
    border-radius: 12px;
    /*overflow-x: auto;*/
}
#containerFooter {
    /*width: 107.75%;
    position: absolute;
    bottom: 0;*/
    height: 40px;
    margin: -10px;
    padding: 10px;
    background-color: var(--deepblue);
}
/*-------------------------------*/
/*Fieldset*/
#fieldsetArticleDesc {
    margin-top: 20px;
}
@media screen and (min-width: 1000px) {
    #fieldsetArticleDesc {
        height: 265px;
    }  
}
@media screen and (max-width: 1000px) {
    #fieldsetArticleDesc {
        height: 320px;
    } 
}
/*-------------------------------*/
/*Standard Klassen*/
.standardflex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.standardflexVertical {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.errorMessage {
    width: 100%;
    height: 50px;
    background-color: red;
    color: white;
}
.multibleChoice {
    align-items: flex-start;
}
.buttonBasic {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    padding: 5px;
    background-color: var(--backgroundgrey);
    border: 2px solid var(--deepblue);
    border-radius: 10px;
    font-family: 'Bahnschrift Narrow', serif;
}
.buttonFeature:hover {
    cursor: pointer;
    background-color: var(--backgroundgreyhover);
}
.buttonImgFeature:hover {
    cursor: pointer;
}
.buttonGrow:hover {
    scale: 1.01;
}
.broadcastStat {
    /*flex-direction: column;*/
    min-width: 150px;
    margin-left: 15px;
    padding: 12px;
    background-color: white;
    border: 2px solid var(--deepblue);
    border-radius: 10px;
}
.statBasic {
    display: flex;
    flex: auto;
    justify-content: center;
    align-items: center;
    height: 25px;
    padding: 5px;
    background-color: white;
    border: 2px solid var(--deepblue);
    border-radius: 10px;
}
@media screen and (min-width: 1000px) {
    .buttonBasic {
        height: 25px;
    }
}
@media screen and (max-width: 1000px) {
    .buttonBasic {
        height: 57px;
        font-size: 35px;
    }
}
/*-------------------------------*/
/*Button Klassen*/
.buttonMenu {
    margin-left: 0.75%;
    background-color: var(--backgroundgrey);
    border: 2px solid var(--deepblue);
    border-radius: 10px;
    font-family: 'Bahnschrift Condensed', sans-serif, verdana;
    font-size: 18px;
}
.buttonMenu:hover {
    cursor: pointer;
    background-color: var(--backgroundgreyhover);
}
.buttonUsermenu {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: var(--backgroundgrey);
    border: 2px solid var(--deepblue);
    border-radius: 10px;
    font-family: 'Bahnschrift Condensed', sans-serif, verdana;
    font-size: 18px;
}
.buttonUsermenu:hover {
    scale: 1.01;
    cursor: pointer;
    background-color: var(--lightcornflowerblue);
}
@media screen and (min-width: 1200px) {
    .buttonMenu {
        width: 12%;
        height: 60px;
    }
}
@media screen and (max-width: 1200px) {
    .buttonMenu {
        margin-bottom: 1%;
        width: 20%;
        height: 50px;
    }
}
/*-------------------------------*/
/*Form Elemente*/
input[type=text], input[type=email], input[type=password], input[type=submit], input[type=date], input[type=datetime-local], button, textarea {
    padding: 8px;
    margin: auto;
    background-color: var(--backgroundgrey);
    border: 2px solid var(--deepblue);
    border-radius: 10px;
    font-family: 'Bahnschrift Narrow', serif;
    font-size: 16px;
}
input[type=checkbox], input[type=radio] {
    scale: 1.25;
    margin-right: 10px;
}
input[type=range] {
    width: 300px;
    margin: auto;
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=submit]:hover, input[type=date]:hover, input[type=datetime-local]:hover, button:hover, textarea:hover {
    scale: 1.01;
    background-color: var(--backgroundgreyhover);
}
button:hover {
    background-color: var(--lightcornflowerblue);
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus, input[type=datetime-local]:focus {
    padding: 9px;
}
@media screen and (min-width: 1000px) {
    input[type=text], input[type=email], input[type=password], input[type=submit], input[type=date], input[type=datetime-local] {
        width: 35%;
    }
    button {
        width: 25%;
    }
}
@media screen and (max-width: 1000px) {
    input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local] {
        width: 75%;
        height: 50px;
        font-size: 35px;
    }
    input[type=submit], button {
        width: 75%;
        height: 71px;
        font-size: 35px;
    }
}
/*-------------------------------*/
/*Objektmarken*/
.objectTagRed {
    background-color: red;
    color: white;
    padding: 4px;
    position: absolute;
    transform: rotate(-45deg);
    font-size: 10px;
    border: 2px solid red;
    border-radius: 8px;
}
@media screen and (min-width: 1000px) {
    #tagNewAvatar{
        top: 52%;
        left: 37%;
    }
}
@media screen and (max-width: 1000px) {
    #tagNewAvatar{
        top: 52%;
        left: 14%!important;
        font-size: 15px;
    }
}
/*-------------------------------*/
/*Animationen*/
@keyframes logoAnimation {
    0% {transform: rotateZ(0deg);}
    50% {transform: rotateZ(180deg);}
    100% {transform: rotateZ(0deg);}
}
/*-------------------------------*/
/*ID Objekte*/
#logoMenu {
    width: 5.5%;
}
#logoMenu:hover {
    animation-name: logoAnimation;
    animation-duration: 0.75s;
}
/*#logoMenu:not(:hover) {
    animation-name: logoAnimation;
    animation-duration: 1s;
    animation-direction: reverse;
}*/
#bannerMenu {
    width: 50%;
    margin-top: 1%;
}
@media screen and (min-width: 1000px) {
    #login {
        /*margin-left: 17%;  --bei 6 buttons--*/
        /*margin-left: 30%;  --bei 4 buttons--*/
        margin-left: 43%;
    }
}
/*-------------------------------*/
/*Klassen Objekte*/
.weekday {
    width: 125px;
    margin: -2px;
    padding: 12px;
    background-color: var(--backgroundgrey);
    border: 2px solid var(--deepblue);
    border-radius: 10px;
    font-size: 24px;
}
.news {
    width: 100%;
}
.userAttributes {
    height: 50px;
    background-color: var(--backgroundgrey);
    border-right: 2px solid black;
}
.userAttributeLine {
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.userStat {
    width: 90%;
}
.userInfoLine {
    width: 40%;
    padding-left: 18%;
}
.imageUsers {
    margin-bottom: -4px;
}
.imageFileControlls {
    height: 50px;
    margin-right: 5%;
}
.containerUploadFile {
    padding: 8px;
    margin-bottom: 8px;
}
@media screen and (min-width: 1000px) {
    .weekday {
        height: 75px;
    }
    .imageUsers {
        width: 15%;
    }
    .hideOnPc {
        display: none !important;
    }
}
@media screen and (max-width: 1000px) {
    .weekday {
        height: 175px;
    }
    .userInfoLine {
        flex-direction: column;
    }
    .imageUsers {
        width: 45%;
    }
    .hideOnMobile {
        display: none;
    }
}
/*-------------------------------*/
/*Tooltip mit Animationen*/
.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 175px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: -5%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 5%;
    margin-left: 42%;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
/*-------------------------------*/
/*Animation Spinner*/
#submitBtn {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Einfacher CSS-Spinner */
.spinner {
    border: 4px solid #f3f3f3; /* Heller Grauton */
    border-top: 4px solid #3498db; /* Blau */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s ease infinite;
    display: none; /* Anfangs versteckt */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*-------------------------------*/
/*Animatonen mit Objekten*/
#containerMenuDisplay {
    width: 100px;
    height: 100px;
    position: fixed;
    /*top: 4%;
    left: 80%;
Verknüpfung im Javascript durch Animation austauschen*/
    top: 1.5%;
    left: 85%;
    display: inline-block;
    cursor: pointer;
    background-color: white;
    border: 4px solid var(--deepblue);
    border-radius: 15px;
    z-index: 6;
}
.bar1, .bar2, .bar3 {
    width: 55px;
    height: 5px;
    background-color: #333;
    margin: 21px 23px;
    transition: 0.4s;
}
  
/* Rotate first bar */
.change .bar1 {
    transform: translate(0, 24px) rotate(-45deg);
}
  
/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}
  
/* Rotate last bar */
.change .bar3 {
    transform: translate(0, -27px) rotate(45deg);
}