:root {
    --C1: #a5c348; /*main*/
    --C2: #ebf1db; /*second*/
    --C3: #a4c247; /*button*/
    --C12: #ff3e3e; /*second-delete*/
    --C13: #ff0000; /*button-delete*/
}

body {
    background-color: #f3f3f3;
}

#content{
    background-color: white;
}

.gruppenname {
    /*color: #E41C14;*/
    color: black;
    font-weight: bold;
}

header {
    background-color: var(--C1);
}

footer {
    background-color: var(--C2);
}

.marked {
    text-decoration: underline;
}

.myicon {
    color: var(--C1);
    zoom: 130%;
}

.buttonbagground {
    background-color: var(--C2);
}
.buttonbagground_delete {
    background-color: var(--C12);
}
.buttonbagground:hover{
    background-color: var(--C3);
}
.buttonbagground_delete:hover{
    background-color: var(--C13);
}

#nav {
    margin-left: 0px;
    background-color: var(--C2);
    border-radius: 5px;
}
.tabellenplatzhalter{
    padding-top: 3%;
    padding-bottom: 3%;
}

.footer{
    position: page;
    bottom: 0;
    background-color: var(--C1);
}

.shaddow{
    box-shadow: 0px 20px 20px darkgray;
}


@media (min-width: 1001px) {
    .w100 {
        width: 100px;
    }
    .w150 {
        width: 150px;
    }
    .w200{
        width: 200px;
    }
    .w250{
        width: 250px;
    }
    .tabellenplatzhalter{
        padding: 3%;
    }
    .mpw > input {
        width: 200px;
    }

    .mpw > div {
        width: 200px;
    }
    .mpw {
        width: 800px;
    }
    #planbild{
        width: 75%;
    }
}

@media (max-width: 1000px) {
    #numkinder {
        max-width: 110px;
    }

    #thema {
        max-width: 100px;
    }

    .mpw > input {
        max-width: 180px;
    }
    .mpw > div {
        max-width: 180px;
    }

    #gruppenname{
        zoom: 85%;
        padding-left: 20px;
        padding-right: 0px;
    }

    #planbild{
        width: 100%;
    }

}

.icon {
    height: 1.3em; /* Passt die Höhe des Bildes an die Textgröße an */
    vertical-align: middle; /* Richtet das Bild auf gleicher Höhe mit dem Text aus */
    margin-right: 5px; /* Fügt etwas Abstand zwischen Bild und Text hinzu */
}