@font-face {
    font-family: "Diatype";
    src: url("fonts/ABCDiatypeEdu-Regular.woff") format('woff');
    font-weight: normal;
  }

  @font-face {
    font-family: "DiatypeM";
    src: url("fonts/ABCDiatypeEdu-Medium.woff") format('woff');
  }

  @font-face {
    font-family: "DiatypeI";
    src: url("fonts/ABCDiatypeEdu-MediumItalic.woff") format('woff');
  }
  
  @font-face {
    font-family: "Diatype";
    src: url("fonts/ABCDiatypeEdu-Black.woff") format('woff');
    font-weight: bold;
  }

body{
    font-family: "Diatype";
    font-size: var(--font);
    line-height: var(--line);
    font-weight: normal;
    overflow: hidden;
    color: var(--color-icon);
    background-color: var(--side);
}

body::-webkit-scrollbar{
    display: none;
}

::-moz-selection { background: var(--color-icon); color: var(--side); }
::selection { background: var(--color-icon); color: var(--side); }

.alles{
    padding: 0px;
    overflow-y: scroll;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100vw;
    height: 100vh;
}

.checkers{
    position: relative;
    width: 35vw;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
    min-width: 300px;
    overflow-y: scroll;
    background-color: var(--side);
    /* box-shadow: 1vw 0px 20px 10px var(--side); */
    margin-right: 1vw;
}

.checkers::-webkit-scrollbar{
    display: none;
}

.kapitelbox{
    margin-top: 20px;
}


.wrapper{
    /* padding-left: 380px; */
    position: relative;
    padding-top: 0px;
    width: 49vw;
    min-width: 500px;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    overflow-y: scroll;
    height: 100vh;
    background-color: var(--color-icon);
    margin-left: 1vw;
    /* box-shadow: -1vw 0px 10px 10px var(--color-icon); */
    z-index: 0;
}

.alles::-webkit-scrollbar, .wrapper::-webkit-scrollbar{
    display: none;     
}

.titelbox{
    /* height: 48px; */
    width: 100%;
}

.container{
    width: fit-content;
    margin-left: 1px;
    margin: 28px;
    margin-right: 24px;
    color: var(--side);
    hyphens: auto;
}

.container::-webkit-scrollbar{
    display: none;
}

.textArea::-webkit-scrollbar{
    display: none;
}


p{
    /* font-family: "Diatype"; */
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: inline;
    font-weight: 400;
}

h1, h2, h3, p{
    font-size: var(--font);
    margin: 0%;
    padding: 0%;
}

h1{
    font-family: "DiatypeM";
    font-weight: 400;
    color: var(--side);
}

h1, h2{
    font-size: 24px;
    padding: 2rem 0 0 0;
    line-height: 30px;
}

h2{
    font-family:"DiatypeM";
    font-weight: 400;
}

h2{
    padding-top: 1rem;
    display: block;
}

#titel{
    font-family: "DiatypeM";
    font-size: var(--font2);
    line-height: 55px;
    margin: 0%;
    padding: 0%;
    padding-left: 28px;
    margin-top: 20px;
    width: 35vw;
    height: auto;
    display: block;
    z-index: 999;
    color: var(--color-icon);
    letter-spacing: -2px;
    text-transform: uppercase;
}
.untertitel{
    padding-top: 0%;
}


h3{
    font-family: "Diatype";
    font-weight: 400;
    padding: 0rem 0 1rem 0;
    margin: 0%;
    line-height: 30px;
    color: var(--side);
}

.shadow{
    margin: 0%;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: var(--side);
}

.literature{
    color: var(--color-icon);
}

ol li{
    margin-left: 24px;
    list-style-type: decimal;
    list-style-position: outside;
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* font-family: "Diatype"; */
    margin:0%;
    color: var(--side);
    line-height: 32px;
}

li::marker{
    color: var(--side);
}

.textliste{
    padding: 0%;
    margin: 0%;
    margin-left: 24px;
}

.textliste li{
    font-family: Georgia, 'Times New Roman', Times, serif;
    list-style-type: none;
}

.comment{
    margin: 0%;
    padding: 0%;
    padding-bottom: 4px;
    padding-top: 2px;
    padding-left: 1px;
    padding-right: 1px;
    margin-right: 5px;
    margin-left: 2px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* font-family: "Diatype"; */

    color: var(--side);
    background-color: var(--side);
}

[placeholder]:empty::before {
    content: attr(placeholder);
    color: var(--side);
    background-color: var(--side);
}

[placeholder]:empty:focus::before {
    animation: blink 3s;
    animation-timing-function: linear;
}

@keyframes blink{
10%{
    content: ".";
}

30%{
    content: "..";
}

50%{
    content: "...";
}
}

span[contenteditable="true"]:focus{
    outline: 0px;
    border: 0px;
}

.textArea{
    width: 100%;
}

.checked {
    color: var(--color-icon);
}

.checked li{
    color: var(--color-icon);
}

.checked .comment{
    color: var(--side);
    background-color: var(--color-icon);
}

.checked [placeholder]:empty::before {
    color: var(--side);
    background-color: var(--color-icon);
}

.check{
    display: block;
    position: relative;
    padding: 0%;
    margin-top: 1rem;
    margin-left: 28px;
    width: 29.7vw;
    margin-right: 4px;
    /* font-family: Georgia, 'Times New Roman', Times, serif; */
    font-family: "Diatype";
    font-size: var(--font);
    font-weight: normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
    min-height: 30px;
    line-height: 24px;
    cursor: default;
}

.kapitel{
    cursor: pointer;
    width: fit-content;
    color: var(--side);
    background-color: var(--color-icon);
    padding: 2px;
}

.kapitel:hover{
    color: var(--color-icon);
    background-color: var(--side);
    z-index: 999;
}

details[open] {
    width: 46.4vw;
    height: fit-content;
    background: var(--side);
    color: var(--color-icon);
    z-index: 999;
    position: fixed;
    top: 16vh;
    left: 42.6vw;
    /* border: 6px solid var(--color-icon); */
    box-shadow: -10px 0px 20px 5px var(--color-icon);
}

#litliste{
    text-indent: 34px;
    list-style-position: inside;
    line-height: 32px;
}

#litliste li{
    font-family: Georgia, 'Times New Roman', Times, serif;
    list-style: none;
    list-style-type: none;
}


.iwant{
    display: none;
}

summary{
    height: 10px;
}



details[open] h1{
    display: block;
    background-color: var(--color-icon);
    color: var(--side);
    width: fit-content;
    margin: 0%;
    padding: 0%;
    margin-top: 12px;
}

.impressum, #check8, #checkmark8, #ende, .select, .warning{
    display: none;
}

a:link{
    text-decoration: none;
    color: var(--color-icon);
}

a:visited{
    color: var(--color-icon)
}

a:hover{
    color: var(--color-icon);
}


#bw{
    top: 45px;
}

/* Eigene Checkbox */

            /* Hide the browser's default checkbox */
            .check input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

            /* Create a custom checkbox */
            .checkmark {
                position: absolute;
                right: 0px;
                top: 0px;
                height: 24px;
                width: 24px;
                cursor: pointer;
            }

            /* On mouse-over, add a grey background color */
            .check:hover input ~ .checkmark {
                background-color: var(--color-icon);

            }
            
            .check input ~ .checkmark {
            background-color: var(--color-icon);

            }

            /* When the checkbox is checked, add a blue background */
            .check input:checked ~ .checkmark {
             background-color: var(--color-icon);
            }
            
            /* Create the checkmark/indicator (hidden when not checked) */
            .checkmark:after {
                content: "";
                position: absolute;
                display: none;
            }
            
            /* Show the checkmark when checked */
            .check input:checked ~ .checkmark:after {
                display: block;
            }
            
            /* Style the checkmark/indicator */
            .check .checkmark:after {
                left: 9px;
                top: 5px;
                width: 5px;
                height: 10px;
                border: solid var(--side);
                border-width: 0 3px 3px 0;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
            }

            .check:hover input:checked ~ .checkmark:after {
                animation: rotate 1s;
            }

            @keyframes rotate {
                0% {
                    transform: rotate(45deg);
                  }
                  100% {
                    transform: rotate(405deg);
                  }
                
              }

              .check:hover input:checked ~ .checkmark{
                background-color: var(--color-icon);
            }





/* Loooop */

/*keyframe animations*/
/* .first {
    transition: 0.5s;
    -webkit-animation: bannermove 120s linear infinite;
       -moz-animation: bannermove 120s linear infinite;
            animation: bannermove 120s linear infinite;
} */
 
/* @keyframes bannermove {
 0% {
    margin-left: -300px;
 }
 50% {
    margin-left: -100%;
 }

 100%{
    margin-left: -300px; 
 }
 
}
 
@-moz-keyframes bannermove {
    0% {
        margin-left: 0px;
     }
     50% {
        margin-left: -1125px;
     }
    
     100%{
        margin-left: 0px; 
     }
 
}
 
@-webkit-keyframes bannermove {
    0% {
        margin-left: 0px;
     }
     50% {
        margin-left: -1125px;
     }
    
     100%{
        margin-left: 0px; 
     }
 
} */