/* ==========================================================
   PATRICK PRÜFER PHOTOGRAPHY
   BRAND SYSTEM – LESBARKEIT V2
   DISPLAY FONT: URBANIST 300 / 400 / 500
   ========================================================== */

:root {
    --font-brand:
        "Urbanist",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
}

/* Shared, readable type for both portfolio navigation surfaces. */
body .desktop-navigation .projects-dropdown a,
body .portfolio-section-nav a,
body .mobile-navigation .mobile-project-list a {
    font-family: var(--font-brand);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.025em;
    text-transform: none;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 3px;
}

body .desktop-navigation .projects-dropdown a {
    justify-content: center;
    white-space: normal;
}

body .desktop-navigation .projects-dropdown a:hover,
body .mobile-navigation .mobile-project-list a:hover {
    background: rgba(80, 104, 115, 0.09);
}

body .desktop-navigation .projects-dropdown a:focus-visible,
body .mobile-navigation .mobile-project-list a:focus-visible {
    outline: 2px solid #506873;
    outline-offset: -2px;
}

body .mobile-navigation .mobile-project-list a.is-current {
    text-decoration: underline;
    text-underline-offset: 5px;
}

body .project-header > p,
body .project-detail-description,
body .project-detail-description p {
    font-family: var(--font-brand);
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
    body > main,
    body .projects-dropdown {
        transition: none;
    }
}

/* Clear section markers and direct navigation within the portfolio. */
body .section-index,
body .section-label,
body .project-index,
body .contact-top .section-index,
body .contact-top .section-label {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.5;
    font-weight: 500;
    color: #46565e;
    letter-spacing: 0.075em;
}

body .project-nav-all {
    font-family: var(--font-brand);
    font-size: 15px;
    line-height: 1.5;
}

body .project-detail-kicker,
body .project-nav-direction,
body .project-nav-category {
    font-family: var(--font-brand);
    font-size: 14px;
    line-height: 1.5;
    color: #46565e;
}

body .project-detail-back {
    margin-bottom: 20px;
}

body .project-detail-back a {
    min-height: 44px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.035em;
}

.portfolio-section-nav {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(40px, 5vw, 72px);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.portfolio-section-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: var(--font-brand);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: #35464e;
}

.portfolio-section-nav a:hover,
.portfolio-section-nav a.is-current {
    background: rgba(80, 104, 115, 0.09);
    border-color: rgba(80, 104, 115, 0.35);
}

.portfolio-section-nav a.is-current {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.portfolio-section-nav a:focus-visible,
.project-detail-back a:focus-visible,
.project-nav-grid a:focus-visible {
    outline: 2px solid #506873;
    outline-offset: 4px;
}

@media (max-width: 760px) {
    .portfolio-section-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Keep the full navigation legible when the wordmark and links no longer fit. */
@media (max-width: 1250px) {
    .site-header .desktop-navigation { display: none; }
    .site-header .menu-button { display: block; }
}

.mobile-navigation {
    overflow-y: auto;
}

.mobile-navigation .mobile-nav-inner {
    height: auto;
    min-height: 100%;
    justify-content: flex-start;
}

.mobile-navigation a[href="impressum.html"] {
    font-size: clamp(18px, 5vw, 28px);
    line-height: 1.4;
}


/* ==========================================================
   1. WORTMARKE

   PATRICK PRÜFER bleibt bewusst leicht.
   PHOTOGRAPHY wird größer, dichter und kräftiger,
   damit die zweite Zeile nicht mehr untergeht.
   ========================================================== */

.brand {
    position: relative;
    z-index: 1002;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 14px;
    font-family: var(--font-brand);
    color: var(--ink);
}

.brand-main {
    display: block;
    font-family: var(--font-brand);
    font-size: clamp(44px, 3.55vw, 66px);
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: 0.115em;
    font-variation-settings: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-sub {
    display: block;
    margin: 0;
    padding-left: 0;
    margin-left: 0;
    transform: translateX(calc(-0.11em + 4px));
    font-family: var(--font-brand);
    font-size: clamp(16px, 1.10vw, 20px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.24em;
    font-variation-settings: normal;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
}


/* ==========================================================
   2. GESCROLLTE WORTMARKE
   ========================================================== */

.site-header.scrolled .brand {
    gap: 10px;
}

.site-header.scrolled .brand-main {
    font-size: clamp(37px, 3vw, 52px);
}

.site-header.scrolled .brand-sub {
    font-size: clamp(13px, 0.90vw, 15px);
    font-weight: 500;
    letter-spacing: 0.23em;
}


/* ==========================================================
   3. NAVIGATION UND KLEINE BESCHRIFTUNGEN

   Diese Elemente erhalten etwas mehr Gewicht,
   damit sie sich sauber von der leichten Wortmarke absetzen.
   ========================================================== */

.desktop-navigation .projects-menu-toggle,
.desktop-navigation a,
.mobile-navigation a,
.mobile-nav-label,
.section-label,
.section-index,
.project-detail-kicker,
.article-kicker,
.project-detail-back a,
.article-back a,
.project-detail-error-label,
.article-error-label,
.writing-list-meta,
.writing-list-side,
.writing-state {
    font-family: var(--font-brand);
    font-weight: 400;
    font-variation-settings: normal;
}

/*
   Hauptnavigation bewusst deutlich größer als bisher.
   Dadurch stehen WORK / WRITING / ABOUT / CONTACT / IMPRESSUM
   proportional zur großen Wortmarke und wirken nicht mehr
   wie nachträglich hinzugefügte Kleinbeschriftungen.
*/
.desktop-navigation {
    gap: clamp(28px, 2.25vw, 46px);
}

.desktop-navigation .projects-menu-toggle,
.desktop-navigation a {
    font-size: clamp(17px, 1.08vw, 19px);
    font-weight: 500;
    letter-spacing: 0.095em;
}


/* ==========================================================
   4. GROSSE SEITEN- UND PROJEKTÜBERSCHRIFTEN

   Die große Displaytypografie wird von 300 auf 400
   angehoben. Dadurch bleibt Urbanist elegant, ist aber
   deutlich besser lesbar.
   ========================================================== */

.writing-intro h1,
.article-header h1,
.article-error h1,
.project-detail-heading h1,
.project-detail-error h1,
.legal-intro h1 {
    font-family: var(--font-brand);
    font-weight: 400;
    font-variation-settings: normal;
    letter-spacing: -0.018em;
}

.writing-intro h1 {
    line-height: 0.91;
}

.article-header h1,
.project-detail-heading h1 {
    line-height: 0.90;
}

.writing-list-main h2 {
    font-family: var(--font-brand);
    font-weight: 400;
    font-variation-settings: normal;
    letter-spacing: -0.015em;
    line-height: 0.98;
}


/* ==========================================================
   5. STARTSEITE – DISPLAYTYPOGRAFIE
   ========================================================== */

.hero-content h1,
.work-heading h2,
.project-title h3,
.about-heading h2,
.contact h2 {
    font-family: var(--font-brand);
    font-weight: 400;
    font-variation-settings: normal;
}

.hero-content h1,
.work-heading h2,
.about-heading h2,
.contact h2 {
    letter-spacing: -0.018em;
}

.project-title h3 {
    letter-spacing: -0.012em;
}




/* ==========================================================
   6. HERO-BILD – MINIMAL GRÖSSER

   Das Hero-Bild wird auf großen Bildschirmen nur leicht
   vergrößert. Es bleibt rechts am Raster ausgerichtet und
   wächst hauptsächlich nach links in den Weißraum hinein.
   Auf kleineren Desktops ist die Vergrößerung etwas geringer.
   Mobil bleibt die Breite unverändert bei 100 %.
   ========================================================== */

.hero-visual {
    width: 111%;
    justify-self: end;
}

@media (max-width: 1250px) {
    .hero-visual {
        width: 107%;
    }
}

@media (max-width: 760px) {
    .hero-visual {
        width: 100%;
    }
}


/* ==========================================================
   7. FOOTER-WORTMARKE
   ========================================================== */

.footer-brand {
    font-family: var(--font-brand);
}

.footer-brand > span,
.footer-brand small {
    font-family: var(--font-brand);
    font-variation-settings: normal;
}

.footer-brand > span {
    font-weight: 300;
    letter-spacing: 0.115em;
}

.footer-brand small {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.24em;
}


/* ==========================================================
   8. MITTLERE DESKTOPBREITE
   ========================================================== */

@media (max-width: 1250px) {
    .brand-main {
        font-size: clamp(39px, 4vw, 52px);
        letter-spacing: 0.105em;
    }

    .brand-sub {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.23em;
    }

    .desktop-navigation {
        gap: 20px;
    }

    .desktop-navigation .projects-menu-toggle,
.desktop-navigation a {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.09em;
    }
}


/* ==========================================================
   9. MOBILE
   ========================================================== */

@media (max-width: 760px) {
    .brand {
        gap: 9px;
    }

    .brand-main {
        font-size: 32px;
        line-height: 0.96;
        letter-spacing: 0.085em;
    }

    .brand-sub {
        padding-left: 0;
        margin-left: 0;
        transform: translateX(calc(-0.075em + 2px));
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: 0.22em;
    }

    .site-header.scrolled .brand {
        gap: 7px;
    }

    .site-header.scrolled .brand-main {
        font-size: 30px;
    }

    .site-header.scrolled .brand-sub {
        font-size: 10.5px;
        font-weight: 500;
    }

    .writing-intro h1,
    .article-header h1,
    .article-error h1,
    .project-detail-heading h1,
    .project-detail-error h1,
    .legal-intro h1 {
        letter-spacing: -0.012em;
    }
}


/* ==========================================================
   10. FINALER FEINSCHLIFF – HERO / HEADER / PROPORTIONEN
   ========================================================== */

/*
   PHOTOGRAPHY:
   Gegenüber V8 optisch nochmals exakt 2 px nach rechts.
*/
.brand-sub {
    transform:
        translateX(
            calc(
                -0.11em
                + 6px
            )
        );
}


/*
   NAVIGATION:
   Etwas größer und kompakter, damit sie im Verhältnis
   zur Wortmarke ausreichend Präsenz hat.
*/
.desktop-navigation {
    gap:
        clamp(
            30px,
            2.2vw,
            46px
        );
}

.desktop-navigation .projects-menu-toggle,
.desktop-navigation a {
    font-size:
        clamp(
            18px,
            1.16vw,
            20px
        );

    font-weight:
        500;

    letter-spacing:
        0.08em;
}


/*
   HERO:
   Der gesamte Hero beginnt ca. 30–40 px früher.
   Dadurch wird der große Leerraum unter dem Header reduziert,
   ohne die ruhige Editorial-Wirkung zu verlieren.
*/
.hero {
    padding-top:
        clamp(
            185px,
            18.5vh,
            235px
        );
}


/*
   HERO-HEADLINE:
   Minimal größer, etwas kompaktere Zeilenhöhe.
*/
.hero-content h1 {
    font-size:
        clamp(
            58px,
            6.3vw,
            110px
        );

    line-height:
        0.89;

    letter-spacing:
        -0.018em;
}


/*
   PERSPECTIVE:
   Minimal kräftiger in der visuellen Hierarchie.
*/
.hero-content h1 span {
    font-size:
        1.025em;

    color:
        #50636d;
}


/*
   BESCHREIBUNG:
   Näher an die Headline, damit die linke Hero-Spalte
   stärker als zusammengehörige redaktionelle Einheit wirkt.
*/
.hero-description {
    margin-top:
        clamp(
            34px,
            5vh,
            62px
        );
}


/*
   HERO-BILD:
   Nur noch eine kleine zusätzliche Vergrößerung.
*/
.hero-visual {
    width:
        114%;

    justify-self:
        end;
}


/* ==========================================================
   11. MITTLERE DESKTOPBREITE
   ========================================================== */

@media (
    max-width: 1250px
) {

    .desktop-navigation {
        gap:
            21px;
    }

    .desktop-navigation .projects-menu-toggle,
.desktop-navigation a {
        font-size:
            17px;

        font-weight:
            500;

        letter-spacing:
            0.075em;
    }

    .hero {
        padding-top:
            180px;
    }

    .hero-visual {
        width:
            110%;
    }

}


/* ==========================================================
   12. MOBILE
   ========================================================== */

@media (
    max-width: 760px
) {

    /*
       Auf Mobilgeräten wird keine Desktop-Fluchtkorrektur
       übernommen, sondern die kleinere eigene Korrektur.
    */
    .brand-sub {
        transform:
            translateX(
                calc(
                    -0.075em
                    + 3px
                )
            );
    }

    .hero {
        padding-top:
            155px;
    }

    .hero-content h1 {
        font-size:
            clamp(
                52px,
                15vw,
                82px
            );

        line-height:
            0.92;
    }

    .hero-content h1 span {
        font-size:
            1em;
    }

    .hero-description {
        margin-top:
            44px;
    }

    .hero-visual {
        width:
            100%;
    }

}


/* ==========================================================
   13. EDITORIALER FEINSCHLIFF – V10
   ========================================================== */

/*
   HERO-TEXTBLOCK:
   Die linke Textkomposition wird etwas höher gesetzt.
   Dadurch nähert sich die Headline der oberen Bildkante,
   ohne sie mathematisch exakt auszurichten.
*/
.hero-content {
    transform:
        translateY(-30px);
}


/*
   PERSPECTIVE:
   Minimal dunkler für besseren Kontrast auf dem hellen Grund.
*/
.hero-content h1 span {
    color:
        #465a64;
}


/*
   BESCHREIBUNG:
   Etwas größer, dunkler und dadurch besser lesbar.
*/
.hero-description p {
    font-size:
        clamp(
            15px,
            0.95vw,
            16px
        );

    line-height:
        1.68;

    color:
        #58656b;
}


/*
   BILDBESCHRIFTUNG:
   ARCHITECTURE I und 01 erhalten etwas mehr Präsenz.
*/
.hero-visual figcaption {
    padding-top:
        13px;

    font-family:
        var(--font-brand);

    font-size:
        12px;

    font-weight:
        400;

    letter-spacing:
        0.095em;

    color:
        #59666c;
}


/*
   VIEW WORK:
   Größer, etwas dunkler und mit längerer Linie.
*/
.hero-scroll {
    gap:
        22px;

    font-family:
        var(--font-brand);

    font-size:
        11.5px;

    font-weight:
        500;

    letter-spacing:
        0.105em;

    color:
        #566269;
}

.hero-scroll-line {
    width:
        82px;
}


/* ==========================================================
   14. MITTLERE DESKTOPBREITE
   ========================================================== */

@media (
    max-width: 1250px
) {

    .hero-content {
        transform:
            translateY(-20px);
    }

    .hero-description p {
        font-size:
            15px;
    }

    .hero-visual figcaption {
        font-size:
            11.5px;
    }

    .hero-scroll {
        font-size:
            11px;
    }

    .hero-scroll-line {
        width:
            76px;
    }

}


/* ==========================================================
   15. MOBILE
   ========================================================== */

@media (
    max-width: 760px
) {

    /*
       Mobil bleibt die bisherige vertikale Komposition erhalten.
    */
    .hero-content {
        transform:
            none;
    }

    .hero-description p {
        font-size:
            14px;
    }

    .hero-visual figcaption {
        font-size:
            11px;
    }

}


/* ==========================================================
   16. FINALER RASTER-FEINSCHLIFF – V11
   ========================================================== */

/*
   PHOTOGRAPHY:
   Gegenüber V10 um 2,5 px nach links.
   Die optische Flucht wird damit zwischen der letzten
   Links- und Rechtskorrektur fein austariert.
*/
.brand-sub {
    transform:
        translateX(
            calc(
                -0.11em
                + 3.5px
            )
        );
}


/*
   HERO-TEXT:
   Der gesamte linke Hero-Block rückt 15 px nach links.
   Die vertikale Anhebung aus V10 (-30 px) bleibt erhalten.
*/
.hero-content {
    transform:
        translate(
            -15px,
            -30px
        );
}


/*
   BESCHREIBUNG:
   Etwas schmaler für einen editorialeren Zeilenfall.
*/
.hero-description {
    max-width:
        390px;
}


/*
   HERO-BILD:
   Nur die Bildspalte wird 12 px nach oben gesetzt.
   Größe und Breite aus V10 bleiben unverändert.
*/
.hero-visual {
    transform:
        translateY(-12px);
}


/*
   VIEW WORK:
   Folgt dem linken Hero-Raster ebenfalls 15 px nach links.
*/
.hero-scroll {
    left:
        calc(
            var(--page)
            - 15px
        );
}


/* ==========================================================
   17. MITTLERE DESKTOPBREITE
   ========================================================== */

@media (
    max-width: 1250px
) {

    .hero-content {
        transform:
            translate(
                -10px,
                -20px
            );
    }

    .hero-description {
        max-width:
            380px;
    }

    .hero-visual {
        transform:
            translateY(-8px);
    }

    .hero-scroll {
        left:
            calc(
                var(--page)
                - 10px
            );
    }

}


/* ==========================================================
   18. MOBILE
   ========================================================== */

@media (
    max-width: 760px
) {

    /*
       Mobil bleibt das ursprüngliche Raster erhalten.
       Keine horizontalen oder vertikalen Desktop-Korrekturen.
    */
    .brand-sub {
        transform:
            translateX(
                calc(
                    -0.075em
                    + 2px
                )
            );
    }

    .hero-content {
        transform:
            none;
    }

    .hero-description {
        max-width:
            none;
    }

    .hero-visual {
        transform:
            none;
    }

    .hero-scroll {
        left:
            var(--page);
    }

}


/* ==========================================================
   19. UNTERER SEITENBEREICH – V12
   PROJEKTE / METADATEN / CONTACT / FOOTER
   ========================================================== */

.section-index,
.section-label {
    font-family: var(--font-brand);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.105em;
    color: #657178;
}


/* PROJEKT-RHYTHMUS */

.project {
    margin-bottom: clamp(170px, 20vh, 260px);
}

.project-header {
    padding-top: 24px;
    margin-bottom: 66px;
}


/* PROJEKTNUMMER */

.project-index {
    font-family: var(--font-brand);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.105em;
    color: #607078;
}


/* PROJEKTTITEL */

.project-title h3 {
    font-family: var(--font-brand);
    font-size: clamp(48px, 5.2vw, 84px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.016em;
    font-variation-settings: normal;
}


/* PROJEKTUNTERTITEL / ORT / SERIENBEZEICHNUNG */

.project-title span {
    margin-top: 20px;
    font-family: var(--font-brand);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.105em;
    color: #607078;
}


/* PROJEKTBESCHREIBUNG RECHTS */

.project-header > p {
    max-width: 390px;
    font-size: clamp(15px, 0.96vw, 16px);
    line-height: 1.68;
    color: #59666c;
}


/* BILDBESCHRIFTUNGEN */

.gallery-item figcaption {
    padding-top: 13px;
    font-family: var(--font-brand);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.095em;
    color: #607078;
}


/* ==========================================================
   20. CONTACT
   ========================================================== */

.contact {
    padding-top: 145px;
    padding-bottom: 145px;
}

.contact-top {
    gap: 28px;
    margin-bottom: 96px;
}

.contact-top .section-index,
.contact-top .section-label {
    font-size: 11.5px;
    font-weight: 500;
}

.contact h2 {
    font-family: var(--font-brand);
    font-weight: 400;
    letter-spacing: -0.018em;
    font-variation-settings: normal;
}

.contact-links a {
    grid-template-columns: 112px 1fr auto;
    padding: 27px 0;
}

.contact-links span {
    font-family: var(--font-brand);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.105em;
}

.contact-links strong {
    font-size: clamp(17px, 1.5vw, 23px);
    font-weight: 400;
}

.contact-arrow {
    font-size: 20px !important;
}


/* ==========================================================
   21. FOOTER
   ========================================================== */

.site-footer {
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: var(--font-brand);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.075em;
    color: #607078;
}

.footer-brand {
    gap: 9px;
}

.footer-brand > span {
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.105em;
    font-variation-settings: normal;
}

.footer-brand small {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    color: #607078;
}

.footer-center {
    gap: 11px;
}

.footer-center > span,
.footer-center a,
.footer-year {
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.075em;
}


/* ==========================================================
   22. MITTLERE DESKTOPBREITE
   ========================================================== */

@media (max-width: 1250px) {

    .section-index,
    .section-label,
    .project-index {
        font-size: 10.5px;
    }

    .project {
        margin-bottom: 165px;
    }

    .project-header {
        margin-bottom: 60px;
    }

    .project-title h3 {
        font-size: clamp(46px, 5.3vw, 72px);
    }

    .project-title span {
        font-size: 10.5px;
    }

    .project-header > p {
        font-size: 15px;
    }

    .gallery-item figcaption {
        font-size: 11.5px;
    }

    .contact {
        padding-top: 130px;
        padding-bottom: 130px;
    }

    .contact-top {
        margin-bottom: 88px;
    }

    .contact-links span {
        font-size: 10.5px;
    }

    .site-footer,
    .footer-center > span,
    .footer-center a,
    .footer-year {
        font-size: 10px;
    }

}


/* ==========================================================
   23. MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .section-index,
    .section-label,
    .project-index {
        font-size: 10px;
    }

    .project {
        margin-bottom: 135px;
    }

    .project-header {
        margin-bottom: 52px;
    }

    .project-title h3 {
        font-size: clamp(46px, 12vw, 68px);
    }

    .project-title span {
        margin-top: 16px;
        font-size: 10px;
    }

    .project-header > p {
        max-width: 100%;
        font-size: 14px;
    }

    .gallery-item figcaption {
        font-size: 11px;
    }

    .contact {
        padding-top: 105px;
        padding-bottom: 105px;
    }

    .contact-top {
        margin-bottom: 70px;
    }

    .contact-links span {
        font-size: 10px;
    }

    .contact-links strong {
        font-size: 16px;
    }

    .site-footer,
    .footer-center > span,
    .footer-center a,
    .footer-year {
        font-size: 10px;
    }

}