/* --- Basic Reset & Defaults --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* --- Variables --- */
:root {
    --primary-orange: #E54D0F;
    --primary-red: #B22222;
    --accent-yellow: #FFBF00;
    --dark-color: #222222;
    --light-color: #f8f8f8;
    --white-color: #ffffff;
    --navbar-height: 60px; /* Adjust as needed */
    /* ... other variables ... */
    --arrow-offset: 1rem; /* Offset for gallery arrows */
}

/* --- Utility Classes --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--dark-color);
    padding: 0; /* Removed padding, height controls it */
    z-index: 1000;
    height: var(--navbar-height);
    transition: background-color 0.3s ease;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-logo {
    color: var(--white-color);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    height: 100%; /* Align items vertically */
    align-items: center;
}

.nav-links li {
    margin-left: 1.5rem;
}

.nav-links a {
    color: var(--white-color);
    text-decoration: none;
    padding: 0.5rem;
    transition: color 0.3s ease;
    display: inline-block; /* Allow padding */
}

.nav-links a:hover,
.nav-links a:focus {
    color: var(--accent-yellow);
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    color: var(--white-color);
    font-size: 1.8rem;
    cursor: pointer;
}

/* --- Sections --- */
.section {
    padding: 4rem 0; /* Removed navbar height from top padding here */
    min-height: 60vh; /* Adjusted min-height */
    overflow: hidden; /* Prevent margin collapse */
}
/* Add top padding back only to sections *after* the hero */
#bio, #atelier, #gallerie, #kontakt, #impressum {
     padding-top: calc(4rem + var(--navbar-height));
}


.section h1 {
    text-align: center;
    margin-bottom: 2.5rem;
    font-weight: 300; /* Lighter font weight for headings */
}

.section h1 {
    font-size: 3rem;
    color: var(--white-color); /* Specific for hero */
}

.section h2 {
    /* text-align: center; */ /* REMOVE OR COMMENT OUT THIS LINE */
    margin-bottom: 2.5rem;
    font-weight: 300;
    font-size: 2.5rem;
    /* Other styles like color might be here */
}

.section .subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--white-color); /* Specific for hero */
}


/* --- Section Colors & Gradients --- */

/* Hero Section - Background Image */
#home {
    /* CHANGE THIS URL to your actual hero image path */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('images/title-image-hero.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--white-color); /* Default color, might be overridden */
    min-height: 100vh; /* Make hero fill viewport height */
    min-height: 100svh; /* Use 100% of the smallest viewport height */
    display: flex; /* Use flexbox to center content */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: var(--navbar-height); /* Account for fixed navbar */
    padding-bottom: 2rem; /* Some bottom padding */
}
.hero-content {
    max-width: 800px; /* Limit width of text content */
}

/* Style the main headline */
#home h1 {
    font-size: 4.5rem; /* Increased font size (adjust as needed) */
    font-weight: 700; /* Bold weight (like nav-logo) */
    margin-bottom: 1rem; /* Reduced margin below h1 */
    text-align: center;

    /* --- Appealing Text Option: Gradient Fill --- */
    background: linear-gradient(45deg, var(--primary-orange), var(--accent-yellow), var(--primary-red)); /* Gradient using palette */
    -webkit-background-clip: text; /* Clip background to text (webkit prefix) */
    background-clip: text;          /* Clip background to text (standard) */
    color: transparent;             /* Make original text color transparent */
    /* Add a subtle shadow for readability */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Style the subtitle */
#home .subtitle {
    font-size: 1.6rem; /* Increased font size (adjust as needed) */
    font-weight: 300; /* Keep it lighter than the main heading */
    color: var(--accent-yellow); /* Use accent color */
    text-align: center;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Optional shadow for subtitle */
}

/* Alternating Colors */
#bio, #gallerie, #impressum {
    background-color: var(--light-color);
    color: var(--dark-color);
}

#atelier, #kontakt {
    background: linear-gradient(135deg, var(--primary-red), var(--primary-orange));
    color: var(--white-color);
}
#kontakt {
     background: linear-gradient(-45deg, var(--primary-orange), var(--accent-yellow));
}


/* --- Specific Section Layouts --- */
.section-content {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.text-content {
    flex: 1; /* Takes up available space */
}

.placeholder-image {
    flex: 1; /* Takes up available space */
    width: 50px;
    aspect-ratio: 9/13;
    background-color: rgba(204, 204, 204, 0.7);
    /*border: 2px dashed #999;*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-style: italic;
    color: #555;
    border-radius: 8px;
}

.placeholder-video {
    flex: 1; /* Takes up available space */
    aspect-ratio: 16 / 9; /* Force 16:9 ratio */
    max-width: 100%; /* Ensure it doesn't overflow container */
    background-color: rgba(204, 204, 204, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-style: italic;
    color: #555;
    border-radius: 8px;
    overflow: hidden; /* Hide overflow if content is too big */
}

.placeholder-video iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Ensure no iframe border */
}

.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 1;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 8px;
}

/* New/Updated rule for the video element itself */
.video-container video,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Specific overrides for colored sections */
#atelier .placeholder-video {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white-color);
}
#atelier h2, #kontakt h2 {
    color: var(--white-color); /* Ensure headings are visible on dark backgrounds */
}


/* --- Gallery --- */

/* Left-aligned Section Title */
.section-title-left {
    text-align: left; /* Align heading to the left */
    /* If the container has padding, this might be enough. */
    /* If more indent needed: padding-left: 1rem; */
}

/* Ensure specific section overrides are correct */
#gallerie .section-title-left,
#bio .section-title-left, /* Assuming bio should also be left */
#impressum .section-title-left { /* Assuming impressum too */
    color: var(--dark-color);
}
 #atelier .section-title-left, /* Assuming atelier should be left */
 #kontakt .section-title-left { /* Assuming kontakt too */
    color: var(--white-color);
 }

.gallery-layout {
    display: flex;
    gap: 2rem; /* Space between columns */
    align-items: flex-start; /* Align items to the top */
}

.collection-selector {
    flex: 0 0 180px; /* Fixed width for thumbnail column (adjust as needed) */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between thumbnails */
}

.collection-selector h3 {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-color);
     text-align: center;
}

.collection-thumb {
    background: none;
    border: 3px solid transparent; /* Default transparent border */
    padding: 5px; /* Add some padding inside the button */
    cursor: pointer;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.7; /* Non-active thumbs are slightly faded */
    border-radius: 4px; /* Optional rounded corners */
    display: flex;
    flex-direction: column; /* Stack image and span vertically */
    align-items: center; /* Center items horizontally */
    text-align: center;
}

.collection-thumb img {
    /* Set fixed width and height for square */
    width: 120px;  /* Adjust pixel value as desired (less than column width) */
    height: 120px; /* Same as width for square */
    object-fit: cover; /* Cover the area, crop if needed, no distortion */
    display: block;
    border-radius: 2px;
    margin-bottom: 0.5rem; /* Add space between image and text */
}

.collection-thumb span {
    display: block;
    padding-top: 0; /* Remove padding-top if margin-bottom on img is used */
    font-size: 0.9rem;
    color: var(--dark-color);
}

.collection-thumb:hover,
.collection-thumb:focus {
    opacity: 1; /* Full opacity on hover/focus */
}

.collection-thumb.active {
    border-color: var(--primary-orange); /* Highlight active thumbnail */
    opacity: 1; /* Active is fully opaque */
}

.slideshow-area {
    flex: 1; /* Takes remaining space */
    min-width: 0; /* Prevent flex item overflow */
}

.gallery-container {
    display: flex; /* Keep flex for alignment fallback if needed */
    align-items: center;
    justify-content: center;
    position: relative; /* Crucial for absolute positioning of arrows */
    max-width: 100%;
    margin: 0; /* Remove auto margins */
    overflow: hidden; /* Hide anything spilling out */
}

.gallery-image-wrapper {
    flex-grow: 1;
    width: auto;
    text-align: center;
    overflow: hidden; /* Keep overflow hidden */
    /* min-height: 450px; REMOVED */
    height: auto; /* Allow aspect-ratio to control height */
    aspect-ratio: 4 / 3; /* Force 16:9 ratio (or use 4 / 3, 3 / 2 etc.) */
    position: relative;
    cursor: grab;
    margin: 0 1rem;
    /*background-color: #eee;*/ /* Keep background for letterboxing */
    display: flex; /* Keep flex for centering image */
    justify-content: center;
    align-items: center;
}

.gallery-image-wrapper:active {
    cursor: grabbing;
}


.gallery-image {
    display: block;
    /* Make image fill the wrapper's aspect ratio box */
    width: 100%;
    height: 100%;
    /* Contain ensures the whole image fits, adds letterboxing if needed */
    object-fit: contain;
    /* Remove max-height as wrapper ratio now controls size */
    /* max-height: 600px; REMOVED */

    transition: opacity 0.4s ease-in-out;
    opacity: 1;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-arrow {
    position: absolute; /* Position over the image */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
    background-color: rgba(0, 0, 0, 0.3); /* More translucent default */
    color: white;
    border: none;
    font-size: 1.8rem; /* Slightly larger arrows */
    cursor: pointer;
    padding: 1rem 1.2rem; /* Adjust padding */
    border-radius: 50%;
    z-index: 10;
    line-height: 1;
    opacity: 0.6; /* Default translucency */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
}

.gallery-arrow:hover,
.gallery-arrow:focus {
    background-color: rgba(0, 0, 0, 0.7); /* Darker on hover/focus */
    opacity: 1; /* Fully opaque on hover/focus */
}

#prev-btn {
    left: var(--arrow-offset); /* Position using variable */
}

#next-btn {
    right: var(--arrow-offset); /* Position using variable */
}

/* --- Contact Form (no changes) --- */
.contact-form {
    max-width: 600px;
    margin: 2rem auto 0 auto;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent on colored bg */
    border-radius: 8px;
}

#kontakt .contact-form { /* Style for form on dark bg */
     background-color: rgba(0, 0, 0, 0.2);
}

.form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: inherit; /* Inherit color from section */
    font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--white-color);
    color: var(--dark-color);
}
#kontakt .contact-form input[type="text"],
#kontakt .contact-form input[type="email"],
#kontakt .contact-form textarea {
     background-color: rgba(255, 255, 255, 0.9);
     border-color: transparent;
}


.contact-form textarea {
    resize: vertical;
}

.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    background-color: var(--accent-yellow);
    color: var(--dark-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: #e6ac00; /* Darken accent */
    transform: translateY(-2px);
}

/* --- Footer (no changes) --- */
footer {
    background-color: var(--dark-color);
    color: var(--light-color);
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 0; /* Sections already have bottom padding */
}

/* Lightbox Overlay */
.lightbox-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
    z-index: 2000; /* Above everything else */
    cursor: pointer; /* Indicate clicking overlay might close it */

    /* Setup flexbox for centering content WHEN visible */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;

    /* Optional fade-in transition */
    /* Remove opacity/transition if using display toggle */
    opacity: 0;
    transition: opacity 0.3s ease-in-out; 
}

/* Style to apply when lightbox is active (toggled by JS) */
.lightbox-overlay.active {
    display: flex; /* Show the overlay */
    opacity: 1;  /* Only needed if using opacity transition */
}

/* Lightbox Image */
#lightbox-img {
    display: block;
    max-width: 95%; /* Max width relative to viewport */
    max-height: 90%; /* Max height relative to viewport */
    object-fit: contain; /* Fit image without distortion */
    cursor: default; /* Reset cursor for the image itself */
    /* Optional: Add subtle border or background if needed */
    background-color: #111; 
    border: 2px solid #333;
    border-radius: 4px; /* Optional subtle rounding */
}

/* Lightbox Close Button */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    background: none;
    border: none;
    color: white;
    font-size: 2.8rem; /* Adjust size */
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    z-index: 2010; /* Above the image */
    transition: color 0.2s ease;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Help visibility */
}

body.lightbox-active {
    overflow: hidden;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #ccc; /* Slightly dimmer on hover/focus */
}


/* Prevent background scrolling when lightbox is active */
body.lightbox-active {
    overflow: hidden;
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    html {
        font-size: 14px; /* Adjust base font size for smaller screens */
    }

    .navbar .container {
        justify-content: space-between; /* Keep logo left, toggle right */
    }

    .nav-links {
        /* Styles for mobile menu (when hidden) */
        display: none;
        position: absolute;
        top: var(--navbar-height); /* Position below navbar */
        left: 0;
        width: 100%;
        background-color: var(--dark-color);
        flex-direction: column;
        padding: 1rem 0;
        border-top: 1px solid var(--light-color); /* Separator */
        /* Remove desktop alignment */
        height: auto;
        align-items: stretch; /* Stretch items */
    }

    /* Style to apply when menu is open (via JS) */
    .nav-links.active {
       display: flex; /* Show the menu */
    }

    .nav-links li {
        margin: 0; /* Remove left margin */
        text-align: center;
    }
    .nav-links li a {
        padding: 1rem; /* Bigger touch target */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator lines */
    }
     .nav-links li:last-child a {
         border-bottom: none;
     }


    .menu-toggle {
        display: block; /* Show burger icon */
    }

    .section h1 {
        font-size: 2.2rem;
    }
     .section h2 {
        font-size: 1.8rem;
    }

    .section {
         padding: 3rem 0; /* Consistent padding */
    }
    #bio, #atelier, #gallerie, #kontakt, #impressum {
        padding-top: calc(3rem + var(--navbar-height));
    }
    #home {
         padding-top: var(--navbar-height);
        /* Use Small Viewport Height (svh) for better mobile sizing */
        min-height: 100vh; /* Fallback for older browsers */
        min-height: 100svh; /* Use 100% of the smallest viewport height */
    }

    /* Adjust hero text sizes for mobile */
    #home h1 {
        font-size: 3rem; /* Reduced size for mobile */
    }

    #home .subtitle {
        font-size: 1.4rem; /* Reduced size for mobile */
    }

    .section-content {
        flex-direction: column; /* Stack items vertically */
        gap: 2rem;
    }

    .placeholder-image {
        width: 100%; /* Use full width */
    }

    .placeholder-video {
        flex-basis: auto; /* Reset flex-basis when stacking */
        width: 100%; /* Make it take full width */
        /* aspect-ratio: 16 / 9; Will still apply */
        margin-left: auto;
        margin-right: auto;
        max-width: 600px; /* Optional: Limit max width even on mobile */
   }

   .video-container {
        flex-basis: auto; /* Reset flex-basis when stacking */
        width: 100%; /* Make it take full width */
        /* aspect-ratio: 16 / 9; Will still apply */
        margin-left: auto;
        margin-right: auto;
        max-width: 600px; /* Optional: Limit max width even on mobile */
    }

    /* Keep text generally above media on mobile */
    .bio-content { flex-direction: column; }
    .atelier-content { flex-direction: column; }

    .gallery-container {
        max-width: 100%; /* Use full width on smaller screens */
    }
    .gallery-image-wrapper {
        /* min-height: 300px; REMOVED */
        /* aspect-ratio: 16 / 9; Inherits from desktop, or change if needed */
        /* e.g., aspect-ratio: 4 / 3; for a taller ratio on mobile */
        margin: 0 0.5rem;
    }

    .gallery-arrow {
        font-size: 1.5rem;
        padding: 0.8rem 1rem;
        opacity: 0.8; /* Make slightly more visible by default on mobile */
    }

    /* Reduce offset on smaller screens */
    :root {
    --arrow-offset: 0.5rem;
    }
}

@media (max-width: 992px) { /* Adjust breakpoint if needed */
    .gallery-layout {
       flex-direction: column; /* Stack columns */
       align-items: center; /* Center items when stacked */
    }
    .collection-selector {
       flex: 1 1 auto; /* Allow selector to take width */
       width: 100%;
       flex-direction: row; /* Arrange thumbnails horizontally */
       justify-content: center; /* Center thumbnails */
       flex-wrap: wrap; /* Allow wrapping */
       margin-bottom: 2rem; /* Space below thumbnails */
       max-width: 600px; /* Limit width */
    }

    .collection-thumb {
        max-width: none; /* Remove max-width from button */
        padding: 3px; /* Adjust padding */
        /* Keep flex column direction & alignment */
        flex: 0 1 100px; /* Allow shrinking but base size around 120px */
    }

    /* Override fixed size for mobile's horizontal layout */
    .collection-thumb img {
        width: 60px;  /* Smaller fixed size for mobile */
        height: 60px; /* Smaller fixed size for mobile */
        margin-bottom: 0.3rem;
    }
    .collection-thumb span {
        font-size: 0.8rem;
    }

     .collection-selector h3 {
        width: 100%; /* Make heading span full width */
        text-align: center;
        margin-bottom: 1rem;
     }

    .slideshow-area {
        width: 100%; /* Ensure slideshow takes full width */
    }
}

/* Optional: Hide arrows completely on very small screens if swipe is preferred */
@media (max-width: 480px) {
    /*
    .gallery-arrow {
         display: none;
    }
    */
 }

 /* Optional: Further reduction for very small screens */
@media (max-width: 480px) {
    #home h1 {
        font-size: 2.5rem;
    }
    #home .subtitle {
        font-size: 1.2rem;
    }
}