Initial setup of Theater Ziefen website

- Set up Astro with TypeScript
- Integrate TinaCMS for content management
- Create homepage with hero section and recent posts
- Build blog listing and individual post pages
- Add About and Contact pages
- Implement responsive design with theater theme
- Configure Netlify deployment
- Add comprehensive documentation for developers and editors

Tech stack:
- Framework: Astro 5.x
- CMS: TinaCMS with Git-based workflow
- Content: MDX format for blog and pages
- Styling: Scoped CSS with responsive design
- Deployment: Netlify (configured)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/blog/index.astro

@@ -0,0 +1,180 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+const allPosts = await Astro.glob('../../../../content/blog/*.mdx');
+const sortedPosts = allPosts.sort(
+  (a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()
+);
+---
+
+<BaseLayout title="Blog" description="Latest news and updates from Theater Ziefen">
+  <div class="blog-header">
+    <div class="container">
+      <h1>Blog</h1>
+      <p>Stay updated with the latest news and behind-the-scenes insights</p>
+    </div>
+  </div>
+
+  <div class="blog-content">
+    <div class="container">
+      {sortedPosts.length === 0 ? (
+        <p class="no-posts">No blog posts yet. Check back soon!</p>
+      ) : (
+        <div class="posts-list">
+          {sortedPosts.map((post) => (
+            <article class="post-item">
+              {post.frontmatter.coverImage && (
+                <div class="post-image">
+                  <img src={post.frontmatter.coverImage} alt={post.frontmatter.title} />
+                </div>
+              )}
+              <div class="post-content">
+                <h2>
+                  <a href={`/blog/${post.file.split('/').pop()?.replace('.mdx', '')}`}>
+                    {post.frontmatter.title}
+                  </a>
+                </h2>
+                <p class="post-meta">
+                  <time datetime={post.frontmatter.date}>
+                    {new Date(post.frontmatter.date).toLocaleDateString('de-DE', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric'
+                    })}
+                  </time>
+                </p>
+                <p class="post-excerpt">{post.frontmatter.excerpt}</p>
+                <a href={`/blog/${post.file.split('/').pop()?.replace('.mdx', '')}`} class="read-more">
+                  Read full post →
+                </a>
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+    </div>
+  </div>
+</BaseLayout>
+
+<style>
+  .blog-header {
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    color: white;
+    padding: 4rem 0 3rem;
+    text-align: center;
+  }
+
+  .blog-header h1 {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .blog-header p {
+    font-size: 1.25rem;
+    opacity: 0.9;
+  }
+
+  .blog-content {
+    padding: 3rem 0;
+  }
+
+  .no-posts {
+    text-align: center;
+    font-size: 1.25rem;
+    color: #666;
+    padding: 4rem 0;
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .post-item {
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .post-item:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+
+  .post-image {
+    width: 100%;
+    height: 300px;
+    overflow: hidden;
+  }
+
+  .post-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .post-content {
+    padding: 2rem;
+  }
+
+  .post-content h2 {
+    font-size: 2rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .post-content h2 a {
+    color: #2c3e50;
+    text-decoration: none;
+  }
+
+  .post-content h2 a:hover {
+    color: #8b0000;
+  }
+
+  .post-meta {
+    color: #999;
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+
+  .post-excerpt {
+    color: #666;
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+    font-size: 1.05rem;
+  }
+
+  .read-more {
+    color: #8b0000;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  .read-more:hover {
+    color: #c0392b;
+  }
+
+  @media (max-width: 768px) {
+    .blog-header h1 {
+      font-size: 2.5rem;
+    }
+
+    .blog-header p {
+      font-size: 1.1rem;
+    }
+
+    .post-content h2 {
+      font-size: 1.5rem;
+    }
+
+    .post-image {
+      height: 200px;
+    }
+  }
+</style>