/* Import Local Fonts */
@import url('fonts.css');

/* Design System & Variables */
:root {
    /* Colors */
    --color-bg: #f9f8f6;
    --color-text: #1a1a1a;
    --color-text-muted: #4a3b32;
    --color-accent: #c07a50;
    --color-accent-hover: #a05a30;
    --color-white: #ffffff;
    --color-border: #e0e0e0;
    --color-dark-bg: #1a1a1a;
    --color-light-text: #f9f8f6;
    --color-input-bg: #ffffff;
    --color-input-border: #d1d1d1;
    --color-focus-ring: rgba(192, 122, 80, 0.25);

    /* Typography */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Störer Ribbon */
.stoerer-ribbon {
    position: absolute;
    top: 78px;
    left: -100px;
    z-index: 100;
    width: 400px;
    text-align: center;
    padding: 0.3rem 0;
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    color: white;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: rotate(-45deg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border-top: 3px dashed rgba(255, 255, 255, 0.6);
    border-bottom: 3px dashed rgba(255, 255, 255, 0.6);
}

/* Mini-Störer Ribbon (for image thumbnails) */
.mini-stoerer-ribbon {
    position: absolute;
    top: 34px;
    left: -45px;
    z-index: 10;
    width: 200px;
    text-align: center;
    padding: 0.4rem 0;
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    color: white;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.90rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-top: 2px dashed rgba(255, 255, 255, 0.5);
    border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-muted);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* Utility Classes */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--color-accent);
    cursor: pointer;
    transition: var(--transition-fast);
    border-radius: 4px;
    /* Slight rounding for premium feel */
}

.btn:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 122, 80, 0.3);
}

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

.btn-secondary:hover {
    background-color: var(--color-text);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    /* Pill shape */
    transition: all 0.3s ease;
}

.btn-premium:hover {
    background: var(--color-accent);
    color: white;
    box-shadow: 0 4px 15px rgba(192, 122, 80, 0.3);
    transform: translateY(-2px);
}

.section {
    padding: var(--spacing-lg) 0;
}

/* Add extra padding to the first section of inner pages (inside main) 
   to prevent the large logo from overlapping content. 
   Home page uses .hero outside main, so it's unaffected. */
main>section:first-child {
    padding-top: 100px;
    /* Mobile */
}

@media (min-width: 769px) {
    main>section:first-child {
        padding-top: 140px;
        /* Desktop */
    }
}

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

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(249, 248, 246, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
    /* Removed padding for top alignment */
    height: 80px;
    /* Fixed height for the white bar */
    overflow: visible;
    /* Allow logo to overlap */
}

.nav-container {
    display: flex;
    justify-content: flex-end;
    /* Align nav to right since logo is absolute */
    align-items: center;
    height: 100%;
    position: relative;
    padding-right: 0;
    /* Ensure no extra padding interferes */
}

.lang-switch {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    transition: transform 0.2s;
    z-index: 1003;
    /* Ensure it's clickable */
}

.lang-switch:hover {
    transform: scale(1.1);
}

.lang-switch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.logo {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1002;
    height: auto;
    /* Let image define height */
    text-decoration: none;
    /* Hide text, show only image for the main logo if desired, or keep text next to it. 
       Request implies "circular badge" look, usually just image. 
       Let's keep text hidden or styled if it was part of the image. 
       The previous HTML had text "OWS Pipes" next to img. 
       If we want a big badge, the text might interfere. 
       Let's hide the text visually but keep for SEO, or just style the image.
       The user said "Use the existing logo file... circular OWS Pipes logo".
       I will assume the image contains the text or is the main element.
       I'll hide the text node to focus on the image badge. */
    font-size: 0;
    /* Hide text */
}

.logo-img {
    height: 250px;
    /* Increased size as requested (160-200px) */
    width: auto;
    object-fit: contain;
    display: block;
    /* Drop shadow for better visibility over hero */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Remove old hero logo styles */
.home-logo-container {
    display: none;
}

.nav-menu {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-right: var(--spacing-md);
    /* Add some spacing from right edge */
}

.nav-link {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

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

.hamburger {
    display: none;
    cursor: pointer;
    margin-right: var(--spacing-sm);
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--color-text);
    transition: var(--transition-fast);
}

/* Mobile Menu */
@media (max-width: 768px) {
    .header {
        height: 70px;
        /* Slightly smaller header on mobile */
    }

    .logo-img {
        height: 120px;
        /* Smaller but still overlapping on mobile */
    }

    .hamburger {
        display: block;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        /* Match header height */
        flex-direction: column;
        background-color: var(--color-bg);
        width: 100%;
        text-align: center;
        padding: var(--spacing-md) 0;
        transition: 0.3s;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        margin-right: 0;
        z-index: 1003;
        /* Ensure menu is above logo on mobile */
    }

    .nav-menu.active {
        left: 0;
    }
}

/* Footer */
.footer {
    background-color: var(--color-dark-bg);
    color: var(--color-light-text);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.footer-logo .logo-img {
    height: 80px;
    /* Larger in footer */
    filter: brightness(0.9);
    /* Slight dim for dark bg */
}

.footer-links {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: #ccc;
    font-size: 0.9rem;
}

.footer-link:hover {
    color: var(--color-accent);
}

.social-icons {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.social-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.social-icon:hover {
    background-color: var(--color-accent);
    transform: scale(1.1);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Hero Section */
.hero {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-align: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    max-width: 800px;
    z-index: 1;
}

.hero-content h1 {
    color: var(--color-white);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    color: rgba(255, 255, 255, 0.9);
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.hero-buttons .btn-secondary {
    color: var(--color-white);
    border-color: var(--color-white);
}

.hero-buttons .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-text);
}

/* Scroll Down Arrow */
.scroll-arrow-container {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    animation: bounce 2s infinite;
}

.scroll-arrow {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 4px solid rgba(255, 255, 255, 0.6);
    border-right: 4px solid rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.scroll-arrow:hover {
    border-color: rgba(255, 255, 255, 0.9);
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Grids */
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.grid-1-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    width: 100%;
    margin: 0 auto;
}

.grid-3-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .grid-2-col {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* About Teaser */
.about-image img {
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.text-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    color: var(--color-accent);
    font-weight: 600;
    border-bottom: 1px solid transparent;
}

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

/* Benefits Section */
.bg-light {
    background-color: #f0efeb;
}

.benefit-card {
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
}

.benefit-card h3 {
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
}

/* Story Section */
.story-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.story-image {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
    max-width: 50%;
    min-width: 400px;
    height: auto;
    border-radius: 8px;
    /* Maintain existing roundness */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    /* Maintain existing shadow */
}

.story-heading {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .story-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        min-width: 0;
    }
}

/* Gallery Teaser */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

/* Special Layout for exactly 4 featured items */
@media (min-width: 1024px) {
    .gallery-grid-4 .gallery-item:nth-child(4) {
        grid-column: 2;
    }
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm);
    padding-top: 3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: var(--color-white);
    font-family: var(--font-serif);
    opacity: 1;
    /* Always visible */
    transition: opacity 0.3s ease;
    z-index: 2;
}

.gallery-description {
    padding: 1rem;
    background: var(--color-white);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.gallery-sub {
    display: block;
    font-size: 0.8rem;
    font-family: var(--font-sans);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

/* Craft Teaser */
.bg-dark {
    background-color: var(--color-dark-bg);
}

.text-light {
    color: var(--color-light-text);
}

.text-light p {
    color: rgba(255, 255, 255, 0.7);
}

/* Modern Contact Form */
.contact-form-wrapper {
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    background-color: var(--color-input-bg);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
}

/* Floating Label Effect (Optional, but implemented clean top-aligned as requested for modern look) */
/* If we wanted true floating labels, we'd need more complex CSS/JS. 
   Sticking to clean top-aligned with focus states as per "floating labels or clean top-aligned labels" request. */

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

/* About Page Specifics */
.img-rounded {
    border-radius: 8px;
}

.shadow {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .reverse-mobile {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--spacing-md);
    }
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: var(--color-accent);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.timeline-year {
    background: var(--color-accent);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: bold;
    z-index: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-content {
    width: 45%;
    background: var(--color-white);
    padding: var(--spacing-sm);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-left: auto;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: 0;
    margin-right: auto;
    text-align: right;
}

@media (max-width: 768px) {
    .timeline::before {
        left: 20px;
    }

    .timeline-year {
        left: 20px;
        transform: none;
    }

    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px !important;
        text-align: left !important;
    }
}

/* Privacy Policy / Datenschutzerklärung Styles */
.privacy-date {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.privacy-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-md) 0;
}

.privacy-address {
    background: rgba(192, 122, 80, 0.05);
    border-left: 4px solid var(--color-accent);
    padding: 1rem 1.5rem;
    margin: 1rem 0 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-style: normal;
    line-height: 1.8;
}

.privacy-address a {
    color: var(--color-accent);
    font-weight: 500;
}

.privacy-address a:hover {
    text-decoration: underline;
}

.privacy-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem 0;
}

.privacy-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.privacy-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.4;
}

/* Styles for inner page containers (Privacy, FAQ, etc.) to keep them clean
   without affecting the Hero section on the homepage */
section:not(.hero) .container h1 {
    margin-top: 1.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.container h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.container h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.container h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: 1rem;
    font-family: var(--font-serif);
    font-weight: 600;
}

.container p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.container p a {
    color: var(--color-accent);
    font-weight: 500;
}

.container p a:hover {
    text-decoration: underline;
}

.container em {
    color: var(--color-text-muted);
    font-style: italic;
    display: block;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    margin: 0.5rem 0;
}

/* FAQ Modernization */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background 0.3s ease;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-text);
    transition: color 0.3s ease;
    flex: 1;
    padding-right: 1.5rem;
}

.faq-item.active .faq-question h3 {
    color: var(--color-accent);
}

.toggle-icon {
    width: 32px;
    height: 32px;
    background: rgba(192, 122, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.faq-item.active .toggle-icon {
    background: var(--color-accent);
    color: var(--color-white);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 80px;
    /* Teaser height */
    padding: 0 2rem 1.5rem;
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    color: var(--color-text-muted);
}

/* Teaser Gradient Mask */
.faq-answer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, var(--color-white), transparent);
    transition: opacity 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 2000px;
    /* Large enough to fit any answer */
}

.faq-item.active .faq-answer::after {
    opacity: 0;
    pointer-events: none;
}

.faq-answer p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .faq-question {
        padding: 1.25rem 1.5rem;
    }

    .faq-question h3 {
        font-size: 1.1rem;
    }

    .faq-answer {
        padding: 0 1.5rem 1.25rem;
        max-height: 70px;
    }
}