/* Hintergrundfarbe: #8064A2 */
    /* Hintergrund im Hauptdiv: #F0F0F0 */

    /* Haupt-Überschrift: 'Arial Black', Gadget, sans-serif */
    /* Schrift für h2: 'Trebuchet MS', Helvetica, Arial, sans-serif */
    /* Schrift im Text: 'Trebuchet MS', Arial, Helvetica, sans-serif */

    body {
        margin: 0px;
        background-color: #FFF;
        background: -moz-linear-gradient(270deg, #8064A2 0%, #FFFFFF 100%);
        /* ff3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8064A2), color-stop(100%, #FFFFFF));
        /* safari4+,chrome */
        background: -webkit-linear-gradient(270deg, #8064A2 0%, #FFFFFF 100%);
        /* safari5.1+,chrome10+ */
        background: -o-linear-gradient(270deg, #8064A2 0%, #FFFFFF 100%);
        /* opera 11.10+ */
        background: -ms-linear-gradient(270deg, #8064A2 0%, #FFFFFF 100%);
        /* ie10+ */
        background: linear-gradient(180deg, #8064A2 0%, #FFFFFF 100%);
        /* w3c */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8064A2', endColorstr='#FFFFFF', GradientType=0);
        /* ie6-9 */
        background-attachment: fixed;
        background-size: contain;
    }

    #hauptueberschrift {
        display: inline-block;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
        padding-right: 2em;
        padding-left: 1.5em;
        margin-bottom: 1em;
        border-radius: 0px 0px 70px 0px;
        border-right: 20px white solid;
        border-bottom: 20px white solid;
        background-color: #8064A2;
        color: #FFF;
        font-family: 'Arial Black', Gadget, sans-serif;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
        font-size: 3em;
    }

    /* Innerhalb eines Textes, z. B. im Impressum */
    .inlinelink,
    .inlinelink:link,
    .inlinelink:visited {
        color: inherit;
        border-bottom: 1px dashed #CCCCCC;
        text-decoration: none;
    }

    .inlinelink:hover,
    .inlinelink:active,
    .inlinelink:focus {
        border-bottom: 1px solid #999;
        transition: all 1s;
    }

    #hauptdiv {
        background-color: #F0F0F0;
        width: 85%;
        border: 20px white solid;
        margin: auto;
        padding-top: 0px;
        overflow: auto;
        margin-top: 4em;
        -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
    }

    .einheit {
        width: 95%;
        overflow: auto;
        margin: auto;
        border: 3px double #F0F0F0;
        padding-top: 1em;
    }

    .einheit:hover {
        border: 3px double #999;
        border-radius: 20px;
    }

    .lernen {
        width: 43%;
        margin-left: 5%;
        float: left;
        display: inline-block;
    }

    .ueben {
        width: 43%;
        margin-right: 5%;
        float: right;
        display: inline-block;
    }

    ol {
        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
        margin-left: 0.3em;
    }

    ol>li {
        margin-bottom: 1.3em;
    }

    .RefZelle {
        font-family: monospace;
        list-style: none;
        user-select: all;
        font-size: 12pt;
    }

    .RefBeschr {
        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
        font-size: 12pt;
        user-select: none;
        color: #28324ef;
    }

    .beschr {
        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
        font-size: 1.2em;
    }

    .uberdieID {
        border-left: #CCC thin dotted;
        overflow: hidden;
        animation: uberIDeinblenden 3s;
    }

    @keyframes uberIDeinblenden {
        from {
            max-height: 0em;
        }

        to {
            max-height: 500em;
        }
    }

    .ipdf::before {
        content: "PDF";
        border: 1px solid;
        margin-right: 10px;
        background-color: #900;
        color: #FFF;
        padding: 3px;
    }

    .ilink::before {
        content: "Link";
        border: 1px solid;
        margin-right: 10px;
        background-color: #00F;
        color: #FFF;
        padding: 3px;
    }

    .ifile::before {
        content: "Datei";
        border: 1px solid;
        margin-right: 10px;
        background-color: #666;
        color: #FFF;
        padding: 3px;
    }

    .tech {
        float: right;
        font-size: 0.5em;
        border: thin #999 solid;
        border-radius: 3px;
        background-color: #F0F0F0;
        margin-top: 5px;
        padding: 2px;
        color: #000;
    }

    .pdfauf,
    .pdfauf:link,
    .pdfauf:visited,
    .pdfauf:active {
        border-radius: 5px;
        text-decoration: none;
        padding: 0.3em;
        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
        padding-left: 0.5em;
        padding-right: 1em;
        border: #CCC solid;
        background-color: #FFF;
        color: black;
        transition: all 1s ease;
    }

    .pdfauf:focus,
    .pdfauf:hover {
        border: #999 solid;
        background-color: #8064A2;
        color: white;
        transition: all 1s ease;
    }

    .bildlinkklasse,
    .bildlinkklasse:link,
    .bildlinkklasse:visited,
    .bildlinkklasse:active,
    .bildlinkklasse:focus,
    .bildlinkklasse:hover {
        border: none !important;
    }

    h2 {
        font-size: large;
        font-size: 1.8em;
        position: relative;
        z-index: 2;
        border-top: #CCC thin dotted;
        border-bottom: #CCC thin dotted;
        margin-top: 0.3em;
        cursor: pointer;
        font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
        padding: 0.2em;
        padding-right: 0.2em;
    }

    h2:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        background-color: #8064A2;
        visibility: hidden;
        animation-name: meineAniEnde;
        animation-duration: 1s;
        z-index: -1;
    }

    h2:hover {
        animation-name: farbeanders;
        animation-duration: 2s;
        animation-fill-mode: forwards;
    }

    h2:hover:before {
        visibility: visible;
        animation-name: meineAniStart;
        animation-duration: 1s;
    }


    @keyframes farbeanders {
        from {
            color: black;
        }

        to {
            color: white;
        }
    }

    @keyframes meineAniStart {
        0% {
            height: 4px;
            transform: scaleX(0);
        }

        50% {
            height: 4px;
            transform: scaleX(1);
        }

        100% {
            height: 100%;
        }
    }

    @keyframes meineAniEnde {
        0% {
            height: 100%;
            visibility: visible;
        }

        50% {
            height: 4px;
            transform: scaleX(1);
        }

        100% {
            height: 4px;
            transform: scaleX(0);
        }
    }

    .leereZeile {
        animation: none;
    }

    .leereZeile:before {
        animation: none;
    }

    .leereZeile:hover {
        animation: none;
        background-color: transparent;
        cursor: auto;
    }

    .leereZeile:hover:before {
        animation: none;
        background-color: transparent;
        cursor: auto;
    }

    /*IMPRESSUM*/
    #imressdiv {
        width: 100%;
        text-align: left;
        bottom: 0;
        position: fixed;
        z-index: 6;
    }

    #impresstextdiv {
        background-color: #28324e;
        color: #FFF;
        padding: 0.5em;
        font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
        font-size: small;
        text-align: left;
    }

    #LogoImp {
        position: fixed;
        bottom: 0px;
        z-index: 12;
        right: 0px;
        width: 20%;
        max-width: 75px;
        filter: drop-shadow(2px 2px 2px gray);
    }

    #aebut {
        font-size: inherit;
    }

    /* ================================= */

    @media screen and (max-width: 1350px) {

        body {
            margin: 0px;
            background: none;
            background-color: #F0F0F0;
        }

        #hauptueberschrift {
            display: inline-block;
            font-size: large;
            font-size: 3em;
            text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
        }

        #hauptdiv {
            background-color: #F0F0F0;
            width: 100%;
            border: none;
            padding-top: 0px;
            overflow: auto;
            margin-top: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        .lernen {
            width: 43%;
            margin-left: 5%;
            float: left;
            display: inline-block;
            font-size: 1.2em;
        }

        .ueben {
            width: 43%;
            margin-right: 5%;
            float: right;
            display: inline-block;
            font-size: 1.2em;
        }

        ol {
            font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
            margin-left: 0.3em;
        }

        ol>li {
            margin-bottom: 1.3em;
        }

        .beschr {
            font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
            font-size: medium;
            font-size: 1.1em;
        }

        h2 {
            font-size: medium;
            font-size: 1.5em;
        }

        #aebut {
            font-size: inherit;
        }

        #imressdiv {
            position: relative;
        }
    }

    /* ENDE max-width: 1100px */

    @media screen and (max-width: 1000px) {

        #hauptdiv {
            width: 100%;
            border: none;
            border-radius: 0px;
            box-shadow: none;
        }

        #hauptueberschrift {
            font-size: large;
            font-size: 3em;
        }

        .lernen {
            width: 95%;
            display: block;
            margin: auto;
            float: none;
        }

        .ueben {
            width: 95%;
            display: block;
            margin: auto;
            float: none;
        }

        h2 {
            font-size: medium;
            font-size: 1.5em;
        }

        #hauptdiv {
            margin-top: 0px;
        }

        .beschr {
            font-size: medium;
            font-size: 1.2em;
        }

        ol {
            margin-left: 0.3em;
            font-size: medium;
            font-size: 1em;
        }

        ol>li {
            margin-bottom: 1.3em;
        }

        .leereZeile {
            display: none;
        }

    }

    /* ENDE max-width: 1000px */

    @media screen and (max-width: 700px) {

        h2 {
            font-size: medium;
            font-size: 1.3em;
        }

        #hauptueberschrift {
            font-size: 2.5em;
            border: none;
            border-radius: 0px 0px 0px 0px;
            width: 100%;
            padding: 0px;
            padding-top: 1em;
            padding-bottom: 1em;
            text-align: center;
        }

        .tech {
            display: none;
        }

        .beschr {
            font-size: medium;
            font-size: 1em;
        }

        #imressdiv {
            width: 100%;
            text-align: right;
            bottom: 0;
            position: fixed;
            z-index: 6;
        }

        #impresstextdiv {
            text-align: center;
            display: block;
        }

        .pdfauf,
        .pdfauf:link,
        .pdfauf:visited,
        .pdfauf:active {
            border-radius: 5px;
            text-decoration: none;
            padding: 0.3em;
            font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
            padding-left: 0.5em;
            padding-right: 1em;
            border: #CCC solid;
            background-color: #FFF;
            color: black;
            transition: all 1s ease;
        }

        .pdfauf,
        .pdfauf:link,
        .pdfauf:visited,
        .pdfauf:active {
            font-size: medium;
        }

        ol {
            margin-left: 0.3em;
        }

        ol>li {
            margin-bottom: 1em;
        }

    }

    /* ENDE max-width: 550px */

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

        h2 {
            font-size: 1.8em;
        }

        #hauptueberschrift {
            font-size: 4em;
        }

        #impresstextdiv {
            font-size: 1em;
        }

        ol>li {
            font-size: large;
        }

        .beschr {
            font-size: larger;
        }

    }

    /* ENDE min-width: 1500px */

    @media screen and (min-width: 1650px) {
        #hauptdiv {
            width: 80%;
        }
    }

    @media screen and (min-width: 1900px) {
        #hauptdiv {
            width: 70%;
        }
    }