/* =========================================================
   ROOT
========================================================= */

:root {

    --bg: #090909;

    --bg-soft: #101010;

    --bg-light: #161616;

    --text: #e8e4de;

    --text-soft: #aaa6a0;

    --line: rgba(255,255,255,.12);

    --accent: #b7aba0;

    --serif: "Cormorant Garamond", serif;

    --sans: "Inter", sans-serif;

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}

section[id] {
    scroll-margin-top: 70px;
}


body {

    background: var(--bg);

    color: var(--text);

    font-family: var(--sans);

    overflow-x: hidden;

}


img {

    width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font: inherit;

}


/* =========================================================
   BASIC
========================================================= */

.section {

    position: relative;

    max-width: 1500px;

    margin: auto;

    padding: 150px 70px;

}


.section-kicker {

    display: block;

    margin-bottom: 25px;

    color: var(--text-soft);

    font-size: 11px;

    letter-spacing: 4px;

    text-transform: uppercase;

}


h1,
h2,
h3 {

    font-weight: 400;

}


h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 6vw, 100px);

    line-height: .9;

}


/* =========================================================
   CURSOR
========================================================= */

.cursor-glow {

    position: fixed;

    width: 400px;

    height: 400px;

    pointer-events: none;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.035),
            transparent 65%
        );

    transform: translate(-50%, -50%);

    z-index: 100;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 95px;

    padding: 0 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid rgba(255,255,255,.08);

    background: rgba(8,8,8,.15);

    backdrop-filter: blur(12px);

    z-index: 1000;

    transition: .4s;

}


.site-header.scrolled {

    height: 75px;

    background: rgba(8,8,8,.90);

}


.logo {

    display: flex;

    flex-direction: column;

}


.logo-name {

    font-family: var(--serif);

    font-size: 20px;

    letter-spacing: 2px;

}


.logo-subtitle {

    margin-top: 3px;

    color: var(--text-soft);

    font-size: 8px;

    letter-spacing: 4px;

}


.main-nav {

    display: flex;

    gap: 45px;

}


.main-nav a {

    position: relative;

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #ccc;

}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -9px;

    width: 0;

    height: 1px;

    background: white;

    transition: .35s;

}


.main-nav a:hover::after {

    width: 100%;

}


.nav-contact {

    padding: 13px 23px;

    border: 1px solid rgba(255,255,255,.3);

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    transition: .3s;

}


.nav-contact:hover {

    background: white;

    color: black;

}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    width: 35px;

    background: none;

    border: none;

    cursor: pointer;

}


.menu-toggle span {

    display: block;

    width: 100%;

    height: 1px;

    margin: 7px 0;

    background: white;

}


.mobile-menu {

    position: fixed;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 30px;

    background: rgba(8,8,8,.98);

    opacity: 0;

    visibility: hidden;

    z-index: 900;

    transition: .4s;

}


.mobile-menu.active {

    opacity: 1;

    visibility: visible;

}


.mobile-menu a {

    font-family: var(--serif);

    font-size: 42px;

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    height: 100vh;

    min-height: 750px;

    display: flex;

    align-items: center;

    overflow: hidden;

}


.hero-bg {

    position: absolute;

    inset: 0;

    background-image:

        url("../images/hero.jpg");

    background-position: center;

    background-size: cover;

    transform: scale(1.03);

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(4,4,4,.92) 0%,
            rgba(4,4,4,.56) 45%,
            rgba(4,4,4,.17) 100%
        ),

        linear-gradient(
            0deg,
            #090909 0%,
            transparent 35%
        );

}


.hero-grain {

    position: absolute;

    inset: 0;

    opacity: .13;

    pointer-events: none;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

}


.hero-content {

    position: relative;

    width: 900px;

    margin-left: 8vw;

    z-index: 3;

}


.hero-kicker {

    display: block;

    margin-bottom: 30px;

    color: #bbb;

    font-size: 10px;

    letter-spacing: 5px;

}


.hero h1 {

    font-family: var(--serif);

    font-size: clamp(80px, 10vw, 170px);

    line-height: .72;

    letter-spacing: -4px;

}


.hero h1 span {

    display: block;

    margin-left: 110px;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.62);

}


.hero-text {

    max-width: 500px;

    margin-top: 50px;

    color: #bbb;

    font-family: var(--serif);

    font-size: 21px;

    line-height: 1.55;

}


/* =========================================================
   HERO DISCOVER
========================================================= */

.hero-discover {
    position: absolute;

    left: 50%;
    bottom: 35px;

    transform: translateX(-50%);

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

    gap: 12px;

    z-index: 10;

    color: rgba(255, 255, 255, .75);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: 4px;
    text-transform: uppercase;

    transition: color .3s ease;
}


.hero-discover:hover {
    color: #fff;
}


.hero-discover i {
    position: relative;
    top: -10px;
    left: 2px;
    font-size: 15px;

    animation: discoverBounce 1.7s ease-in-out infinite;
}

.discover-line {
    width: 1px;
    height: 25px;

    background: rgba(255, 255, 255, .35);
}


/* hüpfender Pfeil */

@keyframes discoverBounce {

    0%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    50% {
        transform: translateY(10px);
        opacity: 1;
    }

}


.hero-side-text {

    position: absolute;

    right: 45px;

    top: 50%;

    writing-mode: vertical-rl;

    color: rgba(255,255,255,.4);

    font-size: 8px;

    letter-spacing: 5px;

}

/* =========================================================
   INTRO
========================================================= */

.intro {

    min-height: 750px;

    display: grid;

    grid-template-columns: 150px 1fr;

    align-items: center;

}


.section-number {

    color: #555;

    font-family: var(--serif);

    font-size: 70px;

}


.intro-content {

    max-width: 1050px;

}


.intro h2 span {

    color: #777;

}


.intro h2 em {

    color: transparent;

    font-style: normal;

    -webkit-text-stroke: 1px #777;

}


.intro p {

    max-width: 600px;

    margin-top: 50px;

    margin-left: auto;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.9;

}


/* =========================================================
   WORKS
========================================================= */

.works {

    max-width: 1700px;

}


.section-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 80px;

}


.section-heading h2 span {

    display: block;

    color: #777;

    font-style: italic;

}


.section-description {

    max-width: 360px;

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.8;

}


.art-card {

    background: var(--bg, #090909);

}


.art-image {

    position: relative;

    overflow: hidden;

}


.art-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    filter: grayscale(30%);

    transition: filter .8s;

}


.art-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.12);

    transition: .5s;

}


.art-card:hover img {

    filter: grayscale(0);

}


.art-card:hover .art-overlay {

    background: transparent;

}


.art-info {

    display: grid;

    grid-template-columns: 40px 1fr 30px;

    gap: 20px;

    align-items: center;

    padding-top: 18px;

    border-top: 1px solid var(--line);

}


.art-info > span {

    color: #666;

    font-size: 9px;

}


.art-info h3 {

    font-family: var(--serif);

    font-size: 26px;

}


.art-info p {

    margin-top: 4px;

    color: #777;

    font-size: 9px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.art-info i {

    color: #777;

    font-size: 12px;

}


.works-bottom {

    margin-top: 80px;

    text-align: right;

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding-bottom: 8px;

    border-bottom: 1px solid #555;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.text-link i {

    transition: .3s;

}


.text-link:hover i {

    transform: translateX(7px);

}


/* =========================================================
   WORLD
========================================================= */

.world {

    position: relative;

    height: 900px;

    margin-top: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.world-bg {

    position: absolute;

    inset: 0;

    background:

        url("../images/art-03.jpg")
        center / cover no-repeat;

    filter: grayscale(1);

    transform: scale(1.1);

}


.world-overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle,
            rgba(0,0,0,.2),
            rgba(0,0,0,.87)
        );

}


.world-content {

    position: relative;

    width: 100%;

    text-align: center;

    z-index: 2;

}


.world-words {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px 50px;

    max-width: 1300px;

    margin: auto;

}


.world-words a {
    color: transparent;

    font-family: var(--serif);

    font-size: clamp(70px, 9vw, 155px);

    line-height: .75;

    -webkit-text-stroke: 1px rgba(255,255,255,.45);

    transition: .4s;

    cursor: pointer;
}


.world-words a:hover {
    color: rgba(255,255,255,.8);

    -webkit-text-stroke: 1px rgba(255,255,255,.8);
}


.world p {

    max-width: 550px;

    margin: 70px auto 0;

    color: #aaa;

    font-family: var(--serif);

    font-size: 20px;

    line-height: 1.6;

}

@media(max-width: 767px) {

    .world {
        height: 720px;
        margin-top: 0;
    }

    .world-content {
        padding: 0 20px;
    }

    .world-words {
        gap: 10px 20px;
    }

    .world-words a {
        font-size: clamp(55px, 18vw, 90px);
        line-height: .85;
    }

    .world p {
        margin-top: 50px;
        font-size: 17px;
    }

}

/* =========================================================
   MY WORLD
========================================================= */

.world {
    position: relative;

    min-height: 900px;

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

    overflow: hidden;

    background: #090909;
}


/* =========================================================
   STANDARD BACKGROUND = ART-03
========================================================= */

.world-bg {
    position: absolute;
    inset: 0;

    background-image: url("../images/art-03.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    filter: grayscale(1);

    transform: scale(1.05);

    z-index: 0;
}


/* =========================================================
   CATEGORY BACKGROUNDS
========================================================= */

.world-bg.world-light {
    background-image: url("../images/world01.jpg");
}

.world-bg.world-shadow {
    background-image: url("../images/world02.jpg");
}

.world-bg.world-silence {
    background-image: url("../images/world03.jpg");
}

.world-bg.world-emotion {
    background-image: url("../images/world04.jpg");
}

.world-bg.world-change {
    background-image: url("../images/world05.jpg");
}

.world-bg.world-mystery {
    background-image: url("../images/world06.jpg");
}


/* =========================================================
   OVERLAY
========================================================= */

.world-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, .20),
            rgba(0, 0, 0, .82)
        );

    z-index: 1;
}


/* =========================================================
   CONTENT
========================================================= */

.world-content {
    position: relative;

    width: 100%;
    max-width: 1200px;

    padding: 80px 40px;

    text-align: center;

    z-index: 2;
}


.world .section-kicker {
    margin-bottom: 35px;
}


/* =========================================================
   CATEGORY LIST
========================================================= */

.world-words {
    display: flex;

    flex-direction: column;

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

    gap: 12px;

    margin: 0 auto;
}


.world-words a {
    position: relative;

    display: block;
    width: fit-content;

    padding: 0 70px;

    color: transparent;

    font-family: var(--serif);

    font-size: clamp(58px, 6vw, 105px);
    line-height: .82;
    letter-spacing: -2px;

    -webkit-text-stroke: 1px rgba(255, 255, 255, .48);

    transition:
        color .35s ease,
        transform .35s ease,
        -webkit-text-stroke .35s ease;

    cursor: pointer;
}



/* aktiver Hover */

.world-words a:hover {
    color: rgba(255, 255, 255, .95);

    -webkit-text-stroke:
        1px rgba(255, 255, 255, .95);

    transform: scale(1.04);
}

/* =========================================================
   MY WORLD HOVER ORNAMENTS
========================================================= */

.world-words a::before,
.world-words a::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 55px;
    height: 7px;

    background: rgba(255, 255, 255, .55);

    opacity: .35;

    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.2, .7, .2, 1);
}

.world-words a:hover::before {
    opacity: .85;

    transform:
        translateY(-50%)
        translateX(0);
}

.world-words a:hover::after {
    opacity: .85;

    transform:
        translateY(-50%)
        translateX(0);
}


/* LINKS */

.world-words a::before {
    right: calc(100% - 55px);

    clip-path: polygon(
        0 50%,
        78% 38%,
        88% 0,
        92% 38%,
        100% 50%,
        92% 62%,
        88% 100%,
        78% 62%
    );

    transform:
        translateY(-50%)
        translateX(15px);
}


/* RECHTS */

.world-words a::after {
    left: calc(100% - 55px);

    clip-path: polygon(
        100% 50%,
        22% 38%,
        12% 0,
        8% 38%,
        0 50%,
        8% 62%,
        12% 100%,
        22% 62%
    );

    transform:
        translateY(-50%)
        translateX(-15px);
}


/* HOVER LINKS */

.world-words a:hover::before {
    opacity: .8;

    transform:
        translateY(-50%)
        translateX(0);
}


/* HOVER RECHTS */

.world-words a:hover::after {
    opacity: .8;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   TEXT UNTEN
========================================================= */

.world p {
    max-width: 560px;

    margin: 55px auto 0;

    color: rgba(255, 255, 255, .65);

    font-family: var(--serif);

    font-size: 18px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .world {
        min-height: 760px;
    }


    .world-content {
        padding: 80px 20px 60px;
    }


    .world-words a {
        font-size: clamp(48px, 15vw, 72px);

        line-height: .86;

        letter-spacing: -1px;
    }


    .world p {
        margin-top: 40px;

        font-size: 16px;
    }

}


/* =========================================================
   ATELIER
========================================================= */

.atelier {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    align-items: center;

}


.atelier-image {

    position: relative;

}


.atelier-image img {

    height: 800px;

    object-fit: cover;

    filter: grayscale(.6);

}


.atelier-image-caption {

    position: absolute;

    left: -40px;

    bottom: 50px;

    padding: 20px;

    background: rgba(10,10,10,.8);

    backdrop-filter: blur(15px);

    font-family: var(--serif);

    font-size: 18px;

}


.atelier-image-caption span {

    display: block;

    margin-bottom: 5px;

    color: #888;

    font-family: var(--sans);

    font-size: 8px;

    letter-spacing: 3px;

}


.atelier-content h2 span {

    display: block;

    color: #777;

}


.atelier-content > p {

    max-width: 570px;

    margin-top: 40px;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.9;

}


.process-list {

    margin-top: 60px;

}


.process-item {

    display: grid;

    grid-template-columns: 45px 120px 1fr;

    align-items: center;

    padding: 20px 0;

    border-top: 1px solid var(--line);

}


.process-item:last-child {

    border-bottom: 1px solid var(--line);

}


.process-item span {

    color: #555;

    font-size: 9px;

}


.process-item h3 {

    font-size: 10px;

    letter-spacing: 3px;

}


.process-item p {

    color: #777;

    font-family: var(--serif);

    font-size: 17px;

}


/* =========================================================
   QUOTE
========================================================= */

.quote-section {

    position: relative;

    max-width: 1400px;

    margin: auto;

    padding: 180px 60px;

    text-align: center;

}


.quote-symbol {

    display: block;

    height: 70px;

    color: #383838;

    font-family: var(--serif);

    font-size: 140px;

}


.quote-section blockquote {

    font-family: var(--serif);

    font-size: clamp(50px, 7vw, 110px);

    line-height: .95;

}


.quote-section blockquote span {

    display: block;

    color: transparent;

    -webkit-text-stroke: 1px #666;

}


/* =========================================================
   ABOUT
========================================================= */

.about {

    display: grid;

    grid-template-columns: 1fr .8fr;

    gap: 120px;

    align-items: center;

}


.about h2 span {

    display: block;

    color: #777;

    font-style: italic;

}


.about-lead {

    margin-top: 45px !important;

    color: #ddd !important;

    font-family: var(--serif);

    font-size: 27px !important;

}


.about-content p {

    max-width: 600px;

    margin: 25px 0;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.9;

}


.about-content .text-link {

    margin-top: 25px;

}


.about-image {

    position: relative;

}


.about-image img {

    position: relative;

    height: 760px;

    object-fit: cover;

    filter: grayscale(1);

    z-index: 2;

}


.about-image-frame {

    position: absolute;

    top: 30px;

    right: -30px;

    width: 100%;

    height: 100%;

    border: 1px solid #333;

}


.about-image-label {

    position: absolute;

    right: -55px;

    top: 60px;

    writing-mode: vertical-rl;

    color: #666;

    font-size: 8px;

    letter-spacing: 4px;

}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    padding: 190px 40px;

    text-align: center;

    border-top: 1px solid var(--line);

    background:

        radial-gradient(
            circle at center,
            #171717,
            #090909 65%
        );

}


.contact h2 {

    font-size: clamp(70px, 9vw, 150px);

}


.contact h2 span {

    color: transparent;

    -webkit-text-stroke: 1px #666;

}


.contact p {

    max-width: 500px;

    margin: 40px auto;

    color: #888;

    font-family: var(--serif);

    font-size: 19px;

    line-height: 1.6;

}


.contact-button {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 20px;

    padding: 20px 35px;

    border: 1px solid #555;

    font-size: 10px;

    letter-spacing: 4px;

    transition: .4s;

}


.contact-button:hover {

    background: white;

    color: black;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    min-height: 160px;

    padding: 40px 55px;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    border-top: 1px solid var(--line);

}


.footer-logo {

    font-family: var(--serif);

    font-size: 17px;

    letter-spacing: 2px;

}


.footer-logo span {

    display: block;

    margin-top: 4px;

    color: #666;

    font-family: var(--sans);

    font-size: 7px;

    letter-spacing: 4px;

}


.footer-social {

    display: flex;

    gap: 25px;

}


.footer-social a {

    color: #888;

    transition: .3s;

}


.footer-social a:hover {

    color: white;

}


.footer-copy {

    text-align: right;

    color: #555;

    font-size: 9px;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(45px);

    transition:

        opacity 1s ease,
        transform 1s ease;

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width: 1100px) {

    .section {

        padding:

            120px 40px;

    }


    .main-nav {

        display: none;

    }


    .nav-contact {

        display: none;

    }


    .menu-toggle {

        display: block;

    }


    .hero-content {

        margin-left: 6vw;

    }


    .hero h1 {

        font-size: clamp(70px, 13vw, 130px);

    }


    .intro {

        grid-template-columns: 1fr;

    }


    .section-number {

        margin-bottom: 40px;

    }


    .atelier {

        gap: 60px;

    }


    .about {

        gap: 70px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 767px) {


    .site-header {

        height: 75px;

        padding:

            0 22px;

    }


    .cursor-glow {

        display: none;

    }


    .section {

        padding:

            90px 22px;

    }


    .hero {

        min-height: 720px;

    }


    .hero-bg {

        background-position:

            62% center;

    }


    .hero-overlay {

        background:

            linear-gradient(
                0deg,
                #090909 0%,
                rgba(4,4,4,.45) 50%,
                rgba(4,4,4,.3) 100%
            ),

            linear-gradient(
                90deg,
                rgba(4,4,4,.75),
                rgba(4,4,4,.18)
            );

    }


    .hero-content {

        width: auto;

        margin:

            100px 24px 0;

    }


    .hero-kicker {

        font-size: 8px;

        line-height: 1.7;

    }


    .hero h1 {

        font-size:

            clamp(62px, 21vw, 100px);

        line-height: .78;

        letter-spacing: -2px;

    }


    .hero h1 span {

        margin-left: 25px;

    }


    .hero-text {

        max-width: 310px;

        margin-top: 35px;

        font-size: 18px;

    }


    .hero-side-text {

        display: none;

    }


    .intro {

        min-height: auto;

    }


    .section-number {

        font-size: 45px;

    }


    h2 {

        font-size:

            clamp(48px, 15vw, 70px);

    }


    .intro p {

        margin-left: 0;

    }


    .section-heading {

        display: block;

    }


    .section-description {

        margin-top: 35px;

    }


    .art-info {

        grid-template-columns:

            30px 1fr 20px;

    }


    .art-info h3 {

        font-size: 21px;

    }


    .world {

        height: 720px;

        margin-top: 0;

    }


    .world-content {

        padding:

            0 20px;

    }


    .world-words {

        gap:

            10px 20px;

    }


    .world-words span {

        font-size:

            clamp(55px, 18vw, 90px);

        line-height: .85;

    }


    .world p {

        margin-top: 50px;

        font-size: 17px;

    }


    .atelier {

        display: block;

    }


    .atelier-image img {

        height: 550px;

    }


    .atelier-image-caption {

        left: 15px;

        bottom: 20px;

    }


    .atelier-content {

        margin-top: 70px;

    }


    .process-item {

        grid-template-columns:

            35px 100px 1fr;

    }


    .process-item p {

        font-size: 14px;

    }


    .quote-section {

        padding:

            120px 22px;

    }


    .about {

        display: flex;

        flex-direction: column-reverse;

        gap: 80px;

    }


    .about-image {

        width: calc(100% - 20px);

    }


    .about-image img {

        height: 550px;

    }


    .about-image-frame {

        right: -20px;

        top: 20px;

    }


    .about-image-label {

        display: none;

    }


    .contact {

        padding:

            130px 20px;

    }


    .contact h2 {

        font-size:

            clamp(60px, 18vw, 90px);

    }


    .footer {

        grid-template-columns: 1fr;

        gap: 30px;

        padding:

            45px 25px;

        text-align: center;

    }


    .footer-social {

        justify-content: center;

    }


    .footer-copy {

        text-align: center;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width: 480px) {


    .logo-name {

        font-size: 16px;

    }


    .hero-content {

        margin-left: 20px;

        margin-right: 20px;

    }


    .hero h1 {

        font-size: 65px;

    }


    .hero h1 span {

        margin-left: 15px;

    }


}

/* ISOLIERTE SCHLOSS-KAMERAFAHRT */
.cinematic-hero.journey{height:560vh;position:relative}.cinematic-hero .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#111515}.cinematic-hero .scene{position:absolute;inset:0;overflow:hidden;perspective:1000px;isolation:isolate}.cinematic-hero .layer{position:absolute;inset:-2%;background-repeat:no-repeat;background-position:center;background-size:cover;will-change:transform}.cinematic-hero .background{background-image:url('../images/landscape.jpg');transform:scale(1.03);filter:contrast(1.04) brightness(.84)}.cinematic-hero .woman{background-image:url('../images/woman.png');background-size:cover;transform:scale(1.03);transform-origin:30% 74%;filter:brightness(.83);pointer-events:none}.cinematic-hero .atmosphere{z-index:2;pointer-events:none;background:radial-gradient(ellipse at 65% 33%,rgba(219,207,184,.10),transparent 35%),linear-gradient(180deg,rgba(6,9,10,.1),transparent 45%,rgba(5,8,9,.42));mix-blend-mode:screen}.cinematic-hero .vignette{z-index:6;position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(2,3,4,.55) 100%),linear-gradient(0deg,rgba(2,4,5,.65),transparent 30%)}.cinematic-hero #fog{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:.75}.cinematic-hero .title{z-index:8;position:absolute;left:clamp(25px,8vw,150px);top:43%;transform:translateY(-50%);text-shadow:0 3px 40px #050707;will-change:opacity,transform}.cinematic-hero .eyebrow{font-size:10px;letter-spacing:.38em;color:#d2c5b6}.cinematic-hero .title h1{font:400 clamp(64px,10vw,155px)/.77 'Cormorant Garamond',Georgia,serif;letter-spacing:-.035em;margin:24px 0 28px}.cinematic-hero .title h1 em{font-weight:400;font-style:italic;color:#e3dbd0}.cinematic-hero .title p{font-size:11px;letter-spacing:.28em;text-transform:uppercase}.cinematic-hero .ending{position:absolute;z-index:8;left:50%;top:48%;transform:translate(-50%,-45%);text-align:center;opacity:0;width:90%;pointer-events:none;text-shadow:0 2px 30px #050707}.cinematic-hero .ending span{font-size:11px;letter-spacing:.4em}.cinematic-hero .ending h2{font:400 clamp(60px,8vw,126px)/.88 'Cormorant Garamond',Georgia,serif;margin:20px 0}.bottom{position:absolute;z-index:12;bottom:30px;left:clamp(25px,5vw,86px);right:clamp(25px,5vw,86px);display:flex;align-items:center;gap:22px;font-size:9px;letter-spacing:.2em;color:#e0d7c9}.track{height:1px;background:rgba(255,255,255,.25);flex:1}.fill{width:0;height:100%;background:#e7ddce}
@media(max-width:650px){.cinematic-hero .title{left:7vw;top:44%}.cinematic-hero .title h1{font-size:clamp(54px,14vw,90px)}.cinematic-hero .layer{background-position:43% center}.cinematic-hero .woman{background-position:43% center}.cinematic-hero .eyebrow{font-size:8px}}


/* SCHLOSSFAHRT – ZUSATZATMOSPHAERE V2. Bestehende Kamera bleibt unveraendert. */
.cinematic-hero .castle-lights{position:absolute;inset:-2%;z-index:3;pointer-events:none;will-change:transform;transform-origin:center center}
.cinematic-hero .castle-lamp{position:absolute;width:17px;height:34px;transform:translate(-50%,-50%);opacity:.86;background:linear-gradient(90deg,transparent 0 12%,#15130f 12% 22%,transparent 22% 78%,#17140f 78% 88%,transparent 88%),linear-gradient(180deg,#100f0e 0 12%,#f6d08a 13% 74%,#13110f 75% 100%);border:1px solid #161410;box-shadow:0 0 13px 4px rgba(252,174,71,.42),0 0 48px 17px rgba(247,156,56,.18);clip-path:polygon(40% 0,60% 0,100% 17%,88% 85%,62% 85%,62% 100%,38% 100%,38% 85%,12% 85%,0 17%)}
.cinematic-hero .lamp-left{left:48.5%;top:69%;width:12px;height:25px}
.cinematic-hero .lamp-right{left:69.2%;top:70%;width:17px;height:34px}
.cinematic-hero .castle-window{position:absolute;width:5px;height:15px;border-radius:50% 50% 0 0;background:#f4bc78;box-shadow:0 0 12px 3px rgba(255,170,82,.35),0 0 45px 15px rgba(246,166,69,.12)}
.cinematic-hero .window-one{left:63.3%;top:25%}.cinematic-hero .window-two{left:67.1%;top:29%;height:11px}
.cinematic-hero .fog-bank{position:absolute;left:-30%;width:160%;height:38%;z-index:4;pointer-events:none;opacity:.38;will-change:transform,opacity;background:radial-gradient(ellipse at 22% 50%,rgba(189,197,194,.25),transparent 38%),radial-gradient(ellipse at 68% 46%,rgba(193,201,198,.22),transparent 44%),radial-gradient(ellipse at 48% 70%,rgba(173,184,184,.18),transparent 42%);filter:blur(32px)}
.cinematic-hero .fog-bank-near{bottom:-6%}.cinematic-hero .fog-bank-far{bottom:20%;opacity:.2;filter:blur(46px)}
@media(max-width:650px){.cinematic-hero .castle-lamp{opacity:.65}}


/* VIDEO HERO — replaces the former layered castle animation */
.cinematic-hero.video-journey{height:380vh;position:relative;background:#080b0d}
.video-journey .video-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:#080b0d}
.video-journey .schloss-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.video-journey .video-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,5,7,.64),rgba(3,5,7,.13) 75%),linear-gradient(0deg,rgba(3,5,7,.62),transparent 35%,rgba(3,5,7,.13));}
.video-journey .video-title,.video-journey .video-ending{position:absolute;z-index:3;color:#eee7df;text-shadow:0 3px 30px rgba(0,0,0,.8);will-change:opacity,transform;pointer-events:none}
.video-journey .video-title{left:clamp(24px,8vw,145px);top:43%;transform:translateY(-50%);max-width:900px}
.video-journey .eyebrow,.video-journey .video-ending span{display:block;font-size:clamp(9px,.9vw,12px);letter-spacing:.32em;color:#d2c5b6}
.video-journey h1{font:400 clamp(64px,10vw,152px)/.8 'Cormorant Garamond',Georgia,serif;letter-spacing:-.035em;margin:25px 0 28px}
.video-journey h1 em{font-weight:400;color:#e3dbd0}
.video-journey .video-title p{font-size:clamp(10px,1vw,13px);line-height:1.8;letter-spacing:.15em;text-transform:uppercase}
.video-journey .video-ending{left:50%;top:47%;width:90%;text-align:center;opacity:0;transform:translate(-50%,-40%)}
.video-journey .video-ending h2{font:400 clamp(58px,8vw,120px)/.9 'Cormorant Garamond',Georgia,serif;margin:20px 0}
.video-journey .video-discover{position:absolute;z-index:5;bottom:36px;left:clamp(24px,8vw,145px);font-size:10px;letter-spacing:.25em;color:#eee7df;text-decoration:none}
.video-journey .video-discover span{margin-left:14px}
.video-journey .video-progress{position:absolute;z-index:5;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.15)}
.video-journey .video-progress span{display:block;height:100%;width:0;background:#d8c6aa}
@media(max-width:650px){.cinematic-hero.video-journey{height:290vh}.video-journey .schloss-video{object-position:48% center}.video-journey .video-title{left:7vw;right:5vw;top:42%}.video-journey h1{font-size:clamp(54px,13vw,90px)}.video-journey .video-title p{letter-spacing:.08em}.video-journey .video-discover{left:7vw}}
@media(prefers-reduced-motion:reduce){.cinematic-hero.video-journey{height:100svh}}

/* FIX: overflow-x:hidden on body creates a scroll container and breaks sticky in Chrome/Brave. */
html,body{overflow-x:clip}
body{overflow-x:clip}
.cinematic-hero.video-journey{height:500vh !important;overflow:visible !important;transform:none !important}
.cinematic-hero.video-journey>.video-stage{position:sticky !important;top:0 !important;height:100vh !important;height:100dvh !important;overflow:hidden !important}
@media(max-width:650px){.cinematic-hero.video-journey{height:360vh !important}}

/* Hero: centered discover link, no progress indicator */
.video-journey .video-progress{display:none !important}
.video-journey .video-discover{left:50% !important;right:auto !important;transform:translateX(-50%);bottom:36px;text-align:center;white-space:nowrap;display:flex;align-items:center;flex-direction:column;gap:10px}
.video-journey .video-discover span{margin-left:0;font-size:20px;line-height:1}


/* =========================================================
   INTRO – DARK OIL TEXTURE
========================================================= */

.intro {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: transparent;
}

.intro::before {
    content: "";
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 100vw;
    transform: translateX(-50%);

    background-image:
        linear-gradient(
            to bottom,
            #090909 0%,
            rgba(9, 9, 9, .18) 50%,
            rgba(9, 9, 9, .18) 50%,
            #090909 100%
        ),
        url("../images/oil-texture.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 1;
    pointer-events: none;
    z-index: -1;
}

.intro > * {
    position: relative;
    z-index: 1;
}



/* =========================================================
   QUOTE – DARK OIL TEXTURE
========================================================= */

.quote-section {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: transparent;
}

.quote-section::before {
    content: "";
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 100vw;
    transform: translateX(-50%);

    background-image:
        linear-gradient(
            to bottom,
            #090909 0%,
            rgba(9, 9, 9, .18) 25%,
            rgba(9, 9, 9, .18) 75%,
            #090909 100%
        ),
        url("../images/oil-texture.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 1;
    pointer-events: none;
    z-index: -1;
}

.quote-section > * {
    position: relative;
    z-index: 1;
}

/* Selected Works: incoming cards cover the card held below the header. */
.works {
    scroll-margin-top: 75px;
}

.works-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 42px);
    max-width: 1100px;
    margin-inline: auto;
    isolation: isolate;
}

.works-gallery .art-image {
    height: clamp(240px, 64svh, 670px);
}

.works-gallery .art-info {
    padding-bottom: 16px;
}

.works-gallery .art-card {
    position: relative;
    z-index: 0;
}

@media (max-width: 767px) {
    .works-gallery .art-image {
        height: clamp(210px, 54svh, 500px);
    }
}

/* Selected Works: Überschrift über den überlappenden Bildern halten */
#works {
    --works-top: 91px;
    --works-heading-height: 190px;
    --works-heading-gap: 20px;
}

#works .section-heading {
    position: sticky;
    top: var(--works-top);
    z-index: 2;
    box-sizing: border-box;
    height: var(--works-heading-height);
    margin-bottom: var(--works-heading-gap);
    padding-bottom: 16px;
    background: var(--bg, #090909);
}

#works .section-heading h2 {
    font-size: clamp(42px, 5vw, 72px);
}

#works .works-gallery .art-card {
    position: sticky;
    top: calc(
        var(--works-top) +
        var(--works-heading-height) +
        var(--works-heading-gap)
    );
    /* Überschreibt die bisherige Position aus works-scroll.js */
    transform: none !important;
}

#works .works-gallery .art-image {
    height: clamp(180px, calc(100svh - 380px), 600px);
}

@media (max-width: 767px) {
    #works {
        --works-heading-height: 210px;
        --works-heading-gap: 12px;
    }

    #works .section-heading h2 {
        font-size: clamp(32px, 7vw, 42px);
    }

    #works .section-description {
        margin-top: 14px;
    }
}

#works .section-heading::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--works-top, 91px));
    right: 0;
    left: 0;
    height: var(--works-top, 91px);
    background: var(--bg, #090909);
    pointer-events: none;
}


#works .works-gallery .art-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark Art – Anpassungen für Smartphones */
@media (max-width: 767px) {
    #works .section-heading {
        position: relative;
        top: auto;
        height: auto;
        margin-bottom: 28px;
        padding-bottom: 0;
    }

    #works .section-heading::before {
        content: none;
    }

    #works .works-gallery {
        gap: 28px;
    }

    #works .works-gallery .art-card {
        position: relative;
        top: auto;
    }

    #works .works-gallery .art-image {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .cinematic-hero.video-journey {
        height: 230svh !important;
    }

    .video-journey h1 {
        font-size: clamp(36px, 11vw, 62px);
    }

    .world-words a {
        padding-inline: clamp(28px, 10vw, 55px);
    }

    .world-words a::before,
    .world-words a::after {
        display: none;
    }
}