/* ---------- Farbpalette (Feel‑free to tune) ---------- */
:root {
    --bg:          #0d1117;
    --bg‑alt:      #161b22;
    --text:        #c9d1d9;
    --text‑muted:  #8b949e;
    --accent:      #3b82f6;   /* Blau */
    --accent‑light:#60a5fa;
    --code‑bg:     #1e242c;
    --code‑border: #30363d;
    --radius:      0.6rem;
    --gap:         1.5rem;
    font‑size:     16px;
    font‑family:   system‑ui, "Segoe UI", Roboto, sans‑serif;
    color‑scheme:  dark;
  }
  
  /* ---------- Globale Elemente ---------- */
  * { box‑sizing: border‑box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line‑height: 1.6;
  }
  a {
    color: var(--accent);
    text‑decoration: none;
  }
  a:hover { text‑decoration: underline; }
  
  /* ---------- Layout ---------- */
  .wrapper {
    max‑width: 768px;
    margin: 0 auto;
    padding: var(--gap);
  }
  header, footer {
    display: flex;
    align‑items: center;
    justify‑content: space-between;
    background: var(--bg‑alt);
    padding: 1rem var(--gap);
    border‑bottom: 1px solid var(--code‑border);
  }
  header h1 {
    margin: 0;
    font‑size: 1.4rem;
    letter‑spacing: 0.5px;
  }
  header a { color: var(--text); }
  
  footer {
    border‑top: 1px solid var(--code‑border);
    font‑size: 0.9rem;
    color: var(--text‑muted);
  }
  
  /* ---------- Artikelliste ---------- */
  .post‑list li {
    margin: 0;
    padding: 1rem 0;
    border‑bottom: 1px solid var(--code‑border);
  }
  .post‑list li:last‑child { border‑bottom: none; }
  .post‑list time { color: var(--text‑muted); font‑size: 0.9rem; }
  
  /* ---------- Einzelartikel ---------- */
  article h1 { margin‑top: 0; font‑size: 2rem; }
  article time { color: var(--text‑muted); font‑size: 0.9rem; }
  article img, article video {
    max‑width: 100%; height: auto; border‑radius: var(--radius);
  }
  article pre, article code {
    font‑family: "Fira Code", Consolas, monospace;
  }
  article pre {
    background: var(--code‑bg);
    border: 1px solid var(--code‑border);
    padding: 1rem;
    border‑radius: var(--radius);
    overflow: auto;
  }
  article blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border‑left: 4px solid var(--accent‑light);
    background: var(--bg‑alt);
    color: var(--text‑muted);
  }
  /* ---------- Karten‑Layout für Artikelliste ---------- */
.card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.card img {
  width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
}
.card h2 {
  margin: 0 0 .4rem;
  font-size: 1.2rem;
}
.card time { color: var(--text-muted); font-size: .9rem; }

/* ---------- Hero‑Bild im Artikel ---------- */
.hero {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

  
  /* ---------- Responsive ---------- */
  @media (max‑width: 600px) {
    :root { font‑size: 15px; }
    header, footer { flex‑direction: column; gap: 0.5rem; }
  }