/* Global Variables & Reset */
.global-reset {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: #ffffff;
    --color-text: #1a1a1a;
    --color-text-light: #666666;
    --color-primary: #333333;
    /* Dark Gray */
    --color-primary-dark: #000000;
    --color-acc: #f0f0f0;
    /* Light Gray */
    --color-border: #e0e0e0;
    --font-main: 'Inter', sans-serif;
    --font-head: 'Outfit', sans-serif;
    --spacing-container: 1200px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.1);
}

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

/* Typography Classes */
.heading-1,
.hero-title {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.heading-2,
.section-title {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: 1.5rem;
}

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

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

/* Layout Classes */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

/* Links & Buttons */
.cta-button {
    display: inline-block;
    background-color: var(--color-primary-dark);
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid var(--color-primary-dark);
}

.cta-button:hover {
    background-color: transparent;
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Header */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
    padding: 15px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    letter-spacing: -0.5px;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: color 0.3s;
}

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

.header-cta {
    padding: 10px 24px;
    font-size: 0.9rem;
}

/* Advertisement Note Top */
.top-ad-note {
    background-color: #f8f8f8;
    color: #888;
    font-size: 0.75rem;
    text-align: center;
    padding: 2px 10px;
    border-bottom: 1px solid #eee;
    margin-top: 50px;
    /* Offset for fixed header if needed, but header is fixed top, so maybe padding-top body? */
    /* Wait, header is fixed. Top ad note should be ABOVE header or BELOW? 
       "at the top of the page above the header". 
       If header is fixed, ad note should perhaps be fixed too or scroll away. 
       Usually fixed header sits on top.
       Let's sticky the ad note or put it within the fixed container?
       Simple approach: Body padding for header, Ad note is first child in body?
       Actually, I put ad note below page loader in HTML.
       Let's adjust Main Header top position if Ad Note is present.
    */
    position: relative;
    top: 80px;
    /* Below fixed header? Or above? */
    z-index: 900;
}

/* Adjusting layout for Top Ad Note position */
body {
    padding-top: 80px;
    /* Space for fixed header */
}

.top-ad-note {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 1001;
    /* Above header */
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.main-header {
    top: 30px;
    /* Move header down */
    height: 70px;
}

.header-container {
    height: 100%;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding: 100px 0;
    background-color: #f5f5f7;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background-image: url('https://www.bundesfinanzministerium.de/Web/DE/Home/ThemenTeaser/themen-teaser-2-bild.jpg?__blob=wide&v=251');
    background-size: cover;
    background-position: center;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.4) 100%);
}

.hero-content {
    position: relative;
    max-width: 600px;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.1;
    margin: 0 0 20px 0;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-light);
    margin-bottom: 30px;
}

/* About Section */
.about-section {
    background-color: #fff;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

.about-text p {
    margin-bottom: 20px;
    color: var(--color-text-light);
}

/* Why Us Section */
.why-us-section {
    background-color: #f9f9f9;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    background: var(--color-primary-dark);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-weight: 600;
}

/* Testimonials */
.testimonials-section {
    padding-bottom: 100px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    background: #fafafa;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #eee;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 20px;
}

.author-name {
    display: block;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.author-location {
    font-size: 0.85rem;
    color: #999;
}

/* FAQ */
.faq-section {
    background-color: #f5f5f5;
}

.faq-list {
    max-width: 800px;
    margin: 40px auto 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary-dark);
    font-family: var(--font-head);
}

.faq-answer {
    padding: 0 20px 20px 20px;
    /* Hidden by default via JS max-height toggling usually, or display none. Will use JS. */
    display: none;
    color: var(--color-text-light);
}

.faq-answer.open {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Footer */
.main-footer {
    background-color: #111;
    color: #fff;
    padding: 80px 0 0 0;
}

.footer-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid #333;
}

.footer-column h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.footer-column p,
.footer-column a,
.footer-column li a {
    color: #aaa;
    text-decoration: none;
    margin-bottom: 10px;
    display: block;
    line-height: 1.6;
}

.footer-column a:hover {
    color: #fff;
}

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

.footer-ad-note {
    background: #000;
    padding: 20px 0;
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

.copyright {
    padding: 20px 0;
    background: #000;
    text-align: center;
    font-size: 0.85rem;
    color: #444;
}

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

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

.loader-title {
    font-family: var(--font-head);
    font-size: 3rem;
    margin-bottom: 20px;
    animation: fadeUp 1s ease;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #eee;
    border-top: 4px solid #000;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

/* Cookie Popup */
.cookie-popup {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    z-index: 5000;
    display: none;
    /* JS will show this */
}

.cookie-content h3 {
    margin-top: 0;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.cookie-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.cookie-btn.accept {
    background: #000;
    color: #fff;
}

.cookie-btn.reject {
    background: #eee;
    color: #333;
}

/* Mobile & Hamburger */
.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 2px;
    background-color: var(--color-primary-dark);
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    /* Hidden by default */
    width: 75%;
    /* 75% of device width */
    height: 100%;
    background: #fff;
    z-index: 2000;
    transition: right 0.3s ease;
    padding: 50px 30px;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

.mobile-nav-overlay.active {
    right: 0;
}

.close-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin-top: 50px;
}

.mobile-nav-list li {
    margin-bottom: 25px;
}

.mobile-nav-link {
    font-size: 1.5rem;
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

/* Media Queries */
@media (max-width: 768px) {

    .nav-list,
    .header-cta {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .about-container {
        grid-template-columns: 1fr;
    }

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

    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}