/**
 * Content — Joomla-Artikelansichten, Pagination, Tags, Tabellen
 */


/* ── Artikel-Körper ───────────────────────────────── */
.nwa-article { width: 100%; }

.article-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--nwa-text-500);
  margin-bottom: var(--space-lg);
  transition: color var(--dur-fast), gap var(--dur-fast);
}
.article-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.article-back:hover { color: var(--nwa-blue-700); gap: 0.55rem; }

.article-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Ohne eigene Klasse erbt die Überschrift die globale h1-Regel (nwa-base.css) —
   das ist die Größe fuer die Startseiten-Hero-Headline, hier viel zu groß. */
.article-header h1 {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-3xl);
}
/* CI-Akzent-Element — gleiches Motiv wie der Punkt vor dem Datum in der News-Liste */
.article-header h1::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nwa-cyan-500);
}

/* ── Full-Bleed-Sektionen im Artikel-Content ─────── */
/* Bricht aus dem Container heraus — volle Viewport-Breite */
.nwa-section {
  margin-inline: calc(50% - 50vw);
  padding-block: var(--space-3xl);
  /* Innenabstand spiegelt Container-Ränder (1200px / 2 = 600px) */
  padding-inline: max(var(--space-xl), calc(50vw - 600px));
}
.nwa-section--white  { background: #fff; }
.nwa-section--light  { background: var(--nwa-surface); }
.nwa-section--dark   { background: var(--nwa-blue-900); color: #fff; }
.nwa-section--dark a:not([class]) { color: var(--nwa-cyan-400); }
.nwa-section--accent { background: var(--nwa-cyan-500); color: #fff; }
.nwa-section--accent p,
.nwa-section--accent h2,
.nwa-section--accent h3,
.nwa-section--accent h4,
.nwa-section--accent ul,
.nwa-section--accent ol,
.nwa-section--accent li,
.nwa-section--accent a:not([class]) { color: #fff; }
.nwa-section h2 { margin-top: 0; }

.nwa-article h2,
.nwa-article h3,
.nwa-article h4 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }

.nwa-article p  { margin-bottom: var(--space-md); }

.nwa-article ul,
.nwa-article ol {
  padding-left: 1.5rem;
  margin-bottom: var(--space-md);
  color: var(--nwa-text-500);
  line-height: 1.8;
}
.nwa-article li { margin-bottom: 0.35rem; }

/* Stat-Card-/Feature-Grids im Fließtext brauchen eigenen Abstand nach unten */
.nwa-article .nwa-grid { margin-bottom: var(--space-xl); }

.nwa-article a:not([class]) {
  color: var(--nwa-blue-600);
  text-decoration: underline;
  text-decoration-color: rgba(37,88,164,0.35);
  text-underline-offset: 3px;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.nwa-article a:not([class]):hover {
  color: var(--nwa-cyan-500);
  text-decoration-color: var(--nwa-cyan-500);
}

/* Blockquote */
.nwa-article blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  border-left: 4px solid var(--nwa-cyan-500);
  background: var(--nwa-blue-50);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-lg);
  color: var(--nwa-text-700);
  font-style: italic;
  line-height: 1.7;
}
.nwa-article blockquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--nwa-text-300);
}

/* Tabellen */
.nwa-article table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: var(--space-xl) 0;
  font-size: var(--fs-sm);
}
.nwa-article th {
  background: var(--nwa-blue-900);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-align: left;
}
.nwa-article td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--nwa-border);
  color: var(--nwa-text-500);
}
.nwa-article tr:nth-child(even) td { background: var(--nwa-slate-50); }
.nwa-article tr:last-child td     { border-bottom: none; }

/* Bilder */
.nwa-article img {
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
}
.nwa-article figure { margin: var(--space-xl) 0; }
.nwa-article figcaption {
  font-size: var(--fs-xs);
  color: var(--nwa-text-300);
  text-align: center;
  margin-top: var(--space-sm);
}

/* Code */
.nwa-article code {
  background: var(--nwa-blue-50);
  color: var(--nwa-blue-700);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  font-size: 0.88em;
}
.nwa-article pre {
  background: var(--nwa-blue-900);
  color: var(--nwa-cyan-400);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-xl) 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.nwa-article pre code { background: none; color: inherit; padding: 0; }

/* Trennlinie */
.nwa-article hr {
  border: none;
  border-top: 1px solid var(--nwa-border);
  margin: var(--space-2xl) 0;
}

/* ── Artikel-Meta ─────────────────────────────────── */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--nwa-border);
}
.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--nwa-text-300);
}
.article-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Tags ─────────────────────────────────────────── */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--nwa-border);
}
.article-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--nwa-blue-700);
  background: var(--nwa-blue-50);
  border: 1px solid var(--nwa-blue-100);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.article-tag:hover {
  background: var(--nwa-blue-100);
  color: var(--nwa-blue-900);
}

/* ── Pagination ───────────────────────────────────── */
.nwa-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-3xl);
}
.nwa-pagination a,
.nwa-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nwa-pagination a {
  color: var(--nwa-text-700);
  background: var(--nwa-surface);
  border: 1px solid var(--nwa-border);
}
.nwa-pagination a:hover {
  background: var(--nwa-blue-900);
  color: #fff;
  border-color: var(--nwa-blue-900);
}
.nwa-pagination .active,
.nwa-pagination span.active {
  background: var(--nwa-blue-900);
  color: #fff;
  border: 1px solid var(--nwa-blue-900);
}
.nwa-pagination .disabled {
  color: var(--nwa-text-300);
  pointer-events: none;
}

/* ── Blog-Layout (Kategorie) — volle Texte statt Kachel-Grid ─ */
/* Modernes Changelog-Layout: schmale Datumsspalte links, Inhalt rechts.
   Trennung ausschließlich über eine Linie zwischen den Einträgen — keine
   durchgehende Akzentlinie, die über die ganze Liste "durchläuft". */
.news-feed { display: flex; flex-direction: column; gap: var(--space-md); }

/* Jeder Eintrag ein eigenes weißes Feld auf dem grauen Seiten-Hintergrund —
   ohne Rahmen/Schatten, damit es nicht wie eine klassische Karte wirkt. */
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-xl);
  background: var(--nwa-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.news-item-date {
  position: relative;
  padding-top: 0.3rem; /* optische Ausrichtung auf die Titel-Grundlinie */
  padding-left: 1rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--nwa-text-300);
}
/* Akzent-Element pro Eintrag: isolierter Punkt statt durchgehender Linie */
.news-item-date::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nwa-cyan-500);
}

/* Feste Spalte 2, damit .news-item-main auch dann in der Inhaltsspalte
   bleibt, wenn das Datum ausgeblendet ist (sonst rutscht es als einziges
   Grid-Kind in die schmale Datumsspalte). */
.news-item-main { grid-column: 2; }

.news-item-title {
  font-size: var(--fs-2xl); font-weight: 700;
  color: var(--nwa-text-900); letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}
.news-item-title a { color: inherit; }
.news-item-title a:hover { color: var(--nwa-blue-700); }

.news-item-body { font-size: var(--fs-base); color: var(--nwa-text-700); line-height: 1.8; }
.news-item-body > *:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .news-item { grid-template-columns: 1fr; gap: var(--space-xs); }
  .news-item-date { padding-top: 0; }
  .news-item-main { grid-column: auto; }
}

/* ── Weißes Feld für den einzelnen Artikel ───────── */
/* Wie .news-item: nur der News-Beitrag wird weiß, nicht die ganze Seite und
   nicht die eigenständigen Artikel-Menüpunkte (Genossenschaft, Technische
   Daten, …) — .com-content-article--blog wird nur gesetzt, wenn der Artikel
   aus einer Kategorie-Liste (News) kommt, siehe $isStandalonePage in
   com_content/article/default.php. Kein Rahmen/Schatten, keine Karte. */
.com-content-article--blog {
  background: var(--nwa-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
}
@media (max-width: 640px) { .com-content-article--blog { padding: var(--space-xl); } }

/* ── Joomla-Pager (nativ) ─────────────────────────── */
.com-content-category-blog__pagination .pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  list-style: none;
  margin-top: var(--space-3xl);
}
.com-content-category-blog__pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--nwa-text-700);
  background: var(--nwa-surface);
  border: 1px solid var(--nwa-border);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.com-content-category-blog__pagination .page-link:hover {
  background: var(--nwa-blue-900); color: #fff; border-color: var(--nwa-blue-900);
}
.com-content-category-blog__pagination .active .page-link {
  background: var(--nwa-blue-900); color: #fff; border-color: var(--nwa-blue-900);
}
.com-content-category-blog__pagination .disabled .page-link {
  color: var(--nwa-text-300); pointer-events: none;
}

/* ── Intro-Text-Card (Kategorie-Beschreibung) ─────── */
.category-desc {
  background: var(--nwa-blue-50);
  border-left: 4px solid var(--nwa-cyan-500);
  padding: var(--space-lg) var(--space-xl);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-2xl);
  color: var(--nwa-text-700);
  font-size: var(--fs-base);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .nwa-article blockquote { padding: var(--space-md) var(--space-lg); }
}