/* =========================================================
   GRUNDEINSTELLUNGEN
========================================================= */

/* =========================================================
   SCHRIFTART INTER
========================================================= */

@font-face {
    font-family: "Inter";

    src:
        url("../assets/fonts/inter/Inter-VariableFont_opsz,wght.ttf")
        format("truetype");

    font-style: normal;
    font-weight: 100 900;

    font-display: swap;
}

:root {
    --color-background: #ffffff;
    --color-text: #111111;

    --page-max-width: 1180px;
    --hero-max-width: 1320px;

    --page-padding: clamp(24px, 5vw, 80px);
    --grid-gap: clamp(28px, 4vw, 70px);

    --section-spacing: clamp(90px, 13vw, 190px);

    --card-radius: 22px;

    --transition-fast: 220ms ease;

    --transition-medium:
        450ms cubic-bezier(0.2, 0.8, 0.2, 1);

    --shadow-soft:
        0 8px 20px rgba(0, 0, 0, 0.11);
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

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

    font-family:
        Inter,
		Arial,
        Helvetica,
        sans-serif;

    font-size: 17px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   TYPOGRAFIE
========================================================= */

h1,
h2,
h3,
p {
    margin-top: 0;
}


h1 {
    margin-bottom: 0.05em;

    font-size: clamp(3.4rem, 7vw, 6.5rem);
    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -0.04em;
}


h2 {
    margin-bottom: 0.45em;

    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -0.025em;
}


h3 {
    margin-top: 1.6em;
    margin-bottom: 0.55em;

    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 500;

    line-height: 1.15;
}


p {
    margin-bottom: 1.4em;
}


/* =========================================================
   NAVIGATION
========================================================= */



.site-header {
    position: fixed;

    top: clamp(22px, 3vw, 42px);
    left: clamp(22px, 3vw, 42px);

    z-index: 1000;

    /*
        Position bleibt genau wie bisher.
    */
    max-width: calc(100vw - 44px);
}


/* =========================================================
   GESAMTE NAVIGATION
========================================================= */

.main-navigation {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
}


/* Eine einzelne Navigationsreihe */

.navigation-row {
    display: flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;
}


/* =========================================================
   ERSTE REIHE
========================================================= */

.navigation-row--first {
    display: flex;
    align-items: center;

    gap: 7px;
}


.navigation-first-links {
    display: none;

    align-items: center;

    gap: 7px;
}


/* =========================================================
   ZWEITE + DRITTE REIHE
========================================================= */

.navigation-row--additional {
    display: none;
}


/* Sobald Navigation geöffnet ist */

.site-header[data-open="true"] .navigation-first-links {
    display: flex;
}


.site-header[data-open="true"] .navigation-row--additional {
    display: flex;
}


/* =========================================================
   MENÜBUTTON

   geschlossen:
   Kreis

   geöffnet:
   schwarze Startseite-Pille
========================================================= */

.menu-button {
    display: flex;

    align-items: center;

    flex: 0 0 auto;

    width: 42px;
    max-width: 42px;
    height: 42px;

    padding: 0;

    overflow: hidden;

    border: 1px solid #111111;
    border-radius: 999px;

    background: #ffffff;
    color: #111111;

    font: inherit;

    font-size: 0.9rem;
    font-weight: 500;

    white-space: nowrap;

    cursor: pointer;

    transition:
        width 300ms ease,
        max-width 300ms ease,
        background-color 220ms ease,
        color 220ms ease;
}


.menu-button__icon {
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    margin-left: 5px;

    object-fit: contain;

    transition:
        filter 220ms ease;
}


.menu-button__label {
    display: block;

    max-width: 0;

    margin-left: 0;
    margin-right: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-width 300ms ease,
        margin 300ms ease,
        opacity 180ms ease;
}


/* =========================================================
   MENÜ GEÖFFNET
========================================================= */

.site-header[data-open="true"] .menu-button {
    width: 128px;
    max-width: 128px;

    background: #222222;
    color: #ffffff;

    border-color: #222222;
}


.site-header[data-open="true"] .menu-button__icon {
    filter: invert(1);
}


.site-header[data-open="true"] .menu-button__label {
    max-width: 80px;

    margin-left: 8px;
    margin-right: 13px;

    opacity: 1;
}


/* =========================================================
   HOVER MENÜBUTTON
========================================================= */

.menu-button:hover {
    background: #222222;
    color: #ffffff;
}


.menu-button:hover .menu-button__icon {
    filter: invert(1);
}


.menu-button:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 4px;
}


/* =========================================================
   NAVIGATIONSPILLEN
========================================================= */

.navigation-link {
    display: inline-flex;

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

    min-height: 42px;

    padding: 5px 14px;

    border: 1px solid #222222;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.96);

    color: #111111;

    font-size: 0.9rem;
    font-weight: 400;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color 220ms ease,
        color 220ms ease;
}


.navigation-link:hover,
.navigation-link:focus-visible,
.navigation-link.is-active {
    background: #222222;
    color: #ffffff;
}


.navigation-link:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 2px;
}

/* =========================================================
   3-SPALTEN-SYSTEM
========================================================= */

.content-grid {
    display: grid;

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

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

    row-gap:
        clamp(36px, 5vw, 70px);

    width:
        min(
            calc(100% - (2 * var(--page-padding))),
            var(--page-max-width)
        );

    margin-inline: auto;
}


.grid-column-1 {
    grid-column: 1;
}


.grid-column-2 {
    grid-column: 2;
}


.grid-column-3 {
    grid-column: 3;
}


.grid-span-2 {
    grid-column: span 2;
}


.grid-span-all {
    grid-column: 1 / -1;
}


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

.hero {
    position: relative;

    min-height: 100svh;
}


.hero__grid {
    display: grid;

    grid-template-columns:
    1.2fr 0.6fr 1.2fr;

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

    align-items: end;

    width: 100%;
    min-height: 100svh;

    /*
        Mehr Abstand nach oben schützt den Hero-Inhalt
        bei kleineren Bildschirmhöhen vor der Navigation.

        Navigation selbst wird dadurch NICHT bewegt.
    */

    padding-top: 150px;

    /*
        Rechts / links bleiben die Elemente am Rand
        orientiert, aber nicht direkt daran.
    */

    padding-right:
        clamp(55px, 6vw, 115px);

    /*
        Größerer Abstand zur Bildschirmunterkante.
    */

    padding-bottom:
        clamp(80px, 10vh, 115px);

    padding-left:
        clamp(55px, 6vw, 115px);
}


/* =========================================================
   PORTFOLIO-TITEL
========================================================= */

.hero__title-area {
    grid-column: 1;

    align-self: end;
    justify-self: start;

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

    text-align: left;
}


.hero__title-area h1,
.hero__subtitle {
    margin-left: 0;
    padding-left: 0;

    text-align: left;
}


.hero__title-area h1 {
    margin-bottom: 0.06em;

    font-size: clamp(5rem, 7.5vw, 9rem);

    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.045em;

    white-space: nowrap;
}


.hero__subtitle {
    margin-top: 0.5rem;
    margin-bottom: 0;

    font-size: clamp(1.5rem, 2vw, 2rem);

    font-weight: 400;
    line-height: 1.2;
}



/* =========================================================
   VÖGEL – STARTSEITE
========================================================= */

.birds {
    grid-column: 3;

    position: relative;

    align-self: end;
    justify-self: end;

    width: min(100%, 640px);

    /*
        Das Verhältnis entspricht ungefähr
        dem Familienportrait der vier Vögel.
    */
    aspect-ratio: 1.92 / 1;

    overflow: visible;
}


/* =========================================================
   EINZELNER VOGEL
========================================================= */

.bird {
    position: absolute;

    left: var(--bird-x);
    bottom: 0;

    width: max-content;
    height: var(--bird-height);

    /*
        Positionierung erfolgt über die MITTE des Vogels.
        Dadurch beeinflussen unterschiedliche Bildbreiten
        nicht mehr die Reihenfolge.
    */
    transform: translateX(-50%);

    z-index: 1;

    --bird-stretch: 16px;
    --bird-leg-scale: 1;
}


/* =========================================================
   VERGRÖSSERTE HOVER-ZONE
========================================================= */

.bird::before {
    content: "";

    position: absolute;

    /*
        Der unsichtbare Bereich reicht 70 px
        über den Vogel hinaus.
    */
    top: -70px;
    right: -12px;
    bottom: -8px;
    left: -12px;

    z-index: 5;

    background: transparent;

    pointer-events: auto;
}


/* =========================================================
   VOGELGRAFIK
========================================================= */

.bird__visual {
    position: relative;

    display: inline-block;

    height: 100%;
}


.bird__sizer {
    display: block;

    width: auto;
    height: 100%;

    visibility: hidden;

    pointer-events: none;
}


.bird__body,
.bird__legs {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   KÖRPER
========================================================= */

.bird__body {
    /*
        Alles unterhalb des Beinansatzes wird
        auf dieser Ebene ausgeblendet.
    */
    clip-path:
        inset(
            0
            0
            calc(100% - var(--leg-start))
            0
        );

    transform: translateY(0);

    transition:
        transform
        360ms
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   BEINE
========================================================= */

.bird__legs {
    /*
        Alles oberhalb des Beinansatzes wird
        auf dieser Ebene ausgeblendet.
    */
    clip-path:
        inset(
            var(--leg-start)
            0
            0
            0
        );

    transform-origin: center bottom;

    transform: scaleY(1);

    transition:
        transform
        360ms
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HOVER

   Körper wandert nach oben.
   Beinbereich wird exakt entsprechend verlängert.
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .bird:hover .bird__body {
        transform:
            translateY(
                calc(-1 * var(--bird-stretch))
            );
    }


    .bird:hover .bird__legs {
        transform:
            scaleY(
                var(--bird-leg-scale)
            );
    }

}


/* =========================================================
   POSITIONEN UND GRÖSSEN

   Orientierung am ursprünglichen Familienportrait.
========================================================= */


/* kleiner Vogel links */

.bird--1 {
    --bird-x: 11%;
    --bird-height: 63%;

    --leg-start: 64%;
}


/* großer Vogel links */

.bird--2 {
    --bird-x: 34%;
    --bird-height: 100%;

    --leg-start: 47%;
}


/* mittlerer Vogel */

.bird--3 {
    --bird-x: 58%;
    --bird-height: 70%;

    --leg-start: 63%;
}


/* großer Vogel rechts */

.bird--4 {
    --bird-x: 89%;
    --bird-height: 96%;

    --leg-start: 53%;
}




/* =========================================================
   INHALTSSEKTIONEN
========================================================= */

.content-section {
    padding-block: var(--section-spacing);
}


.content-section--compact {
    padding-top: 30px;
}


.text-block {
    max-width: 440px;
}


.text-block p {
    font-size: clamp(1.05rem, 1.25vw, 1.15rem);
    line-height: 1.65;
}


.portrait {
    align-self: end;

    margin: 0;
}


.portrait img {
    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   PROFIL / KONTAKT
========================================================= */

.profile-sidebar {
    border-left:
        1px solid rgba(0, 0, 0, 0.45);

    padding-left:
        clamp(24px, 3vw, 48px);
}

.profile-sidebar p {
    font-size: 1.05rem;
    line-height: 1.65;
}

.profile-sidebar section:first-child h3 {
    margin-top: 0;
}


.profile-sidebar a {
    text-decoration: none;
}


.profile-sidebar a:hover,
.profile-sidebar a:focus-visible {
    text-decoration: underline;
}


.software-list {
    line-height: 1.8;
}


/* =========================================================
   REFERENZEN
========================================================= */

.references {
    padding-top: 30px;

    padding-bottom:
        clamp(100px, 15vw, 220px);
}

.references__intro {
    max-width: 390px;
}

.references__intro p {
    font-size: 1.05rem;
    line-height: 1.65;
}

/* =========================================================
   THEMENBALKEN
========================================================= */

.topic-area {
    position: relative;

    min-height: clamp(260px, 28vw, 360px);
}


/* Grunddesign aller fünf Themenbalken */

.topic-tag {
    position: absolute;

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

    min-width: 150px;

    padding: 16px 24px;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.13);

    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    font-weight: 500;

    white-space: nowrap;

    animation-name: topic-wobble;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;

    will-change: transform;
}


/* =========================================================
   EINZELPOSITIONEN
========================================================= */

.topic-tag--webdesign {
    top: 28%;
    left: 19%;

    animation-duration: 4.2s;
}


.topic-tag--social {
    top: 7%;
    left: 40%;

    animation-duration: 3.8s;
    animation-delay: -1.7s;
}


.topic-tag--strategy {
    top: 30%;
    right: 17%;

    animation-duration: 4.5s;
    animation-delay: -2.6s;
}


.topic-tag--branding {
    bottom: 8%;
    left: 31%;

    animation-duration: 4s;
    animation-delay: -0.8s;
}


.topic-tag--layout {
    bottom: 11%;
    left: 51%;

    animation-duration: 4.3s;
    animation-delay: -3.1s;
}


/* =========================================================
   WACKELBEWEGUNG
========================================================= */

@keyframes topic-wobble {

    0% {
        transform:
            translate(-10px, 5px)
            rotate(-2deg);
    }

    25% {
        transform:
            translate(7px, -8px)
            rotate(1.2deg);
    }

    50% {
        transform:
            translate(12px, 5px)
            rotate(2deg);
    }

    75% {
        transform:
            translate(-5px, 10px)
            rotate(-1deg);
    }

    100% {
        transform:
            translate(-11px, -4px)
            rotate(1.5deg);
    }
}


/* =========================================================
   PROJEKT-GALERIE
========================================================= */

.project-gallery {
    display: grid;

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

    align-items: start;

    gap:
        clamp(14px, 2vw, 28px);

    margin-top:
        clamp(40px, 6vw, 80px);
}


.project-column {
    display: flex;

    flex-direction: column;

    gap:
        clamp(14px, 2vw, 28px);
}


/* =========================================================
   PROJEKTKACHELN
========================================================= */

.project-card {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    border-radius: var(--card-radius);

    background: #eeeeee;

    color: #ffffff;

    text-decoration: none;

    isolation: isolate;
}


.project-card--landscape {
    aspect-ratio: 1.32 / 1;
}


.project-card--portrait {
    aspect-ratio: 0.88 / 1;
}


.project-card__image {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition-medium);
}


/* Schwarzer Verlauf */

.project-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;

    height: 48%;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.63) 100%
        );

    pointer-events: none;
}


/* Projekttext */

.project-card__text {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    transition:
        transform var(--transition-medium),
        opacity var(--transition-medium);
}


.project-card__text strong {
    font-size:
        clamp(1rem, 1.8vw, 1.45rem);

    line-height: 1.1;
}


.project-card__text span {
    margin-top: 2px;

    font-size:
        clamp(0.9rem, 1.4vw, 1.15rem);

    line-height: 1.1;
}


/* =========================================================
   PROJEKT-HOVER
========================================================= */

@media (hover: hover) {

    .project-card:hover .project-card__image,
    .project-card:focus-visible .project-card__image {
        transform: scale(1.07);
    }


    .project-card:hover .project-card__text,
    .project-card:focus-visible .project-card__text {
        transform:
            translateY(calc(100% + 40px));

        opacity: 0;
    }

}


.project-card:focus-visible {
    outline: 3px solid #111111;
    outline-offset: 5px;
}


/* =========================================================
   SCROLL-REVEAL – TEXTE UND BILDER
========================================================= */


/* =========================================================
   HERO-TEXT

   Nur Portfolio und Etta Schoof | 2026
   werden Buchstabe für Buchstabe animiert.
========================================================= */

.has-reveal .hero-letter-text .reveal-char {
    display: inline-block;

    opacity: 0;

    transform: translateY(0.65em);

    filter: blur(4px);

    transition:
        opacity 700ms ease,
        transform 1050ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 900ms ease;

    transition-delay:
        calc(
            var(--reveal-delay, 0ms) +
            var(--char-delay, 0ms)
        );

    will-change:
        opacity,
        transform,
        filter;
}


.has-reveal
.hero-letter-text.is-visible
.reveal-char {
    opacity: 1;

    transform: translateY(0);

    filter: blur(0);
}


/* =========================================================
   HERO-WÖRTER ZUSAMMENHALTEN
========================================================= */

.hero-word {
    display: inline-block;

    white-space: nowrap;
}


/*
   Auf der Zero_G-Seite soll "nutrition"
   komplett unter "Zero_G" stehen.
*/

.project-page--zero-g
.project-hero__copy h1
.hero-word + .hero-word {
    display: block;
}


/* =========================================================
   NORMALE TEXTE

   Überschriften und Fließtexte außerhalb der Hero-Sektion
   bewegen sich als GANZER BLOCK von links herein.
========================================================= */

.has-reveal .reveal-block-text {
    opacity: 0;

    transform: translateX(-65px);

    filter: blur(4px);

    transition:
        opacity 900ms ease,
        transform 1350ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1100ms ease;

    transition-delay:
        var(--reveal-delay, 0ms);

    will-change:
        opacity,
        transform,
        filter;
}


.has-reveal .reveal-block-text.is-visible {
    opacity: 1;

    transform: translateX(0);

    filter: blur(0);
}


/* =========================================================
   BILDER

   Bleiben wie bisher:
   gerade von links nach rechts.
========================================================= */

.has-reveal .reveal-image {
    opacity: 0;

    transform: translateX(-70px);

    filter: blur(5px);

    transition:
        opacity 1000ms ease,
        transform 1400ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1200ms ease;

    transition-delay:
        var(--reveal-delay, 0ms);

    will-change:
        opacity,
        transform,
        filter;
}


.has-reveal .reveal-image.is-visible {
    opacity: 1;

    transform: translateX(0);

    filter: blur(0);
}

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

@media (max-width: 900px) {

    :root {
        --page-padding: 32px;
        --grid-gap: 30px;
    }


    .hero__grid,
    .content-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .hero__title-area {
        grid-column: 1;
    }


    .birds {
        grid-column: 2;
    }


    .grid-column-1 {
        grid-column: 1;
    }


    .grid-column-2 {
        grid-column: 2;
    }


    .grid-column-3 {
        grid-column: 2;
    }


    .grid-span-all {
        grid-column: 1 / -1;
    }


    .profile-sidebar {
        margin-top: 20px;
    }


    .project-gallery {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.project-column:last-child {
    grid-column: 1 / -1;

    display: grid;

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

}


/* =========================================================
   SMARTPHONE
========================================================= */
	


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    :root {
        --page-padding: 20px;
        --section-spacing: 90px;
    }


    body {
        font-size: 15px;
    }


    .site-header {
        top: 16px;
        left: 16px;

        max-width:
            calc(100vw - 32px);
    }


    .menu-button {
        width: 38px;
        height: 38px;
    }


    .main-navigation {
        max-width:
            calc(100vw - 78px);
    }


    .navigation-link {
        min-height: 31px;

        padding-inline: 10px;

        font-size: 0.8rem;
    }


/* Hero */

.hero {
    min-height: 100svh;
}


.hero__grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(110px, 0.75fr);

    gap: 20px;

    min-height: 100svh;

    padding:
        100px
        20px
        40px;
}


.hero__title-area {
    grid-column: 1;

    align-self: end;
}


.birds {
    grid-column: 2;

    align-self: end;
    justify-self: end;

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

    min-height: 0;
}




    /* Inhaltsraster */

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


    .grid-column-1,
    .grid-column-2,
    .grid-column-3,
    .grid-span-2,
    .grid-span-all {
        grid-column: 1;
    }


    .portrait {
        max-width: 340px;
    }


    .text-block {
        max-width: 520px;
    }


    .profile-sidebar {
        border-left: 0;

        border-top:
            1px solid rgba(0, 0, 0, 0.35);

        padding-top: 30px;
        padding-left: 0;
    }


    /* Themenbalken */

    .topic-area {
        position: static;

        display: grid;

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

        gap: 18px;

        min-height: 0;
    }


    .topic-tag {
        position: static;

        min-width: 0;

        padding: 14px 12px;

        font-size: 1rem;
    }


    .topic-tag--social {
        grid-column: 2;
    }


    /* Projektgalerie */

    .project-gallery {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .project-column,
    .project-column:last-child {
        grid-column: auto;

        display: flex;

        flex-direction: column;

        gap: 18px;
    }


    .project-card--landscape {
        aspect-ratio: 1.25 / 1;
    }


    .project-card--portrait {
        aspect-ratio: 0.95 / 1;
    }

}



/* =========================================================
   PROJEKTSEITEN – GEMEINSAMES GRUNDLAYOUT
========================================================= */


/* Zwei Spalten verbinden */

.grid-columns-1-2 {
    grid-column: 1 / 3;
}


.grid-columns-2-3 {
    grid-column: 2 / 4;
}



/* =========================================================
   PROJEKT-HERO
========================================================= */

.project-page .project-hero {
    min-height: 100svh;
}


.project-page .project-hero__grid {
    min-height: 100svh;

    align-items: end;

    padding-top: 140px;
    padding-bottom: clamp(70px, 9vh, 110px);
}


.project-page .project-hero__copy {
    grid-column: 3;

    width: 100%;
    max-width: 390px;
}


/*
   Überschrift bewusst deutlich kleiner
   als "Portfolio" auf der Startseite.
*/

.project-page .project-hero__copy h1 {
    margin-bottom: 0.2em;

    font-size: clamp(2.5rem, 3.8vw, 4.1rem);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.035em;

    white-space: normal;
}


.project-page .project-hero__meta {
    margin-top: 0;
    margin-bottom: 1.2rem;

    font-size: clamp(0.85rem, 1vw, 1rem);

    font-weight: 500;

    letter-spacing: 0.02em;
}


.project-page .project-hero__intro {
    margin-bottom: 1.4rem;

    font-size: 1.05rem;
    line-height: 1.6;
}


.project-page .project-hero__credit {
    margin-bottom: 0;

    font-size: 0.95rem;
    line-height: 1.5;
}



/* =========================================================
   PROJEKT-INHALTE
========================================================= */

.project-section {
    padding-block: clamp(80px, 10vw, 150px);
}


.project-copy {
    max-width: 390px;
}


.project-copy h2 {
    margin-bottom: 0.7em;

    font-size: clamp(1.75rem, 2.5vw, 2.4rem);

    font-weight: 500;
}


.project-copy p {
    font-size: 1.05rem;
    line-height: 1.65;
}


.project-media {
    align-self: center;

    margin: 0;
}


.project-media img {
    width: 100%;
    height: auto;
}


/* =========================================================
   NOTIZBUCH
========================================================= */

.zero-g-notebook {
    align-self: center;
}


.zero-g-notebook img {
    width: 100%;

    max-width: 760px;

    margin-inline: auto;
}



/* =========================================================
   LOGO-BEREICH
========================================================= */

.zero-g-logo-intro {
    padding-right: clamp(25px, 3vw, 50px);

    border-right:
        1px solid rgba(0, 0, 0, 0.4);
}


.zero-g-logo-descriptions {
    display: flex;

    flex-direction: column;

    gap: clamp(32px, 4vw, 60px);
}


.zero-g-logo-descriptions section {
    margin: 0;
}


.zero-g-logo-descriptions h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
}


.zero-g-logo-descriptions p {
    font-size: 1.05rem;
    line-height: 1.65;
}


.zero-g-logo-images {
    display: flex;

    flex-direction: column;

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

    gap: clamp(30px, 5vw, 70px);
}


.zero-g-logo-images figure {
    width: 100%;

    margin: 0;
}


.zero-g-logo-images img {
    width: 100%;

    max-width: 180px;

    margin-inline: auto;

    object-fit: contain;
}



/* =========================================================
   FARBWELT
========================================================= */

.zero-g-colorworld-section {
    align-items: start;
}


.zero-g-colors {
    display: grid;

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

    margin: 0;
}


.zero-g-color-card {
    display: flex;

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

    min-height: clamp(180px, 20vw, 260px);

    margin: 0;
    padding: clamp(20px, 3vw, 36px);
}


.zero-g-color-card--green {
    background: #8AF000;
}


.zero-g-color-card--blue {
    background: #241E5F;
}


.zero-g-color-card img {
    display: block;

    width: 100%;
    max-width: 140px;
    height: auto;

    object-fit: contain;
}


.zero-g-colorworld-copy {
    align-self: start;
}


.zero-g-colorworld-copy h2 {
    margin-top: 0;
}



/* =========================================================
   TYPOGRAFIE
========================================================= */

.zero-g-type-image {
    align-self: center;
}


.zero-g-type-image img {
    width: 100%;

    max-width: 760px;

    margin-inline: auto;
}



/* =========================================================
   BROSCHÜRE
========================================================= */

.zero-g-brochure {
    display: flex;

    flex-direction: column;

    gap: clamp(28px, 5vw, 65px);

    width: 100%;

    margin-top: clamp(60px, 8vw, 110px);
}


.zero-g-brochure figure {
    width: 100%;

    margin: 0;
}


.zero-g-brochure img {
    display: block;

    width: min(100%, 1050px);
    height: auto;

    margin-inline: auto;
}


.zero-g-brochure img {
    display: block;

    width: min(100%, 1050px);
    height: auto;

    margin-inline: auto;
}


/* =========================================================
   ZERO_G – DESIGNMANUAL
========================================================= */

.zero-g-manual-section {
    padding-top:
        clamp(100px, 12vw, 180px);

    padding-bottom:
        clamp(100px, 12vw, 180px);
}


.zero-g-manual-copy {
    margin-bottom:
        clamp(45px, 6vw, 80px);
}


.zero-g-pdf-viewer {
    width: 100%;

    overflow: hidden;

    border-radius: 20px;

    background: #eeeeee;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.14);
}


.zero-g-pdf-viewer iframe {
    display: block;

    width: 100%;
    height: clamp(650px, 82vh, 1000px);

    border: 0;
}


.zero-g-pdf-fallback {
    margin-top: 20px;

    font-size: 0.95rem;
}


.zero-g-pdf-fallback a {
    color: inherit;

    text-decoration: underline;
    text-underline-offset: 0.18em;
}


.zero-g-pdf-fallback a:hover {
    text-decoration-thickness: 2px;
}



/* =========================================================
   NÄCHSTES PROJEKT
========================================================= */

.next-projects {
    padding-top: clamp(100px, 12vw, 180px);
}



/* =========================================================
   NÄCHSTES PROJEKT
========================================================= */

.next-projects {
    padding-top: clamp(100px, 12vw, 180px);
}


.next-projects__intro {
    max-width: 430px;
}


.next-projects__intro p {
    font-size: 1.05rem;
    line-height: 1.65;
}



/* =========================================================
   PROJEKTSEITE – TABLET
========================================================= */

@media (max-width: 900px) {

    .project-page .project-hero__copy {
        grid-column: 2;
    }


    .grid-columns-1-2,
    .grid-columns-2-3 {
        grid-column: 1 / -1;
    }


    .zero-g-logo-intro {
        grid-column: 1;

        border-right: 0;
        padding-right: 0;
    }


    .zero-g-logo-descriptions {
        grid-column: 2;
    }


    .zero-g-logo-images {
        grid-column: 1 / -1;

        display: grid;

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

        align-items: center;
    }

}



/* =========================================================
   PROJEKTSEITE – SMARTPHONE
========================================================= */

@media (max-width: 640px) {

.project-page .project-hero {
    min-height: 100svh;
}


.project-page .project-hero__grid {
    min-height: 100svh;

    padding:
        110px
        20px
        55px;
}

    .project-page .project-hero__copy {
        grid-column: 1;

        max-width: 100%;
    }


    .project-page .project-hero__copy h1 {
        font-size:
            clamp(2.5rem, 12vw, 4rem);
    }


    .grid-columns-1-2,
    .grid-columns-2-3 {
        grid-column: 1;
    }


    .project-section {
        padding-block: 75px;
    }


    .project-copy {
        max-width: 100%;
    }


    .zero-g-logo-intro,
    .zero-g-logo-descriptions,
    .zero-g-logo-images {
        grid-column: 1;
    }


    .zero-g-logo-intro {
        padding-bottom: 35px;

        border-right: 0;
        border-bottom:
            1px solid rgba(0, 0, 0, 0.35);
    }


    .zero-g-logo-images {
        display: grid;

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

        gap: 18px;
    }


    .zero-g-logo-images img {
        max-width: 110px;
    }


.zero-g-colors {
    grid-template-columns: 1fr;
}


.zero-g-color-card {
    min-height: 180px;
    padding: 20px;
}


.zero-g-color-card img {
    max-width: 110px;
}


    .zero-g-brochure {
        margin-top: 50px;

        gap: 24px;
    }

	
	.zero-g-pdf-viewer {
    border-radius: 14px;
}


.zero-g-pdf-viewer iframe {
    height: 70vh;
}


.zero-g-manual-copy {
    margin-bottom: 35px;
}
	
	
	
}


/* =========================================================
   GORCH-FOCK-LAUF SOCIAL MEDIA
========================================================= */


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

.project-page--gfl-socialmedia
.project-hero__copy {
    max-width: 420px;
}


.project-page--gfl-socialmedia
.project-hero__copy h1 {
    max-width: 410px;

    font-size:
        clamp(2.35rem, 3.5vw, 3.8rem);

    line-height: 0.98;
}


/*
   Die geöffnete aktuelle Navigationspille
   braucht wegen "GFL Social Media" mehr Platz.
*/

.project-page--gfl-socialmedia
.site-header[data-open="true"]
.menu-button {
    width: 170px;
    max-width: 170px;
}


.project-page--gfl-socialmedia
.site-header[data-open="true"]
.menu-button__label {
    max-width: 120px;
}



/* =========================================================
   INSTAGRAM-POSTS – ALLGEMEIN
========================================================= */

.gfl-social-post {
    margin: 0;

    background: #ffffff;

    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14);

    overflow: hidden;
}


.gfl-social-post img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: inherit;
}



/* =========================================================
   ZWEI HERVORGEHOBENE POSTS
========================================================= */

.gfl-social-feature-posts {
    display: grid;

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

    align-items: start;

    gap: clamp(28px, 4vw, 60px);

    max-width: 650px;

    justify-self: center;
}


.gfl-social-feature-posts
.gfl-social-post {
    max-width: 270px;
}



/* =========================================================
   FEED-RASTER
========================================================= */

.gfl-social-feed-section {
    padding-top: 20px;
}


.gfl-social-feed-grid {
    display: grid;

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

    gap:
        clamp(30px, 4vw, 58px)
        clamp(24px, 3vw, 45px);

    align-items: start;
}


.gfl-social-feed-grid
.gfl-social-post {
    width: 100%;
}



/* =========================================================
   INSTAGRAM-RECAP
========================================================= */

.gfl-recap-section {
    padding-top:
        clamp(110px, 13vw, 190px);
}


.gfl-instagram-embed {
    display: flex;

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

    min-width: 0;
}


/*
   Instagram vergibt dem Embed selbst teilweise
   eigene Inline-Größen.

   Diese Regel hält es innerhalb unseres Rasters.
*/

.gfl-instagram-embed {
    display: flex;

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

    min-width: 0;
}


/*
   Instagram-Beitrag nicht unnötig breit ziehen.
   Die Höhe bleibt automatisch beim Originalverhältnis.
*/

.gfl-instagram-embed .instagram-media {
    width: min(100%, 430px) !important;

    min-width: 0 !important;
    max-width: 430px !important;

    margin: 0 !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14) !important;
}


/*
   Instagram erzeugt nach dem Laden ein eigenes iframe.
   Auch dieses bekommt die Rundung.
*/

.gfl-instagram-embed iframe {
    display: block;

    width: 100% !important;

    border: 0 !important;
    border-radius: 20px !important;

    overflow: hidden;
}


.gfl-recap-copy {
    align-self: center;
}



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

@media (max-width: 900px) {

    .gfl-social-feature-posts {
        grid-column: 1 / -1;

        max-width: 600px;

        margin-inline: auto;
    }


    .gfl-social-feed-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .gfl-instagram-embed {
        grid-column: 1;
    }


    .gfl-recap-copy {
        grid-column: 2;
    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .project-page--gfl-socialmedia
    .project-hero__copy h1 {
        max-width: 100%;

        font-size:
            clamp(2.3rem, 11vw, 3.7rem);
    }


    .project-page--gfl-socialmedia
    .site-header[data-open="true"]
    .menu-button {
        width: 150px;
        max-width: 150px;
    }


    .gfl-social-feature-posts {
        grid-column: 1;

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

        gap: 18px;

        width: 100%;
    }


    .gfl-social-feed-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px 16px;
    }


    .gfl-instagram-embed,
    .gfl-recap-copy {
        grid-column: 1;
    }


    .gfl-recap-copy {
        margin-top: 35px;
    }

}



/* =========================================================
   JVA PROJEKTSEITE
========================================================= */


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

.project-page--jva
.project-hero__copy {
    max-width: 440px;
}


.project-page--jva
.project-hero__copy h1 {
    max-width: 440px;

    font-size:
        clamp(2.35rem, 3.5vw, 3.8rem);

    line-height: 0.98;
}



/* =========================================================
   RECHERCHE
========================================================= */

.jva-research-image,
.jva-wordcloud,
.jva-sicher,
.jva-poster-mockup,
.jva-single-poster,
.jva-sticker-mockup,
.jva-sticker,
.jva-social-image {
    margin: 0;
}


.jva-research-image {
    align-self: center;
}


.jva-research-image img {
    width: 100%;
    max-width: 680px;

    margin-inline: auto;
}


.jva-research-row {
    margin-top:
        clamp(80px, 10vw, 150px);
}


.jva-wordcloud {
    align-self: center;
}


.jva-wordcloud img {
    width: 100%;
    max-width: 600px;

    margin-inline: auto;
}



/* =========================================================
   INSPIRATION
========================================================= */

.jva-inspiration {
    align-items: center;
}


.jva-sicher {
    display: flex;

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


.jva-sicher img {
    width: 100%;
    max-width: 300px;
}



/* =========================================================
   PLAKAT-MOCKUP
========================================================= */

.jva-poster-mockup-row {
    margin-top:
        clamp(80px, 10vw, 150px);
}


.jva-poster-mockup img {
    width: 100%;
    height: auto;
}



/* =========================================================
   PLAKATRASTER
========================================================= */

.jva-poster-grid {
    display: grid;

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

    gap: 4px;

    width: 100%;
    max-width: none;

    margin-top:
        clamp(28px, 4vw, 55px);

    margin-inline: 0;
}


.jva-poster-grid figure {
    margin: 0;
}


.jva-poster-grid img {
    display: block;

    width: 100%;
    height: auto;
}





/* =========================================================
   STICKER
========================================================= */

.jva-sticker-section {
    align-items: center;
}


.jva-sticker-mockup img {
    width: 100%;
    max-width: 760px;

    margin-inline: auto;
}


.jva-sticker-copy {
    align-self: center;
}


.jva-sticker {
    margin-top: 35px;
}


.jva-sticker img {
    width: 100%;
    max-width: 230px;

    margin-inline: auto;
}



/* =========================================================
   SOCIAL MEDIA
========================================================= */

.jva-social-formats {
    margin-top:
        clamp(70px, 9vw, 130px);

    align-items: start;
}


.jva-social-format {
    display: flex;

    flex-direction: column;

    gap: 35px;

    min-width: 0;
}


.jva-social-format h3 {
    margin-top: 0;
}


.jva-social-format p {
    font-size: 1.05rem;
    line-height: 1.65;
}


.jva-social-image {
    margin-top: auto;

    display: flex;

    justify-content: center;
}


.jva-social-image img {
    width: 100%;
    height: auto;

    max-width: 290px;

    object-fit: contain;
}

/* =========================================================
   MEHR ALS MAUERN – BREITES FORMAT
========================================================= */

.jva-social-format--wide {
    grid-column: 1 / -1;

    display: grid;

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

    align-items: start;

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

    margin-top: clamp(60px, 8vw, 110px);
}


.jva-social-format__wide-copy {
    grid-column: 1;
}


.jva-social-image--wide {
    grid-column: 2 / 4;

    justify-content: flex-start;

    margin-top: 0;
}


.jva-social-image--wide img {
    width: 100%;

    max-width: 650px;

    height: auto;
}


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

@media (max-width: 900px) {




    .jva-social-formats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .jva-social-format:last-child {
        grid-column: 1 / -1;

        max-width: 50%;
    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .project-page--jva
    .project-hero__copy h1 {
        max-width: 100%;

        font-size:
            clamp(2.2rem, 10vw, 3.6rem);
    }


    .jva-research-row {
        margin-top: 70px;
    }


    .jva-poster-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }



    .jva-sticker {
        margin-top: 25px;
    }


    .jva-sticker img {
        max-width: 180px;

        margin-inline: 0;
    }


    .jva-social-formats {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }


    .jva-social-format,
    .jva-social-format:last-child {
        grid-column: 1;

        max-width: 100%;
    }


    .jva-social-image {
        justify-content: flex-start;
    }


    .jva-social-image img {
        max-width: 260px;
    }

}




/* =========================================================
   GORCH-FOCK-LAUF BRANDING / LAUFSHIRT
========================================================= */


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

.project-page--gfl-branding
.project-hero__copy {
    max-width: 420px;
}


.project-page--gfl-branding
.project-hero__copy h1 {
    max-width: 420px;

    font-size:
        clamp(2.4rem, 3.6vw, 3.9rem);

    line-height: 0.98;
}



/* =========================================================
   KONZEPT + SHIRT-MOCKUPS
========================================================= */

.gfl-branding-concept {
    align-items: start;
}


.gfl-branding-shirt {
    display: flex;

    flex-direction: column;

    gap: clamp(35px, 5vw, 65px);
}


.gfl-branding-shirt figure {
    display: flex;

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

    min-height:
        clamp(250px, 28vw, 380px);

    margin: 0;
}


.gfl-branding-shirt figure img {
    width: 100%;
    height: auto;

    max-width: 330px;

    object-fit: contain;
}


.gfl-branding-shirt .project-copy {
    max-width: 100%;
}



/* =========================================================
   GFL BRANDING – BILDERGALERIE
========================================================= */

.gfl-branding-gallery-section {
    padding-top:
        clamp(70px, 9vw, 130px);

    padding-bottom:
        clamp(100px, 13vw, 190px);
}


/*
   Enthält:
   Bildpaar 1
   Wiesenbild
   Bildpaar 2
*/

.gfl-branding-gallery-stack {
    display: flex;
    flex-direction: column;

    gap: 4px;

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

    margin-inline: auto;
}


/* Zwei Hochkantbilder nebeneinander */

.gfl-branding-image-pair {
    display: grid;

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

    gap: 4px;

    width: 100%;
}


.gfl-branding-image-pair figure {
    margin: 0;

    overflow: hidden;
}


.gfl-branding-image-pair img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 4 / 5;

    object-fit: cover;
}


/* Wiesenbild über die komplette Breite */

.gfl-branding-meadow {
    width: 100%;

    margin: 0;
}


.gfl-branding-meadow img {
    display: block;

    width: 100%;
    height: auto;
}



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

@media (max-width: 900px) {

    .gfl-branding-shirt figure {
        min-height: 230px;
    }


    .gfl-branding-shirt figure img {
        max-width: 260px;
    }


    .gfl-branding-image-pair {
        max-width: 760px;
    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .project-page--gfl-branding
    .project-hero__copy h1 {
        max-width: 100%;

        font-size:
            clamp(2.3rem, 11vw, 3.7rem);
    }


    .gfl-branding-concept {
        row-gap: 70px;
    }


    .gfl-branding-shirt {
        gap: 30px;
    }


    .gfl-branding-shirt figure {
        min-height: 0;
    }


    .gfl-branding-shirt figure img {
        max-width: 230px;
    }


    .gfl-branding-image-pair {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .gfl-branding-image-pair img {
        aspect-ratio: auto;

        height: auto;
    }


    .gfl-branding-gallery-section--second {
        padding-top: 90px;
    }

}


/* =========================================================
   WASSER- UND BODENVERBÄNDE
========================================================= */


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

.project-page--wabo
.project-hero__copy {
    max-width: 440px;
}


.project-page--wabo
.project-hero__copy h1 {
    max-width: 440px;

    font-size:
        clamp(2.35rem, 3.5vw, 3.8rem);

    line-height: 0.98;
}



/* =========================================================
   ALTE WEBSITE
========================================================= */

.wabo-background-section {
    align-items: center;
}


.wabo-old-website {
    margin: 0;

    align-self: center;
}


.wabo-old-website img {
    display: block;

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

    margin-inline: auto;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12);
}


.wabo-old-website figcaption {
    max-width: 680px;

    margin:
        10px
        auto
        0;

    color: rgba(17, 17, 17, 0.55);

    font-size: 0.78rem;

    text-align: right;
}



/* =========================================================
   BILDSPRACHE
========================================================= */

.wabo-visual-language {
    align-items: center;
}


.wabo-header-images {
    display: flex;

    flex-direction: column;

    gap: clamp(45px, 6vw, 85px);

    align-self: center;
}


.wabo-header-images figure {
    margin: 0;
}


.wabo-header-images img {
    display: block;

    width: 100%;
    max-width: 650px;
    height: auto;

    margin-inline: auto;
}



/* =========================================================
   WEBDESIGN
========================================================= */

.wabo-webdesign-copy {
    max-width: 390px;
}



/* =========================================================
   GROSSE WEBSITE-STARTSEITE
========================================================= */

.wabo-homepage-section {
    padding-top:
        clamp(60px, 8vw, 110px);

    padding-bottom:
        clamp(140px, 18vw, 260px);
}


.wabo-homepage {
    width: 100%;

    max-width: 720px;

    margin:
        0
        auto;
}


.wabo-homepage img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 28px;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.14);
}



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

@media (max-width: 900px) {

    .wabo-old-website {
        grid-column: 2;
    }


    .wabo-header-images {
        grid-column: 1;
    }


    .wabo-visual-language
    .grid-column-3 {
        grid-column: 2;
    }


    .wabo-homepage {
        max-width: 620px;
    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .project-page--wabo
    .project-hero__copy h1 {
        max-width: 100%;

        font-size:
            clamp(2.2rem, 10vw, 3.6rem);
    }


    .wabo-old-website,
    .wabo-header-images,
    .wabo-visual-language
    .grid-column-3,
    .wabo-webdesign-copy {
        grid-column: 1;
    }


    .wabo-old-website {
        margin-top: 35px;
    }


    .wabo-header-images {
        gap: 35px;
    }


    .wabo-homepage {
        max-width: 100%;
    }


    .wabo-homepage img {
        border-radius: 16px;

        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.13);
    }

}





/* =========================================================
   JADE ENERGIE CAMPUS
========================================================= */


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

.project-page--jec
.project-hero__copy {
    max-width: 430px;
}


.project-page--jec
.project-hero__copy h1 {
    max-width: 430px;

    font-size:
        clamp(2.4rem, 3.6vw, 3.9rem);

    line-height: 0.98;
}



/* =========================================================
   HINTERGRUND / PROTOTYPING / SKIZZE
========================================================= */

.jec-concept-section {
    align-items: start;
}


.jec-sketch {
    margin: 0;

    align-self: center;
}


.jec-sketch img {
    display: block;

    width: 100%;
    max-width: 390px;
    height: auto;

    margin-inline: auto;
}



/* =========================================================
   VIDEO-MOCKUP
========================================================= */

.jec-video-section {
    align-items: center;
}


.jec-video-wrapper {
    width: 100%;

    max-width: 760px;

    margin-inline: auto;

    overflow: hidden;
}


.jec-video {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}



/* =========================================================
   DESIGN
========================================================= */

.jec-design-copy {
    max-width: 390px;
}



/* =========================================================
   PROTOTYP
========================================================= */

.jec-prototype-section {
    padding-top:
        clamp(55px, 7vw, 100px);

    padding-bottom:
        clamp(150px, 18vw, 260px);
}


.jec-prototype {
    width: 100%;

    max-width: 760px;

    margin:
        0
        auto;
}


.jec-prototype img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 28px;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.14);
}



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

@media (max-width: 900px) {

    .jec-sketch {
        grid-column: 1 / -1;

        margin-top: 45px;
    }


    .jec-sketch img {
        max-width: 430px;
    }


    .jec-video-wrapper {
        grid-column: 1;

        max-width: 100%;
    }


    .jec-video-section
    .grid-column-3 {
        grid-column: 2;
    }


    .jec-prototype {
        max-width: 650px;
    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .project-page--jec
    .project-hero__copy h1 {
        max-width: 100%;

        font-size:
            clamp(2.3rem, 11vw, 3.7rem);
    }


    .jec-sketch,
    .jec-video-wrapper,
    .jec-video-section
    .grid-column-3,
    .jec-design-copy {
        grid-column: 1;
    }


    .jec-sketch {
        margin-top: 30px;
    }


    .jec-video-wrapper {
        margin-bottom: 35px;
    }


    .jec-prototype {
        max-width: 100%;
    }


    .jec-prototype img {
        border-radius: 16px;

        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.13);
    }

}




/* =========================================================
   MEDIENHAUS JADE WESER
========================================================= */


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

.project-page--medienhaus
.project-hero__copy {
    max-width: 440px;
}


.project-page--medienhaus
.project-hero__copy h1 {
    max-width: 440px;

    font-size:
        clamp(2.4rem, 3.6vw, 3.9rem);

    line-height: 0.98;
}



/* =========================================================
   FENSTERFOLIERUNG
========================================================= */

.medienhaus-window-section {
    align-items: center;
}


.medienhaus-window-image {
    margin: 0;
}


.medienhaus-window-image img {
    display: block;

    width: 100%;
    max-width: 760px;
    height: auto;

    margin-inline: auto;
}



/* =========================================================
   INSTAGRAM
========================================================= */

.medienhaus-instagram-row {
    margin-top:
        clamp(50px, 7vw, 95px);
}


.medienhaus-instagram-embed {
    display: flex;

    justify-content: center;

    min-width: 0;
}


.medienhaus-instagram-embed
.instagram-media {
    width: min(100%, 430px) !important;

    min-width: 0 !important;
    max-width: 430px !important;

    margin: 0 !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14) !important;
}


.medienhaus-instagram-embed iframe {
    display: block;

    width: 100% !important;

    border: 0 !important;

    border-radius: 18px !important;
}



/* =========================================================
   POSTKARTEN
========================================================= */

.medienhaus-postcard-section {
    align-items: start;
}


.medienhaus-postcard-videos {
    display: flex;

    flex-direction: column;

    gap:
        clamp(20px, 3vw, 36px);
}



/* =========================================================
   VIDEO-KARTEN
========================================================= */

.medienhaus-video-card {
    width: 100%;

    overflow: hidden;

    border-radius: 18px;

    background: #eeeeee;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.13);
}


.medienhaus-video {
    display: block;

    width: 100%;
    height: auto;

    border-radius: inherit;
}



/* =========================================================
   FLYER
========================================================= */

.medienhaus-flyer-section {
    align-items: start;
}


.medienhaus-flyer {
    margin: 0;
}


.medienhaus-flyer img {
    display: block;

    width: 100%;
    max-width: 760px;
    height: auto;

    margin-inline: auto;
}



/* =========================================================
   SOMMERAKTION
========================================================= */

.medienhaus-summer-section {
    align-items: center;
}


.medienhaus-summer-video {
    max-width: 760px;

    margin-inline: auto;
}



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

@media (max-width: 900px) {

    .medienhaus-window-image {
        grid-column: 2;
    }


    .medienhaus-instagram-embed {
        grid-column: 2;
    }


    .medienhaus-postcard-videos {
        grid-column: 2;
    }


    .medienhaus-flyer {
        grid-column: 1;
    }


    .medienhaus-flyer-section
    .grid-column-3 {
        grid-column: 2;
    }


    .medienhaus-summer-video {
        grid-column: 2;
    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 640px) {

    .project-page--medienhaus
    .project-hero__copy h1 {
        max-width: 100%;

        font-size:
            clamp(2.3rem, 11vw, 3.7rem);
    }


    .medienhaus-window-image,
    .medienhaus-instagram-embed,
    .medienhaus-postcard-videos,
    .medienhaus-flyer,
    .medienhaus-flyer-section
    .grid-column-3,
    .medienhaus-summer-video {
        grid-column: 1;
    }


    .medienhaus-window-image {
        margin-top: 35px;
    }


    .medienhaus-instagram-row {
        margin-top: 45px;
    }


    .medienhaus-video-card {
        border-radius: 14px;
    }


    .medienhaus-flyer-section
    .grid-column-3 {
        margin-top: 35px;
    }


    .medienhaus-summer-video {
        margin-top: 35px;
    }

}





/* =========================================================
   REDUZIERTE BEWEGUNG
========================================================= */

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

    html {
        scroll-behavior: auto;
    }


    .topic-tag {
        animation: none;
    }


    .project-card__image,
    .project-card__text,
    .main-navigation {
        transition: none;
    }


    .has-reveal .reveal-block-text,
    .has-reveal .reveal-image,
    .has-reveal .hero-letter-text .reveal-char {
        opacity: 1;

        transform: none;

        filter: none;

        transition: none;
    }

}