/* =========================
   Grundlegende Variablen
   ========================= */
:root {
  --font-text: Arial, Helvetica, sans-serif;
  --font-headings: Arial, Helvetica, sans-serif;

  --color-text: #222;
  --color-muted: #666;
  --color-accent: #000;

  --max-width: 720px;

  --line-height-text: 1.65;
  --line-height-headings: 1.3;
}

/* =========================
   Basis-Reset (minimal)
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--color-text);
  background: #fff;
}

/* =========================
   Layout
   ========================= */

main {
  display: block;
}

.essay {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.25rem;
}

/* =========================
   Header
   ========================= */

.essay-header {
  margin-bottom: 3rem;
}

.essay-header h1 {
  font-family: var(--font-headings);
  font-size: 2.2rem;
  line-height: var(--line-height-headings);
  margin: 0 0 0.75rem 0;
}

.essay-meta {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0 0 1.5rem 0;
}

.essay-intro {
  font-size: 1.1rem;
  line-height: var(--line-height-text);
}

/* =========================
   Text & Absätze
   ========================= */

.essay p {
  font-size: 1rem;
  line-height: var(--line-height-text);
  margin: 1.2rem 0;
}

.essay p + p {
  margin-top: 1.4rem;
}

/* =========================
   Überschriften
   ========================= */

.essay h2 {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  line-height: var(--line-height-headings);
  margin: 3rem 0 1rem 0;
}

.essay h3 {
  font-family: var(--font-headings);
  font-size: 1.2rem;
  line-height: var(--line-height-headings);
  margin: 2rem 0 0.75rem 0;
}

/* =========================
   Hervorhebungen
   ========================= */

.essay strong {
  font-weight: 600;
}

.essay em {
  font-style: italic;
}

/* =========================
   Sections
   ========================= */

.essay-section {
  margin-bottom: 2.5rem;
}

/* =========================
   Schluss & Footer
   ========================= */

.essay-conclusion {
  margin-top: 2rem;
  font-style: italic;
}

.essay-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* =========================
   Links (falls nötig)
   ========================= */

.essay a {
  color: var(--color-accent);
  text-decoration: underline;
}

.essay a:hover {
  text-decoration: none;
}

/* =========================
   Aufzählungen – typografisch angepasst
   ========================= */

.essay ul {
  margin: 1.8rem 0 1.8rem 1.8rem;
  padding: 0;
}

.essay li {
  margin: 0.9rem 0;          /* Abstand zwischen Punkten */
  line-height: 1.65;        /* Zeilenabstand innerhalb eines Punkts */
}

/* =========================
   Responsive Feinjustierung
   ========================= */

@media (max-width: 600px) {
  .essay {
    padding: 2rem 1rem;
  }

  .essay-header h1 {
    font-size: 1.8rem;
  }

  .essay h2 {
    font-size: 1.35rem;
  }

  .essay h3 {
    font-size: 1.1rem;
  }
}

/* =========================
   Druckversion
   ========================= */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .essay {
    max-width: none;
    padding: 0;
  }

  .essay a {
    text-decoration: none;
    color: #000;
  }

  .essay-footer {
    display: none;
  }
}