/* - - - - F O N T S - - - - */

/* font import */
@font-face {
    font-family: 'Mohol Thin';

    src: url('../fonts/Mohol-Thin.woff2') format('woff2'),
        url('../fonts/Mohol-Thin.woff') format('woff');

    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mohol Bold';

    src: url('../fonts/Mohol-Bold.woff2') format('woff2'),
        url('../fonts/Mohol-Bold.woff') format('woff');

    font-weight: 700;
    font-style: normal;
}


/* - - - - G L O B A L - - - - */


/* Variablen */
:root {
    --line-width: 7px;
    /* var(--line-width) */
    --padding: 1.3rem;
    /* var(--padding) */
}

/* normalize */

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
    overflow-x: hidden;

}

body {
    border: var(--line-width) solid black;
    font-size: 100% !important;
    min-height: fit-content;
    font-family: 'Mohol Thin', sans-serif;
    font-weight: 400 !important;
}

a {
    color: black;
    text-decoration: none;
}

.text a:hover {
    color: white;
    background-color: black;
    padding: 4px;
    text-decoration: none;
}

/* global transitions */

li,
a,
.small-button {
    -webkit-transition: all 0.09s linear;
    -moz-transition: all 0.09s linear;
    -o-transition: all 0.09s linear;
    -ms-transition: all 0.09s linear;
    transition: all 0.09s linear !important;
}

/* faster transitions */

.index-wrapper p a,
.index-wrapper p {
    -webkit-transition: all 0.02s linear;
    -moz-transition: all 0.02s linear;
    -o-transition: all 0.0s2 linear;
    -ms-transition: all 0.02s linear;
    transition: all 0.02s linear !important;
}

/* text selection */

::-moz-selection {
    /* Code for Firefox */
    /*
    color: #000000;
    background: #E5E5E5;
*/
    color: #FFFFFF;
    background: #000000;
}

::selection {
    color: #FFFFFF;
    background: #000000;
}

/* - - - - Wrapper - - - - */

/*
.wrapper {
    position: absolute;
    top: 54px;
    display: grid;
    grid-template-columns: calc(20% - var(--line-width)) auto;
    column-gap: var(--line-width);
    z-index: 0;
    width: calc(100% - var(--line-width)*2);
}
*/

#home .landing-wrapper {
    /*    position: absolute;*/
    margin-top: 54px;
    display: grid;
    grid-template-columns: calc(20% - var(--line-width)) auto;
    column-gap: var(--line-width);
    z-index: 0;
    width: calc(100% - (var(--line-width) / 2));
}

#home .wrapper,
.wrapper.subpage {
    display: block;
    position: absolute;
    top: 54px;
    left: var(--line-width);
    width: calc(100% - var(--line-width));
    height: 100%;
    top: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* - - - - Landingpage - - - - */

.info-column {
    display: flex;
    flex-direction: column;
}

.info-column img {
    max-width: 100%;
}

.info-column p,
.info-column img {
    padding: var(--padding);
}

.info-column p:not(:first-child) {
    padding-top: 0;
}

.info-column p:last-child {
    padding-bottom: 150px;
}

.info-column img {
    padding-bottom: 0;
}

/* column container */
.index-wrapper {
    height: 100%;
    width: 100% !important;
    padding-top: var(--padding);
    padding-bottom: calc(var(--padding) * 1.5);

    /* flex solution */
    /* display: flex;
    flex-wrap: wrap;
    align-items: flex-start; */


    /* column solution */
    /*    padding-right: var(--line-width);*/

    column-count: 4;
    column-gap: calc(var(--line-width) - 2px);
    /* column-fill: auto; */
}

.index-wrapper p {
    padding: 0 var(--padding);
}

/* hover of project */
.index-wrapper p:hover:not(.versal) {
    background-color: black;
    color: white;
}


.index-wrapper p:hover:not(.versal) a {
    color: white;
}

/* active state for project */

p.project {
    background-color: #00000000;
    transition: all .1s !important;
    opacity: 1;
}

p.project.active {
    background-color: #000000FF;
    color: white;
    opacity: 1;
}

p.project.active a {
    color: white;
}

p.project.inactive {
    opacity: 0.2;
}

/* child element of the columns */
.index-content {
    /* flex: 1 0 25%; */
    /* all items grow the same | cannot shrink | initial width */
    margin-bottom: 2.5rem;
    break-inside: avoid;
    /* height: fit-content; */
}

.spacer {
    height: 20vh;
}

/* index lines */
.lines-wrapper {
    position: fixed;
    height: 100%;
    min-height: 100vh;
    width: calc(100% - (60px - var(--line-width)));
    top: 0px;
    left: 0px;
    z-index: -1;
    background-color: black;
    padding: var(--line-width);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: var(--line-width);
}

.lines-wrapper.subpage {
    grid-template-columns: 1fr;
    padding-right: 0;
}

.lines-wrapper.subpage div {
    background-color: white;
}

.line-1,
.line-2,
.line-3,
.line-4,
.line-5 {
    background-color: white;
}

/* - - - - Navigation - - - - */

nav {
    font-family: 'Mohol Bold', sans-serif;
    display: grid;
    grid-template-columns: calc(20% - 5px) auto auto auto auto auto auto auto;
    gap: var(--line-width);
    background-color: black;
    position: fixed;
    border: var(--line-width) solid black;
    width: 100%;
    top: 0;
    left: 0;
    height: 54px !important;
    z-index: 1;
}

.subpage nav,
#home nav {
    width: calc(100% - 60px);
    border-right: none;
}

nav a {
    text-align: center;
    background-color: white;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

nav a:last-child {
    border-right: none;
}

nav a:hover {
    /*
    background-color: black;
    color: white;
*/
    border-radius: 30px;
}

nav a.active {
    background-color: black;
    color: white;
}

/* - - - - Subpage - - - - */

.content {
    padding-left: 10%;
    padding-right: 10%;
    padding-top: calc(4rem + 54px);
    padding-bottom: 4rem;
}

.content h1 {
    font-family: 'Mohol Bold', sans-serif;
    font-size: 2.5rem;
    line-height: 102%;
    margin-bottom: 0.8rem;
    max-width: 650px;
}

.content h2,
.content .subline {
    font-family: 'Mohol Thin', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    max-width: 650px;
    margin-bottom: 1.5rem;
}

.content h3,
.content .big-text {
    font-family: 'Mohol Thin', sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 115%;
    max-width: 1000px;
    margin-bottom: 5rem;
}

.content p {
    font-family: 'Mohol Thin', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 156%;
    max-width: 650px;
    text-indent: 2.4rem;
}

.content p strong {
    font-family: 'Mohol Bold', sans-serif;
    padding-top: 1rem;
    display: block;
}

.content p em {
    font-style: normal;
    color: white;
    background-color: black;
    padding: 0.1rem 0.4rem;
}

.content p:first-of-type {
    text-indent: 0;
}

/* Link animation */
.content p a {
    color: white;
    background-color: black;
    position: relative;
    transition: all .1s;
    padding: 0.1rem 0.4rem;
}

.content p a:hover {
    color: black;
    background-color: white;
    -webkit-box-shadow: inset 0px 0px 0px 5px black;
    -moz-box-shadow: inset 0px 0px 0px 5px black;
    box-shadow: inset 0px 0px 0px 5px black;
    border-radius: 50%;
}


/* Footer */

.footer {
    font-family: 'Mohol Bold', sans-serif;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: var(--line-width);
    background-color: black;
    border-top: var(--line-width) solid black;
    width: 100%;
    font-family: 'Mohol Bold', sans-serif;
    font-size: 0.7rem;
}

.footer a,
.footer span {
    background-color: white;
    text-align: center;
    background-color: white;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding: 0.6rem 0.4rem;
}

.footer a:hover {
    background-color: black;
    color: white;
}

/* Scrollbar */

.wrapper .scroll-bar.vertical {
    background-color: black !important;
    width: 60px !important;
    border: solid var(--line-width) black;
    height: 100% !important;
    z-index: 1;
    display: block !important;
}

.wrapper .scroll-bar.vertical .thumb {
    background-color: white !important;
    opacity: 1 !important;
    border-radius: 50px !important;
}

.thumb:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    border-radius: 50%;
    transition: all .2s;
    transform: scale(0);
}

.thumb:hover::before {
    transform: scale(.7);

}

.wrapper .viewport .overview {
    width: calc(100% - 60px + var(--line-width)*2);
    min-height: 100dvh !important;
}


/* - - - - Impressum & Datenschutz - - - - */

.subpage.rechte .content p strong {
    font-family: 'Mohol Bold', sans-serif;
    font-weight: 700;
}

.subpage.rechte .content p {
    text-indent: 0;
    margin-bottom: 1.5rem;
}

/* - - - - T Y P O G R A P H Y  &  E L E M E N T S - - - - */

p {
    line-height: 150%;
}


/* buttons */

.small-button {
    padding: 1rem var(--padding) !important;
    border-top: var(--line-width) solid black;
    font-family: 'Mohol Bold', sans-serif;
    font-size: 0.7rem;
    display: block;
}

.small-button.hover:hover {
    color: white;
    background-color: black;
}

.small-button.hover:hover a {
    color: white;
}

.button-container {
    display: flex;
    justify-content: stretch;
    width: 100%;
}

.button-container a:first-child {
    border-right: var(--line-width) solid black;
}

.small-button.xs {
    flex-grow: 1;
}


.imprint-container {
    bottom: 0;
    right: 60px;
    width: calc(((100% - 60px) - var(--line-width)/2)/5 - var(--line-width) + 1px);
    position: fixed;
    background-color: white;
    border-bottom: var(--line-width) solid black;
    border-right: none;
}

.info-container {
    margin-top: auto;
    bottom: 0;
    left: 0;
    width: calc(((100% - 60px) - var(--line-width)/2)/5 + 2px);
    position: fixed;
    background-color: white;
    border-bottom: var(--line-width) solid black;
    border-left: var(--line-width) solid black;
}

/* type elements */

.versal {
    font-size: 3rem;
    font-family: 'Mohol Bold', sans-serif;
    line-height: 100%;
    margin-bottom: 1.5rem;
}

.mobile-footer,
.mobile-menu-button,
.mobile-menu {
    display: none;
}

/* - - - - Book - - - - */
.book #sketch {
    position: relative;
    width: 100%;
    height: 70vh;
    margin-top: 54px;
}

#sketch canvas {
    display: block;
    touch-action: none;
}

.book .content {
    padding: 0;
}

.book img {
    width: 100%;
}

.book .content h2 {
    font-family: 'Mohol Bold', sans-serif;
    font-size: 2rem;
    line-height: 102%;
    margin-bottom: 2.2rem;
    max-width: 650px;
}

.book .content .big-text {
    margin-bottom: 3rem;
}

.book .content .button-wrapper {
    padding-top: 2rem;
}

.book .button-wrapper .button br {
    display: none;
}

.book .section {
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.book .section:not(:last-child) {
    border-bottom: var(--line-width) solid black;
}

.book .reviewer {
    font-family: 'Mohol Bold', sans-serif;
    margin-top: 0.4rem;
    margin-bottom: 1.7rem;
    text-indent: 2.4rem;
}

.book .date {
    font-family: 'Mohol Bold', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.book .dates-section {
    padding-top: 4rem;
}

.book .dates-section h2 {
    padding-left: 10%;
    padding-right: 10%;
    margin-bottom: 1.2rem;
}

.book .date-wrapper {
    padding-right: 10%;
    padding-left: 10%;
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
}

.book .date-wrapper:not(:last-child) {
    border-bottom: var(--line-width) solid black;
}

.row {
    display: flex;
    gap: 4rem;
}

.row .column.small {
    padding-top: 7rem;
    width: 40%;
    max-width: 300px;
}

.blinky {
    position: absolute;
    top: 22vh;
    right: 10%;
    background-color: #AAFF22;
    /* z-index: 1; */
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 1.5rem;
    padding-bottom: 2rem;
    font-family: 'Mohol Bold', sans-serif;
    font-size: 2rem;
    line-height: 110%;
    text-align: center;
    transform: scale(1.0) rotate(0deg);
    transform-origin: center;

    -webkit-transition: all 0.09s linear;
    -moz-transition: all 0.09s linear;
    -o-transition: all 0.09s linear;
    -ms-transition: all 0.09s linear;
    transition: all 0.09s linear !important;
}

.blinky:hover {
    transform: scale(1.2) rotate(30deg);
    background-color: #fff;
}

/* animated banner */
#banner-wrapper {
    position: fixed;
    display: block;
    height: 44px;
    width: calc(100% - var(--line-width)*2);
    margin: 0;
    border-top: black var(--line-width) solid;
    margin-top: calc(var(--line-width) * -1);
    padding: 0;
    z-index: 1;
    background: #AAFF22;
    font-family: "Mohol Thin", sans-serif;
}

.banner {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    color: #000;
}

#banner-wrapper li {
    list-style: none;
    margin: 0 2em 0 0;
    padding: 0;
    display: inline-block;
    line-height: 36px;
    vertical-align: center;
    color: #000;
}

#banner-wrapper span {
    display: inline-block;
}

#banner-wrapper .ticker-items,
#banner-wrapper .ticker-wrapper {
    display: inline-block;
}

#banner-wrapper strong,
#banner-wrapper .divider {
    font-family: "Mohol Bold", sans-serif;
}

.banner-active #menu {
    margin-top: 44px !important;
}

.banner-active .landing-wrapper {
    margin-top: calc(44px + 54px) !important;
}

/* - - - - R E S P O N S I V E - - - - */

/* M O B I L E */

@media (max-width: 767.98px) {

    /* scrollbar */
    .scrollable .scroll-bar.vertical {
        display: none !important;
    }

    .wrapper .viewport .overview {
        width: 100%;
    }

    .scrollable.default-skin {
        padding-right: 0 !important;
    }

    /* mobile menu */

    .homebutton {
        font-size: 1.2rem;
    }

    .menu-open {
        display: none;
    }

    .menu-closed {
        display: block;
    }

    nav#menu,
    .subpage nav {
        width: 100vw;
        grid-template-columns: 1fr auto;
        height: auto !important;
        z-index: 2;
        transition: all .15s;
        border-right: var(--line-width) solid black;
    }

    nav#menu a:not(.homebutton) {
        display: none;
    }

    #home .wrapper {
        overflow: initial;
    }

    #home .landing-wrapper {
        grid-template-columns: 1fr;
        width: calc(100vw - var(--line-width)*2);
        margin-top: 78px;
    }


    .mobile-menu-button {
        display: block;
        background-color: white;
    }

    .mobile-menu-button img {
        width: 100%;
    }

    /* mobile menu active */

    #menu.active {
        border: var(--line-width) solid white;
        background-color: white;
    }

    #menu.active .menu-open {
        display: block;
    }

    #menu.active .menu-closed {
        display: none;
    }

    #menu.active .mobile-menu-button {
        background-color: black;
    }

    #menu.active a {
        background-color: black;
        color: white;
    }

    .mobile-menu {
        position: fixed;
        z-index: 1;
        width: 100vw;
        height: 0;
        display: flex;
        flex-direction: column;
        left: 0;

        background-color: black;

        font-family: 'Mohol Bold', sans-serif;
        font-size: 2.7rem;
        line-height: 140%;
        overflow: hidden;

        transition: all .15s;
    }

    .mobile-menu a {
        color: white;
        padding-left: 10%;
    }

    .mobile-menu.active {
        height: 100vh;
        padding-top: 20%;
    }

    .mobile-tel {
        border-top: var(--line-width) solid white;
        margin-top: auto;
        font-size: 1.2rem;
        padding-bottom: 1rem;
    }

    .banner-active #menu.active {
        margin-top: unset !important;
    }

    /* mobile menu filters */

    .inactive {
        display: none;
    }

    p.project.active {
        background-color: #00000000;
        transition: all .1s !important;
        opacity: 1;
    }

    p.project.active a {
        color: black;
    }

    /* landingpage info */

    .info-column {
        border-bottom: var(--line-width) solid black;
    }

    .info-column p,
    .info-column p:last-child {
        padding-bottom: var(--padding);
    }

    p {
        font-size: 1.2rem;
        line-height: 145%;
    }

    .wrapper .info-container {
        display: none;
    }

    /* landingpage index */

    .index-wrapper {
        column-count: 1;
        max-width: calc(100vw - var(--line-width)*2);
        padding-right: 0;
    }

    .imprint-container {
        width: calc(100vw - var(--line-width)*2);
        display: none;
    }

    .spacer {
        display: none;
    }

    /* landingpage lines */

    .lines-wrapper {
        background-color: white;
        border: var(--line-width) solid black;
        width: 100vw;
    }

    .lines-wrapper div {
        display: none;
    }

    /* mobile footer */

    .footer {
        display: none;
    }

    .mobile-footer {
        display: block;
    }

    .mobile-footer {
        width: calc(100vw - var(--line-width)*2);
    }

    .mobile-footer p {
        padding-bottom: 1.4rem !important;
    }

    /* subpages */

    .content h3,
    .content .big-text {
        font-size: 1.8rem;
        margin-bottom: 2.5rem;
    }

    .wrapper.subpage {
        overflow: initial;
    }

    .content p {
        font-size: 1rem;
    }

    /* URLs */

    .content p a {
        word-break: break-word;
    }

    /* book */
    .blinky {
        top: 10%;
        right: 10%;
        padding: 1rem;
        padding-bottom: 1.5rem;
        font-size: 1.3rem;
    }
}

/* T A B L E T */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* landingpage */

    #home .landing-wrapper {
        grid-template-columns: calc(33% - 3px) auto;
        column-gap: var(--line-width);
    }

    /* index columns */
    .index-wrapper {
        column-count: 2;
    }

    /* footer infos */
    .info-container {
        width: calc(((100% - 60px) - var(--line-width)/2)/3 + 2px);
    }

    .imprint-container {
        width: calc(((100% - 60px) - var(--line-width)/2)/3 - var(--line-width) + 2px);
    }

    /* lines */
    .lines-wrapper {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .line-4,
    .line-5 {
        display: none;
    }

    /* menu */
    nav a {
        font-size: 0.9rem;
    }
}

/* Tablet and mobile  */
@media (max-width: 991.98px) {
    .row {
        flex-direction: column;
    }

    .row .column.small {
        max-width: 200px;
        padding-top: 0;
    }
}

/* S C R E E N */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* landingpage */

    #home .landing-wrapper {
        grid-template-columns: calc(25% - var(--line-width)) auto;
        column-gap: var(--line-width);
    }

    /* index columns */
    .index-wrapper {
        column-count: 3;
    }

    /* footer infos */
    .info-container {
        width: calc(((100% - 60px) - var(--line-width)/2)/4 + 2px);
    }

    .imprint-container {
        width: calc(((100% - 60px) - var(--line-width)/2)/4 - var(--line-width) + 1px);
    }

    /* lines */
    .lines-wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .line-4 {
        display: none;
    }
}