/* 1. Grundlagen & Dark Mode Farben */
body {
  background-color: #121316;   /* Dunkles, augenschonendes Anthrazit */
  color: #d1d5db;              /* Milder Grauton statt stechendem Weiß */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.125rem;         /* 18px für entspanntes Lesen */
  line-height: 1.7;            /* Großzügiger Zeilenabstand */
  margin: 0;
  padding: 0;
}

/* Macht Bilder flexibel und passt sie an den Text-Behälter an */
.article-image {
  max-width: 10px; /* Hier kannst du die maximale Breite anpassen (z. B. 300px, 400px, 500px) */
  width: 100%;       /* Passt sich automatisch kleineren Bildschirmen/Handys an */
  height: auto;      /* Verhindert Verzerrungen */
  display: block;
  margin: 20px auto; /* "auto" zentriert das Bild mittig im Textbereich */
  border-radius: 4px;
}

/* 2. Layout & Lesebereich */
.text-container {
  max-width: 680px;            /* Optimale Zeilenlänge */
  margin: 80px auto;           /* Zentriert mit Abstand oben/unten */
  padding: 0 24px;
}

/* 3. Überschriften & Textfluss */
h1, h2, h3 {
  color: #f3f4f6;              /* Helles Weiß für Überschriften */
  line-height: 1.3;
  margin-top: 2.5em;
  margin-bottom: 0.8em;
}

h1 {
  font-size: 2.25rem;
  margin-top: 0;
}

h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #27272a;  /* Dezent trennende Linie */
  padding-bottom: 0.3em;
}

p {
  margin-bottom: 1.5em;
}

.lead {
  font-size: 1.25rem;
  color: #e5e7eb;
}

.meta {
  font-size: 0.875rem;
  color: #9ca3af;
}

/* 4. Links & Zitate */
a {
  color: #7c3aed;              /* Violette Akzentfarbe */
  text-decoration: underline;
  text-underline-offset: 4px;
}

a:hover {
  color: #a78bfa;
}

blockquote {
  margin: 2em 0;
  padding-left: 20px;
  border-left: 3px solid #7c3aed;
  font-style: italic;
  color: #e5e7eb;
}