/* ============================================================================
   U³ — Artikel (Blog) · Übersicht, Teaser (Startseite), Artikel-Detail
   Baut auf tokens.css + styles.css + za.css. Nur var(--u3-…).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Editoriale Hairline-Liste (Übersicht + Startseiten-Teaser)
   Meta links, Titel/Excerpt rechts. Trägt lange wie kurze Titel sauber.
   --------------------------------------------------------------------------- */
.art-list { border-top: 1px solid var(--u3-line); }
.art-row { display: grid; grid-template-columns: 150px 1fr; gap: 40px;
  padding: 36px 0; border-bottom: 1px solid var(--u3-line); align-items: start; }
.art-row__meta { display: flex; flex-direction: column; gap: 7px; padding-top: 6px; }
.art-row__cat { font-family: var(--u3-font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--u3-petrol-ink); white-space: nowrap; }
.art-row__date { font-family: var(--u3-font-mono); font-size: 11px; letter-spacing: .6px; color: var(--u3-ink-3); white-space: nowrap; }
.art-row__body { max-width: 640px; }
.art-row__title { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(22px, 2.5vw, 29px);
  line-height: 1.2; letter-spacing: -0.3px; color: var(--u3-petrol-ink); text-wrap: balance; }
a.art-row__title { display: inline-block; transition: color .2s ease; }
a.art-row__title:hover { color: var(--u3-petrol); }
.art-row__excerpt { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--u3-ink-2); text-wrap: pretty; }
.art-row__link { margin-top: 18px; }

/* Startseiten-Teaser: etwas kompakter, mit Kopf + „Alle Artikel" */
.art-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.art-teaser__head h2 { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.4px; color: var(--u3-petrol-ink); margin-top: 14px; }
.art-teaser .art-row__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------------------
   Artikel-Detail
   --------------------------------------------------------------------------- */
.art-hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.art-hero__meta .u3-mono { color: var(--u3-on-petrol-label); white-space: nowrap; }
.art-hero__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--u3-on-petrol-label); opacity: .6; }
.art-hero__title { font-size: clamp(30px, 4vw, 50px); margin-top: 18px; max-width: 22ch; }

.art-wrap { max-width: 720px; }
.art-standfirst { font-size: clamp(19px, 2vw, 22px); line-height: 1.6; color: var(--u3-petrol-ink);
  font-weight: 300; padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid var(--u3-line); text-wrap: pretty; }
.art-body > p { font-size: clamp(16.5px, 1.7vw, 18px); line-height: 1.78; color: var(--u3-ink-2); margin-bottom: 22px; text-wrap: pretty; }
.art-body > p:first-child::first-letter { /* dezent, kein Schmuck-Initial */ }
.art-foot { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--u3-line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .art-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .art-row__meta { flex-direction: row; gap: 14px; align-items: baseline; padding-top: 0; }
  .art-row__body { max-width: none; }
}