/<!-- Stylesheet: Kann in dein zentrales CSS kopiert oder hier belassen werden -->
<style>
    :root {
        --blog-primary: #891b40;      /* Dunkelrot für Linien & Akzente */
        --blog-tab-bg: #891b40;       /* Hintergrund der Tabs */
        --blog-tab-text: #fbddb6;     /* Helle Pfirsichfarbe für Label-Texte */
        --blog-text: #1f2937;
        --blog-text-light: #4b5563;
        --blog-white: #ffffff;
    }

    .blog-embed-container {
        max-width: 800px;
        margin: 20px auto;
        background: var(--blog-white);
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        overflow: hidden;
        border: 1px solid var(--blog-primary);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* Tabs Navigation */
    .blog-tabs-nav {
        display: flex;
        background: var(--blog-tab-bg);
        border-bottom: 2px solid var(--blog-primary);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .blog-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .blog-tab-btn {
        flex: 1;
        padding: 15px 20px;
        border: none;
        background: none;
        font-weight: 600;
        color: var(--blog-tab-text);
        opacity: 0.8;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
        text-align: center;
    }

    .blog-tab-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        opacity: 1;
    }

    .blog-tab-btn.active {
        background: var(--blog-white);
        color: var(--blog-primary);
        opacity: 1;
        border-bottom: 3px solid var(--blog-primary);
        margin-bottom: -2px;
    }

    /* Content Area */
    .blog-tabs-content {
        padding: 30px;
    }

    .blog-tab-panel {
        display: none;
    }

    .blog-tab-panel.active {
        display: block;
        animation: blogFadeIn 0.4s ease;
    }

    /* Article Styling */
    .blog-post {
        margin-bottom: 30px;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 25px;
    }

    .blog-post:last-child {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }

    .blog-post-title {
        font-size: 1.5rem;
        color: var(--blog-text);
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .blog-post-meta {
        font-size: 0.85rem;
        color: var(--blog-text-light);
        margin-bottom: 15px;
    }

    .blog-post-excerpt {
        color: var(--blog-text-light);
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .blog-read-more {
        color: var(--blog-primary);
        text-decoration: none;
        font-weight: 500;
    }

    .blog-read-more:hover {
        text-decoration: underline;
    }

    @keyframes blogFadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Mobile Optimization */
    @media (max-width: 600px) {
        .blog-tabs-nav {
            justify-content: flex-start;
        }

        .blog-tab-btn {
            flex: none;
            padding: 12px 18px;
            font-size: 0.9rem;
        }

        .blog-tabs-content {
            padding: 20px;
        }

        .blog-post-title {
            font-size: 1.25rem;
        }
    }
</style>

<!-- HTML-Markup für den Blog -->
<div class="blog-embed-container">
    <nav class="blog-tabs-nav" role="tablist">
        <button class="blog-tab-btn active" role="tab" aria-selected="true" aria-controls="embed-tech-panel" id="embed-tech-tab">Technology</button>
        <button class="blog-tab-btn" role="tab" aria-selected="false" aria-controls="embed-lifestyle-panel" id="embed-lifestyle-tab">Lifestyle</button>
        <button class="blog-tab-btn" role="tab" aria-selected="false" aria-controls="embed-travel-panel" id="embed-travel-tab">Travel</button>
        <button class="blog-tab-btn" role="tab" aria-selected="false" aria-controls="embed-finance-panel" id="embed-finance-tab">Finance</button>
        <button class="blog-tab-btn" role="tab" aria-selected="false" aria-controls="embed-health-panel" id="embed-health-tab">Health</button>
    </nav>

    <div class="blog-tabs-content">
        <!-- Topic 1: Tech -->
        <section class="blog-tab-panel active" id="embed-tech-panel" role="tabpanel" aria-labelledby="embed-tech-tab">
            <article class="blog-post">
                <h2 class="blog-post-title">The Future of Web Development</h2>
                <div class="blog-post-meta">Published on August 9, 2026 • By Alex Chen</div>
                <p class="blog-post-excerpt">Discover how next-generation browser engines and AI-assisted workflows are changing how we write code for the modern web.</p>
                <a href="#" class="blog-read-more">Read Full Post →</a>
            </article>
        </section>

        <!-- Topic 2: Lifestyle -->
        <section class="blog-tab-panel" id="embed-lifestyle-panel" role="tabpanel" aria-labelledby="embed-lifestyle-tab">
            <article class="blog-post">
                <h2 class="blog-post-title">Designing a Minimalist Workspace</h2>
                <div class="blog-post-meta">Published on August 7, 2026 • By Sarah Jenkins</div>
                <p class="blog-post-excerpt">Clutter limits your productivity. Learn five simple steps to clear your desk and sharpen your focus today.</p>
                <a href="#" class="blog-read-more">Read Full Post →</a>
            </article>
        </section>

        <!-- Topic 3: Travel -->
        <section class="blog-tab-panel" id="embed-travel-panel" role="tabpanel" aria-labelledby="embed-travel-tab">
            <article class="blog-post">
                <h2 class="blog-post-title">Hidden Gems of the Pacific Northwest</h2>
                <div class="blog-post-meta">Published on August 5, 2026 • By Marcus Brody</div>
                <p class="blog-post-excerpt">Skip the tourist traps. These three remote coastal trails offer unmatched views without the heavy crowds.</p>
                <a href="#" class="blog-read-more">Read Full Post →</a>
            </article>
        </section>

        <!-- Topic 4: Finance -->
        <section class="blog-tab-panel" id="embed-finance-panel" role="tabpanel" aria-labelledby="embed-finance-tab">
            <article class="blog-post">
                <h2 class="blog-post-title">Smart Budgeting Habits for Beginners</h2>
                <div class="blog-post-meta">Published on August 2, 2026 • By Elena Rostova</div>
                <p class="blog-post-excerpt">Take control of your money with the simple 50/30/20 rule. Learn how to balance saving and spending guilt-free.</p>
                <a href="#" class="blog-read-more">Read Full Post →</a>
            </article>
        </section>

        <!-- Topic 5: Health -->
        <section class="blog-tab-panel" id="embed-health-panel" role="tabpanel" aria-labelledby="embed-health-tab">
            <article class="blog-post">
                <h2 class="blog-post-title">Understanding the Importance of Sleep</h2>
                <div class="blog-post-meta">Published on July 30, 2026 • By Dr. David Vance</div>
                <p class="blog-post-excerpt">Deep sleep is your body's ultimate recovery tool. Explore the neurological benefits of getting a solid 8 hours.</p>
                <a href="#" class="blog-read-more">Read Full Post →</a>
            </article>
        </section>
    </div>
</div>

<!-- JavaScript-Logik -->
<script>
    (function() {
        const initBlogTabs = () => {
            const container = document.querySelector('.blog-embed-container');
            if (!container) return;

            const tabs = container.querySelectorAll('.blog-tab-btn');
            const panels = container.querySelectorAll('.blog-tab-panel');

            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => {
                        t.classList.remove('active');
                        t.setAttribute('aria-selected', 'false');
                    });
                    panels.forEach(p => p.classList.remove('active'));

                    tab.classList.add('active');
                    tab.setAttribute('aria-selected', 'true');

                    const targetPanelId = tab.getAttribute('aria-controls');
                    const targetPanel = container.querySelector(`#${targetPanelId}`);
                    if (targetPanel) {
                        targetPanel.classList.add('active');
                    }
                    
                    tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
                });
            });
        };

        // Initialisiert das Skript, sobald das DOM bereit ist
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initBlogTabs);
        } else {
            initBlogTabs();
        }
    })();
</script>