:root {
    --bg-color: #F2F0ED;
    --text-color: #333230;
    --accent-gold: #C2A378;
    --accent-green: #5E6352;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Lato', sans-serif;
}

html {
    scroll-behavior: smooth;
}

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

#grain-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('https://www.transparenttextures.com/patterns/p6.png'); 
    opacity: 0.18;
    pointer-events: none;
    z-index: 9999;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
}

/* --- NAVIGATION (DESKTOP) --- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: 0.4s ease;
}

nav.scrolled {
    background: rgba(242, 240, 237, 0.95);
    padding: 1rem 5%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

nav.scrolled .logo { color: var(--text-color); }

.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { 
    text-decoration: none; 
    color: white; 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 2px;
}
nav.scrolled .nav-links a { color: var(--text-color); }

/* --- HAMBURGER ICON (Desktop: Unsichtbar) --- */
.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 2px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

nav.scrolled .burger div {
    background-color: var(--text-color);
}

/* --- ANIMATIONEN --- */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.reveal.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- HERO SEKTION --- */
.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), 
                url('img/hochzeitsfotograf-alpen-paarshooting_4.jpg') no-repeat center center / cover;
}

.hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-style: italic; margin: 1rem 0; text-shadow: 0 2px 15px rgba(0,0,0,0.3); }
.hero p { text-transform: uppercase; letter-spacing: 5px; font-size: 0.8rem; }

.section-padding { padding: 6rem 10%; text-align: center; }
.gold-line { width: 40px; height: 1px; background-color: var(--accent-gold); margin: 1.5rem auto; }

/* --- BLOG / PORTFOLIO ÜBERSICHT --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3 Spalten */
    gap: 40px;
    
    /* --- HIER IST DIE ÄNDERUNG --- */
    max-width: 900px;      /* Begrenzt die Breite auf maximal 900 Pixel */
    margin: 0 auto;        /* Zentriert den Block in der Mitte des Bildschirms */
    padding: 0 20px 6rem 20px; /* Nur kleiner Seitenabstand nötig */
    /* ----------------------------- */
}

.blog-card {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    text-decoration: none; /* Wichtig, da die ganze Karte ein Link ist */
    color: var(--text-color);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.blog-img-wrap {
    /* WICHTIG: Wir entfernen die fixe Pixel-Höhe */
    width: 100%;
    
    /* Hier stellen wir das Format ein:
       2 / 3  = Klassisches Foto-Hochformat (DSLR)
       3 / 4  = Etwas breiteres Hochformat
       1 / 1  = Quadrat
    */
    aspect-ratio: 2 / 3; 
    
    overflow: hidden;
    background-color: #eee; /* Platzhalterfarbe beim Laden */
}

.blog-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Schneidet Bild zu, damit es passt */
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-wrap img {
    transform: scale(1.05);
}

.blog-content {
    padding: 1.5rem;
    text-align: center;
}

.blog-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.blog-meta {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-green);
    margin-bottom: 1rem;
    display: block;
}

/* Mobile: 1 Spalte */
@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* --- MASONRY PORTFOLIO (Stabilisiert) --- */
.gallery-container {
    column-count: 3;
    column-gap: 20px;
    padding: 0 5% 6rem 5%;
    
    /* WICHTIG: Verhindert, dass das Raster zusammenbricht, bevor Bilder da sind */
    width: 100%; 
}

.gallery-item {
    /* WICHTIG: Kein inline-block, sondern break-inside */
    break-inside: avoid-column; /* Standardkonformer */
    break-inside: avoid;        /* Für ältere Browser */
    page-break-inside: avoid;   /* Für Firefox teilweise nötig */
    
    margin-bottom: 20px;
    background: #eee; 
    border-radius: 2px;
    
    /* Erzwingt, dass der Container eine Höhe hat */
    display: block; 
    width: 100%;
}

/* Bild-Einstellungen */
.gallery-item img {
    width: 100%;
    height: auto;
    display: block; /* Verhindert weiße Linien */
    /* Animation nur beim Hover, nicht beim Laden */
    transition: transform 0.5s ease; 
}

.gallery-item:hover img {
    transform: scale(1.02);
}

/* Mobile Anpassung bleibt gleich, muss aber sicherstellen, dass column-count 1 greift */
@media (max-width: 900px) {
    .gallery-container {
        column-count: 1;
        column-gap: 0;
    }
}

/* Alte Grid-Klassen resetten */
.gallery-item.tall, .gallery-item.small, .gallery-item.full {
    height: auto !important;
    grid-column: auto;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 1.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

/* --- KONTAKT FORMULAR (Global) --- */
.contact-wrap { background-color: #E8E6E1; padding: 4rem 2rem; max-width: 800px; margin: 0 auto; border-radius: 2px; }
input, textarea { width: 100%; padding: 1rem 0; background: transparent; border: none; border-bottom: 1px solid #ccc; margin-bottom: 2rem; font-family: inherit; font-size: 1rem; outline: none; }
button { background: var(--accent-green); color: white; border: none; padding: 1rem 3rem; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; }
button:hover { background: var(--text-color); }

footer { padding: 3rem; text-align: center; font-size: 0.8rem; opacity: 0.6; }

/* --- NEUER HEADER STYLE --- */
.header-bg {
    height: 65vh; /* Standard Höhe Desktop */
    background-position: center 20%; /* Fokus: Horizont (nicht ganz oben, nicht ganz mitte) */
    background-size: cover;
    position: relative;
    width: 100%;
}

.header-overlay {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); 
    padding: 4rem 5% 2rem 5%; 
    color: white;
}

/* HANDY OPTIMIERUNG */
@media (max-width: 768px) {
    .header-bg {
        height: 50vh; /* Kleiner auf Handy -> weniger Zoom -> mehr Bildinhalt */
        background-position: center top; /* Fokus ganz oben bei Hochformat */
    }
    
    .header-overlay h1 {
        font-size: 2rem !important; /* Schrift etwas kleiner am Handy */
    }
}


/* ========================================= */
/* MOBILE ANPASSUNG (HIER STARTEN)     */
/* ========================================= */
@media (max-width: 900px) {
    
    /* 1. Portfolio: Nur eine Spalte */
    .gallery-container {
        column-count: 1; 
        column-gap: 0;
    }
    
    .section-padding { padding: 4rem 5%; }

    /* 2. Burger Icon sichtbar machen */
    .burger {
        display: block;
        z-index: 2000;
    }

    /* 3. Navigation: Mobile Styling (Slide-In) */
    .nav-links {
        /* display: none;  <-- DAS WAR DER FEHLER! */
        /* Wir brauchen display: flex, aber versteckt außerhalb des Bildschirms */
        position: fixed;
        right: -100%; 
        top: 0;
        height: 100vh;
        background-color: var(--bg-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        transition: transform 0.5s ease-in;
        z-index: 1500;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    
    /* Links im Mobile Menu */
    .nav-links a {
        color: var(--text-color);
        font-size: 1.5rem;
        margin: 1.5rem 0;
    }

    /* Klasse für Javascript (Menü öffnen) */
    .nav-links.nav-active {
        transform: translateX(-100%);
    }

    /* Burger Animation zum X */
    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px, 6px);
        background-color: var(--text-color);
    }
    .toggle .line2 {
        opacity: 0;
    }
    .toggle .line3 {
        transform: rotate(45deg) translate(-5px, -6px);
        background-color: var(--text-color);
    }

} /* <--- WICHTIG: Diese Klammer schließt den Mobile-Bereich */