* {
    box-sizing: border-box;
}


/* ---------------------------------------
   SCHRIFT
--------------------------------------- */

@font-face {
    font-family: "ABC Areal";
    src: url("fonts/ABCAreal-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


:root {
    --font-size: clamp(19px, calc(16px + 0.6vw), 25px);
    --line-height: clamp(22px, calc(19px + 0.6vw), 28px);

    --rand-x: clamp(18px, 2vw, 32px);
    --rand-y: clamp(18px, 1.75vw, 28px);

    --bildbreite: 60vw;

    --projekt-spalte-links: 340px;
    --projekt-rand-rechts: 20vw;
    --layout-gap: 40px;

    --legal-gap: 22px;

    --home-image-top: var(--rand-y);
    --home-image-bottom: calc(var(--rand-y) + 42px);
}


html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}


html {
    -webkit-text-size-adjust: 100%;
}


body,
button,
input {
    font-family: "ABC Areal", Arial, sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: 0.01em;

    font-feature-settings:
        "ss04" 1,
        "ss05" 1,
        "ss06" 1,
        "ss11" 1;
}


body {
    color: #141414;
    background: #fff;
}


button,
input {
    font-weight: inherit;
}


body.home {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}


body.subpage {
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: auto;
}


/* ---------------------------------------
   HEADER
--------------------------------------- */

.header {
    position: fixed;
    top: var(--rand-y);
    left: var(--rand-x);
    right: var(--rand-x);

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

    padding: 0;
    z-index: 100;
}


.header--subpage,
.header--project {
    justify-content: flex-end;
}


.header--archive {
    justify-content: space-between;
}


.project-title,
.logo {
    transform: translateY(-4px);
}


.project-title {
    max-width: 52vw;

    color: inherit;
    text-decoration: none;
    cursor: pointer;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------
   ATH LOGO
--------------------------------------- */

.logo {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    column-gap: 40px;

    justify-content: end;
    align-items: start;

    min-width: 390px;

    white-space: nowrap;
}


.menu-a,
.menu-t,
.menu-h {
    position: relative;
}


.logo a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;

    color: #141414;
    text-decoration: none;
}


.logo-a,
.logo-t,
.logo-h {
    position: relative;
    display: inline-block;

    height: 1.2em;
    overflow: hidden;
    vertical-align: top;

    transition:
        width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


.logo-a {
    width: 0.72em;
}

.logo-t {
    width: 0.62em;
}

.logo-h {
    width: 0.75em;
}


.a-short,
.a-long,
.a-archive,
.t-short,
.t-long,
.h-short,
.h-long {
    position: absolute;
    top: 0;
    left: 0;

    white-space: nowrap;
    pointer-events: none;

    opacity: 0;
    transform: translateX(5px);

    transition:
        opacity 0.3s ease,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


.a-short,
.t-short,
.h-short {
    opacity: 1;
    transform: translateX(0);
}


/* ---------------------------------------
   SEITENZUSTÄNDE
--------------------------------------- */

.logo.state-architecture .logo-a {
    width: 6.2em;
}

.logo.state-architecture .a-short {
    opacity: 0;
}

.logo.state-architecture .a-long {
    opacity: 1;
    transform: translateX(0);
}


.logo.state-archive .logo-a {
    width: 3.2em;
}

.logo.state-archive .a-short {
    opacity: 0;
}

.logo.state-archive .a-archive {
    opacity: 1;
    transform: translateX(0);
}


.logo.state-team .logo-t {
    width: 2.7em;
}

.logo.state-team .t-short {
    opacity: 0;
}

.logo.state-team .t-long {
    opacity: 1;
    transform: translateX(0);
}


.logo.state-habermeyer .logo-h {
    width: 6.4em;
}

.logo.state-habermeyer .h-short {
    opacity: 0;
}

.logo.state-habermeyer .h-long {
    opacity: 1;
    transform: translateX(0);
}


/* ---------------------------------------
   DESKTOP-INTERAKTION
--------------------------------------- */

.logo.is-interacting .logo-a {
    width: 0.72em;
}

.logo.is-interacting .logo-t {
    width: 0.62em;
}

.logo.is-interacting .logo-h {
    width: 0.75em;
}


.logo.is-interacting .a-short,
.logo.is-interacting .t-short,
.logo.is-interacting .h-short {
    opacity: 1;
    transform: translateX(0);
}


.logo.is-interacting .a-long,
.logo.is-interacting .a-archive,
.logo.is-interacting .t-long,
.logo.is-interacting .h-long {
    opacity: 0;
    transform: translateX(5px);
}


.logo.is-interacting .menu-a:hover .logo-a {
    width: 6.2em;
}

.logo.is-interacting .menu-a:hover .a-short {
    opacity: 0;
    transform: translateX(-5px);
}

.logo.is-interacting .menu-a:hover .a-long {
    opacity: 1;
    transform: translateX(0);
}


.logo.is-interacting .menu-t:hover .logo-t {
    width: 2.7em;
}

.logo.is-interacting .menu-t:hover .t-short {
    opacity: 0;
    transform: translateX(-5px);
}

.logo.is-interacting .menu-t:hover .t-long {
    opacity: 1;
    transform: translateX(0);
}


.logo.is-interacting .menu-h:hover .logo-h {
    width: 6.4em;
}

.logo.is-interacting .menu-h:hover .h-short {
    opacity: 0;
    transform: translateX(-5px);
}

.logo.is-interacting .menu-h:hover .h-long {
    opacity: 1;
    transform: translateX(0);
}


/* ---------------------------------------
   ARCHIV-UNTERMENÜ
--------------------------------------- */

.submenu-a {
    position: absolute;
    top: 100%;
    left: 0;

    display: flex;
    flex-direction: column;

    padding-top: 0;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-4px);

    transition:
        opacity 0.3s ease 0.08s,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
        visibility 0s linear 0.38s;
}


.logo.is-interacting .menu-a:hover .submenu-a,
.logo.is-mobile-a-open .submenu-a {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    transition:
        opacity 0.3s ease 0.12s,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
        visibility 0s;
}


.menu-link {
    display: block;

    color: inherit;
    text-decoration: none;
    cursor: pointer;
}


/* Touch: erster Tap auf A öffnet Architektur + Archiv */

.logo.is-mobile-a-open .logo-a {
    width: 6.2em;
}

.logo.is-mobile-a-open .a-short,
.logo.is-mobile-a-open .a-archive {
    opacity: 0;
    transform: translateX(-5px);
}

.logo.is-mobile-a-open .a-long {
    opacity: 1;
    transform: translateX(0);
}

.logo.is-mobile-a-open .logo-t {
    width: 0.62em;
}

.logo.is-mobile-a-open .logo-h {
    width: 0.75em;
}

.logo.is-mobile-a-open .t-short,
.logo.is-mobile-a-open .h-short {
    opacity: 1;
    transform: translateX(0);
}

.logo.is-mobile-a-open .t-long,
.logo.is-mobile-a-open .h-long {
    opacity: 0;
    transform: translateX(5px);
}


/* ---------------------------------------
   STARTSEITE
--------------------------------------- */

.projects {
    display: flex;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: none;
    scroll-behavior: auto;

    scrollbar-width: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.projects::-webkit-scrollbar {
    display: none;
}


.project {
    flex: 0 0 100vw;

    width: 100vw;
    height: 100vh;
    height: 100dvh;

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

    padding-top: var(--home-image-top);
    padding-bottom: var(--home-image-bottom);

    overflow: hidden;
}


.image-frame {
    display: block;

    max-width: var(--bildbreite);
    max-height: calc(100vh - var(--home-image-top) - var(--home-image-bottom));
    max-height: calc(100dvh - var(--home-image-top) - var(--home-image-bottom));

    overflow: hidden;
    line-height: 0;
}


.project img {
    display: block;

    width: auto;
    height: auto;

    max-width: var(--bildbreite);
    max-height: calc(100vh - var(--home-image-top) - var(--home-image-bottom));
    max-height: calc(100dvh - var(--home-image-top) - var(--home-image-bottom));

    object-fit: contain;

    transform: scale(1);
    transform-origin: center center;

    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (hover: hover) and (pointer: fine) {
    .image-frame:hover img {
        transform: scale(1.03);
    }
}


/* ---------------------------------------
   INHALT UNTERSEITEN
--------------------------------------- */

.page-content {
    width: 100%;

    padding:
        80px
        var(--rand-x)
        40px
        var(--rand-x);
}


/* ---------------------------------------
   TEAM / HABERMEYER
--------------------------------------- */

.team-page {
    padding-top: 128px;
    padding-left: var(--rand-x);
    padding-right: var(--rand-x);
}


.team-text {
    width: min(600px, 100%);
    text-align: left;
}

.team-text p {
    margin: 0 0 var(--line-height) 0;
}

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


/* ---------------------------------------
   PROJEKT-UNTERSEITEN
--------------------------------------- */

.project-detail-page {
    overflow-x: hidden;
    overflow-y: auto;
}


.project-detail {
    width: 100%;

    padding:
        var(--rand-y)
        var(--projekt-rand-rechts)
        80px
        var(--rand-x);
}


.project-intro {
    display: grid;

    grid-template-columns:
        var(--projekt-spalte-links)
        minmax(0, 1.6fr)
        minmax(0, 1fr);

    column-gap: var(--layout-gap);

    width: 100%;

    transform: translateY(-4px); 
}


.project-intro-title {
    grid-column: 1;
}

.project-intro-data {
    grid-column: 2;
}

.project-intro p {
    margin: 0;
}


.project-detail-image {
    margin: 0;
}

.project-detail-image--large {
    margin-top: 140px;
    width: 100%;
}

.project-detail-image img {
    display: block;
    width: 100%;
    height: auto;
}


.project-text-grid {
    display: grid;

    grid-template-columns:
        var(--projekt-spalte-links)
        minmax(0, 1fr)
        minmax(0, 1fr);

    column-gap: var(--layout-gap);

    margin-top: 14px;
}


.project-text-column {
    grid-column: 2 / 4;
    width: 100%;
    max-width: none; 
}

.project-text-column p {
    margin: 0;
}


.project-gallery {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 28px;

    width: 100%;
    margin-top: 14px;
}

.project-gallery figure {
    margin: 0;
}

.project-gallery img {
    display: block;
    width: 100%;
    height: auto;
}


/* ---------------------------------------
   FADE-IN DER PROJEKTBILDER
--------------------------------------- */

.js .fade-image {
    opacity: 0;
    transform: translateY(80px);

    transition:
        opacity 2s ease,
        transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: 0s;
}

.js .project-gallery .fade-image:nth-child(even) {
    transition-delay: 0.6s;
}

.js .fade-image.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------
   ARCHIV
--------------------------------------- */

.archive-search {
    width: min(300px, 30vw);

    margin: 0;
    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    color: inherit;
    caret-color: #141414;
}

.archive-search::placeholder {
    color: #141414;
    opacity: 1;

    transition:
        opacity 0.4s ease;
}

.archive-search:focus::placeholder {
    opacity: 0;
}


.archive-page {
    width: 100%;

    padding:
        140px
        var(--rand-x)
        var(--rand-y)
        var(--rand-x);
}


.archive-head,
.archive-row {
    display: grid;

    grid-template-columns:
        2.2fr
        1fr
        1.25fr
        1.45fr
        2fr
        0.65fr
        0.55fr;

    column-gap: 28px;

    width: 100%;
    align-items: start;
}


.archive-head {
    margin-bottom: var(--line-height);
}


.archive-sort {
    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    color: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        opacity 0.4s ease;
}


@media (hover: hover) and (pointer: fine) {
    .archive-sort:hover,
    .legal-links a:hover,
    .legal-text a:hover {
        opacity: 0.1;
    }
}


.archive-row {
    margin-bottom: var(--line-height);
}

.archive-number {
    text-align: right;
}

.archive-row.is-hidden {
    display: none;
}

.archive-sort.is-active {
    opacity: 0.1;
}


/* ---------------------------------------
   IMPRESSUM / DATENSCHUTZ LINKS
--------------------------------------- */

.legal-links {
    display: flex;
    gap: var(--legal-gap);

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.legal-links a {
    color: inherit;
    text-decoration: none;

    transition:
        opacity 0.4s ease;
}


.legal-links--fixed {
    position: fixed;
    left: var(--rand-x);
    bottom: var(--rand-y);

    z-index: 100;
}


.legal-links--footer {
    width: 100%;

    margin-top: auto;

    padding:
        clamp(70px, 8vw, 100px)
        var(--rand-x)
        var(--rand-y)
        var(--rand-x);
}


/* ---------------------------------------
   IMPRESSUM / DATENSCHUTZSEITEN
--------------------------------------- */

.legal-page {
    min-height: 100vh;
    min-height: 100dvh;
}


.legal-content {
    width: 100%;

    padding:
        100px
        var(--rand-x)
        60px
        var(--rand-x);
}


.legal-text {
    max-width: 850px;
}


.legal-text h1 {
    margin: 0 0 var(--line-height) 0;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}


.legal-section {
    margin-bottom: var(--line-height);
}


.legal-section p {
    margin: 0 0 var(--line-height) 0;
}


.legal-section p:last-child {
    margin-bottom: 0;
}


.legal-text a {
    color: inherit;
    text-decoration: none;

    transition:
        opacity 0.4s ease;
}


/* ---------------------------------------
   MITTLERE DESKTOPS / KLEINE LAPTOPS
--------------------------------------- */

@media (max-width: 1250px) {

    :root {
        --bildbreite: 68vw;

        --projekt-spalte-links: 250px;
        --projekt-rand-rechts: 8vw;
        --layout-gap: 28px;
    }


    .logo {
        min-width: 330px;
        column-gap: 30px;
    }


    .project-detail-image--large {
        margin-top: 110px;
    }


    .archive-head,
    .archive-row {
        grid-template-columns:
            2fr
            1fr
            1.2fr
            1.4fr
            0.7fr
            0.5fr;

        column-gap: 20px;
    }


    .archive-head > :nth-child(5),
    .archive-row > :nth-child(5) {
        display: none;
    }
}


/* ---------------------------------------
   TABLET / SCHMALES BROWSERFENSTER
--------------------------------------- */

@media (max-width: 950px) {

    :root {
        --bildbreite: 76vw;
        --projekt-rand-rechts: var(--rand-x);
    }


    .logo {
        min-width: 0;
        column-gap: 24px;
    }


    .project-title {
        max-width: 50vw;
    }


    .project-intro {
        display: block;
    }


    .project-intro-data {
        margin-top: var(--line-height);
    }


    .project-detail-image--large {
        margin-top: 80px;
    }


    .project-text-grid {
        display: block;
        margin-top: var(--line-height);
    }


    .project-text-column {
        max-width: 900px;
    }


    .archive-page {
        padding-top: 110px;
    }


    .archive-head,
    .archive-row {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(90px, 0.75fr)
            minmax(0, 1.25fr)
            minmax(50px, 0.45fr);

        column-gap: 18px;
    }


    .archive-head > :nth-child(3),
    .archive-row > :nth-child(3),
    .archive-head > :nth-child(5),
    .archive-row > :nth-child(5),
    .archive-head > :nth-child(6),
    .archive-row > :nth-child(6) {
        display: none;
    }
}


/* ---------------------------------------
   SMARTPHONE
--------------------------------------- */

@media (max-width: 700px) {

    :root {
        --bildbreite: 88vw;
        --legal-gap: 18px;

        --home-image-top: 76px;
        --home-image-bottom: 62px;
    }


    .logo {
        column-gap: 18px;
    }


    .project-title {
        max-width: 55vw;
    }


    .projects {
        scroll-snap-type: x mandatory;
        touch-action: pan-x;
    }


    .project {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }


    .page-content,
    .team-page,
    .legal-content {
        padding-top: 84px;
    }


    .team-page {
        padding-left: var(--rand-x);
        padding-right: var(--rand-x);
    }


    .project-detail {
        padding:
            var(--rand-y)
            var(--rand-x)
            60px
            var(--rand-x);
    }


    .project-intro-data {
        margin-top: var(--line-height);
    }


    .project-detail-image--large {
        margin-top: 64px;
    }


    .project-gallery {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 18px;
    }


    .js .fade-image {
        transform: translateY(50px);
    }


    .js .project-gallery .fade-image:nth-child(even) {
        transition-delay: 0s;
    }


    /* ---------------------------------------
       ARCHIV
    --------------------------------------- */

    .archive-search {
        width: min(140px, 36vw);
    }


    .archive-page {
        padding-top: 90px;
    }


    .archive-head,
    .archive-row {
        grid-template-columns:
            minmax(0, 1fr)
            180px
            42px;

        column-gap: 14px;
    }


    /* Mobile:
       sichtbare Prioritäten = Projekt, Jahr, Nr.
    */

    .archive-head > :nth-child(3),
    .archive-head > :nth-child(4),
    .archive-head > :nth-child(5),
    .archive-head > :nth-child(6),
    .archive-row > :nth-child(3),
    .archive-row > :nth-child(5),
    .archive-row > :nth-child(6) {
        display: none;
    }


    /* Überschriften */

    .archive-head > :nth-child(1) {
        grid-column: 1;
        text-align: left;
    }


    .archive-head > :nth-child(2) {
        grid-column: 2;
        text-align: left;
    }


  /* Nr.-Überschrift */

    .archive-head > :nth-child(7) {
        grid-column: 3;

        justify-self: end;

        width: auto;
        margin: 0;
        padding: 0;

        text-align: right;
    }


    /* Projekt */

    .archive-row > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        text-align: left;
    }


    /* Jahr */

    .archive-row > :nth-child(2) {
        grid-column: 2;
        grid-row: 1;

        text-align: left;

        white-space: nowrap;
    }


    /* Nummer */

.archive-row > :nth-child(7) {
    grid-column: 3;
    grid-row: 1;

    justify-self: end;

    margin: 0;
    padding: 0;

    text-align: right;
    white-space: nowrap;
}


    /* Aufgabe als zweite Zeile */

    .archive-row > :nth-child(4) {
        display: block;

        grid-column: 1 / -1;
        grid-row: 2;

        text-align: left;
    }


    /* ---------------------------------------
       FOOTER / LEGAL
    --------------------------------------- */

    .legal-links--footer {
        padding-top: 64px;
    }


    .legal-text {
        max-width: 100%;
    }

}


/* ---------------------------------------
   SEHR KLEINE SMARTPHONES
--------------------------------------- */

@media (max-width: 420px) {

    :root {
        --home-image-top: 72px;
        --home-image-bottom: 58px;
    }


    .logo {
        column-gap: 14px;
    }


    .project-title {
        max-width: 52vw;
    }


    .archive-search {
        width: 34vw;
    }


    /* Wenn es wirklich eng wird, bleibt nur Projekt + Jahr + Nr. */

    .archive-row > :nth-child(4) {
        display: none;
    }
}


/* ---------------------------------------
   TOUCH-NAVIGATION
--------------------------------------- */

@media (hover: none), (pointer: coarse) {

    .logo.is-mobile-a-open {
        position: absolute;
        top: 0;
        right: 0;

        min-width: 0;

        padding-left: var(--rand-x);
        background: #fff;

        z-index: 2;
    }
}


/* ---------------------------------------
   KLEINE BILDSCHIRMHÖHEN
--------------------------------------- */

@media (max-height: 650px) {

    :root {
        --home-image-bottom: calc(var(--rand-y) + 36px);
    }


    .project-detail-image--large {
        margin-top: 72px;
    }
}


/* ---------------------------------------
   REDUZIERTE BEWEGUNG
--------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .logo-a,
    .logo-t,
    .logo-h,
    .a-short,
    .a-long,
    .a-archive,
    .t-short,
    .t-long,
    .h-short,
    .h-long,
    .submenu-a,
    .project img,
    .legal-links a,
    .legal-text a,
    .archive-sort {
        transition: none;
    }


    .js .fade-image {
        opacity: 1;
        transform: none;
        transition: none;
    }
}




/* ---------------------------------------
   ARCHIV - KLEINE ANSICHT FEINJUSTIERUNG
--------------------------------------- */

@media (max-width: 700px) {

    .archive-head,
    .archive-row {
        grid-template-columns:
            minmax(0, 1fr)
            140px
            42px;

        column-gap: 14px;
    }


    /* Projekt */
    .archive-head > :nth-child(1),
    .archive-row > :nth-child(1) {
        grid-column: 1;
        text-align: left;
    }


    /* Jahr */
    .archive-head > :nth-child(2),
    .archive-row > :nth-child(2) {
        grid-column: 2;
        text-align: left;
    }


    /* Nummer-Überschrift */
    .archive-head > :nth-child(7) {
        grid-column: 3;
        text-align: left;
    }


    /* eigentliche Projektnummer */
    .archive-row > :nth-child(7) {
        grid-column: 3;
        text-align: right;
    }


    /* Aufgabe unter dem Projektnamen */
    .archive-row > :nth-child(4) {
        grid-column: 1 / 3;
        text-align: left;
    }

}