/* =================================================================
   0. FONTS & FARBEN (BASIS)
   ================================================================= */

/* Fonts laden */
@font-face { font-family: 'Boldonse'; src: url('fonts/Boldonse.otf') format('opentype'); font-weight: normal; }
@font-face { font-family: 'Perandory'; src: url('fonts/PerandorySemiCondensed.otf') format('opentype'); font-weight: normal; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Regular.otf') format('opentype'); font-weight: normal; }

:root {
    /* Farb-Palette */
    --c-black:  #000000;
    --c-dark:   #1a1b1b;
    --c-beige:  #e1ded1;
    --c-yellow: #edff00;
    --c-accent: #993b29; /* Rot */
    --c-grey:   #666666;

    /* Schrift-Zuordnung */
    --f-headline: 'Boldonse', sans-serif; 
    --f-text:     'Lemon Milk', sans-serif;
    --f-nav:      'Boldonse', sans-serif;
    
    /* Globaler Abstand */
    --pad-container: 10vh 8vw 5vh;
}


/* =================================================================
   1. SCHRIFTEN & GRÖSSEN (HIER ÄNDERN!)
   ================================================================= */

/* TITLE (CASE HEADER)
   Das ist auf der case.html ganz oben der Project Title über dem Bild.
================================================================= */
#project-title-header {
    font-family: var(--f-headline);
    font-size: 6.5vw;                /* <-- GRÖSSE HIER ÄNDERN */
    line-height: 1.3;
    color: var(--c-beige);
    text-transform: uppercase;
    margin: 0;
}

/* HEADLINE (STANDARD)
   Das sind die grossen Überschriften auf Index, Work und Case (unten).
   z.B. "VIDEO/PHOTO & AI PRODUCTION" oder "BIENE ÖSTERREICH"
================================================================= */
.headline-xl {
    font-family: var(--f-headline);
    font-size: 5vw;                /* <-- GRÖSSE HIER ÄNDERN */
    line-height: 1.3;
    color: var(--c-beige);          /* Standardfarbe Beige */
    text-transform: uppercase;
    margin: 0;
}

/* Spezialfall: Headline auf hellem Hintergrund (z.B. Work Seite) */
.bg-headline {
    color: var(--c-dark) !important; /* Muss dunkel sein auf Beige */
}


/* FOOTER (GROSS)
   Die grosse "WANNA WORK WITH US?" Schrift im Footer.
================================================================= */
.footer-cta {
    font-family: var(--f-headline);
    font-size: 3.5vw;                 /* <-- GRÖSSE HIER ÄNDERN */
    line-height: 1.3;
    color: var(--c-beige);
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    width: 100%;
}


/* TEXTBLOCK (FLIESSTEXT)
   Die kleinen Textblöcke (Intro, Beschreibungen).
================================================================= */
.text-lead {
    font-family: var(--f-text);
    font-size: 1.4vw;               /* <-- GRÖSSE HIER ÄNDERN */
    line-height: 1.3;
    text-transform: uppercase;
    margin: 0;
}


/* LINKS (TEXT)
   Kleine Links wie "VIEW PORTFOLIO" oder "DOWNLOAD VIDEO".
================================================================= */
.text-link {
    font-family: var(--f-text);
    font-size: 0.9vw;               /* <-- GRÖSSE HIER ÄNDERN */
    color: var(--c-accent);         /* Rot */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-top: 1.5vh;
    display: inline-block;
    transition: color 0.3s ease;
    cursor: pointer;
}


/* THUMBNAIL TITEL
   Die Titel auf den Bildern (Slider & Grid).
================================================================= */
.hz-title, .grid-title { 
    font-family: var(--f-headline); 
    font-size: 2.5vw;               /* <-- SLIDER TITEL GRÖSSE */
    line-height: 1.5; 
    color: var(--c-beige); 
    text-transform: uppercase; 
    /* Animationen */
    transform: translateY(20px); 
    transition: transform 0.4s ease 0.1s; 
}
.grid-title { 
    font-size: 1.5vw;               /* <-- GRID TITEL GRÖSSE (kleiner) */
}


/* MENU (FULLSCREEN)
   Die riesigen Links im Menü.
================================================================= */
.menu-link-item { 
    font-family: var(--f-nav); 
    font-size: 6vw;                 /* <-- MENÜ SCHRIFTGRÖSSE */
    color: var(--c-beige); 
    text-decoration: none; 
    text-transform: lowercase; 
    line-height: 1.0; 
    cursor: pointer; 
    opacity: 0; 
    transform: translateY(40px);
}


/* =================================================================
   2. BASIS & RESET (TECHNISCHES)
   ================================================================= */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body, html { 
    margin: 0; padding: 0; width: 100%; 
    background: var(--c-black); color: var(--c-beige); 
    overflow-x: hidden; 
    -webkit-font-smoothing: antialiased; 
}

/* Intro Overlay */
#intro-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--c-beige);
    z-index: 2500; pointer-events: none;
    transition: opacity 0.8s ease; 
}
#preloader { display: none; }

/* Hamburger Icon */
.menu-trigger { position: fixed; top: 60px; right: 60px; z-index: 2100; width: 50px; height: 25px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; mix-blend-mode: difference; }
.menu-trigger.active { mix-blend-mode: normal; }
.menu-bar { display: block; width: 100%; height: 2px; background-color: var(--c-beige); transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-trigger.active .menu-bar:nth-child(1) { transform: translateY(11.5px) rotate(45deg); }
.menu-trigger.active .menu-bar:nth-child(2) { opacity: 0; }
.menu-trigger.active .menu-bar:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }

/* Fullscreen Menu Container */
#fullscreen-menu { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: var(--c-accent); z-index: 2000; flex-direction: column; 
    justify-content: space-between; padding: var(--pad-container); 
}
#fullscreen-menu.open { display: flex; animation: menuFadeIn 0.3s ease forwards; }
.menu-links-container { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; gap: 3vh; }
.menu-link-item:hover { color: var(--c-dark); transition: color 0.2s ease; }
#fullscreen-menu.open .menu-link-item { animation: itemSlideUp 0.6s ease forwards; }
#fullscreen-menu.open .menu-link-item:nth-child(1) { animation-delay: 0.1s; } 
#fullscreen-menu.open .menu-link-item:nth-child(2) { animation-delay: 0.2s; }
#fullscreen-menu.open .menu-link-item:nth-child(3) { animation-delay: 0.3s; }

.menu-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; width: 100%; text-align: center; opacity: 0; }
#fullscreen-menu.open .menu-footer-grid { animation: footerFadeIn 0.8s ease forwards; animation-delay: 0.5s; }
.menu-footer-col { display: flex; flex-direction: column; align-items: center; }
.menu-footer-line { font-family: var(--f-text); font-size: 0.7vw; color: var(--c-beige); text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.1; text-transform: uppercase; }
a.menu-footer-line:hover { opacity: 0.5; }

/* Lightbox */
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-black); z-index: 3000; display: none; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
#lightbox.active { display: flex; opacity: 1; pointer-events: all; }
#lightbox-img, #lightbox-video, #lightbox-iframe { width: auto; height: auto; max-width: min(90vw, 1920px); max-height: min(90vh, 1920px); object-fit: contain; display: none; opacity: 0; transition: opacity 0.6s ease; }
#lightbox-iframe { width: 90vw; max-width: 1920px; aspect-ratio: 16 / 9; border: none; }
#lightbox.show-content #lightbox-img, #lightbox.show-content #lightbox-video, #lightbox.show-content #lightbox-iframe { opacity: 1; }
#lightbox-close { position: fixed; top: 60px; right: 60px; width: 50px; height: 25px; cursor: pointer; z-index: 3005; opacity: 0; transition: opacity 0.3s ease; }
#lightbox-close::before, #lightbox-close::after { content: ''; position: absolute; top: 11.5px; left: 0; width: 100%; height: 2px; background-color: var(--c-beige); }
#lightbox-close::before { transform: rotate(45deg); } #lightbox-close::after { transform: rotate(-45deg); }
#lightbox.active #lightbox-close { opacity: 1; }

/* Footer Layout */
.footer-section { 
    position: relative; width: 100%; min-height: 51vh; background-color: var(--c-dark); z-index: 20; 
    padding: var(--pad-container); display: flex; flex-direction: column; justify-content: space-between; 
    gap: 8vh; border-top: 1px solid #333; margin-top: -5px; padding-top: calc(10vh + 5px); 
}
.footer-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; width: 100%; }
.footer-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-line { font-family: var(--f-text); font-size: 0.7vw; color: var(--c-beige); text-decoration: none; display: block; margin-bottom: 4px; line-height: 1.1; text-transform: uppercase; transition: opacity 0.3s ease; }
a.footer-line:hover { opacity: 0.5; }


/* =================================================================
   3. SEITEN LAYOUTS (Hero, Grid, Parallax)
   ================================================================= */

/* Home / Index */
.hero-container { position: relative; height: 100vh; width: 100%; overflow: hidden; z-index: 5; }
.hero-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; will-change: transform; }
#bg-image, #bg-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.header-content { position: absolute; bottom: 60px; left: 60px; right: 60px; z-index: 10; }
.logo-container { width: 67.5vw; margin-bottom: 5vh; pointer-events: none; position: relative; }
.logo-part { width: 100%; height: auto; display: block; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; width: 100%; }
.info-block h3 { font-family: var(--f-text); font-size: 0.85vw; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
.info-block p { font-family: sans-serif; font-size: 0.75vw; line-height: 1.5; text-transform: uppercase; max-width: 95%; color: var(--c-beige); transition: color 0.5s ease; }
.info-block:hover p { color: var(--c-accent); }

/* Content Section (Scroll) */
.content-section { position: relative; z-index: 10; background: var(--c-dark); width: 100%; padding: 0; min-height: 200vh; }
.parallax-item { position: absolute; will-change: transform, opacity; opacity: 0; transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1); z-index: 20; }
.parallax-item.is-visible { opacity: 1; }
.parallax-item img { width: 100%; height: auto; display: block; cursor: pointer; }

.headline-wrapper { position: absolute; top: 55vh; left: 8vw; z-index: 50; pointer-events: none; width: 90vw; opacity: 0; transition: opacity 2s ease-out; }
.headline-wrapper.is-visible { opacity: 1; }
.main-headline { color: var(--c-beige); white-space: nowrap; }
.main-headline span { display: block; margin-left: 15vw; }

.new-text-block { position: absolute; top: calc(65vh + 15vw + 2px); right: 8vw; width: 40vw; z-index: 30; text-align: left; }
.new-text-block p { color: var(--c-beige); }
.new-text-block .text-link:hover { color: var(--c-beige); }

/* Yellow Section */
.yellow-section { position: relative; width: 100%; min-height: 120vh; background-color: var(--c-yellow); color: var(--c-dark); z-index: 5; padding: 20vh 8vw 10vh; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.yellow-headline { color: var(--c-dark); margin-bottom: 0; position: relative; z-index: 60; pointer-events: none; }
.second-text-block { position: absolute; top: 55vh; right: 8vw; width: 40vw; z-index: 60; text-align: left; }
.second-text-block p { color: var(--c-dark); }
.second-text-block .text-link:hover { color: #333333; }

/* Beige Section (Services) */
.beige-section { position: relative; width: 100%; min-height: 51vh; background-color: #e1ddd0; z-index: 6; padding: 0 8vw; display: flex; align-items: center; margin-top: -2px; }
.beige-grid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: 6vw; width: 100%; align-items: start; }
.beige-left-col h4 { font-family: var(--f-text); font-size: 0.9vw; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2vh; margin-top: 0; }
.beige-left-col p { color: var(--c-dark); }
.services-list-container { display: flex; flex-direction: column; width: 100%; }
.service-full-row { display: flex; width: 100%; border-bottom: 1px solid var(--c-dark); padding: 2vh 0; }
.service-full-row:first-child { border-top: 1px solid var(--c-dark); }
.service-item-half { width: 50%; padding-right: 20px; display: flex; align-items: center; }
.service-name { font-family: var(--f-text); font-size: 0.7vw; line-height: 1.4; color: var(--c-dark); text-transform: uppercase; letter-spacing: 0.05em; }

/* Bild Positionen */
.img-1 { width: 45vw; top: 35vh; left: 45vw; } 
.img-2 { width: 30vw; top: calc(65vh + 15vw + 350px); left: 10vw; } 
.img-3 { width: 28vw; top: calc(65vh + 15vw - 120px + 12vw + 550px); left: 55vw; } 
.img-4 { width: 42vw; top: calc(65vh + 15vw + 1500px); left: 5vw; } 
.img-5 { width: 15vw; top: calc(65vh + 15vw + 1700px); left: 65vw; }
.ai-img-1 { width: 45vw; top: 80vh; left: 3vw; z-index: 15; } 
.ai-img-2 { width: 30vw; top: 145vh; left: 58vw; z-index: 15; }

/* Work Overview */
.fixed-bg-text { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; background: var(--c-beige); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 8vw; pointer-events: none; color: var(--c-dark); margin: 0; box-sizing: border-box; }
.bg-headline { margin-bottom: 10px; opacity: 0; color: var(--c-dark); }
.bg-text-block p { max-width: 50vw; margin: 0 auto; opacity: 0; }
.intro-visible { animation: itemSlideUp 0.8s ease forwards; }

.hz-wrapper { width: 100%; height: 100vh; display: flex; align-items: center; overflow: hidden; background-color: transparent; position: relative; z-index: 10; }
.hz-track { display: flex; gap: 3.5vw; padding-left: 100vw; padding-right: 0; width: max-content; align-items: center; }
.hz-item { width: auto; height: 47vh; flex-shrink: 0; position: relative; cursor: pointer; overflow: hidden; transition: height 0.3s ease; }
.hz-item.portrait { height: 56vh; }
.hz-item img { width: auto; height: 100%; max-width: none; display: block; transition: transform 0.6s ease; }
.hz-overlay, .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s ease; text-align: center; }
.hz-cat, .grid-cat { font-family: var(--f-text); font-size: 0.9vw; color: var(--c-beige); text-transform: uppercase; margin-bottom: 5px; transform: translateY(20px); transition: transform 0.4s ease; }
.grid-cat { font-size: 0.7vw; }
.hz-item:hover .hz-overlay, .grid-item:hover .grid-overlay { opacity: 1; }
.hz-item:hover .hz-cat, .grid-item:hover .grid-cat { transform: translateY(0); }
.hz-item:hover .hz-title, .grid-item:hover .grid-title { transform: translateY(0); }

.archive-section { padding: 10vh 8vw 20vh; background: var(--c-black); position: relative; z-index: 20; margin-top: -1px; }
.archive-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5vh; border-bottom: 1px solid #333; padding-bottom: 2vh; max-width: 2000px; margin-left: auto; margin-right: auto; }
.archive-headline { font-family: var(--f-text); font-size: 1.2rem; color: var(--c-beige); text-transform: uppercase; margin: 0; }
#grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 2000px; margin: 0 auto; }
.grid-item { position: relative; width: 100%; aspect-ratio: 2/1; overflow: hidden; cursor: pointer; opacity: 0; transform: translateY(50px); }
.grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }


/* =================================================================
   4. MOBILE STYLES (HIER ÄNDERN FÜR HANDY)
   ================================================================= */

@media (max-width: 1024px) {
    /* Padding & Resets */
    .hero-container, .content-section, .yellow-section, .beige-section, .footer-section, .fixed-bg-text { padding-left: 5vw !important; padding-right: 5vw !important; }
    
    /* --- MOBILE SCHRIFTGRÖSSEN (Überschreiben Desktop) --- */
    
    #project-title-header { font-size: 14vw !important; }  /* TITLE Mobile */
    .headline-xl        { font-size: 14vw !important; }  /* HEADLINE Mobile */
    .footer-cta         { font-size: 14vw !important; }  /* FOOTER Mobile */
    .text-lead          { font-size: 4.5vw !important; line-height: 1.25 !important; } /* TEXT Mobile */
    
    .hz-title           { font-size: 8vw; }  /* SLIDER Mobile */
    .grid-title         { font-size: 8vw; }  /* GRID Mobile */
    .grid-cat           { font-size: 3vw; }
    
    .menu-link-item     { font-size: 18vw !important; } /* MENU Mobile */
    .menu-footer-line   { font-size: 2.2vw !important; }
    .footer-line        { font-size: 4vw; margin-bottom: 8px; }
    
    .new-text-block p, .second-text-block p { font-size: 4.2vw !important; }
    .text-link          { font-size: 3.5vw !important; margin-top: 2vh !important; }

    /* --- Layout Mobile Fixes --- */
    .menu-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .menu-footer-col:nth-child(3), .menu-footer-col:nth-child(4) { display: none !important; }
    .menu-trigger, #lightbox-close { top: 30px; right: 30px; }
    .footer-bottom-grid { grid-template-columns: 1fr; gap: 30px; }

    .header-content { left: 5vw; right: 5vw; bottom: 2vh; }
    .logo-container { width: 90vw; margin-bottom: 15vh !important; }
    .info-grid { display: none !important; }
    
    .content-section { display: flex; flex-direction: column; height: auto; min-height: auto; padding-top: 10vh; padding-bottom: 10vh; gap: 5vh; }
    .parallax-item { position: relative !important; top: auto !important; left: auto !important; width: 90vw !important; margin: 0 auto !important; transform: none !important; opacity: 1 !important; order: 3; }
    .headline-wrapper { position: relative; width: 100%; order: 1 !important; }
    .new-text-block { position: relative; top: auto; right: auto; width: 100%; margin: 0 !important; order: 2; }
    .main-headline { position: relative; white-space: normal !important; text-align: left; margin: 0 !important; }
    .main-headline span { display: inline !important; margin-left: 0 !important; }
    
    .yellow-section { height: auto; min-height: auto; padding-top: 10vh; padding-bottom: 10vh; gap: 5vh; }
    .yellow-headline { line-height: 0.9 !important; margin-bottom: 0 !important; }
    .second-text-block { position: relative; top: auto; right: auto; width: 100%; margin: 0 !important; }
    .ai-img-1, .ai-img-2 { position: relative !important; top: auto !important; left: auto !important; width: 90vw !important; margin: 0 auto !important; z-index: 10; }
    
    .beige-section { height: auto; padding-top: 10vh; padding-bottom: 10vh; display: block; }
    .beige-grid { grid-template-columns: 1fr; gap: 5vh; }
    .beige-left-col h4 { font-size: 4vw; }
    .service-full-row { flex-direction: column !important; border: none !important; padding: 0 !important; }
    .service-item-half { width: 100% !important; padding-right: 0 !important; padding-top: 1.5vh; padding-bottom: 1.5vh; border-bottom: 1px solid var(--c-dark); }
    .service-full-row:first-child .service-item-half:first-child { border-top: 1px solid var(--c-dark); }
    .service-name { font-size: 2.5vw !important; line-height: 1.4 !important; }
    
    .bg-text-block p { max-width: 90vw; }
    .hz-track { padding-left: 5vw; gap: 5vh; }
    .hz-item { height: 40vh; } .hz-item.portrait { height: 50vh; }
    
    .archive-section { padding-top: 5vh; }
    .archive-header-row { flex-direction: column; align-items: flex-start; gap: 20px; }
    #grid-container { grid-template-columns: 1fr; gap: 20px; }
}

/* --- Keyframes --- */
@keyframes menuFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes itemSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes footerFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- LAPTOP HEIGHT FIXES --- */
@media (max-height: 1200px) {
    .content-section { min-height: calc(65vh + 35vw + 550px); }
    .img-2 { top: calc(65vh + 15vw + 230px); } 
    .img-3 { top: calc(65vh + 27vw + 200px); } 
    .img-4 { top: calc(65vh + 15vw + 900px); } 
    .img-5 { top: calc(65vh + 15vw + 1000px); } 
    .new-text-block { top: calc(65vh + 250px); }
}
@media (max-height: 800px) {
    .content-section { min-height: calc(65vh + 35vw + 500px); }
    .img-2 { top: calc(65vh + 15vw + 150px); } 
    .img-3 { top: calc(65vh + 27vw + 200px); } 
    .img-4 { top: calc(65vh + 15vw + 700px); } 
    .img-5 { top: calc(65vh + 15vw + 850px); } 
    .new-text-block { top: calc(65vh + 200px); }
}