/* ==========================================================================
   ARTIKEL — Blogbeiträge und lange Fließtexte
   Eigene Datei, weil diese Regeln nur auf Artikelseiten gebraucht werden.
   ========================================================================== */

.article { padding-top: clamp(20px, 3vw, 40px); }

.article__title {
  max-width: 20ch;
  margin: 16px 0 28px;
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 500;
}

.article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}
.article__meta img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}
.article__meta b { display: block; font-size: 15px; font-weight: 650; }
.article__meta span { font-size: 13px; color: var(--color-muted); }

/* --- Fließtext ---------------------------------------------------------- */

.prose { max-width: 68ch; }

.prose > * + * { margin-top: 20px; }

.prose p {
  max-width: 68ch;
  font-size: 17px;
  line-height: 30px;
  color: #2b3134;
}

.prose h2 {
  margin-top: var(--space-12);
  font-size: clamp(1.5rem, 1.28rem + .9vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.03em;
  font-weight: 600;
}
.prose h2 + * { margin-top: 14px; }

.prose h3 {
  margin-top: var(--space-8);
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 650;
}
.prose h3 + * { margin-top: 10px; }

.prose ul,
.prose ol {
  max-width: 68ch;
  padding-inline-start: 24px;
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 29px;
  color: #2b3134;
}
.prose li::marker { color: var(--color-aqua); }
.prose ol li::marker { color: var(--color-muted); font-weight: 650; }

.prose strong { font-weight: 650; color: var(--color-ink); }

.prose a {
  color: var(--color-petrol);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--dur-hover) var(--ease-out);
}
.prose a:hover { color: var(--color-coral); }

.prose blockquote {
  margin-inline: 0;
  padding: 22px 26px;
  border-inline-start: 3px solid var(--color-lime);
  background: var(--color-cloud);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
[dir="rtl"] .prose blockquote { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.prose blockquote p { margin: 0; font-size: 17px; line-height: 28px; }

.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--color-cloud);
  font-size: .92em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- Tabellen im Fließtext --------------------------------------------- */

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}
.prose table { font-size: 15px; font-variant-numeric: tabular-nums; }
.prose th,
.prose td {
  padding: 13px 16px;
  text-align: start;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.prose thead th {
  background: var(--color-cloud);
  font-weight: 650;
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }

/* --- Abschluss-Kasten im Artikel --------------------------------------- */

.article__cta {
  margin-top: var(--space-12);
  padding: clamp(28px, 3.4vw, 40px);
}
.article__cta h3 { margin-bottom: 10px; }
.article__cta p { max-width: 56ch; margin-bottom: 24px; font-size: 16px; line-height: 26px; }