/* ----------------------------------------------------------------

   PERFORMANCE-OPTIMIERUNG: Google Fonts mit Font-Display: Swap

   Dies vermeidet FOUT (Flash of Unstyled Text) und beschleunigt den Render.

   Die alte <link>-Einbindung im HTML wurde entfernt.

---------------------------------------------------------------- */

/* ACHTUNG: Die Montserrat Font wird hier von Google geladen. Dies ist die beste Praxis. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');



/* DESIGN TOKENS */

:root {

    --ratio: 1.414;

    --base-font-size: 1.125rem;

    --rhythm-unit: 1.75rem;

    --h1-size: 10.5rem;

    --h2-size: 6.5rem;

    --h3-size: 1.8rem;

    --spacing-unit: 2.5rem;

    --primary-color: #1A1A1A;

    --secondary-color: #FFFFFF;

    --background-color: #FAFAFB;

    --border-color: #DDDDDD;

    --header-height: 70px;

    
    --headline-font: 'Montserrat', sans-serif;

    --body-font: 'Inter', sans-serif;



    /* VF: CSS Variable für die Maussteuerung */

    --vf-weight: 100; /* Startgewicht */

    --vf-italic: 0;   /* Startkursivität */

    --vf-emphasis-weight: 900; /* Startgewicht für Emphasis */

    --vf-emphasis-italic: 1;   /* Startkursivität für Emphasis */
}



html { scroll-padding-top: var(--header-height); }

html, body { 
    max-width: 100%; 
    overflow-x: hidden; /* Overflow-X Hidden ist wichtig */
} 



body {

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

    margin: 0; padding: 0; background-color: var(--background-color); color: var(--primary-color); 

    line-height: var(--rhythm-unit); 

    font-weight: 400; 

    font-size: var(--base-font-size);

    scroll-behavior: smooth; 

    cursor: none !important; /* System-Cursor auf Body ausblenden */

    letter-spacing: 0.01em; 

}

/* NEU: Verhindert Scrollen, wenn Menü offen */

body.menu-open { overflow: hidden; }



body, a, button, input { 

    cursor: none !important; /* System-Cursor auf interaktiven Elementen ausblenden */

}



/* GRUNDLAGEN-TYPOGRAFIE */

h1, h2, h3, h4, .intro-text-earned, .section-title { font-family: var(--headline-font); margin-top: 0; margin-bottom: var(--rhythm-unit); line-height: 1.1; font-weight: 900; max-width: 100%; letter-spacing: -0.04em; }



/* VF STYLE FÜR ALLE HEADLINES (DYNAMISCHE BASIS FÜR H1/H2) */

.vf-animated-text { 

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

    /* Dynamische Steuerung (Desktop) */

    font-variation-settings: 'wght' var(--vf-weight), 'ital' var(--vf-italic); 
    font-weight: 700; 

    line-height: 0.9; 

}



/* VF STYLE FÜR HERVORHEBUNGEN (DYNAMISCHE INVERSE STEUERUNG) */

.vf-emphasis {

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

    /* Dynamische Steuerung (Desktop) */

    font-variation-settings: 'wght' var(--vf-emphasis-weight), 'ital' var(--vf-emphasis-italic); 

    font-weight: 900; 

    display: inline-block;

}



/* NEU: VF STYLE FÜR SKILL LISTE (Statisch 900) */

.vf-skill {

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

    font-weight: 900; 

    font-variation-settings: 'wght' 900; 

    font-size: 3.8rem; 

    line-height: 1; 

    margin-bottom: 0; 

    letter-spacing: -0.05em;

    /* WICHTIG: Text muss LINKSBÜNDIG sein, damit wir ihn mit Transform verschieben können. */
    text-align: left; 
    width: 100%; 
    
    /* NEU: Smooth Animation für die TEXT-Verschiebung im Hover-Fall */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.skill-item {
    /* KORRIGIERT: Der gesamte Block ist der Hovel-Bereich. */
    grid-column: 1 / -1; 
    display: flex;
    flex-direction: column;
    
    /* Im Normalzustand: Zentriert den gesamten Block */
    align-items: center; 
    justify-content: center; 
    
    margin-bottom: calc(2 * var(--rhythm-unit)); 
    min-height: 150px; 
    
    position: relative; 
    overflow: hidden; 
    border-top: 1px solid var(--border-color); 
    padding-top: calc(2 * var(--rhythm-unit));
    padding-bottom: calc(2 * var(--rhythm-unit));
    
    /* KORRIGIERT: Nur die Translation des ganzen Blocks (für Shift) animieren */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.skill-item:last-child { 
    margin-bottom: 0; 
    border-bottom: 1px solid var(--border-color); 
}


/* NEU: Horizontaler Shift und Textausrichtung bei Hover (Desktop Only) */
@media (min-width: 1001px) {
    /* NORMALZUSTAND: Text zentriert durch Verschieben des .vf-skill nach rechts */
    .skill-item .vf-skill {
        /* Verschiebt den linksbündigen Text optisch in die Mitte des 50%-Bereichs */
        transform: translateX(50%); 
    }
    
    .skill-item:hover {
        /* WICHTIG: Setzt das Flex-Alignment auf links (linksbündige Ausrichtung des gesamten Inhalts) */
        align-items: flex-start; 
        
        /* Shiftet das gesamte Element (und den Text darin) nach links */
        transform: translateX(0); 
    }
    
    /* HOVERZUSTAND: Text wird LINKSBÜNDIG durch Zurücksetzen des Transforms auf 0 */
    .skill-item:hover .vf-skill {
        /* Fährt den Text an den linken Rand zurück (smooth animiert) */
        transform: translateX(0); 
    }
}


/* NEU: Skill-Detail Box Styling */
.skill-detail {
    /* Positioniert rechts vom Skill-Item */
    position: absolute;
    top: 0;
    /* Startposition rechts der Skill-Titel (ab der Mitte des Containers) */
    left: 50%; 
    width: 50%; /* Die rechte Hälfte des Containers */
    height: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    
    padding-left: var(--spacing-unit);
    
    /* Visuelle Trennung */
    border-left: 1px solid var(--border-color);

    box-sizing: border-box;
    
    /* Animation-Startzustand (unsichtbar) */
    opacity: 0;
    transform: translateX(20px);
    /* KORRIGIERT: Erhöhte Dauer auf 0.8s für flüssigere Bewegung */
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    z-index: 10;
    pointer-events: none; 
    
    /* Text-Styles im Detail */
    color: var(--primary-color);
}
.skill-detail p {
    font-family: var(--body-font);
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 400;
    margin: 0 0 1rem 0;
    text-align: left; 
}

/* Projekt-Links Style */
.skill-detail a {
    color: var(--primary-color); /* Schwarz */
    text-decoration: underline;
    font-weight: 600;
    margin-right: 1rem;
    cursor: none !important;
}
.skill-detail a:hover {
    opacity: 0.7;
}


/* NEU: Animation-Endzustand (sichtbar bei Hover) */
.skill-item:hover .skill-detail {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}


/* H1 Spezifisch */

h1.vf-animated-text { font-size: var(--h1-size); letter-spacing: -0.05em; color: var(--secondary-color); text-transform: uppercase; /* font-weight wird durch VF gesteuert */ }

/* NEU: Fließtext des Hero-Elements wird hier mit Standard-CSS gesetzt, da es kein H-Element ist und es auf Mobile reduziert werden soll */
.intro-text-earned { 
    font-size: 1.5rem; 
    line-height: 1.4; 
    max-width: 600px; 
    color: var(--secondary-color); 
    font-family: var(--body-font); 
    font-weight: 400; 
}


.section-content-right h3 { font-size: var(--h3-size); font-family: var(--headline-font); font-weight: 700; letter-spacing: -0.02em; }

.section-content-right p:not(.intro-text-earned) { font-family: var(--body-font); font-weight: 400; line-height: 1.6; } 



.section-claim-header.vf-animated-text { font-size: var(--h2-size); line-height: 0.9; letter-spacing: -0.04em; margin-bottom: calc(3 * var(--rhythm-unit)); text-transform: uppercase; /* font-weight wird durch VF gesteuert */ }



.claim-header-about { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }



/* CTA BUTTON ANPASSUNG */

.cta-button { display: inline-block; padding: 0.75rem 1.5rem; text-decoration: none; font-weight: 700; transition: background-color 0.3s, color 0.3s, border-color 0.3s; margin-top: calc(2 * var(--rhythm-unit)); font-family: var(--body-font); letter-spacing: 0.08em; }

.cta-hero { background-color: transparent; color: var(--secondary-color); border: 2px solid var(--secondary-color); } 

.cta-hero:hover { background-color: var(--secondary-color); color: var(--primary-color); }

.cta-kontakt { color: var(--primary-color); border: 2px solid var(--primary-color); }

.cta-kontakt:hover { background-color: var(--primary-color); color: var(--secondary-color); }

    

.reveal-text { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

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



.container { 
    max-width: 1600px; 
    margin: 0 auto; 
    padding: 0 var(--spacing-unit); 
    position: relative; 
}

/* NEU: Fix für HERO und KONTAKT Sektionen, um den Grid-Offset zu ignorieren und 100% Breite zu nutzen */
#hero .container, #kontakt .container {
    /* Setzt padding auf 0 und überlässt die Innenabstände den Kind-Elementen */
    padding: 0; 
}
/* NEU: Hero Content muss die volle Breite nutzen und innen padden */
.hero-content-wrapper {
    /* Nutzt die volle Breite des Containers, der jetzt padding: 0 hat */
    width: 100%; 
    /* Fügt den ursprünglichen Horizontal-Padding wieder hinzu */
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
    box-sizing: border-box; 
    
    position: relative; 
    z-index: 10; 
    /* KORRIGIERT: Behält Padding-Top für den Header auf Desktop */
    padding-top: var(--header-height); 
    padding-bottom: 0; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    height: 100%;
}
/* NEU: Kontakt Sektion Content muss die volle Breite nutzen und innen padden */
#kontakt .container div { /* Targeting des inneren div, das den Claim enthält */
    width: 100%;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
    box-sizing: border-box;
}


.grid-container { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--spacing-unit); align-items: start; padding: 0; }

.section-header-left { grid-column: span 1; padding-top: var(--rhythm-unit); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9em; font-weight: 700; font-family: var(--body-font); }

.section-content-right { 
    /* Bleibt bei Spalte 2 bis 12 für ABOUT und PROJEKTE */
    grid-column: 2 / span 11; 
    position: relative; 
    margin-top: calc(-1 * var(--rhythm-unit));
}



section { 
    padding: calc(12 * var(--rhythm-unit)) 0; 
    border-top: 1px solid var(--border-color); 
    position: relative; 
    z-index: 5; 
    min-height: 70vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    background-color: var(--background-color); /* Erzwinge weiße Hintergrundfarbe auf allen Sektionen */
}

/* Rand um "Über Mich" entfernen */

#about { 
    border-top: none; 
    padding-top: calc(12 * var(--rhythm-unit)); 
    padding-bottom: calc(12 * var(--rhythm-unit)); 
    background-color: var(--background-color); 
    z-index: 10; /* Muss über dem Hero-Video liegen */
}

/* Korrektur: Hintergrundfarbe für Footer und Sektionen nach Hero */
#projekte, #method, #kontakt {
    background-color: var(--background-color);
    z-index: 10; /* Stellen Sie sicher, dass sie über dem fixed Video liegen */
}

/* KORREKTUR: Footer bekommt auch die BG und Z-Index, um das Fixed Video zu überdecken. */
footer { 
    background-color: var(--background-color);
    z-index: 10;
    padding: calc(3 * var(--rhythm-unit)) 0; 
    border-top: 1px solid var(--border-color); 
    position: relative; /* Muss relativ sein, um Z-Index zu respektieren */
}

#hero { 
    padding: 0; 
    min-height: 100vh; 
    /* WICHTIG: Muss position: relative sein, damit die Kinder das Parallax-Scrolling auslösen können */
    position: relative; 
    background-color: var(--primary-color); 
    display: flex; /* NEU: Fügt Flex hinzu, um Zentrierung zu ermöglichen */
    align-items: center; /* NEU: Fügt Flex hinzu, um Zentrierung zu ermöglichen */
}


/* KORREKTUR: Standardposition des Hero-Videos ist ABSOLUTE, um es nach dem Scrollen zu verstecken. */
.hero-video-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    z-index: 1; 
    background-color: rgba(0, 0, 0, 0.5); 
    opacity: 0.7; 
    transition: opacity 0.5s; /* Smooth Fade, falls wir es später brauchen */
}
/* NEU: Klasse wird von JS für die Parallax-Phase gesetzt */
.hero-video-wrapper.is-fixed {
    position: fixed;
}
.hero-video-wrapper video, .hero-video-wrapper img { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    object-fit: cover; 
}

header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    /* Erhöhe den Z-Index, um sicherzustellen, dass der Header immer über dem Hero-Video liegt, auch wenn das BS die Adressleiste ein-/ausblendet */
    z-index: 501; 
    transition: background-color 0.3s, color 0.3s; 
    /* NEU: Default auf Transparent für Desktop Hero */
    background-color: transparent; 
}

/* DESKTOP-HEADER: Wird weiß, wenn gescrollt */
.scrolled { 
    background-color: var(--background-color); 
    border-bottom: 1px solid var(--border-color); 
}

    

/* NAV BAR FIXED BOLD STYLE (Statisch 900) */

.top-bar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: calc(1.5 * var(--rhythm-unit)) 0; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--secondary-color); font-family: var(--headline-font); font-weight: 700; }

    

.top-bar .logo, .top-bar-nav a { 

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

    font-weight: 900; 

    font-variation-settings: 'wght' 900; 

    text-decoration: none; 

    transition: color 0.3s; 

}

    

.top-bar .logo { font-size: 1.1em; letter-spacing: 0.05em; }

/* DESKTOP: Wenn gescrollt, wird der Text schwarz */
.scrolled .top-bar { color: var(--primary-color); }

    

/* Navigations-Textfarbe bei Scroll */

.top-bar-nav a { color: inherit; transition: color 0.3s; margin-left: 2rem; }

.scrolled .top-bar-nav a { color: var(--primary-color); }

.scrolled .top-bar-nav a:hover { color: var(--primary-color); } 


/* ... (Restliche CSS-Regeln für CTA, Hero, etc.) ... */

.top-bar-nav {

    display: flex; 

    align-items: center;

}

.top-bar-nav > a {

    margin: 0 0.5rem; 

    text-decoration: none; 

    color: var(--secondary-color);

}

.top-bar-nav > .separator {

    color: var(--secondary-color); 

    font-weight: 900;

    margin: 0;

    line-height: 1;

    transition: color 0.3s; 

}

.scrolled .top-bar-nav > .separator {

    color: var(--primary-color);

}

    

/* CTA Button in der Nav Bar */

.cta-header-manifest {

     margin-left: 0;

    border: none;

    padding: 0;

    margin: 0 0.5rem;

    color: var(--secondary-color); 

}

.cta-header-manifest:hover {

    background-color: transparent; 

    color: var(--secondary-color);

}

/* Hover-Farbe bei gescrolltem Zustand */

.scrolled .cta-header-manifest {

    color: var(--primary-color); 

}

.scrolled .cta-header-manifest:hover {

    color: var(--primary-color); 

}





/* ALT: #hero { display: flex; align-items: center; position: relative; background-color: var(--primary-color); } */

.scroll-indicator { position: absolute; bottom: var(--spacing-unit); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; color: var(--secondary-color); text-decoration: none; opacity: 0.8; transition: opacity 0.3s; }

.scroll-indicator:hover { opacity: 1; }

.scroll-indicator .scroll-label { font-size: 0.8em; font-weight: 700; font-family: var(--body-font); letter-spacing: 0.1em; }

.scroll-arrow { width: 12px; height: 12px; border-left: 2px solid var(--secondary-color); border-bottom: 2px solid var(--secondary-color); transform: rotate(-45deg); margin-bottom: 10px; animation: bounce 2s infinite; }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-45deg); } 40% { transform: translateY(-10px) rotate(-45deg); } 60% { transform: translateY(-5px) rotate(-45deg); } }



#projekte { border-top: none; padding-top: calc(12 * var(--rhythm-unit)); padding-bottom: calc(12 * var(--rhythm-unit)); }

.section-divider { height: 1px; background-color: var(--border-color); margin: 0 auto; max-width: 1600px; width: 100%; }

.project-link-text { text-decoration: none; color: inherit; display: block; position: relative; }

.project-media { background-color: #eee; overflow: hidden; position: relative; margin-bottom: var(--rhythm-unit); }

.project-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s; }

.project-link-text:hover img { transform: scale(1.05); }

.locked-project .project-media::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px) grayscale(0.5); -webkit-backdrop-filter: blur(2px) grayscale(0.5); opacity: 0; transition: opacity 0.3s; }

.locked-project:hover .project-media::after { opacity: 1; }

.lock-icon { position: absolute; top: var(--spacing-unit); right: var(--spacing-unit); width: 24px; height: 24px; z-index: 10; opacity: 0.7; }

 

footer p { font-family: var(--body-font); font-weight: 300; font-size: 0.9em; text-transform: none; color: #555; line-height: 1.4; letter-spacing: 0.01em;} 

/* NEU: Styling für die Footer-Links */
.footer-links { 
    margin-bottom: 1rem; 
    text-transform: uppercase;
    text-align: center; /* WICHTIG: Zentriert die Inline-Links */
    /* WICHTIG: Stellt sicher, dass die Box existiert */
    display: block !important; 
}
.footer-links a {
    /* WICHTIG: Erzwungene sichtbare Farbe und Display-Typ */
    color: var(--primary-color) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    padding: 0 0.5rem;
    transition: opacity 0.3s;
    display: inline-block !important; /* Stellt sicher, dass der Link sichtbar ist */
}
.footer-links a:hover {
    opacity: 0.7;
}
.footer-links .separator {
    /* WICHTIG: Erzwungene sichtbare Farbe für den Separator */
    color: var(--primary-color) !important;
    font-size: 0.9em;
    display: inline-block !important;
}


/* Custom Cursor Style */

.custom-cursor { position: fixed; top: 0; left: 0; width: 25px; height: 25px; pointer-events: none; z-index: 10000; mix-blend-mode: difference; transition: width 0.3s, height 0.3s, transform 0.3s, border-radius 0.3s, border 0.3s; transform: translate(-50%, -50%); border: none; background-color: transparent; }

.custom-cursor::before, .custom-cursor::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; transition: all 0.3s; border: none; width: auto; height: auto; display: block; }

.shape-circle, .shape-square, .shape-diamond { border: 2px solid white; }

.shape-circle { border-radius: 50%; }

.shape-square { border-radius: 3px; }

.shape-diamond { border-radius: 3px; transform: translate(-50%, -50%) rotate(45deg); }

.shape-circle::before, .shape-circle::after, .shape-square::before, .shape-square::after, .shape-diamond::before, .shape-diamond::after { display: none; background-color: transparent; width: 0; height: 0; }

.shape-line::before { width: 30px; height: 2mm; }

.shape-plus::before { width: 25px; height: 2mm; }
.shape-plus::after { width: 2mm; height: 25px; }

.shape-line, .shape-plus { border: none; }

.shape-line::after { display: none; }

.custom-cursor.hover { transform: translate(-50%, -50%) scale(1.5); }

.shape-diamond.hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.5); }



.password-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 26, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }

.password-modal.active { opacity: 1; visibility: visible; }

.modal-content { background: var(--background-color); padding: calc(3 * var(--spacing-unit)); text-align: center; max-width: 500px; width: 90%; transform: scale(0.95); transition: transform 0.4s; }

.modal-content h3 { font-family: var(--headline-font); font-size: 1.5rem; margin-bottom: var(--rhythm-unit); letter-spacing: -0.02em; }

.modal-content p { font-family: var(--body-font); color: #555; margin-bottom: calc(2 * var(--rhythm-unit)); line-height: var(--rhythm-unit); letter-spacing: 0.01em; }

.modal-close { position: absolute; top: var(--spacing-unit); right: var(--spacing-unit); background: none; border: none; color: var(--secondary-color); font-size: 2rem; line-height: 1; }

#password-input { width: 80%; background: transparent; border: none; border-bottom: 2px solid var(--primary-color); font-size: 1.5rem; text-align: center; padding: 0.5rem; margin-bottom: var(--rhythm-unit); font-family: var(--body-font); font-weight: 600; letter-spacing: 0.1em; }

#password-input:focus { outline: none; border-bottom-color: var(--primary-color); }

.modal-submit { background: var(--primary-color); color: var(--secondary-color); border: 2px solid var(--primary-color); padding: 0.75rem 2rem; font-weight: 600; transition: all 0.3s; font-size: 1rem; font-family: var(--body-font); letter-spacing: 0.1em; }

.modal-submit:hover { background: var(--background-color); color: var(--primary-color); }



/* Waving GIF Styling */

#waving-gif-container {

    position: fixed; bottom: 0; left: 50%; width: 80vw; max-width: 700px; z-index: 100; 

    transform: translateX(-50%) translateY(110%); opacity: 0; visibility: hidden;

    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s, visibility 0.6s;

    pointer-events: none; 

}

#waving-gif-container img { display: block; width: 100%; height: auto; }

#waving-gif-container.visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }



@media (max-width: 1400px) { :root { --h1-size: 9rem; } }

/* ---------------------------------------------------------------- */
/* MOBILE NAV IMPLEMENTIERUNG */
/* ---------------------------------------------------------------- */

/* Hamburger Icon und Overlay sind ab 1000px aktiv */
@media (max-width: 1000px) {
    /* Fix #1: Schriftgröße auf Mobile anpassen */
    :root { --h1-size: 5rem; --h2-size: 3.5rem; }
    
    /* KORRIGIERT: Entfernt den -1px Margin-Fix */
    .container { 
        margin-left: auto;
        margin-right: auto;
        max-width: 100%; 
    }

    /* KORRIGIERT: Header muss transparent und ohne Border sein, wenn nicht gescrollt */
    header {
        background-color: transparent;
        border-bottom: none;
    }

    /* KORRIGIERT: Top-Bar Textfarbe im Hero-Bereich (nicht gescrollt) muss weiß sein */
    .top-bar {
        color: var(--secondary-color);
    }
    
    /* NEU/KORRIGIERT: Der gescrollte Zustand muss jetzt auf Mobile dieselben Farben wie Desktop annehmen. */
    .scrolled { 
        background-color: var(--background-color); 
        border-bottom: 1px solid var(--border-color); 
    }
    .scrolled .top-bar { 
        color: var(--primary-color); 
    }
    .scrolled .top-bar-nav a { 
        color: var(--primary-color); 
    }
    .scrolled .top-bar-nav > .separator {
        color: var(--primary-color);
    }
    
    /* Statische Zuweisung für H1/H2 auf Mobile: BOLD (900) */
    .vf-animated-text { 
        font-variation-settings: 'wght' 900, 'ital' 0 !important; 
        font-weight: 900 !important; 
    }

    /* Statische Zuweisung für Hervorhebungen und Skills auf Mobile: THIN (100) */
    .vf-emphasis, .vf-skill { 
        font-variation-settings: 'wght' 100, 'ital' 0 !important;
        font-weight: 100 !important; 
    }
    
    /* NEU: Top Bar ist jetzt zweizeilig (Logo links, Links rechts/unten) */
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 0; /* Links werden in eigenem Bereich gepaddet */
    }
    
    /* NEU: Logo-Zeile */
    .top-bar .logo {
        padding-top: calc(1.5 * var(--rhythm-unit));
        padding-bottom: calc(1.5 * var(--rhythm-unit));
        width: 100%;
        text-align: left;
    }
    
    /* NEU: Navigation wird Free-Flow-Scrollbar */
    .top-bar-nav { 
        display: flex; /* Muss flex bleiben */
        width: calc(100% + var(--spacing-unit) * 2); /* Überschreitet Container-Breite, um links/rechts zu überlappen */
        margin-left: calc(-1 * var(--spacing-unit)); /* Verschiebt nach links in den Container-Rand */
        padding: 0 var(--spacing-unit) calc(1.5 * var(--rhythm-unit)) var(--spacing-unit);
        
        /* WICHTIG: Erlaubt horizontales Scrollen und verhindert Zeilenumbruch */
        overflow-x: auto; 
        white-space: nowrap; 
        
        /* Versteckt die Scrollbar */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    /* Scrollbar verstecken für Chrome, Safari */
    .top-bar-nav::-webkit-scrollbar {
        display: none;
    }
    
    /* NEU: Navigations-Items auf Mobile */
    .top-bar-nav > a {
        font-size: 0.8em;
        padding: 0;
        margin: 0 0.8rem; /* Reduzierter Abstand */
        flex-shrink: 0; /* Verhindert, dass die Links schrumpfen */
    }
    .top-bar-nav > a:first-child {
        margin-left: 0;
    }
    
    .top-bar-nav > .separator {
        font-size: 0.8em;
        margin: 0 0.2rem;
        flex-shrink: 0;
    }
    
    /* Hero Headline Fix: Vertikale Zentrierung */
    #hero {
        /* Muss Flex bleiben, um die Zentrierung zu steuern */
        display: flex;
        align-items: center; /* Vertikal zentrieren */
        justify-content: center; /* Horizontal zentrieren */
    }
    
    /* Hero Content Wrapper Fix: Entfernt das störende Padding und ermöglicht Zentrierung */
    .hero-content-wrapper {
        /* WICHTIG: Padding auf Hero-Höhe drastisch reduzieren, um die Headline nach oben zu schieben, aber Header-Platz lassen */
        padding-top: calc(1.5 * var(--header-height)) !important; 
        padding-bottom: calc(1.5 * var(--header-height)) !important; 
        
        /* Überschreibt die align-items: flex-start; von Desktop, um den Inhalt zu zentrieren */
        align-items: center;
        text-align: center;
        
        /* Stellt sicher, dass das H1-Element die volle Breite nutzen kann, um Text-Align zu respektieren */
        max-width: none;
        
        /* NEU: Verwendet min-height, um zu verhindern, dass der Content zu hoch an den Rand rutscht */
        min-height: 80vh; 
    }
    
    /* H1 (Headline) Fix: Zentrierung erzwingen */
    h1.vf-animated-text {
        text-align: center;
    }
    
    /* Intro Text Fix: Zentrierung erzwingen */
    .intro-text-earned {
        text-align: center;
    }


    /* NEU: Mobile-Hamburger-Elemente entfernen */
    .menu-toggle, #mobile-menu-overlay {
        display: none !important;
    }


    /* NEU: Auf Mobile wird der Shift und das Detail-Overlay unterdrückt */
    .skill-item {
        transform: translateX(0) !important; 
    }
    .skill-item:hover .skill-detail {
        opacity: 0; 
        transform: translateX(20px);
        pointer-events: none;
    }

}

/* NEU/KORREKTUR: Spezifische Korrektur für Desktop, um mobile Elemente auszublenden */
@media (min-width: 1001px) {
    /* Alle mobilen Elemente ausblenden, um Desktop-Ästhetik wiederherzustellen */
    .menu-toggle, #mobile-menu-overlay {
        display: none !important;
    }
    /* Die Desktop-Nav muss explizit wieder als flex gesetzt werden */
    .top-bar-nav {
        display: flex !important;
        /* Desktop-Reset der Mobile-Styles */
        width: auto !important;
        margin-left: auto !important;
        overflow-x: visible !important;
        white-space: normal !important;
        padding: 0 !important;
    }
    /* Top-Bar auf Desktop-Layout zurücksetzen */
    .top-bar {
        flex-direction: row;
        align-items: center;
    }
    /* Logo-Reset */
    .top-bar .logo {
        padding: 0;
        width: auto;
        text-align: left;
    }

    /* Korrektur des Header-Backgrounds für Desktop, falls mobile CSS überschreibt */
    header {
        background-color: transparent !important;
        border-bottom: none !important;
    }
    /* Sicherstellen, dass der Logo-Text im Desktop-Header vor dem Scrollen weiß ist */
    .top-bar {
        color: var(--secondary-color);
    }
    /* Nav-Links auf Desktop-Abstand setzen */
    .top-bar-nav > a {
        margin-left: 2rem;
        margin-right: 0.5rem;
    }
    .top-bar-nav > a:first-child {
        margin-left: 2rem;
    }
    
    /* Reset Hero Content Wrapper auf Desktop-Default */
    .hero-content-wrapper {
        padding-top: var(--header-height) !important;
        align-items: flex-start;
        text-align: left;
        min-height: initial; /* Reset für Desktop */
    }
    h1.vf-animated-text {
        text-align: left;
    }
}


/* ---------------------------------------------------------------- */
/* MOBILE & TABLET STYLES (≤ 768px) */
/* ---------------------------------------------------------------- */
@media (max-width: 768px) {

    :root { --h2-size: 2.5rem; --h3-size: 1.5rem; --base-font-size: 1rem; --rhythm-unit: 1.5rem; --spacing-unit: 1.5rem; --body-leading: 1.6rem; }

    /* WICHTIG: Globalen Container zentrieren, falls er nicht die volle Breite nutzt */
    .container { 
        padding: 0 var(--spacing-unit); 
        margin-left: auto;
        margin-right: auto;
        max-width: 100%; 
    }
    
    /* Spezifisches Anpassen des Containers für Hero und Kontakt auf Mobile (nur zur Sicherheit, da bereits in 1000px Query behandelt) */
    #hero .container, #kontakt .container {
        padding: 0;
    }
    
    /* Hero Content Wrapper muss die Padding-Einheiten zurückbekommen */
    .hero-content-wrapper {
        padding-left: var(--spacing-unit) !important;
        padding-right: var(--spacing-unit) !important;
    }
    
    /* Kontakt Sektion Content muss die Padding-Einheiten zurückbekommen */
    #kontakt .container div {
        padding-left: var(--spacing-unit);
        padding-right: var(--spacing-unit);
    }

    section { padding: calc(6 * var(--rhythm-unit)) 0; min-height: 0; }

    #hero { 
        min-height: 100vh; 
        /* Behält Flex, um die Zentrierung von 1000px zu übernehmen */
        display: flex;
        align-items: center; 
        justify-content: center;
    }
    
    /* Hero Sektion Zentrierung */
    .hero-content-wrapper { 
        /* Muss Block sein, um den Inhalt korrekt zu halten, da #hero nicht mehr flex ist */
        display: flex; 
        flex-direction: column;
        justify-content: center;
        text-align: center; 
        width: 100%;
        max-width: none;
        margin: 0 auto; 
    } 
    
    /* ANPASSUNG H1: Plakativer machen */
    h1.vf-animated-text { 
        font-size: 12vw; 
        line-height: 1; 
        margin: 0 auto; 
        width: 100%; 
        max-width: 100%; 
        text-align: center;
    }
    
    /* ANPASSUNG FLIESSTEXT: Kleiner und weniger dominant machen */
    .intro-text-earned { 
        font-size: 0.875rem; 
        line-height: 1.4;
        margin: 0 auto; 
        width: 100%;
        text-align: center;
    }
    
    /* NEU/KORREKTUR: Zentrierung der Kontakt-Sektion erzwingen */
    #kontakt .container {
        text-align: center;
        width: 100%;
        margin: 0 auto; 
    }
    
    /* H2 in der Kontaktsektion auf zentrierte Block-Breite setzen */
    #kontakt .section-claim-header {
        margin: 0 auto; 
        width: 100%; 
        max-width: 600px; 
        text-align: center;
    }
    
    /* Sicherstellen, dass der CTA-Button zentriert wird */
    #kontakt .cta-kontakt {
        margin-left: auto;
        margin-right: auto;
        display: block; 
        width: fit-content;
    }
    

    /* --- Generische Layout-Anpassungen (übernimmt die Zentrierung für alle Grid-Sektionen) --- */
    
    /* Korrektur des Grid-Container-Verhaltens in Sektionen, die flex sind */
    .grid-container { 
        display: flex; 
        flex-direction: column; 
        gap: var(--rhythm-unit); 
        /* WICHTIG: Setzt die Inhalte des Grid-Containers auf Center, auch wenn es Grid-Spalten gibt */
        align-items: center; 
        text-align: center; 
    }
    
    /* WICHTIG: Erzwingen, dass die Content-Spalte 100% Breite auf Mobile hat, um den linken Offset zu eliminieren */
    .section-content-right { 
        grid-column: 1 / -1; 
        width: 100%; 
        margin-top: 0; 
        text-align: center; 
        margin-left: auto;
        margin-right: auto;
    }


    .section-header-left { 
        order: -1; 
        width: 100%; 
        text-align: center; 
        padding-bottom: var(--rhythm-unit); 
    }

    .vf-skill { font-size: 1.8rem; line-height: 1.2; }

    /* MOBILE SKILL-ANPASSUNGEN (Stacking) */
    .skill-item { 
        display: flex; 
        flex-direction: column;
        align-items: center;
        text-align: center;
        grid-template-columns: 1fr; 
        padding: 0;
        padding-top: var(--rhythm-unit);
        padding-bottom: var(--rhythm-unit);
        border-bottom: 1px solid var(--border-color);
        min-height: auto;
    }
    .skill-item:last-child {
        border-bottom: 1px solid var(--border-color);
    }

    /* NEU: Statische Anzeige der Details auf Mobile unterhalb des Titels */
    .skill-detail {
        position: static;
        opacity: 1; 
        transform: translateX(0);
        background-color: transparent;
        color: var(--primary-color);
        padding: 0;
        border-left: none;
        margin-top: 0.5rem;
        text-align: center; 
        width: 100%;
        pointer-events: all;
    }
    .skill-detail p {
        font-size: 1em;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 0.5rem;
    }
    .skill-detail a {
        display: inline-block;
        margin: 0 0.5rem;
    }
    /* ENDE MOBILE SKILL-ANPASSUNGEN */

}