/*
Theme Name: AW DSIGN
Author: AW DSIGN
Description: Custom portfolio theme
Version: 1.0
*/

/* =========================================================

   AW DSIGN / COMPLETE STYLES

   \========================================================= */





/* =========================================================

   00 / BASIC

   \========================================================= */



:root {

    color-scheme: dark;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    background: #111;

    color: #fff;



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



    overflow-x: clip;

}



img {

    display: block;

    max-width: 100%;

}





/* =========================================================

   01 / LOGO SCROLL

   \========================================================= */



   /* =========================================================

   SCROLL HINT

   \========================================================= */



.scroll-hint {

    position: absolute;



    top: 18px;

    left: 50%;



    z-index: 20;



    width: auto;

    height: auto;



    transform: translateX(-50%);



    border: 0;



    opacity: .65;



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

    font-size: 9px;

    font-weight: 700;



    letter-spacing: .18em;

    line-height: 1;



    white-space: nowrap;



    pointer-events: none;



    animation: scrollHintMove 1.5s ease-in-out infinite;



    transition:

        opacity .3s ease,

        top .3s ease;

}



.scroll-hint::before {
    content: "SCROLL";
}



body.has-scrolled .scroll-hint {

    opacity: 0;

    top: 10px;

}



@keyframes scrollHintMove {



    0%,

    100% {

        transform:

            translateX(-50%)

            translateY(0);

    }



    50% {

        transform:

            translateX(-50%)

            translateY(5px);

    }

}



.logo-scroll {

    height: 260vh;

    background: #111;

}



.logo-sticky {

    position: sticky;

    top: 0;



    height: 100vh;

    height: 100dvh;



    display: grid;

    place-items: center;



    overflow: hidden;

}



.aw-logo {

    position: relative;



    width: min(82vw, 900px);

    aspect-ratio: 900 / 330;

}



.logo-bar {

    position: absolute;



    height: 21%;

    background: #fff;



    transform-origin: center;

    will-change: transform;

}



.bar1 {

    width: 28.35%;

    left: 6%;

    top: 48%;



    transform:

        translate(var(--tx, 0px), var(--ty, 0px))

        rotate(calc(-45deg + var(--rotation, 0deg)))

        scale(var(--scale, 1));

}



.bar2 {

    width: 17.5%;

    left: 22.38%;

    top: 38%;



    transform:

        translate(var(--tx, 0px), var(--ty, 0px))

        rotate(calc(45deg + var(--rotation, 0deg)))

        scale(var(--scale, 1));

}



.bar3 {

    width: 29.49%;

    left: 35%;

    top: 47%;



    transform:

        translate(var(--tx, 0px), var(--ty, 0px))

        rotate(calc(-45deg + var(--rotation, 0deg)))

        scale(var(--scale, 1));

}



.bar4 {

    width: 24%;

    left: 55%;

    top: 51.9%;



    transform:

        translate(var(--tx, 0px), var(--ty, 0px))

        rotate(calc(45deg + var(--rotation, 0deg)))

        scale(var(--scale, 1));

}



.bar5 {

    width: 26%;

    left: 68%;

    top: 44.9%;



    transform:

        translate(var(--tx, 0px), var(--ty, 0px))

        rotate(calc(-45deg + var(--rotation, 0deg)))

        scale(var(--scale, 1));

}





/* =========================================

   QUOTE BAR / AW DESIGN

   \========================================= */



.quote-bar {

    width: 100%;

    min-height: 750px;



    padding: 35px 5vw;



    display: flex;

    justify-content: center;

    align-items: center;



    background: #ffffff;

    color: #111;



    overflow: hidden;



    transition:

        background .4s ease,

        color .4s ease;

}



.quote-text {

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

    font-size: 90px;

    font-weight: 900;

    letter-spacing: -9px;

    line-height: 1.1;

    text-align: center;

}



/* Das Wort, das runterkippen soll */



.quote-drop {

    display: inline-block;

    transform-origin: left bottom;



    transform:

        translate(var(--drop-x, 0px), var(--drop-y, 0px))

        rotate(var(--drop-rotate, 0deg));



    will-change: transform;

}

/* HOVER */









/* MOBILE */



@media (max-width: 768px) {



    .quote-bar {

        min-height: 85svh;

        padding: 70px 6vw;

    }



    .quote-text {

        font-size: clamp(26px, 7vw, 38px);

        line-height: 1.2;

    }



}



/* REDUCED MOTION */



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



    .quote-bar,

    .quote-text {

        transition: none;

    }



    .quote-drop {

        transform: none;

    }

}





/* =========================================================

   02 / INTRO

   \========================================================= */



.intro {

    height: 100vh;

    height: 60dvh;



    position: relative;



    color: #111;

    background: #fff;



    overflow: hidden;

}







.intro-big {

    position: relative;



    left: 0;

    bottom: -12vw;



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

    font-weight:900;

    letter-spacing:-40px;

    font-size: 400px;





    white-space: nowrap;

}



/* =========================================================

   02 / INTRO2

   \========================================================= */



.intro2 {

    height: 120vh;

    height: 80dvh;



    position: relative;



    color: #111;

    background: #fff;



    overflow: hidden;

}







.intro-big2 {

    position: relative;



    left: 25%;

    bottom: -24vw;



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

    font-weight:900;

    letter-spacing:-40px;

    font-size: 400px;





    white-space: nowrap;

}







/* =========================================================

   03 + 07 / BOTH HORIZONTAL GALLERIES

   \========================================================= */



.horizontal-section {

    position: relative;



    height: 390vh;

    background: #111;

}



.horizontal-sticky {

    position: sticky;

    top: 0;



    width: 100%;



    height: 100vh;

    height: 100dvh;



    overflow: hidden;

    background: #111;

}



.horizontal-track {

    height: 100%;

    width: max-content;



    display: flex;

    align-items: center;



    gap: clamp(22px, 4vw, 75px);



    padding-inline: 8vw;



    will-change: transform;

}



/* ALL CARDS */



.horizontal-card {

    position: relative;



    flex: 0 0 auto;



    background: #111;

    overflow: hidden;

}



/* IMAGE CARDS */



.image-card {

    display: flex;

    justify-content: center;

    align-items: center;



    width: 400px;

    height: 450px;



    overflow: visible;

    isolation: isolate;



    transition:

        transform .45s cubic-bezier(.2, .8, .2, 1),

        filter .45s;

}



.image-card img {

    width: 100%;

    height: 100%;



    object-fit: contain;



    /* Originalfarben bleiben erhalten */

    filter: none;

}



/* Entfernt kleine weiße Bildränder bei einzelnen Motiven */



.image-card:has(.edge-crop) {

    overflow: hidden;

}



.image-card img.edge-crop {

    transform: scale(1.02);

}



/* HOVER EFFECT */



.image-card:hover {

    z-index: 10;



    transform:

        translateY(-13px)

        scale(1.035);



    filter: brightness(1.1);

}



.image-card::after {

    content: "";



    position: absolute;

    inset: 0;



    pointer-events: none;



    border: 1px solid #111;



    opacity: 0;

    transition: opacity .35s;

}



.image-card:hover::after {

    opacity: 1;

}























/* =========================================================

   TYPOGRAPHIC COLLAPSE

   \========================================================= */



.type-collapse {

    position: relative;

    height: 220vh;

    background: #111;

}



.type-collapse-sticky {

    position: sticky;

    top: 0;



    width: 100%;

    height: 100vh;

    height: 100dvh;



    display: grid;

    place-items: center;



    overflow: hidden;

    isolation: isolate;



    background: #111;

}



/* HUGE TYPOGRAPHY */



.collapse-word {

    position: absolute;

    z-index: 2;



    color: #fff;



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

    font-size: clamp(80px, 17vw, 350px);

    font-weight: 900;



    letter-spacing: -.09em;

    line-height: 1;



    white-space: nowrap;



    transform:

        scaleY(var(--collapse-scale, 1));



    opacity: var(--collapse-opacity, 1);



    transform-origin: center;



    will-change: transform;

}



/* HORIZONTAL LINE */



.collapse-line {

    position: absolute;

    z-index: 3;



    width: 90%;

    height: 3px;



    background: #fff;



    opacity: var(--collapse-line-opacity, 0);



    transform:

        scaleX(var(--collapse-line-scale, 1));



    transform-origin: center;

}



/* WHITE EXPANSION */



.collapse-white {

    position: absolute;

    z-index: 4;



    width: 100%;

    height: 100%;



    background: #fff;



    transform:

        scaleY(var(--collapse-white-scale, 0));



    transform-origin: center;



    will-change: transform;

}



/* MOBILE */



@media (max-width: 768px) {



    .type-collapse {

        height: 170vh;

    }



    .collapse-word {

        font-size: 20vw;

    }



}



/* REDUCED MOTION */



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



    .type-collapse {

        height: 100vh;

        height: 100dvh;

    }



    .collapse-word {

        transform: none;

        opacity: 1;

    }



    .collapse-line,

    .collapse-white {

        display: none;

    }

}





/* =========================================================

   FORM FOLGT GEFÜHL

   \========================================================= */



.feeling-transition {

    position: relative;



    height: 190vh;



    background: #111;

}





.feeling-sticky {

    position: sticky;



    top: 0;



    width: 100%;

    height: 100vh;

    height: 100dvh;



    overflow: hidden;



    background: #111;

    color: #fff;

}





/* ALLE WÖRTER */



.feeling-word {

    position: absolute;



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

    font-weight: 900;



    line-height: .8;

    letter-spacing: -.08em;



    white-space: nowrap;



    will-change:

        transform,

        opacity,

        letter-spacing;

}





/* FORM */



.feeling-form {

    top: 12%;

    left: 5%;



    font-size: clamp(90px, 15vw, 280px);



    transform:

        translateX(var(--form-x, 0px))

        rotate(var(--form-rotate, 0deg));



    opacity: var(--form-opacity, 1);

}





/* FOLGT */



.feeling-folgt {

    top: 52%;

    left: 50%;



    font-size: clamp(80px, 13vw, 240px);



    transform:

        translate(-50%, -50%)

        scaleX(var(--folgt-scale, 1));



    opacity: var(--folgt-opacity, 1);

}





/* GEFÜHL */



.feeling-gefuehl {

    right: 5%;

    bottom: 8%;



    font-size: clamp(90px, 15vw, 280px);



    transform:

        translateX(var(--gefuehl-x, 0px));



    letter-spacing:

        var(--gefuehl-spacing, -.08em);



    opacity:

        var(--gefuehl-opacity, 1);

}





/* MOBILE */



@media (max-width: 768px) {



    .feeling-transition {

        height: 175vh;

    }



    .feeling-form,

    .feeling-gefuehl {

        font-size: 20vw;

    }



    .feeling-folgt {

        font-size: 18vw;

    }



}







/* =========================================================

   05 / WHITE BREAK

   \========================================================= */



.white-break {

    position: relative;



    /* Extra Scrollweg für die Animation */

    height: 210vh;



    background: #fff;

    color: #111;

}





.white-break-sticky {

    position: sticky;

    top: 0;



    width: 100%;

    height: 100vh;

    height: 100dvh;



    overflow: hidden;



    background: #fff;

}





/* ALLE WÖRTER */



.white-word {

    position: absolute;



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



    font-weight: 900;



    line-height: .78;

    letter-spacing: -.08em;



    white-space: nowrap;



    color: #111;

}





/* LESS — LINKS OBEN */



.less {

    top: 8vh;

    left: 5vw;



    font-size: var(

        --less-size,

        clamp(95px, 15vw, 320px)

    );



    transform-origin: left center;



    will-change: font-size;



    letter-spacing: var(--less-spacing, -.08em);

}





/* IS — RECHTS MITTIG */



.white-is {

    top: 40%;

    right: 6vw;



    font-size: clamp(95px, 15vw, 320px);



    color: transparent;



    -webkit-text-stroke: 3px #111;

}





/* MORE — LINKS UNTEN */



.more {

    left: 5vw;

    bottom: 5vh;



    font-size: var(

        --more-size,

        clamp(95px, 15vw, 320px)

    );



    transform-origin: left bottom;



    will-change: font-size;



    letter-spacing: var(--more-spacing, -.08em);

}





/* MOBILE */



@media (max-width: 768px) {



    .white-break {

        height: 190vh;

    }



    .less {

        top: 12vh;

        left: 5vw;

    }



    .white-is {

        top: 42%;

        right: 5vw;



        -webkit-text-stroke: 2px #111;

    }



    .more {

        left: 5vw;

        bottom: 10vh;

    }



}











/* =========================================================

   06 / WORDSTORM

   \========================================================= */



.wordstorm {

    height: 150vh;

display: none;

    position: relative;



    background: #111;

    color: #fff;



    overflow: hidden;

}



.wordstorm-background {

    position: absolute;



    top: 50%;

    left: 100%;



    transform: translateY(-50%);



    font-size: 30vw;

    line-height: .7;



    font-weight: 900;

    letter-spacing: -3vw;



    white-space: nowrap;

    opacity: .08;

}



.storm-word {

    position: absolute;



    font-weight: 900;

    line-height: .75;

    letter-spacing: -.07em;



    opacity: 0;



    transform: scale(3);

}



/* WORD POSITIONS */



.storm1 {

    top: 12%;

    left: 6%;

    font-size: 10vw;

}



.storm2 {

    top: 36%;

    left: 15%;

    font-size: 14vw;

}



.storm3 {

    top: 8%;

    right: 5%;

    font-size: 18vw;

}



.storm4 {

    bottom: 44%;

    left: 10%;

    font-size: 7vw;

}



.storm5 {

    top: 31%;

    right: 3%;

    font-size: 20vw;

}



.storm6 {

    top: 8%;

    left: 43%;

    font-size: 6vw;

}



.storm7 {

    bottom: 33%;

    right: 11%;

    font-size: 12vw;

}



.storm8 {

    top: 33%;

    left: 3%;

    font-size: 28vw;

}



.storm9 {

    top: 49%;

    left: 6%;

    font-size: 18vw;

}



/* START ANIMATIONS */



.wordstorm.is-active .wordstorm-background {

    animation: stormBackground 10s linear forwards;

}



.wordstorm.is-active .storm1 {

    animation: wordPop 10s 0s forwards;

}



.wordstorm.is-active .storm2 {

    animation: wordPop 10s .8s forwards;

}



.wordstorm.is-active .storm3 {

    animation: wordPop 10s 1.6s forwards;

}



.wordstorm.is-active .storm4 {

    animation: wordPop 10s 2.4s forwards;

}



.wordstorm.is-active .storm5 {

    animation: wordPop 10s 3.2s forwards;

}



.wordstorm.is-active .storm6 {

    animation: wordPop 10s 4s forwards;

}



.wordstorm.is-active .storm7 {

    animation: wordPop 10s 4.8s forwards;

}



.wordstorm.is-active .storm8 {

    animation: awExplosion 10s 5.6s forwards;

}



.wordstorm.is-active .storm9 {

    animation: designExplosion 10s 6.3s forwards;

}



.wordstorm.is-active {

    animation: stormFlash 10s steps(1) forwards;

}



/* WORD POP */



@keyframes wordPop {



    0% {

        opacity: 0;

        transform: scale(4) translateY(80px);

    }



    4% {

        opacity: 1;

        transform: scale(1);

    }



    11% {

        opacity: 1;

        transform: scale(.7);

    }



    17% {

        opacity: 1;

        transform: scale(1.5);

    }



    22%, 100% {

        opacity: 0;

        transform: scale(.05);

    }

}



/* AW EXPLOSION */



@keyframes awExplosion {



    0% {

        opacity: 0;

        transform: scale(.05);

    }



    4% {

        opacity: 1;

        transform: scale(.3);

    }



    10% {

        transform: scale(1);

    }



    16% {

        transform: scale(6);

        opacity: 1;

    }



    22%, 100% {

        transform: scale(14);

        opacity: 0;

    }

}



/* DESIGN EXPLOSION */



@keyframes designExplosion {



    0% {

        opacity: 0;

        transform: translateX(100vw);

    }



    4% {

        opacity: 1;

    }



    16% {

        opacity: 1;

        transform: translateX(-4vw);

    }



    24%, 100% {

        opacity: 0;

        transform: translateX(-120vw);

    }

}



/* BACKGROUND TYPO */



@keyframes stormBackground {



    from {

        left: 100%;

    }



    to {

        left: -550%;

    }

}



/* BLACK WHITE FLASH */



@keyframes stormFlash {



    0%, 23%, 42%, 51%, 71%, 100% {

        background: #111;

        color: #fff;

    }



    18%, 47%, 67% {

        background: #fff;

        color: #111;

    }

}

















.lovebedeutung{

    background:#111;

    color:white;

}



.statement{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-size:120px;

    font-weight:900;

    letter-spacing:-10px;

    padding:100px;

}







/* =========================================================

   04 / EXPERIMENTAL TYPOGRAPHY LAB

   \========================================================= */



.type-lab {

    position: relative;



    height: 230vh;



    background: #111;

}



.type-lab-sticky {

    position: sticky;

    top: 0;



    height: 100vh;

    height: 100dvh;



    overflow: hidden;

    isolation: isolate;



    background: #111;

}



.type-lab-canvas {

    display: block;



    width: 100%;

    height: 100%;

}



.type-lab-accessible {

    position: absolute;



    width: 1px;

    height: 1px;



    overflow: hidden;

    clip-path: inset(50%);



    white-space: nowrap;

}







/* =========================================

   FINAL QUOTE BAR

   \========================================= */



.quote-bar-final {

    position: relative;



    width: 100%;

    min-height: 750px;



    padding: 60px 6vw;



    display: flex;

    justify-content: center;

    align-items: center;



    background: #fff;

    color: #111;



    overflow: hidden;

}



.quote-final-text {

    position: relative;



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

    font-size: clamp(35px, 5.5vw, 100px);

    font-weight: 900;



    letter-spacing: -.065em;

    line-height: 1.05;



    text-align: center;

}



/* MOVING WORD */



.quote-final-move {

    display: inline-block;



    transform:

        translate(

            var(--final-x, 0px),

            var(--final-y, 0px)

        )

        rotate(var(--final-rotate, 0deg));



    transform-origin: left center;



    will-change: transform;

}



/* SMALL DETAIL */



.quote-final-number {

    position: absolute;



    bottom: 28px;

    right: 35px;



    font-size: 11px;

    font-weight: 900;



    letter-spacing: 2px;

}



/* MOBILE */



@media (max-width: 768px) {



    .quote-bar-final {

        min-height: 75vh;

        padding: 50px 6vw;

    }



    .quote-final-text {

        font-size: clamp(34px, 9vw, 65px);

    }



    .quote-final-number {

        right: 20px;

        bottom: 20px;

    }



}



/* REDUCED MOTION */



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



    .quote-final-move {

        transform: none;

    }



}



/* =========================================================

   08 / FOOTER

   \========================================================= */



.end {

    min-height: 100vh;

    min-height: 100dvh;



    position: relative;



    display: grid;

    place-items: center;



    background: #111;

}



.end-logo {

    position: relative;



    width: min(48vw, 600px);

    aspect-ratio: 900 / 330;

}



.mini-bar {

    position: absolute;



    height: 21%;

    background: #fff;



    transform-origin: center;

}





/* EXAKT WIE DAS GROSSE LOGO */



.mini1 {

    width: 28.35%;

    left: 6%;

    top: 48%;



    transform: rotate(-45deg);

}



.mini2 {

    width: 17.5%;

    left: 22.38%;

    top: 38%;



    transform: rotate(45deg);

}



.mini3 {

    width: 29.49%;

    left: 35%;

    top: 47%;



    transform: rotate(-45deg);

}



.mini4 {

    width: 24%;

    left: 55%;

    top: 51.9%;



    transform: rotate(45deg);

}



.mini5 {

    width: 26%;

    left: 68%;

    top: 44.9%;



    transform: rotate(-45deg);

}



.end-bottom {

    position: absolute;



    bottom: 25px;

    left: 30px;

    right: 30px;



    display: grid;

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



    align-items: end;



    font-size: 11px;

    font-weight: 700;



    letter-spacing: 2px;

}





/* KONTAKTDATEN LINKS */



.end-contact {

    display: flex;

    flex-direction: column;



    gap: 6px;



    align-items: flex-start;

}





/* LINKS */



.end-bottom a {

    color: #fff;



    text-decoration: none;



    transition:

        opacity .25s ease,

        transform .25s ease;

}





/* INSTAGRAM MITTE */



.end-instagram {

    justify-self: center;

}





/* JAHR RECHTS */



.end-year {

    justify-self: end;

}





/* HOVER */



.end-bottom a:hover {

    opacity: .55;

}





.end-instagram:hover {

    transform: translateY(-3px);

}





/* =========================================================

   MOBILE

   \========================================================= */



@media (max-width: 768px) {



    .logo-scroll {

        height: 220vh;

    }



    .aw-logo {

        width: 94vw;

    }



    .intro {

        height: 80vh;

    }



    .intro-big {

        font-size: 36vw;

    }



    .horizontal-track {

        gap: 6vw;

        padding-inline: 7vw;

    }



    .horizontal-section {

        height: 310vh;

    }



    .type-card {

        width: 80vw;

        height: 60vh;

    }



    .huge-aw {

        font-size: 43vw;

    }



    .huge-number {

        font-size: 43vw;

    }



    .type-lab {

        height: 175vh;

    }



    .white-word {

        font-size: 20vw;

    }



    .end-logo {

        width: 85vw;

    }



    .end-bottom {

        left: 15px;

        right: 15px;

        font-size: 9px;

    }

}





/* =========================================================

   REDUCED MOTION

   \========================================================= */



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



    html {

        scroll-behavior: auto;

    }



    .image-card {

        transition: none;

    }



    .wordstorm.is-active,

    .wordstorm.is-active .storm-word,

    .wordstorm.is-active .wordstorm-background {

        animation: none;

    }



    .wordstorm .storm-word {

        opacity: 1;

        transform: none;

    }

}







/* =========================================================

   LOVE IMAGE FLICKER SECTION

   \========================================================= */



.animation-section {

    width: 100%;

    min-height: 100vh;



    padding: 60px;



    background: #fff;

}





.animation-frame {

    width: 100%;

    height: 105vh;



    border: 40px solid #fff;



    overflow: hidden;

}





.love {

    position: relative;



    width: 100%;

    height: 100%;



    background-color: #fff;



    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;



    animation: loveImages 2s infinite steps(1);

}





/* LOVE TEXT */



.love-text {

    position: absolute;



    top: 50%;

    left: 40%;



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



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



    font-size: 300px;

    font-weight: 900;



    letter-spacing: -0.06em;

    line-height: .8;



    z-index: 20;



    animation: flyText 2s infinite steps(1);

}





/* =========================================================

   FLICKER IMAGES

   \========================================================= */



.love2,

.love3,

.love4,

.love5,

.love6,

.love7,

.love8,

.love9,

.love10,

.love11 {

    position: absolute;



    background-size: contain;

    background-position: center;

    background-repeat: no-repeat;



    z-index: 1;

}





/* LINKS UNTEN */



.love2 {

    top: 70%;

    left: 5%;



    width: 450px;

    height: 550px;



    transform: translateY(-50%);



    animation: leftImages 2.5s infinite steps(1);

}





/* RECHTS UNTEN */



.love3 {

    top: 72%;

    left: 60%;



    width: 450px;

    height: 550px;



    transform: translateY(-50%);



    animation: leftImages 3s infinite steps(1);

}





/* LINKS OBEN */



.love4 {

    top: 20%;

    left: -5%;



    width: 450px;

    height: 250px;



    animation: leftImages 3s infinite steps(1);

}





/* RECHTS */



.love5 {

    top: 70%;

    right: -5%;



    width: 450px;

    height: 200px;



    animation: leftImages 4s infinite steps(1);

}





/* OBEN MITTE */



.love6 {

    top: 5%;

    left: 35%;



    width: 450px;

    height: 180px;



    animation: leftImages 4s infinite steps(1);

}





/* KLEINERE BILDER */



.love7 {

    bottom: 5%;

    left: 15%;



    width: 320px;

    height: 300px;



    animation: leftImages 5s infinite steps(1);

}





.love8 {

    bottom: 0;

    left: 55%;



    width: 400px;

    height: 400px;



    animation: leftImages 3s infinite steps(1);

}





.love9 {

    top: 35%;

    left: 40%;



    width: 250px;

    height: 250px;



    animation: leftImages 3s infinite steps(1);

}





.love10 {

    top: 15%;

    right: 5%;



    width: 250px;

    height: 250px;



    animation: loveImages 5s infinite steps(1);

}





.love11 {

    bottom: 10%;

    left: -2%;



    width: 250px;

    height: 250px;



    animation: leftImages 3s infinite steps(1);

}



/* =========================================================

   HAUPT-BILDFOLGE

   \========================================================= */



@keyframes loveImages {



  0% {background-image:url("images/214-01.jpg");}

  5% {background-image:url("images/214-02.jpg");}

  10% {background-image:url("images/214-03.jpg");}

  15% {background-image:url("images/214-04.jpg");}

  20% {background-image:url("images/214-05.jpg");}

  25% {background-image:url("images/214-06.jpg");}

  30% {background-image:url("images/214-07.jpg");}

  35% {background-image:url("images/214-08.jpg");}

  40% {background-image:url("images/214-09.jpg");}

  45% {background-image:url("images/214-01.jpg");}

  50% {background-image:url("images/214-02.jpg");}

  55% {background-image:url("images/214-03.jpg");}

  60% {background-image:url("images/214-04.jpg");}

  65% {background-image:url("images/214-05.jpg");}

  70% {background-image:url("images/214-06.jpg");}

  75% {background-image:url("images/214-07.jpg");}

  80% {background-image:url("images/214-08.jpg");}

  85% {background-image:url("images/214-09.jpg");}

  90% {background-image:url("images/214-01.jpg");}

  95% {background-image:url("images/214-02.jpg");}

  100% {background-image:url("images/214-03.jpg");}

}





/* =========================================================

   ZWEITE BILDFOLGE

   \========================================================= */



@keyframes leftImages {



  0% {background-image:url("images/214-01.jpg");}

  5% {background-image:url("images/214-02.jpg");}

  10% {background-image:url("images/214-03.jpg");}

  15% {background-image:url("images/214-04.jpg");}

  20% {background-image:url("images/214-05.jpg");}

  25% {background-image:url("images/reifen2.png");}

  30% {background-image:url("images/214-07.jpg");}

  35% {background-image:url("images/214-08.jpg");}

  40% {background-image:url("images/214-09.jpg");}

  45% {background-image:url("images/214-01.jpg");}                   /* gleiche animation nur mit paar ausgetauschten bildern */

  50% {background-image:url("images/scheinwerfer2.png");}

  55% {background-image:url("images/214-03.jpg");}

  60% {background-image:url("images/214-04.jpg");}

  65% {background-image:url("images/214-05.jpg");}

  70% {background-image:url("images/214-06.jpg");}

  75% {background-image:url("images/schaltung.png");}

  80% {background-image:url("images/214-08.jpg");}

  85% {background-image:url("images/214-09.jpg");}

  90% {background-image:url("images/scheinwerfer2.png");}

  95% {background-image:url("images/214-02.jpg");}

  100% {background-image:url("images/214-03.jpg");}

}



/* =========================================================

   LOVE COLOR FLICKER

   \========================================================= */



@keyframes flyText {



  0% {color:aliceblue;}

  5% {color:red;}

  10% {color:black;}

  15% {color:red;}

  20% {color:aliceblue;}

  25% {color:black;}

  30% {color:aliceblue;}

  35% {color:red;}

  40% {color:black;}

  45% {color:aliceblue;}

  50% {color:red;}

  55% {color:aliceblue;}        /*DER text passend zu den vielen bildern der die farbe switcht*/

  60% {color:black;}

  65% {color:aliceblue;}

  60% {color:red;}

  75% {color:black;}

 80% {color:red;}

  85% {color:aliceblue;}

  90% {color:black;}

  95% {color:aliceblue;}

  100% {color:red;}

}





@media (max-width: 768px) {



    .intro-big {

        bottom: -7vw;

    }



}





@media (max-width: 768px) {



    .end-bottom {

        left: 20px;

        right: 20px;

        bottom: 22px;



        display: flex;

        flex-direction: column;

        align-items: center;



        gap: 12px;



        text-align: center;



        font-size: 10px;

        line-height: 1.5;

        letter-spacing: 1.2px;

    }



    .end-contact {

        align-items: center;

        gap: 6px;

    }



    .end-instagram {

        width: 100%;



        margin-top: 5px;

        padding-top: 12px;



        border-top: 1px solid rgba(255,255,255,.25);



        text-align: center;

    }



    .end-year {

        opacity: .5;

    }



}



@media (max-width: 768px) {



    .horizontal-section {

        height: auto !important;

        min-height: 0;

    }



    .horizontal-sticky {

        position: relative;

        top: auto;



        width: 100%;

        height: 72svh;



        overflow-x: auto;

        overflow-y: hidden;



        -webkit-overflow-scrolling: touch;



        touch-action: pan-x pan-y;

        overscroll-behavior-x: contain;



        scroll-snap-type: x proximity;



        scrollbar-width: none;

    }



    .horizontal-sticky::-webkit-scrollbar {

        display: none;

    }



    .horizontal-track {

        width: max-content;

        height: 100%;



        display: flex;

        align-items: center;



        gap: 6vw;

        padding-inline: 7vw;



        transform: none !important;

        will-change: auto;

    }



    .horizontal-card {

        flex: 0 0 auto;



        scroll-snap-align: center;

    }



}

/* =========================================================
   MOBILE COMPLETE / FINAL
   Nur Mobile-Optimierung. Desktop bleibt unverändert.
   ========================================================= */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .quote-bar {
        min-height: 78svh;
        padding: 56px 6vw;
    }

    .quote-text {
        font-size: clamp(30px, 9.5vw, 48px);
        letter-spacing: -0.055em;
        line-height: 1.02;
        max-width: 92vw;
    }

    .intro {
        position: relative;
        height: 40svh;
        overflow: hidden;
    }

    .intro-big {
        position: absolute;
        left: -1vw;
        bottom: -0.08em;
        font-size: clamp(110px, 32vw, 150px);
        letter-spacing: -0.07em;
        line-height: .82;
        white-space: nowrap;
    }

    .intro2 {
        position: relative;
        height: 44svh;
        overflow: hidden;
    }

    .intro-big2 {
        position: absolute;
        left: 8vw;
        bottom: -0.10em;
        font-size: clamp(105px, 31vw, 145px);
        letter-spacing: -0.07em;
        line-height: .82;
        white-space: nowrap;
    }

    .collapse-word {
        font-size: clamp(70px, 22vw, 130px);
        letter-spacing: -0.07em;
    }

    .statement {
        min-height: 72svh;
        height: auto;
        padding: 48px 7vw;
        font-size: clamp(38px, 11.5vw, 68px);
        letter-spacing: -0.065em;
        line-height: .94;
        text-wrap: balance;
        overflow-wrap: normal;
    }

    .feeling-form,
    .feeling-gefuehl {
        font-size: clamp(62px, 18vw, 105px);
        letter-spacing: -0.06em;
    }

    .feeling-folgt {
        font-size: clamp(58px, 16.5vw, 96px);
        letter-spacing: -0.06em;
    }

    .feeling-form {
        top: 16%;
        left: 5%;
    }

    .feeling-folgt {
        top: 50%;
    }

    .feeling-gefuehl {
        right: 5%;
        bottom: 14%;
    }

    .white-word {
        letter-spacing: -0.055em;
    }

    .less {
        font-size: var(--less-size, clamp(58px, 15vw, 90px));
        letter-spacing: var(--less-spacing, -0.055em);
    }

    .more {
        font-size: var(--more-size, clamp(58px, 15vw, 90px));
        letter-spacing: var(--more-spacing, -0.055em);
    }

    .white-is {
        font-size: clamp(62px, 17vw, 100px);
        -webkit-text-stroke: 2px #111;
    }

    .animation-section {
        padding: 14px;
        min-height: 82svh;
    }

    .animation-frame {
        height: 82svh;
        border-width: 10px;
    }

    .love-text {
        left: 50%;
        font-size: clamp(72px, 23vw, 135px);
        letter-spacing: -0.06em;
        line-height: .82;
    }

    .love2,
    .love3 {
        width: min(46vw, 220px);
        height: min(56vw, 270px);
    }

    .love4,
    .love5,
    .love6 {
        width: min(44vw, 210px);
        height: min(28vw, 145px);
    }

    .love7,
    .love8 {
        width: min(38vw, 185px);
        height: min(38vw, 185px);
    }

    .love9,
    .love10,
    .love11 {
        width: min(30vw, 145px);
        height: min(30vw, 145px);
    }

    .quote-bar-final {
        min-height: 68svh;
        padding: 44px 7vw;
    }

    .quote-final-text {
        font-size: clamp(34px, 10vw, 58px);
        letter-spacing: -0.05em;
        line-height: 1;
        max-width: 90vw;
    }

    .end-bottom {
        left: 20px;
        right: 20px;
        bottom: 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 1.2px;
    }

    .end-contact {
        align-items: center;
        gap: 6px;
        max-width: 88vw;
    }

    .end-contact span,
    .end-contact a {
        text-align: center;
    }

    .end-instagram {
        width: 100%;
        margin-top: 5px;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,.25);
        text-align: center;
        justify-self: auto;
    }

    .end-year {
        justify-self: auto;
        opacity: .5;
    }

    /* Echte horizontale Swipe-Galerien auf Mobile */
    .horizontal-section {
        position: relative;
        height: auto !important;
        min-height: 0;
        background: #111;
    }

    .horizontal-sticky {
        position: relative;
        top: auto;
        width: 100%;
        height: 72svh;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .horizontal-sticky::-webkit-scrollbar {
        display: none;
    }

    .horizontal-track {
        width: max-content;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 6vw;
        padding-inline: 7vw;
        transform: none !important;
        will-change: auto;
    }

    .horizontal-card {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .image-card:hover {
        transform: none;
        filter: none;
    }

    /* Kleiner Hinweis, dass horizontal geswipet werden soll */
    .horizontal-section::after {
        content: "SWIPE ↔";
        position: absolute;
        left: 50%;
        bottom: 22px;
        z-index: 30;
        transform: translateX(-50%);
        padding: 8px 12px;
        border: 1px solid rgba(255,255,255,.35);
        border-radius: 999px;
        background: rgba(17,17,17,.72);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .16em;
        line-height: 1;
        white-space: nowrap;
        pointer-events: none;
        opacity: .82;
        animation: mobileSwipeHint 1.4s ease-in-out infinite;
        transition: opacity .25s ease, transform .25s ease;
    }

    .horizontal-section.has-swiped::after {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
        animation: none;
    }
}

@media (max-width: 430px) {

    .scroll-hint {
        top: 17px;
        font-size: 8px;
        letter-spacing: .16em;
    }

    .intro {
        height: 38svh;
    }

    .intro-big {
        font-size: 31vw;
        left: -0.5vw;
        bottom: -0.07em;
    }

    .intro-big2 {
        font-size: 30vw;
        left: 7vw;
        bottom: -0.09em;
    }

    .statement {
        font-size: clamp(34px, 11vw, 50px);
        padding-inline: 6vw;
    }

    .feeling-form,
    .feeling-gefuehl {
        font-size: 17vw;
    }

    .feeling-folgt {
        font-size: 15.5vw;
    }

    .quote-text {
        font-size: 9vw;
    }

    .love-text {
        font-size: 22vw;
    }

    .horizontal-sticky {
        height: 70svh;
    }

    .end-bottom {
        left: 18px;
        right: 18px;
        bottom: 20px;
        font-size: 9px;
        gap: 10px;
    }
}

@keyframes mobileSwipeHint {
    0%,
    100% {
        transform: translateX(-50%) translateX(-6px);
    }

    50% {
        transform: translateX(-50%) translateX(6px);
    }
}

/* =========================================================
   TOP HINT: DESKTOP / MOBILE
   Desktop: SCROLL ↓
   Mobile:  SWIPE ↑
   ========================================================= */

@media (max-width: 768px) {

    .scroll-hint::before {
        content: "SWIPE";
    }

    .scroll-hint::after {
        content: "↑";
    }

}

/* =========================================================
   SPRÜCHE / EXIT SWIPE
   Nur Bewegung beim Weiterscrollen – Layout bleibt gleich.
   ========================================================= */

.lovebedeutung {
    overflow: hidden;
}

.statement {
    will-change: transform;
}

/* =========================================================
   FOOTER / INSTAGRAM HIGHLIGHT
   ========================================================= */

.end-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 18px;

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

    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;

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

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.end-instagram:hover {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);

    background: #fff;
    color: #111;

    border-color: #fff;
}

@media (max-width: 768px) {

    .end-instagram {
        width: auto;
        max-width: 90vw;

        margin-top: 8px;
        padding: 12px 18px;

        border-top: 1px solid rgba(255,255,255,.55);
        border: 1px solid rgba(255,255,255,.55);
        border-radius: 999px;

        font-size: 13px;
        letter-spacing: .035em;
    }

}

/* =========================================================
   FOOTER / INSTAGRAM BIGGER + BLACK/WHITE BLINK
   ========================================================= */

.end-instagram {
    padding: 15px 22px;
    font-size: 18px;
    letter-spacing: .035em;

    animation: instagramBlink 1.2s steps(1, end) infinite;
}

@media (max-width: 768px) {
    .end-instagram {
        padding: 14px 20px;
        font-size: 15px;
    }
}

@keyframes instagramBlink {
    0%,
    49.999% {
        background: #111;
        color: #fff;
        border-color: #fff;
    }

    50%,
    100% {
        background: #fff;
        color: #111;
        border-color: #fff;
    }
}

@media (prefers-reduced-motion: reduce) {
    .end-instagram {
        animation: none;
        background: #fff;
        color: #111;
    }
}



/* =========================================================
   FOOTER / LEGAL LINKS – einziges neues Element
   ========================================================= */
.end-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 12px;
}
.end-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.3;
}
.end-legal a {
    color: #fff;
    opacity: .65;
    text-decoration: none;
}
.end-legal a:hover, .end-legal a:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 768px) {
    .end-social {
        width: 100%;
        gap: 10px;
        margin-top: 6px;
    }
    .end-legal {
        font-size: 10px;
        gap: 8px 20px;
    }
}


/* =========================================================
   ABOUT / THE MIND BEHIND AW DSIGN
   Nur die neue vorletzte Section – alle bestehenden Regeln bleiben.
   ========================================================= */

.about-portrait {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: clamp(56px, 8vh, 112px) clamp(24px, 6vw, 112px);
    background: #111;
    color: #fff;
    overflow: hidden;
}

.about-portrait__layout {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 110px);
    align-items: center;
}

.about-portrait__figure {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.about-portrait__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78svh;
    object-fit: contain;
    object-position: center;
    filter: none;
}

.about-portrait__content {
    min-width: 0;
    max-width: 720px;
}

.about-portrait__eyebrow {
    margin: 0 0 clamp(26px, 4vw, 66px);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
}

.about-portrait__title {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(44px, 6vw, 110px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.075em;
}

.about-portrait__rule {
    width: 100%;
    height: 2px;
    margin: clamp(26px, 3vw, 46px) 0 22px;
    background: #fff;
}

.about-portrait__name {
    margin: 0 0 4px;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 900;
    letter-spacing: -.04em;
}

.about-portrait__role {
    margin: 0;
    font-size: clamp(13px, 1.35vw, 17px);
    font-weight: 500;
}

.about-portrait__statement {
    max-width: 36ch;
    margin: 30px 0 0;
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 400;
    line-height: 1.45;
}

@media (max-width: 768px) {
    .about-portrait {
        min-height: 0;
        padding: 60px 6vw 75px;
    }

    .about-portrait__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

    .about-portrait__figure {
        max-width: 560px;
        margin-inline: auto;
    }

    .about-portrait__image {
        max-height: 70svh;
    }

    .about-portrait__eyebrow {
        margin-bottom: 24px;
    }

    .about-portrait__title {
        font-size: clamp(42px, 10vw, 64px);
    }

    .about-portrait__statement {
        margin-top: 24px;
    }
}

/* Kontakt am Porträt – nur für die ABOUT-Section */
.about-portrait__contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-top: 24px;
    font-style: normal;
    font-size: clamp(13px, 1.35vw, 17px);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

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

.about-portrait__contact a:hover,
.about-portrait__contact a:focus-visible {
    text-decoration: underline;
}