diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..4f020c3
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,151 @@
+/* ---------- Farbpalette ---------- */
+:root {
+  /* Light theme */
+  --bg:            #f5f7fa;
+  --bg-alt:        #ffffff;
+  --card-bg:       #ffffff;
+  --text:          #1f2933;
+  --text-muted:    #64748b;
+  --accent:        #2563eb;            /* Indigo‑600  */
+  --accent-light:  #3b82f6;            /* Indigo‑500  */
+  --code-bg:       #f1f5f9;
+  --code-border:   #e2e8f0;
+  --radius:        0.75rem;
+  --gap:           2rem;
+  --shadow:        0 4px 16px rgba(0,0,0,.08);
+  font-size: 16px;
+  font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
+  color-scheme: light;
+}
+
+/* Dark mode (optional) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:          #0d1117;
+    --bg-alt:      #161b22;
+    --card-bg:     #161b22;
+    --text:        #c9d1d9;
+    --text-muted:  #8b949e;
+    --accent:      #3b82f6;
+    --accent-light:#60a5fa;
+    --code-bg:     #1e242c;
+    --code-border: #30363d;
+    --shadow:      0 4px 16px rgba(0,0,0,.32);
+  }
+}
+
+/* ---------- Grundlayout ---------- */
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.65;
+}
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color .15s;
+}
+a:hover { color: var(--accent-light); }
+
+/* Container in der Mitte */
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--gap) calc(var(--gap) / 1.5);
+}
+
+/* ---------- Kopf & Fuß ---------- */
+header, footer {
+  background: var(--bg-alt);
+  box-shadow: var(--shadow);
+}
+header {
+  position: sticky; top: 0; z-index: 10;
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 1rem calc(var(--gap) / 1.2);
+}
+header h1 { margin: 0; font-size: 1.4rem; }
+footer {
+  text-align: center;
+  padding: 2rem 1rem;
+  color: var(--text-muted);
+  font-size: .9rem;
+  margin-top: var(--gap);
+}
+
+/* ---------- Karten‑Grid ---------- */
+.post-list {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  transition: transform .2s ease, box-shadow .2s ease;
+}
+.card:hover { transform: translateY(-6px); box-shadow: 0 6px 24px rgba(0,0,0,.1); }
+.card img {
+  width: 100%; height: 180px; object-fit: cover;
+}
+.card-content { padding: 1rem 1.25rem 1.5rem; }
+.card h2 { margin: .25rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; }
+.card time { color: var(--text-muted); font-size: .85rem; }
+
+/* ---------- Artikel ---------- */
+.hero {
+  width: 100%; height: 320px; object-fit: cover;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+article h1 { font-size: 2.2rem; margin: 1.2rem 0 .3rem; }
+article time { color: var(--text-muted); font-size: .9rem; }
+article img:not(.hero), article video {
+  max-width: 100%; height: auto; border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  margin: 1rem 0;
+}
+article pre {
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  padding: 1rem 1.2rem;
+  border-radius: var(--radius);
+  overflow: auto;
+  font-family: "Fira Code", Consolas, monospace;
+}
+article blockquote {
+  border-left: 4px solid var(--accent);
+  padding: .5rem 1rem; margin: 1rem 0;
+  background: var(--code-bg);
+  color: var(--text-muted);
+}
+.main-nav ul {
+  display: flex;
+  gap: 1.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.main-nav a {
+  font-weight: 600;
+  color: var(--text);
+}
+.main-nav a:hover {
+  color: var(--accent);
+}
+
+/* ---------- Responsive ---------- */
+@media (max-width: 640px) {
+  :root { font-size: 15px; }
+  .hero { height: 200px; }
+  header { flex-direction: column; gap: .5rem; }
+}