:root {
    --color-primary-green: #0F281E;
    /* Deep Forest Green */
    --color-accent-gold: #C5A059;
    /* Metallic Gold */
    --color-text-light: #F4F1EA;
    /* Cream/white */
    --color-text-dark: #1A1A1A;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    font-family: --font-body;
    color: var(--color-text-dark);
    background-color: var(--color-text-light);
    overflow-x: hidden;
}

/* Header & Navigation */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Center nav since logo is gone */
    align-items: center;
    padding: 1rem 0;
    z-index: 1000;
    transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
}

.main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    /* Slightly more compact */
}

.main-header.scrolled .nav-link {
    color: var(--color-primary-green);
    text-shadow: none;
    /* Remove shadow for dark text on light bg */
}

.main-header.scrolled .nav-link:hover,
.main-header.scrolled .nav-link.active {
    color: var(--color-accent-gold);
}

/* Top Green Bar Simulation removed or simplified?
   Let's keep the nav visible. With specific logo request, header might just be nav.
*/
.main-header::before {
    content: none;
    /* Simplify header background if logo moves down, or keep? User didn't say.
                      Safest is clear or minimal background. Let's make it simple transparent or keeping the green bar?
                      Usually if logo is centric hero, nav is simple top bar.
                      Let's keep transparent for now or light gradient. */
}

/* Removed .logo-container and .brand-logo styles as they are gone from header */

.main-nav {
    /* Centered in header flex */
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 5%;
    height: 80px;
    /* Aligns with header bar height */
    align-items: center;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 3rem;
    /* More spacing for elegance */
}

.nav-link {
    text-decoration: none;
    color: #fff;
    /* White text on hero bg */
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Shadow for readability on image */
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent-gold);
    border-bottom: 1px solid var(--color-accent-gold);
}


/* Hero Section */
/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    /* linear-gradient to darken */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('assets/hero_bg_new.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Dark overlay removed per user request */
.hero-section::after {
    content: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 0;
    /* Removed 60px offset */
    margin-top: -8vh;
    /* Shift entire block upwards */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-logo {
    width: 600px;
    /* Increased from 300px */
    height: auto;
    margin-bottom: 1.5rem;
    /* Reduced from 2rem to bring button closer */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    animation: fadeIn 1.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-slogan {
    font-family: var(--font-body);
    /* Reference uses a sans-serif for the slogan? Or serif? Image looks sans-serif bold. */
    font-weight: 700;
    font-size: 3rem;
    color: var(--color-accent-gold);
    /* Gold text */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--color-accent-gold);
    /* Gold for premium look */
    color: #0F281E;
    text-decoration: none;
    font-family: var(--font-body);
    /* Or sans */
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    /* Slight round, or 0 for sharp */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Content Sections General */
.content-section {
    padding: 5rem 5%;
    background-color: #F9F7F2;
    /* Warm off-white */
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    font-family: var(--font-heading);
    color: var(--color-primary-green);
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-accent-gold);
    margin: 1rem auto 0;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    padding-bottom: 2rem;
}

.product-card {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    /* Classic slight round */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    text-align: center;
}

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

.product-image-container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.product-image-container img {
    max-height: 100%;
    width: auto;
    /* mix-blend-mode: multiply; Only if white bg is perfect, but PNGs should be transp? If not, we might need a cutout or white card bg helps */
}

.product-card h3 {
    font-family: var(--font-heading);
    color: var(--color-primary-green);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.product-card p {
    font-family: var(--font-body);
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.text-link {
    color: var(--color-accent-gold);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.text-link:hover {
    color: var(--color-primary-green);
}

/* Brewery Section */
.brewery-section {
    background-color: #fff;
    padding: 6rem 5%;
}

.brewery-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Give text slightly more space */
    gap: 5rem;
    align-items: center;
    text-align: left;
}

.brewery-text {
    padding-right: 2rem;
}

.brewery-headline {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-primary-green);
    font-family: var(--font-heading);
}

.brewery-subtitle-styled {
    font-family: var(--font-heading);
    color: #666;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    display: block;
    border-left: 3px solid var(--color-accent-gold);
    padding-left: 1rem;
}

.brewery-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 2rem;
}

.brewery-text p {
    font-family: var(--font-body);
    color: #555;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.brewery-highlight {
    color: var(--color-primary-green);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Brewery Image Composition */
.brewery-image {
    position: relative;
    padding: 2rem 0;
    /* Space for shadow/offset */
    min-height: 400px;
    /* Ensure space for layout */
    display: flex;
    justify-content: center;
    align-items: center;
}

.brewery-img-main {
    width: 85%;
    position: relative;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    margin-left: auto;
    /* Push to right */
    display: block;
    transition: transform 0.5s ease;
}

.brewery-img-secondary {
    position: absolute;
    width: 60%;
    bottom: -20px;
    left: 0;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 10px 10px 0px var(--color-accent-gold);
    border: 4px solid #fff;
    /* White border to separate from main image */
    transition: transform 0.5s ease;
}

.brewery-image:hover .brewery-img-main {
    transform: scale(1.01);
}

.brewery-image:hover .brewery-img-secondary {
    transform: translateY(-5px) scale(1.01);
}

@media (max-width: 900px) {
    .brewery-image {
        min-height: auto;
        padding-top: 0;
        display: block;
    }

    .brewery-img-main {
        width: 100%;
        margin-left: 0;
        margin-bottom: 2rem;
    }

    .brewery-img-secondary {
        /* On mobile, maybe hide or stack differently. Let's stack/overlap slightly less aggressive or just display below */
        position: relative;
        width: 80%;
        bottom: 0;
        left: 0;
        margin-top: -3rem;
        /* Negative margin to pull up overlap */
        margin-left: 1rem;
    }
}

.brewery-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary-green);
    color: var(--color-primary-green);
    padding: 0.9rem 2rem;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: var(--color-primary-green);
    color: #fff;
}

@media (max-width: 900px) {
    .brewery-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .brewery-text {
        padding-right: 0;
    }

    .brewery-image img {
        box-shadow: 10px 10px 0px var(--color-accent-gold);
        margin-bottom: 2rem;
    }
}





/* Footer */
.main-footer {
    background-color: #1a1a1a;
    color: #aaa;
    padding: 4rem 5% 1rem;
    font-family: var(--font-body);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 3rem;
    gap: 2rem;
}

.footer-column h4 {
    color: #fff;
    font-family: var(--font-heading);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: var(--color-accent-gold);
}

.social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Contact Section & Form */
.section-subtitle {
    margin-top: -2rem;
    margin-bottom: 3rem;
    color: #666;
    font-size: 1.1rem;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    background: #fff;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--color-primary-green);
}

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

.form-group label {
    display: block;
    font-family: var(--font-heading);
    color: var(--color-primary-green);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: #fdfdfd;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent-gold);
}

.contact-form button {
    width: 100%;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    margin-top: 1rem;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 2rem;
    font-size: 0.9rem;
}

/* Phone Link Details */
.contact-info-block {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-info-block p {
    font-family: var(--font-body);
    color: #555;
    margin-bottom: 0.5rem;
}

.phone-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary-green);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.phone-link:hover {
    color: var(--color-accent-gold);
    border-bottom-color: var(--color-accent-gold);
}

/* Product Detail Pages */
.product-detail-view {
    display: flex;
    gap: 4rem;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding-bottom: 4rem;
}

.product-image-large {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.product-image-large img {
    max-height: 500px;
    width: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.product-info {
    flex: 1;
    min-width: 300px;
    text-align: left;
}

.product-info .section-title {
    text-align: left;
    margin-bottom: 1rem;
}

.product-info .section-subtitle {
    text-align: left;
    margin-bottom: 2rem;
    max-width: 100%;
}

.product-specs {
    margin-top: 2.5rem;
    background: #fdfdfd;
    padding: 2.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-accent-gold);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.product-specs h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--color-primary-green);
    font-family: var(--font-heading);
    font-size: 1.3rem;
}

.product-specs ul {
    list-style: none;
    padding: 0;
}

.product-specs li {
    margin-bottom: 1rem;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.8rem;
}

.product-specs li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.product-specs strong {
    color: var(--color-primary-green);
    font-weight: 600;
}

/* Legal Pages (Datenschutz & Impressum) Readability Improvements */
.legal-content {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.legal-section-padding {
    padding-top: 8rem;
    /* Ensure clearance from fixed header */
}

.link-green {
    color: var(--color-primary-green);
    text-decoration: underline;
}

.legal-content h3 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--color-primary-green);
}

.legal-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    color: var(--color-primary-green);
}

.legal-content p {
    margin-bottom: 1.5rem;
}

.legal-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .legal-section-padding {
        padding-top: 6rem;
    }

    .legal-content {
        font-size: 1rem;
    }

    .legal-content h3 {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .legal-content h4 {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }
}

/* Mobile Navigation */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 0;
}

/* Change hamburger color on light background */
.main-header.scrolled .hamburger-menu span {
    background: var(--color-primary-green);
}

.hamburger-menu span {
    width: 30px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

/* Header Solid variant needs specific handling if button color needs to change? 
   Currently header-solid has green bg, text white. Icon white is fine. 
*/

@media (max-width: 1024px) {
    .main-nav {
        justify-content: space-between;
        /* Space between logo (if any) and burger */
        padding: 0 5%;
    }

    /* If logo was present, we'd need to adjust. 
       Currently main-nav is flex-grow 1. 
       We want the hamburger on the right? 
       .main-nav has justify-content: flex-end (desktop).
       We should keep that or make it explicit.
    */

    .hamburger-menu {
        display: flex;
        margin-left: auto;
        /* Push to right if not already */
    }

    .nav-list {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 100%;
        /* Full screen menu */
        background-color: var(--color-primary-green);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        margin: 0;
        padding: 0;
    }

    .nav-list.nav-active {
        transform: translateX(0);
    }

    .nav-list li {
        margin: 1.5rem 0;
        opacity: 0;
    }

    /* Animate links in */
    .nav-list.nav-active li {
        animation: navLinkFade 0.5s ease forwards 0.3s;
    }

    /* Hamburger Animation */
    .hamburger-menu.toggle span:nth-child(1) {
        transform: rotate(45deg);
    }

    .hamburger-menu.toggle span:nth-child(2) {
        opacity: 0;
        transform: translateX(20px);
    }

    .product-detail-view {
        flex-direction: column;
        gap: 2rem;
    }

    .product-image-large img {
        max-width: 80%;
        height: auto;
    }

    .product-info {
        text-align: center;
    }

    .product-info .section-title,
    .product-info .section-subtitle {
        text-align: center;
    }

    /* Contact Form Mobile */
    .contact-form {
        padding: 1.5rem;
    }

    /* Hero Mobile */
    .hero-logo {
        width: 100%;
        max-width: 300px;
        /* Smaller logo on mobile */
    }

    .hero-slogan {
        font-size: 1.8rem;
    }

    /* General Typography Mobile */
    .section-title {
        font-size: 2rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .hamburger-menu.toggle span:nth-child(3) {
        transform: rotate(-45deg);
    }
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Utility Classes for Subpages */
.header-solid {
    position: relative;
    background: var(--color-primary-green);
}

.nav-center {
    justify-content: center;
}

.product-prices {
    margin-top: 1.5rem;
    border-left-color: var(--color-primary-green);
}

.price-list {
    margin-bottom: 1rem;
}

.price-note {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.5rem;
    line-height: 1.4;
}