:root {
    --max-width: 1400px;

    --page-tint: #fff;
    --page-text: #000;
    --accent-color: rgb(255, 37, 81);

    --gutter: 40px;
    --spacer: 10px;

    --logo-height: 128px;
    --col-base: 8.33%;

    --ease: cubic-bezier(0.84, 0.01, 0.16, 0.99); /* custom */
    --ease-out: cubic-bezier(0.08, 0.795, 0, 1); /* custom */

    --swiper-theme-color: #ec7176;
}

@media screen and (max-width: 1679px) {
    :root {
        --max-width: 1200px;
    }
}

@media screen and (max-width: 1023px) {
    :root {
        --max-width: 1080px;
    }
}

@media screen and (max-width: 781px) {
    :root {
        --max-width: 640px;
    }
}

@media screen and (max-width: 781px) {
    :root {
        --max-width: 100%;
        --logo-height: 64px;
        --gutter: 20px;
    }

    a.link-studio {
        --page-tint: #ec7176;
        --page-text: #fff;
        --accent-color: #922876;
    }

    a.link-arbeiten {
        --page-tint: #fff;
        --page-text: #ec7176;
        --accent-color: #5d44e9;
    }

    a.link-kontakt {
        --page-tint: #fff;
        --page-text: #ec7176;
        --accent-color: #aea91f;
    }
}

/*
    cursor: url("data:image/svg+xml,%3Csvg width='32' height='32' style='mix-blend-mode: difference;' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='0' cy='0' r='6' fill='%23212324'/%3E%3C/svg%3E%0A")
            4 4,
        auto !important;
        */

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

body * {
        cursor: none
}
    }

.top-cursor {
    will-change: transform;
    pointer-events: none; /* Prevent blocking other interactions */

    position: fixed;
    top: 0px;
    left: 0px;

    z-index: 444;

    --size: 40px;
    height: var(--size);
    width: var(--size);

    mix-blend-mode: difference;
    filter: invert(100%);
    background-color: #000;

    border-radius: 100px;
}

/*
    body.exiting & {
        transition: all 0.2s ease-in-out;
        --size: 60px;
    }
    body.entering & {
    }
*/

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

.top-cursor {
        display: none
        /*
        background-color: #fff;
        --size: 70px;
        top: 16px;
        left: 16px;
        */
}
    }

.top-cursor.fat {
    }

.pagination {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pagination p {
        margin: 0;
    }

.pagination svg {

        height: 40px;
        width: auto;
    }

.pagination svg path, .pagination svg line {
            stroke: var(--page-text) !important;
        }

.pagination svg.only-mobile {
            display: none;
            width: 30px;
            height: 30px;
        }

@media screen and (max-width: 781px) {
        .pagination svg {
            display: none;
        }
        .pagination svg.only-mobile {
            display: block;
        }
    }

.pagination .prev a, .pagination .next a {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            text-decoration: none;

            color: var(--page-text);
        }

.pagination .prev a:hover, .pagination .next a:hover {
                text-decoration: none;
                color: var(--page-accent);
            }

.pagination .prev a:hover svg path, .pagination .prev a:hover svg line, .pagination .next a:hover svg path, .pagination .next a:hover svg line {
                        stroke: var(--page-accent) !important;
                    }

.pagination .prev a {
            justify-content: flex-start;
        }

.pagination .next {
        margin-left: auto;
    }

.pagination .next a {
            margin-left: auto;

            justify-content: flex-end;
        }

.talk {
    animation-name: talk;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.talk.kunde {
        animation-delay: 0.5s;
    }

.talk.wir {
        animation-delay: 2s;
    }

@keyframes talk {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.container, section, .row {
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--max-width);

    margin: 0 auto;

    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: var(--gutter) var(--gutter);
}

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

.container, section, .row {
        display: flex;
        flex-direction: column
}
    }

.flex-container, .wrapper {
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--max-width);
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

.wrapper {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
}

section {
    position: relative;
    z-index: 10;
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
}

.span-1 {
        grid-column-end: span 1 !important;
    }

.span-1 .subgrid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-1 .subgrid {
                display: block
        }
            }

.start-1 {
        grid-column-start: 1 !important;
    }

.drop-1 {
        /* grid-row-start: 1 !important; */
        margin-top: calc(1 * 4vw);
    }

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

    .drop-1 {
            margin-top: 0
    }
        }

.pull-1 {
        /* grid-row-start: 1 !important; */
        margin-top: calc(1 * 4vw * -1);
    }

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

    .pull-1 {
            margin-top: 0
    }
        }

.span-2 {
        grid-column-end: span 2 !important;
    }

.span-2 .subgrid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-2 .subgrid {
                display: block
        }
            }

.start-2 {
        grid-column-start: 2 !important;
    }

.drop-2 {
        /* grid-row-start: 2 !important; */
        margin-top: calc(2 * 4vw);
    }

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

    .drop-2 {
            margin-top: 0
    }
        }

.pull-2 {
        /* grid-row-start: 2 !important; */
        margin-top: calc(2 * 4vw * -1);
    }

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

    .pull-2 {
            margin-top: 0
    }
        }

.span-3 {
        grid-column-end: span 3 !important;
    }

.span-3 .subgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-3 .subgrid {
                display: block
        }
            }

.start-3 {
        grid-column-start: 3 !important;
    }

.drop-3 {
        /* grid-row-start: 3 !important; */
        margin-top: calc(3 * 4vw);
    }

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

    .drop-3 {
            margin-top: 0
    }
        }

.pull-3 {
        /* grid-row-start: 3 !important; */
        margin-top: calc(3 * 4vw * -1);
    }

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

    .pull-3 {
            margin-top: 0
    }
        }

.span-4 {
        grid-column-end: span 4 !important;
    }

.span-4 .subgrid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-4 .subgrid {
                display: block
        }
            }

.start-4 {
        grid-column-start: 4 !important;
    }

.drop-4 {
        /* grid-row-start: 4 !important; */
        margin-top: calc(4 * 4vw);
    }

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

    .drop-4 {
            margin-top: 0
    }
        }

.pull-4 {
        /* grid-row-start: 4 !important; */
        margin-top: calc(4 * 4vw * -1);
    }

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

    .pull-4 {
            margin-top: 0
    }
        }

.span-5 {
        grid-column-end: span 5 !important;
    }

.span-5 .subgrid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-5 .subgrid {
                display: block
        }
            }

.start-5 {
        grid-column-start: 5 !important;
    }

.drop-5 {
        /* grid-row-start: 5 !important; */
        margin-top: calc(5 * 4vw);
    }

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

    .drop-5 {
            margin-top: 0
    }
        }

.pull-5 {
        /* grid-row-start: 5 !important; */
        margin-top: calc(5 * 4vw * -1);
    }

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

    .pull-5 {
            margin-top: 0
    }
        }

.span-6 {
        grid-column-end: span 6 !important;
    }

.span-6 .subgrid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-6 .subgrid {
                display: block
        }
            }

.start-6 {
        grid-column-start: 6 !important;
    }

.drop-6 {
        /* grid-row-start: 6 !important; */
        margin-top: calc(6 * 4vw);
    }

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

    .drop-6 {
            margin-top: 0
    }
        }

.pull-6 {
        /* grid-row-start: 6 !important; */
        margin-top: calc(6 * 4vw * -1);
    }

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

    .pull-6 {
            margin-top: 0
    }
        }

.span-7 {
        grid-column-end: span 7 !important;
    }

.span-7 .subgrid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-7 .subgrid {
                display: block
        }
            }

.start-7 {
        grid-column-start: 7 !important;
    }

.drop-7 {
        /* grid-row-start: 7 !important; */
        margin-top: calc(7 * 4vw);
    }

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

    .drop-7 {
            margin-top: 0
    }
        }

.pull-7 {
        /* grid-row-start: 7 !important; */
        margin-top: calc(7 * 4vw * -1);
    }

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

    .pull-7 {
            margin-top: 0
    }
        }

.span-8 {
        grid-column-end: span 8 !important;
    }

.span-8 .subgrid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-8 .subgrid {
                display: block
        }
            }

.start-8 {
        grid-column-start: 8 !important;
    }

.drop-8 {
        /* grid-row-start: 8 !important; */
        margin-top: calc(8 * 4vw);
    }

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

    .drop-8 {
            margin-top: 0
    }
        }

.pull-8 {
        /* grid-row-start: 8 !important; */
        margin-top: calc(8 * 4vw * -1);
    }

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

    .pull-8 {
            margin-top: 0
    }
        }

.span-9 {
        grid-column-end: span 9 !important;
    }

.span-9 .subgrid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-9 .subgrid {
                display: block
        }
            }

.start-9 {
        grid-column-start: 9 !important;
    }

.drop-9 {
        /* grid-row-start: 9 !important; */
        margin-top: calc(9 * 4vw);
    }

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

    .drop-9 {
            margin-top: 0
    }
        }

.pull-9 {
        /* grid-row-start: 9 !important; */
        margin-top: calc(9 * 4vw * -1);
    }

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

    .pull-9 {
            margin-top: 0
    }
        }

.span-10 {
        grid-column-end: span 10 !important;
    }

.span-10 .subgrid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-10 .subgrid {
                display: block
        }
            }

.start-10 {
        grid-column-start: 10 !important;
    }

.drop-10 {
        /* grid-row-start: 10 !important; */
        margin-top: calc(10 * 4vw);
    }

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

    .drop-10 {
            margin-top: 0
    }
        }

.pull-10 {
        /* grid-row-start: 10 !important; */
        margin-top: calc(10 * 4vw * -1);
    }

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

    .pull-10 {
            margin-top: 0
    }
        }

.span-11 {
        grid-column-end: span 11 !important;
    }

.span-11 .subgrid {
            display: grid;
            grid-template-columns: repeat(11, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-11 .subgrid {
                display: block
        }
            }

.start-11 {
        grid-column-start: 11 !important;
    }

.drop-11 {
        /* grid-row-start: 11 !important; */
        margin-top: calc(11 * 4vw);
    }

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

    .drop-11 {
            margin-top: 0
    }
        }

.pull-11 {
        /* grid-row-start: 11 !important; */
        margin-top: calc(11 * 4vw * -1);
    }

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

    .pull-11 {
            margin-top: 0
    }
        }

.span-12 {
        grid-column-end: span 12 !important;
    }

.span-12 .subgrid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: auto;
            gap: 0px 0px;
        }

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

        .span-12 .subgrid {
                display: block
        }
            }

.start-12 {
        grid-column-start: 12 !important;
    }

.drop-12 {
        /* grid-row-start: 12 !important; */
        margin-top: calc(12 * 4vw);
    }

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

    .drop-12 {
            margin-top: 0
    }
        }

.pull-12 {
        /* grid-row-start: 12 !important; */
        margin-top: calc(12 * 4vw * -1);
    }

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

    .pull-12 {
            margin-top: 0
    }
        }

.drop-bottom {
    align-self: end;
}

/*
@for $i from 1 to 12 {
    .col-$i {
        width: calc($(i) * var(--col-base));
    }

    @for $k from 1 to 12 {
        .col-$i .col-$k {
            width: calc($(k) / $(i) * 100%);
        }
    }

    .shift-$i {
       
        margin-left: calc($(i) * var(--col-base));
    }

    .drop-$i {
      
        margin-top: calc($(i) * var(--col-base));
    }
}
*/

/*grid-template-columns: subgrid;*/

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

.col {
        /*  margin-bottom: var(--gutter); */
}
    }

@media screen and (max-width: 781px) {
            .col.mobile-small picture {
                width: 50%;
                margin: 0 auto;
            }
        }

.row {
    /* enables equal height columns nested inside */

    width: auto;

    grid-column-start: 1 !important;
    grid-column-end: span 12 !important;

    grid-auto-rows: 1fr;
}

.row img {
        height: 100%;
        object-position: center center;
        object-fit: cover;
    }

figure {
    width: 100%;

    will-change: transform;

    --cap-spacing: 28px;
    --cap-offset: -28px;

    --caption-background: #fff;

    display: inline-block;

    margin-top: var(--cap-spacing);
    margin-bottom: var(--cap-spacing);

    position: relative;

    outline: 3px solid var(--page-tint);
}

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

figure {
        --cap-offset: 0px
}
    }

figure picture {
        z-index: 15;
    }

figure img {
        display: block;
        position: relative;
        z-index: 20;

        width: 100%;
        height: auto;
        max-height: 90vh;
    }

figure img.lazyloaded {
        }

figure figcaption {
        position: absolute;
        z-index: 10;

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

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

figure figcaption {
            position: relative;
            left: unset !important;
            right: unset !important;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            column-gap: 10px;

            padding: 4px !important
    }
        }

figure figcaption span {
            display: block;
            font-weight: normal;
            color: #000;
            line-height: 1.2em;
            font-size: 1.5rem;

            background-color: var(--caption-background);

            padding: 0.4em;
        }

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

figure figcaption span {
                padding: 0 !important
        }
            }

figure figcaption .cat {
            font-weight: normal;

            letter-spacing: 0.02em;
        }

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

figure figcaption .cat {
                display: flex;
                transform: none !important ;
                order: 2
        }
            }

figure figcaption .title {
            font-weight: bold;
            letter-spacing: 0.05em;
        }

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

figure figcaption .title {
                display: flex;
                transform: none !important;
                order: 1
        }
            }

figure figcaption.b-l {
            bottom: var(--cap-offset);
            left: var(--cap-offset);
        }

figure figcaption.b-l .cat {
                transform: rotate(-90deg) translateX(var(--cap-offset));
                transform-origin: left top 0;
            }

figure figcaption.b-l .title {
                transform: translateX(var(--cap-spacing));
            }

figure figcaption.b-r {
            bottom: var(--cap-offset);
            right: var(--cap-offset);
        }

figure figcaption.b-r .cat {
                transform: rotate(-90deg) translateX(100%);
                transform-origin: right bottom 0;
            }

figure figcaption.b-r .title {
                text-align: right;
                transform: translateX(var(--cap-offset));
            }

picture {
    display: block;
    width: 100%;
}

picture img {
        display: block;
        object-fit: contain;
        object-position: center center;
        width: 100%;
        height: auto;
    }

.browser picture {
        position: relative;
        border-radius: 12px;
        overflow: hidden;

        box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);

        border: 1px solid #000;
    }

.browser picture:before {
            display: block;
            width: 100%;
            height: 20px;
            color: #fff;
            font-size: 50px;
            line-height: 0;
            padding-left: 0.2em;
            padding-bottom: 0.1em;
            content: "...";
            background-color: #000;
        }

@font-face {
    font-family: "Gabriela";
    src: url("../fonts/Latinotype Mexico - Gabriela Regular.otf");
}

@font-face {
    font-family: "Gabriela";
    font-weight: bold;
    src: url("../fonts/Latinotype Mexico - Gabriela SemiBold.otf");
}

@font-face {
    font-family: "Gabriela";
    font-style: italic;
    src: url("../fonts/Latinotype Mexico - Gabriela SemiBold It.otf");
}

@font-face {
    font-family: "TT Norms Pro";
    font-weight: bold;
    src: url("../fonts/TypeType - TT Norms Pro Bold.otf");
}

@font-face {
    font-family: "TT Norms Pro";
    src: url("../fonts/TypeType - TT Norms Pro Regular.otf");
}

body.page-arbeiten main h1, body.page-arbeiten main h2, body.page-arbeiten main h3, body.page-arbeiten main p, a.spaced {
    /*
    text-shadow: var(--page-tint) 2px 0px 0px, var(--page-tint) 1.75517px 0.958851px 0px,
        var(--page-tint) 1.0806px 1.68294px 0px, var(--page-tint) 0.141474px 1.99499px 0px,
        var(--page-tint) -0.832294px 1.81859px 0px, var(--page-tint) -1.60229px 1.19694px 0px,
        var(--page-tint) -1.97998px 0.28224px 0px, var(--page-tint) -1.87291px -0.701566px 0px,
        var(--page-tint) -1.30729px -1.5136px 0px, var(--page-tint) -0.421592px -1.95506px 0px,
        var(--page-tint) 0.567324px -1.91785px 0px, var(--page-tint) 1.41734px -1.41108px 0px,
        var(--page-tint) 1.92034px -0.558831px 0px;

    /*/

    display: table;

    margin: calc(var(--spacer) * -1);

    padding: var(--spacer);
    margin-bottom: 0 !important;

    background-color: var(--page-tint);
    box-shadow:
        5px 0 0 var(--page-tint),
        -5px 0 0 var(--page-tint);
    box-decoration-break: clone;
}

html {
    font-size: 62.5%;
}

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

html {
        font-size: 62.5%
}
    }

body {
    font-family: "TT Norms Pro", Arial, Helvetica, sans-serif;
    letter-spacing: 0.04em;
    font-size: 1.8rem;

    color: var(--page-text);
}

p, a {
    font-size: 1.8rem;
    line-height: 1.35em;
}

.meta {
    opacity: 0.5;
}

.meta p {
        font-size: 1.8rem;
        margin-bottom: 0.4em;
    }

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

.meta p {
            font-size: 1.6rem
    }
        }

.meta a {
        font-weight: normal;
    }

.meta a:hover {
            opacity: 1;
            color: var(--page-accent) !important;
        }

.services strong {
        font-size: 1.6rem;
    }

.services ul {
        list-style-type: none;
    }

.services ul li {
            font-size: 1.6rem;
        }

p {
    margin-bottom: 0.75em;
}

a {
    text-decoration: underline;

    font-weight: bold;
    -webkit-tap-highlight-color: transparent;
    color: var(--page-text);
}

a:visited {
        color: var(--page-text);
    }

a:hover {
        color: var(--accent-color);
        text-decoration: underline;
    }

a.biglink {
        font-size: 2.4rem;
        color: var(--page-accent);
    }

blockquote {
    font-size: 4rem;
    line-height: 1.2em;
    font-family: "Gabriela", Times, serif;
    padding: var(--gutter);
}

blockquote.medium {
        font-size: 6rem;
        line-height: 1.1em;
        font-weight: bold;
        max-width: 720px;

        margin: 0 auto;
        padding: 0;
    }

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

blockquote.medium {
            font-size: 4rem
    }
        }

blockquote.big {
        font-size: 8rem;
        line-height: 1.1em;
        font-weight: bold;
        max-width: 720px;

        margin: 0 auto;
        padding: 0;
    }

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

blockquote.big {
            font-size: 6rem
    }
        }

blockquote:before {
        content: "„";
        margin-left: -0.2em;
    }

blockquote:after {
        content: "“";
        margin-right: -0.2em;
    }

hr {
    border: none;
    margin-top: var(--gutter);
}

h1 {
    font-size: 6rem;
    line-height: 1.1em;
    letter-spacing: 0.02em;
    margin-bottom: 0.25em;
}

h1 i {
        letter-spacing: 0.04em;
        font-family: "Gabriela", Times, serif;
    }

h1 em {
        letter-spacing: normal;
        line-height: 1em;
        font-style: normal;
        font-family: "Gabriela", Times, serif;
    }

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

h1 {
        font-size: 4rem;
        margin-bottom: 0
}
    }

h2 {
    font-size: 3rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 2.2rem;
    letter-spacing: 0.02em;
}

ul {
    list-style-type: none;
}

ul li {
        font-size: 1.8rem;
    }

.center {
    text-align: center;
    align-self: center;
}

.center h1, .center h2, .center h3, .center p, .center a {
        margin-left: auto;
        margin-right: auto;
    }

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.split {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;

    width: 100%;

    gap: var(--gutter);
}

.split p {
        margin: 0;
        flex-basis: 50%;
    }

.split p:first-child {
            text-align: right;
        }

.split p:last-child {
            text-align: left;
        }

.nobreak {
    white-space: nowrap;
}

.swiper {
    width: 100%;
    height: auto;

    --swiper-navigation-color: var(--page-accent);
}

.swiper .swiper-slide {
        position: relative;

        height: auto;
        align-self: stretch;
    }

.swiper .numero {
        position: absolute;
        z-index: 20;
        font-weight: bold;
        font-size: 4rem;
        padding: 0.25em 0.35em;
        line-height: 1em;
        display: block;
        background-color: #000;
        color: #fff;
    }

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

.swiper .numero {
            font-size: 2rem
    }
        }

.swiper figure {
        margin: 0;
        z-index: 10;
        height: 100%;
    }

.swiper picture {
        height: 100%;
    }

.swiper img {
        max-height: 70vh;
        object-fit: cover;
        object-position: center center;
        width: 100%;
        height: 100%;
    }

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

.swiper {
        --swiper-navigation-size: 20px;
        --swiper-navigation-sides-offset: 5px;
        --swiper-navigation-size: 40px
}
    }

.swiper .swiper-button-prev:after {
            font-size: 20px;
        }

.swiper .swiper-button-next:after {
            font-size: 20px;
        }

header {
    position: fixed;
    z-index: 300;
    width: 100%;
}

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

header {
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: 1200
}
    }

body.scrolled header {
        pointer-events: none;
    }

body.scrolled header #logo, body.scrolled header #burger {
            pointer-events: all;
        }

header .wrapper {
        position: relative;
    }

#logo {
    position: relative;
    z-index: 8000;
    display: block;
    font-size: 0;
    width: var(--logo-height);
    height: var(--logo-height);

    flex-grow: 0;
}

#logo path {
        fill: var(--page-text);
        /*
        stroke: var(--page-tint);
        stroke-width: 4px;
        paint-order: stroke;

        @below tablet {
            stroke-width: 6px;
        }
        */
    }

#main-nav {
    flex-grow: 1;

    transition: opacity 0.3s ease-in-out;
}

body.scrolled #main-nav {
        opacity: 0;
    }

#main-nav ul.nav-list {
        display: flex;
        align-items: center;
        justify-content: center;
    }

#main-nav ul.nav-list li.active a:after, #main-nav ul.nav-list li.active-parent a:after {
                    transform: scaleX(1);
                }

#main-nav ul.nav-list li.active-parent {
                /*
                a:after {
                    transform-origin: 50% 0%;
                    transform: scaleX(0.025) scaleY(40);
                }
                */
            }

#main-nav ul.nav-list a {
            position: relative;
            font-weight: bold;
            font-size: 2.4rem;
            text-decoration: none;

            display: block;

            margin: var(--gutter);

            color: var(--page-text);
        }

#main-nav ul.nav-list a:visited {
                color: var(--page-text);
            }

#main-nav ul.nav-list a:hover {
            }

#main-nav ul.nav-list a:after {
                content: "";
                display: block;
                position: absolute;
                z-index: -1;
                bottom: 0%;
                left: 0%;
                width: 100%;
                height: 3px;

                transform-origin: 50% 50%;
                transform: scaleX(0);
                transition: transform 0.25s var(--ease);
                transition-delay: 0.1s;

                background-color: var(--page-text);
            }

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

#main-nav {
        display: none
}
    }

#burger {
    visibility: hidden;
    opacity: 0;
    position: relative;
    transition: opacity 0.5s var(--ease);
    transition-delay: 0.5s;
    flex-grow: 0;

    width: var(--logo-height);
}

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

#burger {
        visibility: visible;
        opacity: 1;

        display: block;
        display: flex;
        align-items: center;
        justify-content: center
}
    }

body.scrolled #burger {
        visibility: visible;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

#burger svg {
        width: 75%;
        height: 75%;
    }

#burger svg rect {
            fill: var(--page-text);
        }

#burger #menu-toggle {
        width: 40px;
        height: 40px;
        display: none;
        position: relative;
        z-index: 900;
    }

#burger .menu-button-container {
        position: relative;

        z-index: 910;

        display: flex;
        align-items: center;
        justify-content: center;
    }

@media screen and (max-width: 781px) {
        #burger #mobile-nav {
            position: fixed;
            z-index: 800;

            left: 0px;
            top: 0px;

            width: 100%;
            height: 100%;
            height: 100svh;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            opacity: 0;
            transition: all 0.5s var(--ease);
            transition-delay: 0s;
        }

            #burger #mobile-nav nav {
                margin-bottom: 40px;
            }

                #burger #mobile-nav nav ul {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                }
                            #burger #mobile-nav nav ul li.active a:after {
                                transform: scaleX(1);
                                transition-delay: 2s;
                            }

                #burger #mobile-nav nav a {
                    font-size: 6rem;
                    line-height: 0.9em;
                    margin: 0.2em 0;
                    padding: 0.05em 0;
                    text-decoration: none !important;
                    position: relative;

                    color: var(--page-text);
                }

                    #burger #mobile-nav nav a:hover {
                        color: var(--page-text);
                        text-decoration: none;
                    }

                    #burger #mobile-nav nav a:focus {
                        z-index: 99;
                        text-decoration: underline;
                    }
                        #burger #mobile-nav nav a:focus:before {
                            transform: scale(6000);

                            visibility: visible;
                        }
                            @media screen and (max-width: 781px) {
                        #burger #mobile-nav nav a:focus:before {
                                transform: scale(1300);
                        }
                            }
                        #burger #mobile-nav nav a:focus:after {
                            /* transform: scaleX(1); */
                        }

                    #burger #mobile-nav nav a:after {
                        content: "";
                        display: block;
                        position: absolute;
                        z-index: -1;
                        bottom: 12%;
                        left: 0%;
                        width: 100%;
                        height: 8px;

                        transform-origin: 50% 50%;
                        transform: scaleX(0);
                        transition: transform 0.5s var(--ease);
                        transition-delay: 0.1s;

                        background-color: var(--page-text);
                    }

                    #burger #mobile-nav nav a:before {
                        content: "";
                        display: block;
                        position: absolute;
                        visibility: hidden;
                        z-index: -1;
                        top: 50%;
                        right: 50%;
                        width: 1px;
                        height: 1px;

                        background-color: var(--color-destination);
                        border-radius: 2000px;

                        transform: scale(1);
                        transition: transform 0.5s var(--ease);
                    }
        #burger #menu-toggle ~ #mobile-nav {
            visibility: hidden;
            pointer-events: none;
        }
        #burger #menu-toggle:checked ~ #mobile-nav {
            visibility: visible;
            pointer-events: all;

            opacity: 1;
            transition-delay: 0.2s;
        }

        #burger #menu-toggle:checked ~ .bubble {
            transform: scale(2000);

            transition-duration: 0.6s;
        }

        #burger .bubble {
            display: block;
            position: absolute;
            z-index: -1;
            top: 50%;
            right: 50%;
            width: 1px;
            height: 1px;

            background-color: var(--accent-color);
            border-radius: 2000px;

            transform: scale(0);
            transition: transform 0.5s var(--ease);
        }

            body.exiting #burger .bubble {
                transition: none;
            }

            body.entering #burger .bubble {
                transition: none;
            }
    }

body.scrolled #burger #mobile-nav {
            position: fixed;
            z-index: 800;

            left: 0px;
            top: 0px;

            width: 100%;
            height: 100%;
            height: 100svh;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            opacity: 0;
            transition: all 0.5s var(--ease);
            transition-delay: 0s;
        }

body.scrolled #burger #mobile-nav .nav-adress {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                align-items: end;
                padding: var(--gutter);
                margin-top: auto;
                width: 100%;
            }

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

body.scrolled #burger #mobile-nav .nav-adress {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    flex-direction: column
            }
                }

body.scrolled #burger #mobile-nav .nav-adress > p {
                    margin: 0;
                }

body.scrolled #burger #mobile-nav .nav-adress > p:first-child {
                        text-align: left;
                    }

body.scrolled #burger #mobile-nav .nav-adress > p:last-child {
                        text-align: right;
                    }

body.scrolled #burger #mobile-nav .nav-adress > p.center {
                        align-self: auto;
                    }

@media screen and (max-width: 781px) {
                        body.scrolled #burger #mobile-nav .nav-adress > p:first-child {
                            text-align: center;
                        }
                        body.scrolled #burger #mobile-nav .nav-adress > p:last-child {
                            text-align: center;
                        }
                        body.scrolled #burger #mobile-nav .nav-adress > p.center {
                            align-self: center;
                        }
                    }

body.scrolled #burger #mobile-nav nav {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                margin-bottom: 40px;
            }

body.scrolled #burger #mobile-nav nav ul {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                }

body.scrolled #burger #mobile-nav nav ul li:active a:after {
                                transform: scaleX(1);
                                transition-delay: 2s;
                            }

body.scrolled #burger #mobile-nav nav a {
                    font-size: 6rem;
                    line-height: 0.9em;
                    margin: 0.2em 0;
                    padding: 0.05em 0;
                    text-decoration: none;
                    position: relative;

                    color: var(--page-text);
                }

body.scrolled #burger #mobile-nav nav a:hover {
                        color: var(--page-text);
                    }

body.scrolled #burger #mobile-nav nav a:focus {
                        z-index: 99;
                    }

body.scrolled #burger #mobile-nav nav a:focus:before {
                            transform: scale(6000);
                            visibility: visible;
                        }

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

body.scrolled #burger #mobile-nav nav a:focus:before {
                                transform: scale(1300);
                        }
                            }

body.scrolled #burger #mobile-nav nav a:focus:after {
                            /* transform: scaleX(1); */
                        }

body.scrolled #burger #mobile-nav nav a:after {
                        content: "";
                        display: block;
                        position: absolute;
                        z-index: -1;
                        bottom: 0%;
                        left: 0%;
                        width: 100%;
                        height: 4px;

                        transform-origin: 50% 50%;
                        transform: scaleX(0);

                        transition: transform 0.5s var(--ease);
                        transition-delay: 0.1s;

                        background-color: var(--page-text);
                    }

body.scrolled #burger #mobile-nav nav a:before {
                        content: "";
                        display: block;
                        position: absolute;
                        visibility: hidden;
                        z-index: -1;
                        top: 50%;
                        right: 50%;
                        width: 1px;
                        height: 1px;

                        background-color: var(--color-destination);
                        border-radius: 2000px;

                        transform: scale(1);

                        transition: transform 0.5s var(--ease);
                    }

body.scrolled #burger #menu-toggle ~ #mobile-nav {
            visibility: hidden;
            pointer-events: none;
        }

body.scrolled #burger #menu-toggle:checked ~ #mobile-nav {
            visibility: visible;
            pointer-events: all;

            opacity: 1;
            transition-delay: 0.2s;
        }

body.scrolled #burger #menu-toggle:checked ~ .bubble {
            transform: scale(6000);

            transition-duration: 0.75s;
        }

body.scrolled #burger .bubble {
            display: block;
            position: absolute;
            z-index: -1;
            top: 50%;
            right: 50%;
            width: 1px;
            height: 1px;

            background-color: var(--accent-color);
            border-radius: 2000px;

            transform: scale(0);

            transition: transform 0.5s var(--ease);
        }

body.exiting body.scrolled #burger .bubble {
                transition: none;
            }

body.entering body.scrolled #burger .bubble {
                transition: none;
            }

footer {
    position: sticky;
    top: 100vh;

    z-index: 29;
    background-color: rgb(20, 19, 19);
    color: #fff;
}

footer a, footer a:visited, footer p, footer h1, footer h2, footer h3 {
        color: #fff;
        font-weight: normal;
        text-shadow: none;

        font-size: 1.4rem;
    }

footer .wrapper {
        justify-content: center;
    }

footer .copyright {
        margin-right: auto;
        margin-bottom: 0;
    }

footer .legal {
        margin-left: auto;
    }

.hello {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 0;
    width: 100%;
    z-index: 200;

    pointer-events: none;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hello.blow-up a {
            transform: scale(1.5) translateY(-10px) rotate(-5deg);
        }

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

.hello.blow-up a {
                transform: scale(1.2) translateY(-5px) rotate(-5deg)
        }
            }

.hello .bubblegum {
        pointer-events: all;

        margin-top: -100px;
        transform-origin: center center;

        transition: transform 1s ease-in-out;

        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1/1;

        background-color: var(--page-accent);
        border-radius: 50%;
        padding: 20px;

        letter-spacing: 0.04em;
        font-family: "Gabriela", Times, serif;

        font-size: 3rem;
        font-weight: bold;
        line-height: 1.1em;
        font-style: italic;

        text-decoration: none;
    }

.hello .bubblegum:hover {
            text-decoration: none;
            color: #fff;
        }

.legal-nav ul {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

main {
	position: relative;

	z-index: 20;

	width: 100vw;
}

.transition {
	padding-top: 200px;
	padding-bottom: 220px;

	background-color: var(--page-tint);
}

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

.transition {
		padding-top: 100px
}
	}

canvas {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;

	width: 100vw !important;
	height: 100% !important;

	z-index: 1;
	outline: none !important;
	border: none !important;
	box-shadow: none;
	background-color: #fff !important;
}

body.page-studio {
}

body.page-arbeiten {
}

body.page-kontakt {
}

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

.title {
        order: 1
}
    }

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

.services {
        order: 3;
        visibility: hidden;
        height: 72px
}
    }

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

.description {
        order: 2;
        display: none
}
    }

details {
    display: flex;
    flex-direction: column;
}

/* Stack children vertically */

details p {
        hyphens: auto;
    }

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

details {
        order: 2
}
    }

details summary {
        order: 2;

        height: 72px;
    }

details summary span {
            font-size: 1.8rem;
            line-height: 1.35em;
            hyphens: auto;
        }

details summary::marker {
        content: ""; /* Hides the default marker */
    }

details summary::after {
        content: " …mehr"; /* Adds a custom label at the end */
        color: var(--page-accent); /* Optional: style the label */
    }

details[open] {
}

details[open] > summary {
    text-align: right;
}

details[open] > summary span {
        display: none;
    }

details[open] > summary:after {
        content: "weniger"; /* Adds a custom label at the end */
    }

.service-list {
    display: flex;

    align-items: stretch;
    justify-content: center;
}

.service-list ul {
        display: flex;
        flex-direction: column;

        align-items: stretch;
        justify-content: center;

        padding: calc(var(--gutter) / 2);
    }

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

.service-list {
        flex-direction: column
}
    }

.profile picture {
        width: 240px;
        height: 240px;
        border-radius: 500px;

        margin-bottom: 20px;

        overflow: hidden;
    }

.profile picture img {
            height: 125%;
            object-fit: cover;
        }

.profile.susa img {
        object-position: 0% 100%;
    }

.profile.kristina img {
        object-position: 90% 100%;
    }

.profile blockquote {
        font-size: 2.4rem;
    }

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

html {
    /*  scroll-behavior: auto; */
}

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;
}

#top {
    position: absolute;
    top: 100px;
}

body.page-arbeitxenium .swiper {
        background-color: #313133;
    }

body.page-arbeitxenium .swiper .swiper-slide img {
        object-fit: contain;
    }