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


        .theorylink {
            margin-bottom: 1rem;
            cursor: pointer;
            background-color: #080f50;
            color:white;
        }

        table {
            margin-top: 2rem;
            margin-bottom: 3rem;
            background-color: #080f5010;
        }

        thead {
            font-weight: bolder;
            background-color: white;
         
        }

        .tbodylight {
            background-color:white;
        }

        .theadbordered {
            border: dashed red 1px;
        }

        .trbordered {
            border: dashed red 1px;
           
        }

        th {
            text-align: left;
            margin-right: 1rem;
            font-weight: bolder;
            padding: 0.5rem;
            color:gray;
        }

    tfood {
        font-size: smaller;
    }

    td {
        padding: 0.5rem;
        margin-right: 1rem;
    }

        .tbordered {
            border: solid black 1px;
            
          text-align:center;
        }

        .tdmarked {
            border: dashed red 1px;
        }

        .mitborderrechts {
            border-right: 1px solid #000;
        }

        caption {
            padding: 0.4rem;
            text-align: left;
            font-size: x-large;
            color:white;
            background-color: #080f50;
            margin-bottom:0.2rem
        }

    .fussnote {
        text-align: left;
        font-size: small;
    }

    .markNbS {
        background-color:darkorange;
    }

        .markNbS2 {
            background-color: cyan;
        }
        .markRS {
            background-color: mediumspringgreen;
        }
        .stark23 {
            background-color: mediumspringgreen;
        }
    .comment {
font-style:italic;
font-size:small;
    }

    .markiert {
        background-color: yellow;
    }

    .inputclass {
        font-size: large;
        margin: 0.6rem;

    }


        .left_p {
            line-height: 1.7rem;
            width: 48%;
           font-size:large;
        }
        .dialogReihe {
            display: flex;
            margin-top: 0.3rem;
         
        }

        .handybackg {
          /*  background-image: url("/images/arbeitssvg/indexsvg2frauen/handysvg.svg");*/
            background-repeat: no-repeat;
            background-size: cover;
            padding-left: 2rem;
            margin: 3rem;
            padding-top: 15rem;
        }
        .titel {
            padding: 10px;
            width: 100%;
            background-color: #b4e7e5;
        }


        .fettside {
            padding: 0.5rem;
            margin-top: -3.3rem;

        }


        .fettframe {
            border-bottom: solid 50px #080f50;
            border-top: solid 50px #080f50;
            border-left: solid 20px #080f50;
            border-right: solid 20px #080f50;
            border-radius: 0.6rem;
            padding: 2rem;
            background-color: #fff;
        }

        .img100kopf {
            width: 100%;
            height: 84px;
         /*   background-image: url("/images/myhandykopf.svg");*/
        }

        .img100boden {
            width: 100%;
            height: 120px;
          /*  background-image: url("/images/myhandyboden.svg");*/
        }


        .handycontaboutus{
            padding:0.5rem;
        }

        .dialogReiheinHandy {
            display: flex;
            margin-top: 0.3rem;
        }

        .right_p {
            padding-left: 1rem;
            line-height: 1.7rem;
            width: 48%;
            font-size: large;
        }
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    [class*="col-"] {
        float: left;
        padding: 2rem;
    }



    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }

    .listcontainer {
        scrollbar-base-color: #9933cc;
        overflow-x: auto;
    }



/*    li {
        padding: 8px;
        margin-bottom: 7px;
        background-color: #33b5e5;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }*/

        .listbtn {
            font-size: larger;
            padding: 0.5rem;
            margin: 0.2rem;
            width: 100%;
            background-color: #080f50;
            color: white;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

    .textright{
        text-align:right;
    }

        .textcenter {
            text-align: center;
        }

        .listbtn:hover {
            background-color: #080f5080;
        }

        .listbtnhigh {
            font-size: larger;
            padding: 0.5rem;
            margin: 0.2rem;
            width: 100%;
            background-color: #080f50;
            color: white;
            cursor: pointer;
            border: solid 5px #d5ed24;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }

    .grambtnextra {
        padding: 0.5rem;
        margin: 0.2rem;
        width: 100%;
        background-color: #080f50aa;
        color: white;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

    .HomeH1{
        font-size:2rem
    }

    .aside {
        background-color: #33b5e5;
        padding: 15px;
        color: #ffffff;
        text-align: center;
        font-size: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

    .footer {
        background-color: #0099cc;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        padding: 15px;
    }



    .dialogTitel1 {
        font-size: x-large;
        margin-top: 2rem;
    }
        .dialogTitel2 {
            font-size: large;
            margin-top: 1.5rem;
            font-weight:bold;
        }

    .Titel1 {
        font-size: xx-large;
            margin-top:2rem;
    }

    .Titel2 {
        font-size: x-large
    }

    .textnormal {
        font-size: large;
        line-height:1.7rem;
        word-wrap:break-word;
    }

    .zwcomt {
        font-size: large;
        margin: 2rem;
    }

    .textklein {
        font-size: small;
        margin-bottom: 3rem;
    }

        .totranslate {
            display: block;
            font-size: smaller;
            background-color: #080f5010;
            
        }




    /* For mobile phones:*/
    [class*="col-"] {
        width: 100%;
       
    } 


    .dropbtn{
        position:fixed;
        top:60px;
    }

        .listbtnnavi {
            width: 100%;
           
            font-size:larger;
        }

        .col-3 {
            width: 15%;
         display:none;
        }
}


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



}
@media only screen and (min-width: 600px) {
    /* For desktop: */


    .dropbtn {
        display:none;
    }
    .dropup-content {
        display:flex;
        width:20%;
    }

    .dropup {
        display: flex;
    }

    .listbtnhigh {
        font-size: initial;
    }
    .listbtn {
        font-size: initial;
    }

        .listbtnnavi {
        width: 100%;
        display: block;
    }


    .col-3 {
        width: 15%;
        display: block;
    }


    .col-2 {
        width: 45%;
    }

    .col-6 {
        width: 60%;
    }

    .col-9 {
        width: 75%;
    }

    .col-12 {
        width: 100%;
    }
}

/*landscape definition ist notwendig, damit der Dialog nicht in der Mitte zusammengepresst wird.
    Allerdings muss die Navigation anders untergebracht werden 
    col-6 muss ab 600 landscape bis 1074 = 100% sein
*/

@media only screen and (min-width: 600px) and (orientation: landscape) {
    /* For desktop: */

    .col-3 {
        width: 15%;
    }


    .col-2 {
        width: 45%;
    }

    .col-6 {
        width: 60%;
    }

    .col-9 {
        width: 75%;
    }

    .col-12 {
        width: 100%;
    }
}


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

        .col-6 {
            width: 60%;
        }

        .dialogReihe {
   
            margin-left: 4rem;
            margin-right: 4rem;
        }

    }
@media only screen and (min-width: 768px) and (orientation: landscape) {

    .col-6 {
        width: 60%;
    }

    .dialogReihe {
        margin-left: 4rem;
        margin-right: 4rem;
    }
}
@media only screen and (min-width: 1074px) {

    .dialogReihe {
        margin-left: 9rem;
        margin-right: 9rem;
    }
}