body {
    font-family: 'Quicksand', sans-serif;
}
header {
    background-color: #6a1c1e;
}
header img {
    max-height: 150px;
    padding: 1em;
}
nav {
    font-size: 16px;
}
#nav-bar {
    padding-left: 0.8em;
}
#nav-bar-small a {
    white-space: normal;
    text-align: left;
}
#nav-bar-small .subitem {
    margin-left: 1em;
}
#top-button {
    position: fixed;
    z-index: 2;
    bottom: 4em;
    right: 1.5em;
    display: none;
    padding: 0.6em 0.8em;
    background-color: #6a1c1e;
    color: white;
    border: 2px solid white;
}
#back-button {
    position: fixed;
    z-index: 2;
    bottom: 4em;
    right: 5em;
    display: none;
    padding: 0.6em 0.8em;
    background-color: #6a1c1e;
    color: white;
    border: 2px solid white;
}
#back-button_example {
    padding: 0.6em 0.8em;
    background-color: #6a1c1e;
    color: white;
    border: 2px solid white;
}
#main_left-col {
    max-width: 350px;
}
#main_right-col p {
    max-width: 800px;
}
#nav-left {
    height: 100%;
}
#calendar, #months {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
#months {
    padding-top: 1.7em;
    padding-bottom: 2em;
}
#introtextLink {
    margin-left: 1em;
}
#introtextLink i {
    margin-right: 0.3em;
    color: #6a1c1e;
}
#calendar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-top: 2em;
    padding-bottom: 4em;
    display: none;
}
#calendar > div {
    display: grid;
    grid-template-columns: 14.28fr 14.28fr 14.28fr 14.28fr 14.28fr 14.28fr 14.28fr;
    -ms-grid-columns: 14.28fr 14.28fr 14.28fr 14.28fr 14.28fr 14.28fr 14.28fr;
    /*grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px;*/
}
#book_image_cell {
    width: 20%;
}
#book_text_cell {
    padding-left: 2em;
}
#book_text_cell .w3-small {
    width: 50%;
}
#book_text_smallWidth {
    display: none;
    width: 80%;
}
#book_text_smallWidth p {
    margin-bottom: 0;
}
#impressum div {
    max-width: 350px;
}
#ajax {
    position: relative;
}
#mobile_ajaxPageTitle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #6a1c1e;
}
#ajax .left {
    width: 20%;
    padding-right: 1em;
}
#ajax .right {
    width: 80%;
}
.item div {
    display: flex;
    justify-content: center;
    align-items: center;
}
div.dotw {
    background-color: #6a1c1e;
    color: white;
}
div.empty {
    color: lightgrey;
}
div.active {
    background-color: rgb(255, 213, 128);
}
a[href] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: grey;
    color: grey;
}
a[data-href] {
    cursor: pointer;
    text-decoration: none;
}
a[data-href].textlink {
    font-weight: 800;
}
a[data-href].textlink::before {
    content: "↗";
}
.werktitel {
    font-style: italic;
}
.lemma {
    font-style: italic;
    font-weight: bold;
}
.alphabet {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3em;
    max-width: 1100px;
}
.alphabet div {
    margin: 0.5em;
}
.active {
    font-weight: bold;
}
.deactivated {
    color: lightgray;
}
.share {
    cursor: pointer;
}
.share .check {
    display: none;
}
.indent {
    margin-left: 1em;
}
ul[type="square"] {
    margin-block-start: 0;
    margin-block-end: 0;
}
.dropdown-hover{
    position:relative;display:inline-block;cursor:pointer
}
.hoverActivated .dropdown-hover:hover .w3-dropdown-content{
    display:block
}
.dropdown-hover:first-child{
    background-color:#ccc;color:#000
}
.dropdown-hover:hover > .w3-button:first-child{
    background-color:#ccc;color:#000
}
.w3-bar-block .dropdown-hover{
    width:100%
}
.w3-bar-block .dropdown-hover .w3-dropdown-content{
    min-width:100%
}
.w3-bar-block .dropdown-hover .w3-button{
    width:100%;text-align:left;padding:8px 16px
}
.w3-bar .dropdown-hover{
    position:static;float:left
}
.characterOfAlphabet {
    font-size: 1.2em;
}
#main_right-col h2 {
    margin-top: 3em;
}
#hinweise-zur-benutzung .paragraphWithMarginTop {
    margin-top: 3em;
}
#hinweise-zur-benutzung .w3-panel {
    max-width: 800px;
}
footer {
    background-color: #6a1c1e;
    color: white;
}
footer p {
    margin: 0;
    padding-top: 2em;
    padding-bottom: 2em;
}
@media (min-width:1801px) {
    #book_text_cell .w3-small {
        margin-left: -8em;
        width: 30%;
    }
}
@media (min-width:1440px) and (max-width:1800px) {
    #book_text_cell .w3-small {
        margin-left: -4em;
        width: 30%;
    }
}
@media (min-width:801px) and (max-width:1000px) {
    #book_image_cell {
        width: 30%;
    }
}
@media (min-width:701px) and (max-width:800px) {
    #book_image_cell {
        width: 40%;
    }
    #book_text_cell {
        padding-left: 0;
    }
    #book_text_cell .w3-small {
        width: 70%;
    }
}
@media (min-width:501px) and (max-width:700px) {
    #book_image_cell {
        width: 40%;
    }
    #book_text_cell {
        padding-left: 1em;
    }
    #book_text_cell .w3-small {
        width: 90%;
    }
}
@media (max-width:500px) {
    #book_image_cell {
        width: 100%
    }
    #book_text_cell {
        display: none;
    }
    #book_text_smallWidth {
        display: block;
    }
}
@media (min-width:1200px) {
    #calendar {
        width: 60%;
    }
}
@media (min-width:800px) {
    #hamburger {
        display: none!important;
    }
}
@media (max-width:799px) {
    #nav-bar > a, #nav-bar > div {
        display: none!important;
    }
}
@media (min-width:601px) and (max-width:800px) {
    #calendar, #months {
        width: 100%;
    }
}
@media (min-width:501px) and (max-width:600px) {
    #calendar {
        width: 60%;
    }
}
@media (max-width:602px) {
    #introtext, #dank {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2em;
    }
    #introtextLink {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
    #months .w3-ul {
        text-align: center;
    }
    #main_left-col {
        max-width: inherit;
    }
}
@media (max-width:500px) {
    #ajax .left {
        width: 30%;
    }
    #ajax .right {
        width: 70%;
    }
}
@media (min-width:600px) and (max-width:700px) {
    #ajax .left {
        width: 30%;
    }
    #ajax .right {
        width: 70%;
    }
}
@media (max-width:370px) {
    #zurueck-zum-querverweis_text {
        font-size: 12px!important;
    }
}