:root {
    --grau: #808080;
    --gelb: #e5b120;
    --rot: #952d44;
    --blau: #194e78;
    --weiss: #ffffff;
    --hellblau: #9ebdce;
    --hellgrau: #dadada;
    --hellgelb: #eed387;
    --hellrot: #bf8491;
    --dunkelgrau: #4d4d4d;
    --title-font: "Concert One";
    --normal-font: "Arial Narrow";
}

.gelb {
    background-color: var(--gelb);
}

.rot {
    background-color: var(--rot);
}

.blau {
    background-color: var(--blau);
}

.hellgelb {
    background-color: var(--hellgelb);
}

.hellblau {
    background-color: var(--hellblau);
}

.hellrot {
    background-color: var(--hellrot);
}

body {
    margin: 0;
    font-size: large;
}

h1 {
    font-family: var(--normal-font), serif;
    font-size: 2.8em;
    margin: 0;
    padding: 8px 0;
    width: 100%;
    text-align: center;
}

h2 {
    font-family: var(--normal-font), serif;
    font-size: 40px;
    margin: 0;
    padding: 8px 0;
    width: 100%;
    text-align: center;
}

h3{
    font-family: var(--normal-font), serif;
    font-size: 30px;
    margin: 0;
    padding: 8px 0;
    width: 100%;
    text-align: center;
}

button {
    cursor: pointer;
}

p, label, li {
    font-family: var(--normal-font), serif;
    font-size: 1em;
    margin: 0;
    padding: 8px 0;
    width: 100%;
    text-align: center;
}

li{
    text-align: left;
}

nav {
    align-content: center;
    background-color: var(--gelb);
    padding: 10px 0;
    display: flex;
    width: 100%
}

nav p {
    font-family: var(--normal-font), serif;
    font-size: 30px;
    margin: 0;
    padding: 8px 0;
    text-align: center;
}


nav button {
    margin: 0 10px;
    padding: 10px;
    border-radius: 15px;
    background-color: var(--hellgelb);
    transition: 0.2s background-color ease-in-out;
    cursor: pointer;
    font-size: large;
    font-family: var(--normal-font) , serif;
}

nav button:hover {
    background-color: var(--hellblau);
}

table, th, td {
    border: thin solid;
    border-collapse: collapse;
    border-radius: .1em;
    font-family: var(--normal-font), serif;
}

table {
    width: 100%;
    height: 80%;border: #952d44;
    border-collapse: collapse;
    border: 1px;
}

th, td {
    width: 14%;
}

td:hover {
    background-color: var(--hellgelb);
}

thead{
    font-family: var(--title-font), serif;
}


input, textarea {
    border-radius: 10px;
    height: 30px;
    font-size: 20px;
    font-family: var(--normal-font), serif;
    color: var(--gelb);
}

input[type="submit"] {
    background-color: var(--gelb);
    color: white;
    border-color: white;
    box-shadow: none;
}

input[type="email"] {
    background-color: white;
    color: var(--gelb);
    border-color: white;
    box-shadow: none;
}

.newstext {
    width: 60%;
    height: 400px;
    font-family: var(--normal-font), serif;
    font-size: 30px;
}

.newsbild {
    width: 40%;
    height: 400px;
    font-family: var(--normal-font), serif;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-items: center;
}

.newsbild img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.eins-new:nth-child(even) {
    background-color: var(--hellgelb);
    flex-direction: row-reverse;
    color: white;
}

.eins-new {
    background-color: white;
    flex-direction: row;
    display: flex;
    color: var(--hellgelb);
}

.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px 0;
    font-family: var(--normal-font), serif;
}

.login input[type="submit"] {
    background-color: var(--gelb);
    color: white;
    border-color: white;
    box-shadow: none;
    margin-top: 10px;
    cursor: pointer;
}

.entschuldige {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 0;
    font-family: var(--normal-font), serif;
}

.entschuldige input[type="submit"] {
    background-color: var(--gelb);
    color: white;
    border-color: white;
    box-shadow: none;
    margin-top: 10px;
    cursor: pointer;
}

.group{
    width: 100%;
    display: flex;
    height: 50%;
    justify-content: space-around;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    display: inline-block;
    right: 0;
    top: 71px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--hellgelb);
    min-width: 300px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    right: 0;
    /* bottom: 0; */
    font-size: larger;
    font-family: var(--normal-font), serif;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: right;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--gelb);}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content, .menu {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .admin {background-color: var(--gelb)}

.linksbundig{
    margin-left: 10px;
    text-align: left;
}

#greybackground{
    background-color: var(--hellgrau);
}

#largetitel{
    display: inline;
}

#smalltitel{
    display: none;
}

#subpages {
    background-color: var(--hellgelb);
    position: absolute;
    width: 300px;
    right: 0;
    top: 71px;
    bottom: 0;
    padding-right: 20px;
    font-size: larger;
    font-family: var(--normal-font), serif;
    height: calc(100vh - 71px);
    align-items: center;
    display: flex;
    justify-items: right;
    /*	display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: right;*/
}

#subpages a {
    line-height: 100px;
    display: block;
    margin-top: 10px;
    text-align: right;
    cursor: pointer;
    color: black;
    text-decoration: none;
}

#subpages a:visited {
    color: black;
    text-decoration: none;
}

@media screen and (min-width: 1101px) {


    #subpages a::after {
        content: '';
        width: 0;
        height: 1px;
        display: block;
        background: black;
        transition: 300ms;
    }

    #subpages a:hover::after {
        width: 100%;
    }
}
@media screen and (min-width: 581px) {

    #largekalender {
        display: block;
    }

    #smallkalender {
        display: none !important;
    }
}

#admin {
    margin-left: auto;
    margin-right: 10px;
}

#subpages-conainer {
    width: 300px;
}

#content {
    width: calc(100% - 320px);
    position: absolute;
    top: 71px;
    right: 320px;
    left: 0;
    bottom: 0;
    background-image: url("../image/SV2024BW.png");
    background-size: cover;
}

#content-news {
    width: 100%;
    /* position: absolute;
    top: 65px;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: var(--hellgelb); */
}

#content-news h1 {
    font-family: var(--title-font), serif;
    margin-bottom: 15px;
    font-size: 50px;
    text-align: center;
    margin-top: 15px;
    margin-left: 10px;
}

#content-news p {
    font-family: var(--normal-font), serif;
    font-size: 25px;
    text-align: left;
    margin-top: 0;
    margin-left: 10px;
    margin-bottom: 0;
    width: auto;
}

#startimage {
    width: 100%;
}

#startnews {
    width: calc(100% - 40px);
    background-color: #952d4472;
    height: 50px;
    margin: 20px;
    position: absolute;
    top: 578.25px;
}

#startnews button {
    --blur-radius: 3px;
    padding: 8px 50px;
    transition: 0.2s padding ease-in-out;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--normal-font), serif;
    font-size: 30px;
    color: var(--rot);
    text-shadow: #000 2px 2px var(--blur-radius), #000 -2px -2px var(--blur-radius), #000 2px -2px var(--blur-radius), #000 -2px 2px var(--blur-radius);
}

#startnews button:hover {
    padding-left: 35px;
}

#newsletter-abo {
    width: 100%;
    background-color: var(--hellgelb);
    font-family: var(--normal-font), serif;
    font-size: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
}

#newsletter-abo p {
    width: 60%;
    margin: 0;
}

#newsletter-abo form {
    width: 40%;
}

#content h1 {
    font-family: var(--title-font), serif;
    font-size: 230px;
    text-align: center;
    color: #e5b12088;
    margin-bottom: 10px;
    margin-top: 0;
    padding-top: 100px;
}

#content h2 {
    font-family: var(--title-font), serif;
    font-size: 187px;
    text-align: center;
    color: #e5b12088;
    margin-top: 0;
}

#infonologin {
    flex-direction: column;
    display: flex;
    align-items: center;
}

#Nologin {
    display: inline-block;
    align-self: center;
}

#Nologin p {
    text-decoration: underline;
    cursor: pointer;
    color: var(--blau)
}

#Nologin p:hover {
    color: var(--hellblau)
}

div#Nologin + div {
    display: none;
}

div#Nologin:hover + div{
    display: block;
    font-size: 20px;
    color: #4d4d4d;
}

#text {
    font-size: 20px;
    text-align: left;
}

#tagesordnung {
    width: 100%;
    height: 80vh;
    background-color: #eed387;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#put{
    width: 30%;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

#kalender{
    width: 50%;
    height: 100%;
    min-height: 420px;
}

#kalender table {
    min-height: 340px;
}

#svkalender{
    width: 100%;
    height: 100%;
}

#svkalender table{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#svkalender tbody {
    width: 100%;
    height: 100%;
}

#protokolle {
    width: 80%;
    height:70px;
    background-color: var(--gelb);
    font-family: var(--normal-font), serif;
    font-size: 30px;
    flex-direction: row;
    align-items: center;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

#tools{
    width: 70%;
    height: 100%;
}

#indexa{
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    padding-left: 10px;
}

#thead{
    font-family: var(--title-font), serif;
    font-size: 30px;
    color: var(--hellgelb);
    margin-bottom: 10px;
    align-items: center;
    display: flex;
    width: calc(100% - 10px);
    align-content: center;
    padding: 5px;
}

#aufgaben{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#namemonat{
    width: 70%;
    font-family: var(--title-font), serif;
    color: var(--hellgelb);
}

#mback, #mforth{
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--gelb);
    border: none;
    box-shadow: 1px 1px gray;
    border-radius: 5px;
}

#adminindex {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    flex-direction: row;
    align-items: center;
}

#protokoll{
    width: 70%;
    height: 100%;
}

#protokoll li{
    font-family: var(--normal-font), serif;
}

#protokoll ol{
    width: calc(100% - 50px);
    height: 24%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    white-space: nowrap;
    list-style-type: decimal;
    background-color: var(--hellgelb);
    margin: 0;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
}


#admintoolsa{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#admintools {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#admintools button{
    width: 80%;
    height: 30%;
    margin: 1% 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--gelb);
    color: white;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
    border-color: var(--gelb);
}

#admintools div button {
    width: 50%;
    height: 100%;
    margin: 0;
    border-radius: 15px;
}

#aufgabenverwaltung {
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#wocheneltern {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#wocheneltern button{
    width: 80%;
    height: 30%;
    margin: 1% 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--gelb);
    color: white;
    justify-content: center;
    border-radius: 20px;
    cursor: pointer;
    border-color: var(--gelb);
}

#zzsvseite {
    width: 300px;
    align-items: center;
}

#popoprotokoll{
    height: 65%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    white-space: nowrap;
    list-style-type: decimal;
}

#popoprotokoll textarea {
    height: 100%;
    color: black;
}

#popoprotokoll p{
    font-size: 20px;
    text-align: left;
    padding-left: 10px;
    width: calc(100% - 10px);
}

#wochenelternliste{
    width: calc(100% - 290px);
    height: calc(100vh - 73px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
}

#namespeicher{
    width: 290px;
    height: calc(100vh - 73px);
    display: flex;
    flex-direction: column;
    align-items: center;

}

.name{
    width: 250px;
    height: 50px;
    border-radius: 5px;
    background-color: var(--gelb);
    font-family: var(--normal-font), serif;
    margin: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: white;
}

#createcalen, #toperstellen{
    margin: 0 10px;
    padding: 10px;
    border-radius: 15px;
    border-style: none;
    box-shadow: var(--hellgrau) 2px 2px 2px;
    background-color: var(--gelb);
    transition: 0.2s background-color ease-in-out;
    cursor: pointer;
    font-size: large;
    font-family: var(--normal-font) , serif;
    color: white;
}

#wecontainer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#diesv {
    color: var(--gelb);
    padding-top: 40vw;
    width: 100%;
    height: 30vw;
    background-image: url("../image/SV2024BW.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}

#diesv h2, #diesv p {
    text-shadow: 2px 2px var(--dunkelgrau);
}

#aemter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

.flipbox {
    perspective: 2000px;
    margin: 1%;
}
.flipbox:hover .flipper, .flipbox.hover .flipper {
    transform: rotateY(180deg);
}
.flipbox, .front, .back {
    width: 100%;
    height: 100%;
}

img { width: 100%; height:auto}

.flipper {
    position: relative;
    transition: 1s;
    transform-style: preserve-3d;
}

.front, .back {
    position: absolute;top: 0;left: 0;
    backface-visibility: hidden;
}

.front {transform: rotateY(0deg);}
.back {transform: rotateY(180deg);}

.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45vw;
}

.posts textarea{
    overflow: auto;
    height: 300px;
    width: 50%;
    color: black;
    border-color: black;
    box-shadow: var(--hellgrau) 2px 2px 2px;
    margin-top: 10px;
    cursor: pointer;
}

#datacontainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#datacontainer div {
    margin: 20px 50px;
}

#datacontainer div p {
    text-align: left;
}

#kontaktformular {
    color: black;
}

#svnachricht {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#svnachricht label {
    font-size: 30px;
    margin: 10px;
    font-family: var(--normal-font), serif;
}

#svnachricht input[type="submit"] {
    font-size: 30px;
    margin: 10px;
    padding: 10px;
    height: 110%;
    font-family: var(--normal-font), serif;
}

#entwicklerkontakt{
    background: var(--hellgelb);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
}

#entwicklerkontakt p, #entwicklerkontakt a{
    color: var(--grau);
    font-size: 20px;
}

#adminnews {
    max-width: 100%;
}

#adminnews tr {
    max-width: 100%;
}

#adminnews td {
    max-width: 25vw;
}

#register {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-items: stretch;
    height: 60px;
    font-family: var(--normal-font), serif;
}

#register div{
    cursor: pointer;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 10px 10px;
    width: auto;
    flex: 1;
    margin: 0 10px;
}

#contentbearbeitung {
    display: flex;
    background-color: #9ebdee;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100% - 80px);
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

#contentbearbeitung div.recontent {
    position: absolute;
    top: 151px;
    width: 100%;
    min-height: calc(100% - 151px);
    display: none;
}

#contentbearbeitung div.recontent:first-child {
    display: block;
}

#filename-container, #fileupload-container {
    display: flex;
    flex-direction: row;
}

.abgelaufen {
    color: var(--rot);
}

#aufgaben .aufgabe {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#aufgaben p.punkt {
    text-align: left;
}

#protokoll-container button {
    cursor: pointer;
}

.protokoll-content {
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    /*width: 80%;*/
    /*height: 80%;*/
    padding: 30px;
    border-radius: 20px;
    background-color: var(--hellgelb);
    overflow: auto;
    box-shadow: 0 0 10px 0 var(--grau);
    font-family: var(--normal-font), serif;
}

.protokoll-content button {
    position: fixed;
    right: calc(10% + 30px);
    background: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

.entry {
    background-color: var(--hellgelb);
}

#selected {
    background-color: var(--gelb);
}

.today {
    color: var(--rot);
    font-weight: bold;
}

.trashcan {
    font-size: 25px;
    color: var(--rot);
    width: 32px;
    height: 32px;
    padding: 0;
    padding-top: 2px;
    margin-top: 8px;
}

.calen {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-shrink: 0;
}

.tiTe {
    width: calc(100% - 32px);
}

#kalenderdisplay {
    width: 50%;
}

#entschuldigung-container table tr.entschuldigt {
    background-color: var(--weiss);
}

#entschuldigung-container table tr {
    background-color: var(--hellgelb);
}

#entschuldigung-container table tr.past {
    background-color: var(--hellgrau);
}

#entschuldigung-container table tr.criminal {
    background-color: var(--rot);
}