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

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

:root {
    --cream: #f2eee6;
    --black: #111111;
    --grey: #c7c7c4;
    --grey-dark: #77726b;
    --orange: #ff6540;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--cream);
    color: var(--black);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

button {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

::selection {
    background: var(--orange);
    color: var(--black);
}


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

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--black);
    pointer-events: none;
    z-index: 9999;

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

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

    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease,
        color .25s ease;
}

.custom-cursor.is-active {
    width: 76px;
    height: 76px;
    background: var(--cream);
    color: var(--black);
    border: 1px solid rgba(17, 17, 17, .18);
}

.cursor-label {
    opacity: 0;
    font-size: 9px;
    transition: opacity .2s ease;
}

.custom-cursor.is-active .cursor-label {
    opacity: 1;
}

@media (hover: none), (pointer: coarse) {
    .custom-cursor {
        display: none;
    }
}


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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 28px 50px;
    z-index: 300;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    mix-blend-mode: difference;
    color: white;
}

.site-logo {
    font-size: 10px;
    line-height: .95;
}

.menu-toggle {
    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;

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

    gap: 5px;
}

.menu-toggle span {
    width: 17px;
    height: 1px;
    background: currentColor;
}


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

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;

    background: var(--black);
    color: var(--cream);

    padding: 28px 50px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);

    transition:
        transform .7s cubic-bezier(.77, 0, .18, 1),
        opacity .35s ease,
        visibility .35s ease;
}

.menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-overlay-top,
.menu-footer {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
}

.menu-links {
    display: flex;
    flex-direction: column;
}

.menu-links a {
    display: grid;
    grid-template-columns: 60px 1fr;

    border-bottom: 1px solid rgba(242, 238, 230, .15);

    align-items: end;
    padding: 10px 0;
}

.menu-links span {
    font-size: 9px;
    padding-bottom: 8px;
}

.menu-links strong {
    font-size: clamp(60px, 10vw, 145px);
    font-weight: 400;
    line-height: .82;
    letter-spacing: -.065em;
}


/* ========================================
   GENERAL
======================================== */

.section-number {
    font-size: 10px;
    line-height: 1;
}

.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--grey);
    font-size: 10px;
}


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

.home-hero {
    min-height: 100vh;
    padding: 90px 50px 40px;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-layout {
    position: relative;
    min-height: 78vh;
}

.hero-title {
    position: absolute;
    left: 0;
    top: 50%;

    transform: translateY(-50%);
    z-index: 3;
}

.hero-word {
    font-size: clamp(110px, 15vw, 215px);
    font-weight: 400;
    line-height: .76;
    letter-spacing: -.065em;

    white-space: nowrap;
}

.hero-image {
    position: absolute;

    right: 3vw;
    top: 2vh;

    width: 58%;
    height: 72vh;

    z-index: 1;
}

.hero-placeholder {
    width: 100%;
    height: 100%;
}

.hero-scroll {
    position: absolute;
    left: 50px;
    bottom: 34px;

    font-size: 10px;
}


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

.home-about {
    min-height: 100vh;

    background: var(--black);
    color: var(--cream);

    padding: 38px 50px 80px;
}

.about-grid {
    display: grid;
    grid-template-columns: 55% 45%;

    gap: 52px;

    margin-top: 56px;

    align-items: start;
}

.about-left {
    min-width: 0;
}

.about-image {
    width: 100%;
}

.about-placeholder {
    width: 100%;
    height: 470px;

    background: #6a6660;
}

.about-text {
    padding-top: 30px;

    display: flex;
    flex-direction: column;

    gap: 24px;
}

.about-lead {
    max-width: 760px;

    font-size: clamp(34px, 3.6vw, 56px);
    font-weight: 400;

    line-height: 1.08;
    letter-spacing: -.035em;
}

.about-small {
    max-width: 720px;

    font-size: 13px;
    line-height: 1.5;

    color: #aaa49b;
}

.simple-link {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 12px;
    margin-top: 4px;

    font-size: 10px;
}


/* BIG RIGHT HEADLINE */

.about-heading {
    position: relative;

    min-height: 620px;

    display: flex;
    justify-content: flex-end;
}

.about-heading h2 {
    position: sticky;
    top: 100px;

    width: fit-content;
    height: fit-content;

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

    margin-right: 42px;

    text-align: right;

    font-size: clamp(96px, 10.8vw, 175px);
    font-weight: 400;

    line-height: .76;
    letter-spacing: -.065em;
}

.about-heading h2 span {
    display: block;
    width: 100%;

    text-align: right;
}

.about-orange {
    color: var(--orange);
}


/* ========================================
   CONCEPT
======================================== */

.concept-section {
    min-height: 110vh;

    padding: 42px 50px 70px;

    background: var(--cream);
}

.concept-stage {
    position: relative;

    min-height: 820px;

    margin-top: 38px;
}

.concept-image {
    position: absolute;

    top: 0;
    right: 3vw;

    width: 58%;
    height: 780px;
}

.concept-placeholder {
    width: 100%;
    height: 100%;

    background: #c3c5c4;
}


/* THIN HEADLINE LIKE LET'S TALK */

.concept-words {
    position: absolute;

    left: 0;
    top: 80px;

    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 70%;
}

.concept-words span {
    display: block;

    width: fit-content;

    font-size: clamp(94px, 10vw, 165px);
    font-weight: 400;

    line-height: .76;
    letter-spacing: -.065em;

    white-space: nowrap;
}

.concept-black {
    color: var(--black);
}

.concept-orange {
    color: var(--orange);
    margin-left: 3vw;
}

.concept-detail {
    margin-left: 8vw;
}


/* ========================================
   SELECTED WORK
======================================== */

.selected-work {
    min-height: 150vh;

    padding: 36px 50px 90px;
}

.work-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 28px;
}

.work-header p {
    font-size: 9px;
}


/* TOP ROW */

.work-grid-top {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-bottom: 48px;
}


/* BOTTOM ROW */

.work-grid-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.work-grid-small {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.work-card {
    min-width: 0;
}

.work-image-link {
    display: block;
    overflow: hidden;
}

.work-image {
    width: 100%;

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

    background: var(--grey);

    font-size: 18px;
}

.work-grid-top .work-image {
    height: 520px;
}

.work-editorial-card .work-image {
    height: 560px;
}

.work-grid-small .work-image {
    height: 560px;
}

.work-print {
    background: var(--orange);
}

.work-social,
.work-creative {
    background: var(--black);
    color: var(--cream);
}

.work-caption {
    min-height: 58px;

    padding-top: 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;

    font-size: 9px;
    line-height: 1.25;
}

.work-caption > div {
    display: flex;
    gap: 18px;
}

.work-caption strong {
    font-weight: 400;
}

.work-caption p {
    color: var(--grey-dark);
}


/* ========================================
   WHAT I DO
======================================== */

.what-i-do {
    min-height: 88px;

    padding: 0 50px;

    display: grid;
    grid-template-columns: 180px 1fr;

    align-items: center;

    gap: 30px;

    background: #d8d3cb;

    border-top: 1px solid rgba(17, 17, 17, .08);
}

.services-line {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    font-size: 11px;

    white-space: nowrap;
}


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

.home-contact {
    min-height: 72vh;

    background: var(--orange);

    padding: 34px 50px;
}

.home-contact-grid {
    min-height: calc(72vh - 100px);

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

    align-items: end;
}

.home-contact-grid p {
    align-self: center;

    font-size: 12px;
    line-height: 1.08;
}

.talk-link {
    justify-self: end;

    font-size: clamp(83px, 11vw, 160px);
    font-weight: 400;

    line-height: .78;
    letter-spacing: -.035em;

    text-align: left;
}

.talk-link span {
    color: var(--cream);
}


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

.site-footer {
    min-height: 300px;

    padding: 48px 50px;

    background: var(--black);
    color: var(--cream);

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

    align-items: center;
}

.footer-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: fit-content;
}

.footer-name span {
    display: block;

    font-size: clamp(65px, 7vw, 110px);
    font-weight: 400;

    line-height: .82;
    letter-spacing: -.06em;
}

.footer-name span + span {
    margin-top: 8px;
}

.footer-nav {
    display: flex;
    justify-content: center;

    gap: 38px;

    font-size: 10px;
}

.footer-copy {
    justify-self: end;

    font-size: 9px;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1050px) {

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-heading {
        min-height: auto;
    }

    .about-heading h2 {
        position: static;

        margin-top: 30px;
        margin-right: 0;

        font-size: 17vw;
    }

    .concept-image {
        width: 62%;
    }
}


@media (max-width: 900px) {

    .site-header {
        padding: 20px;
    }


    /* HERO */

    .home-hero {
        padding: 82px 20px 34px;
    }

    .hero-layout {
        min-height: 75vh;
    }

    .hero-title {
        top: 42%;
    }

    .hero-word {
        font-size: 18vw;
    }

    .hero-image {
        width: 68%;
        height: 56vh;

        top: 9vh;
        right: -6vw;
    }

    .hero-scroll {
        left: 20px;
    }


    /* ABOUT */

    .home-about {
        min-height: auto;

        padding: 34px 20px 80px;
    }

    .about-grid {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .about-placeholder {
        height: 430px;
    }

    .about-lead {
        font-size: 8vw;
    }

    .about-heading {
        justify-content: flex-end;
    }

    .about-heading h2 {
        position: static;

        text-align: right;

        font-size: 18vw;

        margin-top: 65px;
        margin-right: 0;
        margin-left: auto;
    }


    /* CONCEPT */

    .concept-section {
        min-height: auto;

        padding: 34px 20px 60px;
    }

    .concept-stage {
        min-height: 720px;
    }

    .concept-image {
        width: 72%;
        height: 620px;

        right: -6vw;
    }

    .concept-words {
        top: 75px;

        width: 100%;
    }

    .concept-words span {
        font-size: 14vw;
    }


    /* WORK */

    .selected-work {
        min-height: auto;

        padding: 28px 20px 70px;
    }

    .work-grid-top,
    .work-grid-bottom {
        grid-template-columns: 1fr;
    }

    .work-grid-small {
        grid-template-columns: 1fr 1fr;
    }

    .work-grid-top .work-image,
    .work-editorial-card .work-image {
        height: 68vw;
    }

    .work-grid-small .work-image {
        height: 48vw;
    }


    /* SERVICES */

    .what-i-do {
        padding: 22px 20px;

        grid-template-columns: 1fr;

        gap: 16px;
    }

    .services-line {
        overflow-x: auto;

        justify-content: flex-start;
    }


    /* CONTACT */

    .home-contact {
        min-height: 75vh;

        padding: 30px 20px;
    }

    .home-contact-grid {
        min-height: 65vh;

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .talk-link {
        justify-self: start;

        font-size: 20vw;
    }


    /* FOOTER */

    .site-footer {
        min-height: 420px;

        padding: 50px 20px;

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .footer-name span {
        font-size: 16vw;
    }

    .footer-name span + span {
        margin-top: 6px;
    }

    .footer-nav {
        justify-content: flex-start;
    }

    .footer-copy {
        justify-self: start;
    }
}


@media (max-width: 560px) {

    .hero-image {
        width: 78%;

        right: -14vw;
    }

    .about-placeholder {
        height: 340px;
    }

    .concept-stage {
        min-height: 620px;
    }

    .concept-image {
        height: 540px;
        width: 76%;
    }

    .work-grid-small {
        grid-template-columns: 1fr;
    }

    .work-grid-small .work-image {
        height: 70vw;
    }

    .work-caption {
        min-height: 64px;

        flex-direction: column;

        gap: 6px;
    }
}
/* Rechtliche Seiten und seitenweite Links */
.legal-main {padding: 170px 6vw 100px;}
.legal-intro {border-bottom: 1px solid var(--black); padding-bottom: 48px;}
.legal-kicker {font-size: 10px; letter-spacing: .14em; margin-bottom: 36px;}
.legal-intro h1 {font-size: clamp(48px, 9vw, 145px); font-weight: 400; letter-spacing: -.065em; line-height: 1; overflow-wrap: anywhere;}
.legal-intro h1 span {color: var(--orange); padding-left: .15em;}
.legal-subtitle {margin-top: 25px; font-size: 14px;}
.legal-content {max-width: 1080px; margin: 0 auto;}
.legal-section {display: grid; grid-template-columns: 100px 1fr; gap: 30px; padding: 42px 0; border-bottom: 1px solid var(--grey);}
.legal-number {font-size: 11px; color: var(--grey-dark); padding-top: 5px;}
.legal-section h2 {font-size: clamp(22px, 3vw, 34px); font-weight: 400; letter-spacing: -.03em; margin-bottom: 24px;}
.legal-section p {max-width: 760px; font-size: 16px; line-height: 1.75; margin-top: 16px;}
.legal-section a, .form-status a {text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere;}
.legal-links {display: flex; gap: 26px; justify-content: flex-end; flex-wrap: wrap; padding: 22px 6vw; font-size: 10px; letter-spacing: .08em; background: var(--cream); color: var(--black); border-top: 1px solid var(--grey);}
.legal-links a:hover, .legal-section a:hover {color: var(--orange);}
.legal-links a:focus-visible, .legal-section a:focus-visible {outline: 2px solid var(--orange); outline-offset: 5px;}
.send-button:disabled {opacity: .5; cursor: wait;}
.form-delivery-note {font-size: 12px; line-height: 1.6; margin-bottom: 24px;}
.form-delivery-note a {text-decoration: underline;}
@media(max-width: 650px) {.legal-main {padding: 130px 6vw 65px;} .legal-section {grid-template-columns: 25px 1fr; gap: 15px; padding: 30px 0;} .legal-section p {font-size: 15px;} .legal-links {justify-content: flex-start;}}

/* Kompaktere Zwischenueberschriften der Datenschutzerklaerung */
.privacy-page .legal-section h2 {font-size: clamp(19px, 2vw, 25px); margin-bottom: 18px;}

/* Portfolio assets: preserve artwork proportions, crop portraits only. */
.hero-image img,.about-image img,.about-portrait img {display:block; width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.concept-image img {display:block;width:100%;height:100%;object-fit:cover;}
.work-image img {display:block;width:100%;height:100%;object-fit:cover;}
.portfolio-image img {display:block;width:100%;height:100%;object-fit:contain;}
.portfolio-image:has(img) {padding:0;background:#e2dfd8;}
.home-newsletter {padding:70px 50px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;}
.home-newsletter h2 {font-size:clamp(40px,6vw,90px);font-weight:400;letter-spacing:-.055em;line-height:.95;margin:35px 0;}
.home-newsletter p:not(.section-number) {max-width:370px;font-size:15px;line-height:1.6;margin-bottom:26px;}
.home-newsletter a {font-size:11px;}
.newsletter-teaser {display:block;max-height:530px;overflow:hidden;border:10px solid #111;border-radius:12px;box-shadow:0 20px 50px #1112;}
.newsletter-teaser img {display:block;width:100%;height:auto;}
.creative-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;}
.creative-gallery figure {min-width:0;}
.creative-gallery a {display:flex;background:#e3dfd7;aspect-ratio:3/4;align-items:center;justify-content:center;overflow:hidden;}
.creative-gallery img {display:block;width:100%;height:100%;object-fit:contain;}
.creative-gallery figcaption,.newsletter-pair figcaption {font-size:11px;padding-top:12px;}
.creative-gallery figcaption span {float:right;color:var(--grey-dark);}
.manual-project {padding:0 50px 80px;}
.book-mockup {background:#d6c9b7;padding:70px 5%;display:grid;grid-template-columns:1fr 2fr;gap:7%;align-items:center;overflow:hidden;}
.book-cover {transform:rotate(-8deg);box-shadow:12px 20px 28px #321c163d,4px 3px 0 #f8f3e9,7px 5px 0 #cbbfae;}
.book-cover img {width:100%;height:auto;display:block;}
.book-spread {display:flex;transform:rotate(3deg);box-shadow:0 20px 35px #321c163d;position:relative;}
.book-spread:after {content:'';position:absolute;left:48%;top:0;width:4%;height:100%;background:linear-gradient(90deg,transparent,#0002,transparent);pointer-events:none;}
.book-spread img {width:50%;height:auto;object-fit:contain;display:block;}
.manual-details {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;}
.manual-details img {width:100%;height:auto;}
.newsletter-pair {display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1080px;margin:auto;}
.newsletter-window {height:660px;overflow-y:auto;border:12px solid #191919;border-radius:14px;background:white;scrollbar-width:thin;box-shadow:0 15px 30px #0001;}
.newsletter-window img {width:100%;height:auto;display:block;}
.newsletter-window:focus-visible, .portfolio-reader summary:focus-visible {outline:3px solid var(--orange);outline-offset:5px;}
.portfolio-reader {background:#e2dfd8;}
.portfolio-reader summary {cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding:30px;}
.portfolio-reader summary::-webkit-details-marker {display:none;}
.portfolio-reader summary img {width:100%;height:auto;display:block;box-shadow:0 8px 25px #0002;}
.portfolio-reader summary span {font-size:clamp(20px,3vw,44px);line-height:1.2;letter-spacing:-.03em;}
.portfolio-reader summary b {color:var(--orange);font-weight:400;}
.portfolio-reader[open] summary {border-bottom:1px solid #1112;}
.portfolio-reader-toolbar {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 30px;font-size:11px;}
.portfolio-pages {height:80vh;max-height:1000px;overflow-y:auto;overscroll-behavior:contain;padding:20px;scrollbar-width:thin;}
.portfolio-pages figure {margin:0 auto 30px;max-width:1500px;}
.portfolio-pages img {width:100%;height:auto;display:block;}
.portfolio-pages figcaption {padding:10px 0;font-size:10px;color:#666;}
@media(max-width:700px){.home-newsletter {padding:50px 20px;grid-template-columns:1fr;gap:35px;}.creative-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;}.creative-gallery figcaption span {float:none;display:block;margin-top:4px;}.manual-project {padding:0 20px 55px;}.book-mockup {padding:40px 20px;grid-template-columns:1fr;gap:40px;}.book-cover {max-width:65%;margin:auto;}.manual-details {grid-template-columns:1fr;}.newsletter-pair {grid-template-columns:1fr;}.newsletter-window {height:560px;}.portfolio-reader summary {grid-template-columns:1fr;padding:20px;}.portfolio-reader-toolbar {padding:20px;flex-wrap:wrap;}.portfolio-pages {height:70vh;padding:8px;}}

/* Bild- und Typografierhythmus beim Scrollen. */
.deputy-layout {display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;padding:55px;background:#dcded2;}
.deputy-title > p:first-child {font-size:clamp(36px,5.8vw,88px);line-height:.92;letter-spacing:-.055em;}
.deputy-title span {display:block;font-size:10px;margin:30px 0;}
.deputy-hint {font-size:14px;line-height:1.6;max-width:300px;margin-bottom:25px;}
.deputy-title a {font-size:11px;text-decoration:underline;text-underline-offset:5px;}
.has-scroll-motion .scroll-reveal {opacity:0;transform:translateY(32px);transition:opacity .85s ease var(--reveal-delay,0ms),transform 1s cubic-bezier(.2,.65,.25,1) var(--reveal-delay,0ms);}
.has-scroll-motion .scroll-reveal.is-visible {opacity:1;transform:translateY(0);}
.has-scroll-motion .work-image img {transition:transform 1.25s cubic-bezier(.2,.65,.25,1);transform:scale(1.055);}
.has-scroll-motion .is-visible .work-image img {transform:scale(1);}
.has-scroll-motion .hero-image img,.has-scroll-motion .concept-image img {transform:translateY(var(--photo-shift,0px)) scale(1.06);will-change:transform;}
.hero-image,.concept-image {overflow:hidden;}
@media(max-width:700px) {.deputy-layout {grid-template-columns:1fr;padding:30px 20px;gap:35px;}}
@media(prefers-reduced-motion:reduce) {.has-scroll-motion .scroll-reveal {opacity:1;transform:none;transition:none;}.has-scroll-motion .work-image img,.has-scroll-motion .hero-image img,.has-scroll-motion .concept-image img {transform:none;transition:none;}html{scroll-behavior:auto;}}