/* --- VARIABLES & SETTINGS --- */

:root {

    --bg-color: #ffffff;

    --text-color: #000000;

    --font-main: 'Host Grotesk', sans-serif;

    --side-margin: 4vw; 

    --stroke-asterisk: 11px;

    --stroke-arrow: 16px;

    --max-width: 1600px; 

    --footer-bg: #ffffff;

    --footer-text: #000000;

}



* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }



body {

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

    color: var(--text-color);

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

    overflow-x: hidden;

}



/* --- SCROLL LOGIC PART 1 --- */

.scroll-container {

    height: 300vh;

    position: relative;

    z-index: 1;

}



.sticky-wrapper {

    position: sticky;

    top: 0;

    height: 100vh;

    width: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}



/* --- NAVIGATION --- */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center; 

    padding: 1.5rem var(--side-margin);

    font-weight: 500;

    font-size: 1.2rem;

    width: 100%;

    max-width: var(--max-width);

    left: 50%;

    transform: translateX(-50%);

    z-index: 999;

    position: fixed;

    top: 0;

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

    pointer-events: none; 

}



.logo, .center-nav, .contact-nav { pointer-events: all; }



.logo p { font-size: 0.9rem; line-height: 1.2; font-weight: 400; }



.center-nav {

    display: flex;

    gap: 0;

    align-items: center;

    position: relative;

    height: auto; 

    transform-origin: center;

}



.nav-marker {

    position: absolute;

    height: 100%;

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

    top: 0;

    left: 0;

    width: 0;

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

    z-index: 0;

    display: block; 

}



.nav-link {

    text-decoration: none;

    color: var(--text-color);

    padding: 0.2rem 0.8rem;

    position: relative;

    z-index: 1;

    margin: 0 0.5rem;

    display: inline-block;

    font-size: 1.2rem;

    transition: 

        color 0.3s ease,

        font-size 0.4s cubic-bezier(0.25, 1, 0.5, 1),

        margin 0.4s cubic-bezier(0.25, 1, 0.5, 1),

        padding 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



.nav-link.active { 

    color: var(--bg-color); 

    background-color: transparent;

    font-weight: 500; 

}



.nav-link.active-large {

    color: var(--bg-color);

    background-color: transparent;

    font-weight: 600; 

    font-size: 1.8rem; 

    padding: 0.4rem 1.2rem; 

    margin: 0 1rem; 

}



.contact-link { 

    text-decoration: underline; 

    text-underline-offset: 4px; 

    padding-right: 0; 

}





/* --- HERO SECTION --- */

.hero-container {

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 0 var(--side-margin);

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    position: relative;

}



.hero-content {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 75vh;

    width: 100%;

    position: relative;

    z-index: 10;

    margin-top: 5vh;

}



.hero-row {

    display: flex;

    width: 100%;

    align-items: center;

    line-height: 1;

    position: relative;

}



.huge-text {

    font-size: clamp(4rem, 13vw, 13rem);

    font-weight: 400;

    letter-spacing: -0.02em;

    margin: 0;

    line-height: 0.85;

    transform-origin: left center;

    white-space: nowrap;

    margin-left: -0.05em; 

}



.stroke-asterisk { stroke: var(--text-color); stroke-width: var(--stroke-asterisk); stroke-linecap: square; }

.stroke-arrow { stroke: var(--text-color); stroke-width: var(--stroke-arrow); stroke-linecap: square; }

.icon-wrap { display: flex; align-items: center; justify-content: center; }



.top-row { justify-content: flex-start; gap: 0.5rem; }

.asterisk-wrap { height: 0.85em; width: 0.85em; font-size: clamp(4rem, 13vw, 13rem); flex-shrink: 0; }

.asterisk-wrap svg { width: 100%; height: 100%; }

.middle-row { justify-content: flex-end; padding-right: 10%; position: relative; }

.bottom-row { justify-content: space-between; align-items: flex-end; }

.arrow-wrap { width: clamp(2.5rem, 8vw, 6rem); padding-bottom: 0.5rem; margin-right: 2rem; }

.arrow-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }



.description-text {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    opacity: 0;

    font-size: clamp(1.2rem, 2.3vw, 2.8rem);

    line-height: 1.15;

    font-weight: 400;

    width: max-content;

    text-align: left;

    pointer-events: none;

}



.hero-image-wrap {

    position: absolute;

    z-index: 1;

    overflow: hidden;

    transform: translateX(150%);

}

.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }



/* --- ANGEBOT SEKTION --- */

.angebot-section {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    scroll-margin-top: 0;

    padding-top: 40vh;

    padding-bottom: 30vh; 

    z-index: 2;

}



.angebot-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    margin-bottom: 45vh; 

    padding: 0 var(--side-margin);

}



.angebot-intro {

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

    font-weight: 400;

    margin: 0;

    line-height: 1.2;

}



.word-cycler-wrap {

    height: auto;

    min-height: 1.5em;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.2em 0;

}



.cycling-word {

    font-size: clamp(3rem, 7vw, 7rem);

    font-weight: 700;

    line-height: 1.2;

    display: block;

    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;

    padding: 0 0.1em;

}



.word-hidden-up { transform: translateY(-110%); opacity: 0; }

.word-hidden-down { transform: translateY(110%); opacity: 0; }

.word-visible { transform: translateY(0); opacity: 1; }



.angebot-sub {

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

    font-weight: 400;

    margin-top: 1.5rem;

    line-height: 1.4;

    color: var(--text-color);

}



/* --- SHOWREEL BEREICH --- */

.showreel-wrapper {

    width: 100%;

    max-width: var(--max-width);

    padding: 0 var(--side-margin);

    position: relative;

    display: flex;

    flex-direction: column;

    margin: 0 auto;

}



.showreel-link-block {

    text-decoration: none;

    color: var(--text-color);

    display: block;

    width: 100%;

    cursor: pointer;

    position: relative;

    isolation: isolate;

}



.video-container {

    width: 100%;

    aspect-ratio: 3 / 1;

    overflow: hidden;

    position: relative;

    background-color: #f0f0f0;

    z-index: 5;

}



.video-container video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.showreel-text-container {

    position: relative;

    z-index: 1;

    overflow: hidden;

    margin-top: -2px;

    padding-top: 1rem;

}



.showreel-inner-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3rem;

    transform: translateY(-100%);

    will-change: transform;

}



.huge-showreel-text {

    font-size: clamp(4rem, 11vw, 11rem);

    font-weight: 400;

    letter-spacing: -0.03em;

    line-height: 1.1;

}



.showreel-arrow-wrap {

    width: clamp(5rem, 10vw, 10rem);

    height: auto;

    display: flex;

    align-items: center;

    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);

}



.showreel-arrow-wrap svg {

    width: 100%;

    height: auto;

    display: block;

}



.arrow-flies-away {

    transform: translateX(120%);

}



/* --- VORTEILE SEKTION --- */

.vorteile-wrapper {

    /* Desktop Anpassung: Höhe reduziert um Abstand zu "Über mich" zu verkleinern */

    height: 105vh;

    position: relative;

    z-index: 3;

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

    scroll-margin-top: 15vh;

}



.vorteile-sticky {

    position: sticky;

    top: 0;

    height: 100vh;

    width: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top: 12vh; 

}



.vorteile-grid {

    display: grid;

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

    gap: 3rem; 

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    padding: 0 var(--side-margin);

    height: auto; 

    align-items: flex-start;

    justify-content: center;

}



.vorteile-col {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    min-height: 400px;

    padding-top: 0;

    padding-left: 2rem; 

}



.v-star-wrap {

    width: clamp(3rem, 5vw, 5rem);

    height: auto;

    position: relative;

    top: auto;

    left: auto;

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

    margin-bottom: -3rem; 

    margin-left: -1.5rem; 

    opacity: 1;

    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;

    z-index: 2;

    transform-origin: center center;

}



.v-star-wrap svg {

    width: 100%;

    height: auto;

    display: block;

}



.v-content-wrap {

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 1;

    text-align: left;

    padding-right: 1rem;

    position: absolute;

    top: 0; 

    left: 0;

    width: 100%;

    padding-left: 0.5rem;

}



.v-content-wrap h3 {

    font-size: clamp(1.8rem, 2.5vw, 3rem);

    font-weight: 700;

    line-height: 1.1;

    margin-bottom: 1.5rem;

}



.v-content-wrap p {

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

    font-weight: 400;

    line-height: 1.4;

}



.vorteile-col.active .v-star-wrap {

    transform: translate(-40%, -40%) rotate(-45deg) scale(0.6);

    opacity: 0;

}



.vorteile-col.active .v-content-wrap {

    opacity: 1;

    transform: translateY(0);

}



/* --- ÜBER MICH SEKTION (MIT HOVER) --- */

.about-section {

    position: relative;

    width: 100%;

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

    /* Desktop Anpassung: Padding-Top entfernt, um Abstand zu verkleinern */

    padding: 0rem var(--side-margin) 5rem var(--side-margin);

    margin-top: 0; 

    z-index: 4; 

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    scroll-margin-top: 20vh;

}



.about-container {

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: start;

}



.about-image-col {

    display: flex;

    justify-content: center;

    align-items: flex-start;

}



.about-img-wrapper {

    width: 100%;

    max-width: 500px;

    aspect-ratio: 4/5;

    overflow: hidden;

    position: relative; 

}



/* HOVER IMAGES */

.about-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: opacity 0.5s ease-in-out;

}



.img-default {

    position: relative;

    z-index: 1;

    opacity: 1;

}



.img-hover {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 2;

    opacity: 0;

}



.about-img-wrapper:hover .img-hover {

    opacity: 1;

}



.about-text-col {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    margin-top: -0.5rem; 

}



.about-para {

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

    line-height: 1.4;

    font-weight: 300;

    opacity: 1;

    transform: none;

}



.cta-text {

    margin-top: 1rem;

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

    font-style: italic;

}





/* --- FOOTER STYLES --- */

.main-footer {

    width: 100%;

    background-color: var(--footer-bg);

    color: var(--footer-text);

    padding: 5rem var(--side-margin) 3rem var(--side-margin);

    position: relative;

    z-index: 5;

    text-align: center;

    border-top: 1px solid var(--text-color);

}



.footer-container {

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2rem;

}



/* Social Icons */

.footer-socials {

    display: flex;

    gap: 2rem;

    justify-content: center;

    margin-bottom: 1rem;

}



.social-icon {

    display: block;

    width: 32px;

    height: 32px;

    color: var(--footer-text);

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.social-icon:hover {

    transform: scale(1.1);

    opacity: 0.8;

}



/* Footer Navigation */

.footer-nav {

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

}



.footer-nav a, .footer-btn {

    color: var(--footer-text);

    text-decoration: none;

    font-size: 1.1rem;

    font-weight: 400;

    transition: opacity 0.3s ease;

    background: none;

    border: none;

    cursor: pointer;

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

    padding: 0;

}



.footer-nav a:hover, .footer-btn:hover {

    opacity: 0.6;

}



.footer-divider {

    display: none;

}



/* Impressum */

.footer-impressum h3 {

    font-size: 1.2rem; 

    font-weight: 600;  

    margin-bottom: 1rem;

}



.footer-impressum p {

    font-size: 0.95rem; 

    line-height: 1.5;

    font-weight: 300;

    color: var(--text-color); 

}



.footer-impressum .impressum-bold {

    font-weight: 500;

    color: var(--text-color);

    margin: 0.5rem 0;

}



/* Copyright */

.footer-copyright {

    margin-top: 3rem;

    font-size: 0.85rem;

    color: #444444; 

}



/* --- DATENSCHUTZ MODAL --- */

.privacy-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10000;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.privacy-modal.active {

    opacity: 1;

    pointer-events: all;

}



.privacy-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(5px);

}



.privacy-content {

    background-color: #ffffff;

    width: 90%;

    max-width: 800px;

    max-height: 90vh;

    padding: 3rem;

    position: relative;

    overflow-y: auto;

    border: 1px solid #eee;

    box-shadow: 0 10px 40px rgba(0,0,0,0.1);

}



.close-btn {

    position: absolute;

    top: 1rem;

    right: 1.5rem;

    font-size: 2.5rem;

    line-height: 1;

    background: none;

    border: none;

    cursor: pointer;

    color: #000;

}



.privacy-content h2 {

    font-size: 2rem;

    margin-bottom: 2rem;

    font-weight: 600;

}



.privacy-body h3 {

    font-size: 1.2rem;

    margin-top: 1.5rem;

    margin-bottom: 0.5rem;

    font-weight: 600;

}



.privacy-body p, .privacy-body li {

    font-size: 1rem;

    line-height: 1.5;

    color: #333;

    font-weight: 300;

    margin-bottom: 0.5rem;

}



.privacy-body ul {

    list-style: disc;

    padding-left: 1.5rem;

    margin-bottom: 1rem;

}



.privacy-body a {

    color: inherit;

    text-decoration: underline;

}

@media (max-width: 768px) {
    /* 1. Header & Nav Optimierung */
    .navbar { 
        flex-wrap: wrap; 
        gap: 0; 
        padding: 0.8rem var(--side-margin) 0.5rem var(--side-margin);
        background-color: #ffffff; 
        align-items: center; 
    }
    
    .logo { width: auto; flex-grow: 1; order: 1; }
    .logo p { font-size: 0.85rem; }

    .contact-nav { width: auto; text-align: right; order: 2; }
    .contact-link { font-size: 1rem; }

    .center-nav { 
        order: 3; 
        width: 100%; 
        justify-content: center; 
        overflow-x: auto; 
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        gap: 0; 
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
        margin-top: 0;
        border-top: 1px solid rgba(0,0,0,0.05);
        position: relative; 
        display: flex; 
        min-height: 50px;
    }
    .center-nav::-webkit-scrollbar { display: none; }

    .nav-marker {
        height: 32px !important; 
        top: 50% !important;   
        margin-top: -16px !important; 
        border-radius: 0 !important; 
    }

    .nav-link {
        font-size: 1rem;
        padding: 0.2rem 0.6rem 0.2rem 0.6rem; 
        margin: 0 0.1rem;
        line-height: 1; 
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2; 
        height: 32px; 
        transition: font-size 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    }
    
    .nav-link.active-large { 
        font-size: 1.35rem; 
        font-weight: 600;
        padding: 0.2rem 0.8rem; 
        margin: 0 0.2rem; 
    }
    
    .nav-link.active { font-weight: 600; }
    
    /* 2. Hero Mobile Layout */
    .hero-container {
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 150px; 
        height: auto;
        min-height: auto;
        padding-bottom: 2rem;
        overflow-x: hidden;
    }

    .hero-content {
        min-height: auto;
        margin-top: 0;
        order: 1; 
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        gap: 0; 
    }

    .hero-row {
        width: 100%;
        justify-content: flex-start; 
        padding: 0 !important;
        flex-wrap: nowrap; 
        position: relative;
    }

    .huge-text { 
        font-size: 22vw; 
        line-height: 0.8; 
        margin-left: 0;
    }
    
    .asterisk-wrap { 
        font-size: 21vw; 
        height: 0.75em; 
        margin-right: -0.05em; 
    }
    
    /* Anpassung Punkt 1: Block nach oben verschoben */
    .middle-row { 
        flex-direction: row; 
        align-items: center;
        justify-content: flex-start; 
        height: auto;
        position: relative; 
        
        /* Vorher 3rem, jetzt 0.5rem -> Zieht BIN und MATTEO näher an Hii ICH */
        margin-top: 1.9rem;   
        
        /* Abstand zwischen BIN und MATTEO */
        margin-bottom: 1.5rem; 
        
        z-index: 5;
    }
    
    .description-text {
        position: absolute !important; 
        left: 0; 
        right: auto;
        top: 50%; 
        bottom: auto; 
        transform: translateY(-50%); 
        width: max-content;
        text-align: left; 
        font-size: 0.95rem;
        line-height: 1.2;
        padding-left: 1rem; 
        pointer-events: none;
    }

    .bottom-row { 
        align-items: flex-end; 
        z-index: 6; 
    }
    
    .arrow-wrap {
        width: 2.2rem; 
        margin-right: 0;
        margin-left: auto; 
        padding-bottom: 0.5rem;
    }

    .hero-image-wrap {
        position: relative !important;
        transform: none !important; 
        top: auto !important;
        left: auto !important;
        width: 100% !important; 
        height: auto !important;
        aspect-ratio: 4 / 5;
        order: 2;
        margin-bottom: 0;
        border-radius: 0; 
        margin-top: 1rem;
        opacity: 0; 
        will-change: opacity, transform;
    }

    /* Anpassung Punkt 2: NOCH MEHR Weissraum (22vh statt 15vh) */
    .angebot-section { 
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        
        /* Oben mehr Platz */
        padding-top: 33vh; 
        padding-bottom: 5vh; 
        
        scroll-margin-top: 10vh; 
    }
    
    .angebot-content {
        /* Unten mehr Platz (symmetrisch zu oben) */
        margin-bottom: 33vh; 
        padding: 0 var(--side-margin);
    }

    .angebot-intro { font-size: 2rem; }
    .cycling-word { font-size: 3rem; }
    
    .video-container { 
        aspect-ratio: 16 / 9; 
        width: 100%; 
        border-radius: 0; 
        background-color: #000; 
    }
    
    .video-container video {
        object-fit: contain; 
    }
    
    .showreel-inner-row { gap: 1rem; flex-direction: row; }
    .huge-showreel-text { font-size: 15vw; }
    .showreel-arrow-wrap { width: 4rem; }
    
    /* Restliche Styles unverändert */
    .vorteile-wrapper { height: auto; scroll-margin-top: 100px; }
    .vorteile-sticky { position: relative; height: auto; display: block; padding-top: 2rem; padding-bottom: 4rem;}
    .vorteile-grid { display: flex; flex-direction: column; gap: 4rem; padding-left: var(--side-margin); padding-right: var(--side-margin);}
    .vorteile-col { min-height: auto; width: 100%; padding: 0; }
    .v-content-wrap { position: relative; opacity: 1; transform: none; padding: 0; }
    .v-star-wrap { display: none; } 

    .about-container { grid-template-columns: 1fr; gap: 3rem; }
    .about-image-col { order: 1; }
    .about-text-col { order: 2; margin-top: 0; }
    .about-section { padding-bottom: 3rem; padding-top: 3rem; min-height: auto; }
    .footer-nav { flex-direction: column; gap: 1rem; }
    .privacy-content { padding: 1.5rem; width: 95%; margin: 2vh auto; }
}