body {
    font-family: "TexGyre Regular", sans-serif;
    margin: 0;
    font-size: 12pt;
}

#startPageImage {
    min-width: calc(100vw - 20px);
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#menu,
#menuSingle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 0 40px;
    border-bottom: 3px solid black;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    font-size: 14pt;
    font-family: "TexGyre Bold", sans-serif;
    z-index: 1;
    background-color: white;
}
@media (min-width: 920px) {
    #menu {
        background-color: transparent;
        /*padding: 0 40px 0 80px;*/
    }
    #menuSingle {
        display: none;
    }
}
#menuSingle {
    flex-direction: column;
    align-items: flex-end;
    height: auto;
    border-bottom: 0;
    padding: 20px;
    width: 80vw;
    position: fixed;
    top: 0;
    left: 100vw;
    transition: left 0.5s;
    z-index: 2;
    background-color: #f0f0f0;
    height: 100vh;
    overflow-y: auto;
}
#menuSingle #close {
}
#menuSingle #close {
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
}

#menuSingle #close #line1 {
    width: 30px;
    height: 2px;
    background-color: rgb(0, 173, 239);
    transform: rotate(45deg) translateX(2px);
}
#menuSingle #close #line2 {
    width: 30px;
    height: 2px;
    background-color: rgb(0, 173, 239);
    transform: rotate(-45deg) translateX(1px);
}
#menuSingle a {
    /*color: white;*/
}
#menuSingle.visible {
    left: 20vw;
}
#menuSingle > * {
    margin-top: 10px;
}
#menu > *:not(.active) {
    display: none;
}
#menu > #burger {
    display: block;
}
#menu > #burger > .line {
    width: 30px;
    margin-bottom: 5px;
    border-top: 3px solid rgb(0, 173, 239);
}
#menu > #burger > .line:last-child {
    margin-bottom: 0;
}
@media (min-width: 920px) {
    #menu > *:not(.active) {
        display: initial;
        /*margin: 0 10px;*/
    }
    #menu > #burger {
        display: none;
    }
}

.bold {
    font-family: "TexGyre Bold", sans-serif;
    font-weight: normal;
}
strong {
    font-family: "TexGyre Bold", sans-serif;
    font-weight: normal;
}
#menu.startPage {
    background-color: transparent;
}
#menu > *,
#submenu a {
    color: black;
    text-decoration: none;
}
#menu > a:hover,
#submenu a:hover,
#submenu .fold:hover {
    color: rgb(0, 173, 239);
}
#menu > a.active,
#submenu a.active,
#menuSingle > a.active {
    color: rgb(0, 173, 239);
}
#menu > a > img,
#menuSingle > a > img {
    max-height: 35px;
}
#menu > * {
}
@media (min-width: 1400px) {
    #menu > #menuSpace {
        flex-basis: 400px;
    }
}

#searchIcon,
.cartIcon,
#searchIconSingle {
    height: 30px;
    width: 30px;
    cursor: pointer;
}
.cartIcon {
    display: inline;
}
.cartIconMenu {
    height: 30px;
}
.cartIconMenu > img {
    height: 30px;
}
.cartIcon > * {
    height: 30px;
}
.cartIcon > .blue,
.cartIconMenu > .blue {
    display: none;
}
.cartIcon:hover > .black,
.cartIconMenu:hover > .black {
    display: none;
}
.cartIcon:hover > .blue,
.cartIconMenu:hover > .blue {
    display: inline;
}
#menu > a.active .blue {
    display: inline;
}
#menu > a.active .black {
    display: none;
}
#searchIcon,
#searchIconSingle {
    opacity: 1;
    transition: opacity 0.5s;
    /*margin-left: 82px;*/
}
#searchIconSingle {
    margin-left: 0px;
}
#searchForm {
    /*display: none;*/
    /*opacity: 0;*/
    width: 100px;
    transition: opacity 0.5s;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 3px;
    padding: 4px;
}

#menuLogo {
    height: 35px;
}

#content {
    margin-top: 90px;
}

#submenu {
    position: fixed;
    width: 308px;
    font-size: 14pt;
    font-family: "TexGyre Bold", sans-serif;
    display: none;
}

@media (min-width: 920px) {
    #submenu {
        display: block;
    }
}
.subsubmenu {
    /*display: none;*/
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.7s, opacity 0.4s;
}
.subsubmenu a {
    display: block;
}
.subsubmenu.active {
    /*display: block;*/
    height: 52px;
    opacity: 1;
}
.subsubmenu.long.active {
    height: 80px;
    opacity: 1;
}

#submenu .fold {
    cursor: pointer;
}
.mainLink {
    /*display: flex;*/
    /*flex-direction: row;*/
    margin-top: 10px;
    margin-left: 40px;
}
.submenuSpacer,
.fold {
    flex-basis: 40px;
}
.subsubmenu {
    margin-left: 50px;
}

#textemContent,
#termineContent {
    display: flex;
    flex-direction: row;
    margin: 0 10px;
}
#termineContent {
    flex-direction: column;
}
#termineContent .block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
@media (min-width: 920px) {
    #textemContent,
    #termineContent {
        margin: 0;
    }
}
#textemContent > #defaultTitle,
#termineContent #defaultTitle {
    flex-basis: 350px;
}
@media (min-width: 920px) {
    #textemSpacer {
        flex-basis: 350px;
    }
}
#textemList {
    margin-top: 10px;
    margin: 10px 30px;
    width: 100%;
}
#textemDetail {
    margin: 10px 10px;
    width: 100%;
}
@media (min-width: 920px) {
    #textemDetail {
        margin: 10px 30px;
    }
}
#preview {
    width: calc(100% - 400px);
}

#elementList {
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));*/
    grid-template-columns: 1fr;
    /*grid-auto-rows: 1fr;*/
    column-gap: 5px;
    row-gap: 8px;
    margin-bottom: 5em;
}

@media (min-width: 500px) {
    #elementList {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 920px) {
    #elementList {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1050px) {
    #elementList {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (min-width: 1400px) {
    #elementList {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
#elementList::before {
    content: "";
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

#elementList > *:first-child {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.element {
    font-size: 12pt;
    cursor: pointer;
    height: 100%;
    /*border: 1px solid rgb(134, 220, 255);*/
    background-color: rgb(134, 220, 255);
}
@media (min-width: 920px) {
    .element {
        background-color: rgb(230, 247, 254);
    }
}
.element:hover {
    /*background-color: rgb(230, 247, 254);*/
    background-color: rgb(134, 220, 255);
}
.element .imagePlaceholder {
    background-color: lightgrey;
    /*height: calc(100% - 77px);*/
    height: 234px;
    width: 60%;
    /*margin-top: 20px;*/
}
.detailImagePlaceholder {
    background-color: lightgrey;
    height: 200px;
    width: 60%;
}
.element .imageContainer {
    /*height: calc(100% - 60px);*/
    width: 100% - 40px;
    padding: 20px;
    box-sizing: border-box;

    /*display: flex;
    align-items: center;
    justify-content: center;*/
}
.element img {
    max-height: 100%;
    max-width: 100%;
}
.element .title {
    padding: 0 20px 20px;
    color: black;
    text-decoration: none;
    box-sizing: border-box;
    font-family: "TexGyre Bold", sans-serif;
}
a {
    text-decoration: none;
    color: black;
}
#textemDetail p {
    margin-top: 0;
    margin-bottom: 0;
}
#textemDetail p:last-child {
    margin-bottom: 1em;
}
#textemDetail #titleContainer {
    grid-area: title;
}
#textemDetail #additInfoContainer {
    grid-area: additInfo;
}
#textemDetail #additInfoContainer > div {
    display: none;
}
#textemDetail #additInfoContainer p {
    margin-bottom: 1em;
}

#textemDetail #additInfoContainer a {
    color: rgb(0, 173, 239);
}
#additAuthors > p {
    margin-bottom: 1em;
}
#additInfo {
    color: rgb(0, 173, 239);
    cursor: pointer;
}
#textemDetail #imageContainer {
    grid-area: image;
    position: relative;
    padding: 0px 0px 20px 0;
}
@media (min-width: 920px) {
    #textemDetail #imageContainer {
        padding: 0px 20px 20px 0;
    }
}
#textemDetail #imageContainer.slideshow {
    cursor: pointer;
}
#textemDetail #imageContainer #slideshowMarker {
    background-color: white;
    color: rgb(0, 173, 239);
    border-radius: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 29px;
    height: 29px;
    font-size: 30px;
    text-align: center;
}
#textemDetail #imageContainer #slideshowMarker span {
    position: absolute;
    top: -13px;
    left: 5px;
}
#textemDetail #imageContainer img {
    max-width: 100%;
}
#textemDetail #imageContainer img.imageSet {
    display: none;
}
#textemDetail #imageContainer img.imageSet:first-of-type {
    display: block;
}
#textemDetail #authorContainer {
    grid-area: author;
}
@media (min-width: 920px) {
    #textemDetail #authorContainer {
        padding-right: 20px;
    }
}
#textemDetail #authorContainer p {
    margin-bottom: 0;
}
#authorContainer > #text > p {
    margin-bottom: 1em;
}
#authorContainer > #text a,
.rissLink {
    color: rgb(0, 173, 239);
}
#textemDetail #textContainer {
    grid-area: text;
    padding: 0px 20px 20px 0;
}
#textemDetail #textContainer form {
    /*display: inline;*/
}
@media (min-width: 920px) {
    #textemDetail #textContainer {
        padding: 0px 20px 20px 0;
    }
}
#textemDetail #detailSpace {
    grid-area: space;
}
#textemDetail #textContainer p {
    margin: 0;
}
#textemDetail #textContainer a {
    color: rgb(0, 173, 239);
}

#textemDetail #relatedContainer {
    grid-area: related;
    margin-top: 2em;
}
#textemDetail {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
        "title"
        "image"
        "text"
        "additInfo"
        "author"
        "space"
        "related";
}
@media (min-width: 920px) {
    #textemDetail {
        grid-template-columns: 300px auto minmax(30%, 1fr);
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
            "title title title"
            "image author additInfo"
            "text author additInfo"
            "space author additInfo"
            "related related related";
    }
}
#detailRelatedContainer {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1em;
}
#detailRelatedContainer > a {
    display: block;
    height: 220px;
    width: 200px;
    margin-right: 20px;
}
#detailRelatedContainer img {
    max-width: 100%;
}
/*
.element a{
    text-decoration: none;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
*/
/*
#socialToggle{
    cursor: pointer;
}
.socialHidden{
    display: none;
}
*/

#title {
    padding-top: 10px;
    margin-left: 40px;
    font-size: 14pt;
    font-family: "TexGyre Bold", sans-serif;
}
#cartContainer {
    max-width: 100%;
    margin: 0 auto;
}
@media (min-width: 920px) {
    #cartContainer {
        width: 800px;
    }
}
#defaultTitle {
    padding-top: 10px;
    margin-left: 40px;
    font-size: 14pt;
    font-family: "TexGyre Bold", sans-serif;
    display: none;
}
@media (min-width: 920px) {
    #defaultTitle {
        display: block;
    }
}
#defaultContent {
    padding-top: 10px;
    flex: 1;
}
#defaultContent.contact {
    max-width: 700px;
}
#defaultContent.contact > p:first-child {
    margin-top: 0;
}

#cart {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 920px) {
    #cart {
        grid-template-columns: 5fr 2fr 1fr 2fr;
    }
}
#cart input[type="number"] {
    width: 40px;
}
#cart div {
    text-align: right;
    padding: 15px;
    border-bottom: 1px solid black;
}
#cart div:nth-child(4n-2),
#cart div:nth-child(4n-1) {
    border-bottom: none;
}
@media (min-width: 920px) {
    #cart div:nth-child(4n-2),
    #cart div:nth-child(4n-1) {
        border-bottom: 1px solid black;
    }
}
#cartButtons {
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}
@media (min-width: 920px) {
    #cartButtons {
        flex-direction: row;
    }
}
#cartButtons input {
    padding: 8px;
    border: 1px solid #444;
    background-color: white;
    color: black;
    margin: 0 10px 10px 0;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
@media (min-width: 920px) {
    #cartButtons input {
        width: auto;
    }
}

#cartButtons input:hover {
    filter: brightness(0.95);
}
#blogContent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 10px;
    flex: 1;
}
.postContainer {
    border: 1px solid rgb(134, 220, 255);
    flex-basis: calc(100% - 55px);
    margin: 5px;
    padding: 20px;
    columns: auto 350px;
}
.postContainer.blog {
    columns: unset;
}
/* @media (min-width: 1000px) { */
/*     .postContainer { */
/*         column-count: 2; */
/*     } */
/* } */
/* @media (min-width: 1400px) { */
/*     .postContainer { */
/*         column-count: 3; */
/*     } */
/* } */
@media (min-width: 500px) {
    .postContainer {
        /*flex-basis: calc(50% - 55px);*/
    }
}
.postTitle {
    margin-bottom: 1em;
}
.postText p {
    margin: 0;
}
.postText.termine {
    margin-top: 1em;
}
.postText.termine p {
    margin-bottom: 1em;
}
.postText a {
    color: rgb(0, 173, 239);
}
.postText > * {
    width: auto !important;
}

.postImage {
    max-width: 100%;
    max-height: 30vh;
}

.additionForm {
    display: flex;
}
.additionForm > div {
    margin-right: 1em;
}
#addressForm {
    display: flex;
    flex-direction: column;
    margin-bottom: 4em;
    margin-top: 2em;
    align-items: flex-end;
    max-width: 100%;
    margin: 0 auto;
}
#addressForm input,
#addressForm textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;
    padding: 3px;
}
@media (min-width: 920px) {
    #addressForm input,
    #addressForm textarea {
        width: 50%;
    }
}
#shipping {
    font-family: "TexGyre Bold", sans-serif;
    text-align: right;
}
#fold {
    display: none;
    justify-content: space-around;
    width: 100%;
}
#bestellen {
    cursor: pointer;
}
#bestellen:hover {
    color: rgb(0, 173, 239);
}
/*
#paypal-button-container{
    display: none;
}
*/
#jourfix{
    font-size: initial;
    font-family: "TexGyre Regular", sans-serif;
}