/*Css-Regeln in Tabellen
    Wenn Spalte Cssklasse leer oder "" 
    --> Cssklasse2 keine Bedeutung und beide Spalten bekommen Standard empty
*/


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

    /*     ########  Inhalt  ###########   */
    .Titel1 {
        font-size: 1.4rem;
        font-weight: bold;
        margin-top: 0.5rem;
    }
	
	.small{
		font-size:small;
	}

    .caption, .captionwl, .dialogTitel1 {
        margin-top: 1rem;
        padding: 0.1rem;
        text-align: left;
        font-size: 1.1rem;
        color: var(--color-white);
        background-color: var(--bg-color-dark);
    }

    .captionwl3 {
        flex: 3;
        font-size: 1.1rem;
        margin-top: 1rem;
        color: var(--color-white);
        background-color: var(--bg-color-dark);
    }

    .captionwl4 {
        flex: 4;
        
        font-size: 1.1rem;
        margin-top: 1rem;
        color: var(--color-white);
        background-color: var(--bg-color-dark);
    }

    .dialogReihe {
        display: block;
    }

    .wortlistenreihe {
        display: flex;
    }

    .flex4 {
        flex: 4;
        font-size: 1rem;
        padding-left:0.1rem;
    }
    .nomen{

    }
    .emptycssleft {
        flex: 2;
        margin-top: 0.6rem;
        font-size: 1.1rem;
       
    }

    .emptycssright {
        flex: 4;
        margin-top: 0.6rem;
        font-size: 1.1rem;
        background-color: var(--dialoggr-color)
    }
    .emptyemptycssright {
        flex: 4;
        margin-top: 0.6rem;
        font-size: 1.1rem;
        background-color: var(--dialog-color)
    }

    .zeile {
        display: flex;
        font-size: 1.1rem;
    }

    .wlsp1 {
        width: 10%;
        font-size: 1.1rem;
    }

    .wlsp2 {
        font-size: 1.1rem;
        width: 55%;
    }

    .wlsp3 {
        font-size: 1.1rem;
        width: 40%;
    }


    .flex3 {
        flex: 3;
        
        font-size: 1rem;
    }
    .flex2 {
        
        flex-grow:3;
        font-size: 1rem;
    }

    .gp1 {
        flex: 2;
        margin-top: 0.6rem;
        font-size: 1.1rem;
        background-color: var(--dialoggr-color)
    }

    .gp4 {
        flex: 4;
        margin-top: 0.6rem;
        font-size: 1.1rem;
    }

    .zusatz {
        font-size: 0.8rem;
        margin-top: 0;
        flex: 2;
    }

    .plusz {
        flex: 2;
    }

    .left_p {
        background-color: var(--dialog-color);
        font-size: 1.1rem;
        margin-top: 0.6rem;
    }

    .right_p {
        font-size: 1.1rem;
        margin-top: 0.6rem;
        background-color: var(--dialoggr-color);
    }

    .gelb {
        background-color: var(--color-yellow);
        text-align: center;
        flex: 4;
        margin-top: 0.6rem;
        font-size: 1.1rem;
    }


/*     ########  Navi  ###########   */
    #gramcont {
        display: block;
    }



    #GramFiltersidebar {
    }

    #GramexercMitte {
        width: 100vw;
        padding: 0.5rem;
        margin-bottom:2rem;
    }

    #gramnavicont {
        display: flex;
       
    }

    #btncont { /*  SchiebeMen� */

        width: 100vw;
        display: flex;
        overflow: scroll;
    }

    .grambtn, .backbtn { /*  SchiebeMenü */
        color: var(--color-white);
        scroll-snap-align: center;
        font-size: large;
        flex: 0 0 40%;
        margin: 0.2rem;
        text-align: center;
    }

    .grambtn {
        background-color: var(--bg-color-dark);
    }

    .backbtn {
        background-color: var(--bg-color-light);
    }

    #divhomebtn {
        display: flex;
    }

    #homebtn { /*  SchiebeMen� */
        cursor: pointer;
    }

    .svgclass, .svgbreitclass {
        margin-top: 1rem;
        width: 100vw;
        height: auto;
    }

  

}
@media only screen and (min-width: 800px) {

    /*     ########  Inhalt  ###########   */


    .Titel1 {
        font-size: 1.5rem;
        font-weight: bold;
        margin-top: 1rem;
    }

    .dialogReihe {
        display: flex;
        width:60vw;
    }

    .gp1 {
       line-height:1.5rem;
        flex: 2;
        margin-top: 0.6rem;
        padding: 0.2rem;
        background-color: var(--dialoggr-color);
    }

    .gp4 {
       
        flex: 2;
        margin-top: 0.6rem;
        padding: 0.2rem;
        background-color: var(--dialog-color);
    }

    .emptycssleft {
        line-height: 1.5rem;
        flex: 2;
        margin-top: 0.6rem;
        padding: 0.2rem;
        
    }

    .emptycssright {
        flex: 2;
        margin-top: 0.6rem;
        padding: 0.2rem;
        background-color: var(--dialoggr-color);
    }
    .emptyemptycssright {
        flex: 2;
        margin-top: 0.6rem;
        padding: 0.2rem;
        background-color: var(--dialog-color);
    }



    .zeile {
        display: flex;
        font-size:1.3rem;
    }

    .wlsp1 {
        width: 8%;
        font-size: 1.3rem;
    }

    .wlsp2 {
        font-size: 1.3rem;
        width: 30%;
    }

    .wlsp3 {
        font-size: 1.3rem;
        width: 40%;
    }




    .flex4 {
        flex: 4;
        font-size: 1.8rem;
    }


    .flex3 {
        flex: 1;
        font-size:1.8rem;
    }
    .flex1 {
        flex: 1;
        flex-grow: 3;
        font-size: 1.8rem;
    }

    .flex2 {
        flex: 2;
        flex-grow: 3;
        font-size: 1.8rem;
    }

    .gelb {
        
        text-align: left;
        flex: 2;
        margin-top: 0.6rem;
        font-size: 1.1rem;
    }

    .zusatz {
        font-size: 0.8rem;
        margin-top: 0;
        flex: 4;
    }

    .plusz {
        flex: 2;
    }

    .left_p {
        margin-top: 0.6rem;
        
        flex: 2;
    }

    .right_p {
        flex: 2;
        margin-left: 1rem;
        margin-top: 0.6rem;
        background-color: var(--dialog-color);
    }

    .svgclass {
        margin-top: 2rem;
        width: 80%;
        height: auto;
    }
    .svgbreitclass {
        margin-top: 1rem;
        width: 100%;
        height: auto;
    }


    /*     ########  Navi  ###########   */

    #gramcont {
        display: flex;
    }

    #GramFiltersidebar {
        height: 100vh;
    }

    #gramnavicont {
        float: left;
        display: block;
    }

    #btncont { /*  SchiebeMen� */
        height: 100vh;
       width: 15vw;  /*   f�r voll Breite auskommentieren */
        display: block;
    }

    #homebtn {
        margin: auto;
    }

    .grambtn, .backbtn {
        cursor: pointer;
        height: 2rem;
    }
}

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

    .svgclass {
        margin-top: 2rem;
        width: 60%;
        height: auto;
    }
    .svgbreitclass {
        margin-top: 1rem;
        width: 80%;
        height: auto;
    }

    .zeile {
        display: flex;
        font-size: 1rem;
    }

    .wlsp1 {
        width: 4%;
        font-size: 1.3rem;
    }

    .wlsp2 {
        font-size: 1.3rem;
        width: 20%;
    }

    .wlsp3 {
        font-size: 1.3rem;
        width: 30%;
    }
}