/* ══════════════════════════════════════════════════════════
   Artikel / Lauftext
══════════════════════════════════════════════════════════ */

.article {
  background: var(--color-surface);
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
}

/* Durchgehender dekorativer Muster-Hintergrund für Artikel-Gruppen */
.article-group-canvas {
  background-image: url('assets/system/background_427141456.avif');
  background-position: top center;
  background-repeat: repeat;
}

.article-group-canvas .article,
.article--transparent {
  background: transparent !important;
}

/* Redaktioneller Rhythmus für mehrteilige Artikel mit Image-Reveal */
.article-group-canvas > .article:first-of-type {
  padding-bottom: var(--space-16, 1rem);
}
.article-group-canvas > .image-reveal-section {
  padding-block: var(--space-48, 3rem);
}
.article-group-canvas > .image-reveal-section:last-child {
  padding-bottom: var(--section-padding-block) !important;
}
.article-group-canvas > .article:last-of-type {
  padding-top: var(--space-16, 1rem);
}
.article-group-canvas > .article:only-of-type {
  padding-block: var(--section-padding-block);
}

/* Lesespalte: optimale Zeilenlänge — Premium Newsroom Standard (653px) */
.article__body {
  max-width: 653px;
  margin-inline: auto;
  font-size: var(--body-fs);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.article__body p {
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  color: var(--text-color);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
/* Ein Zeilenabstand als Absatzabstand (Vertical Rhythm): body-fs × body-lh = 28.5px,
   keine Space-Token-Stufe trifft das exakt. */
.article__body p + p {
  margin-top: calc(var(--body-fs) * var(--body-lh));
}

/* Aufzählungen: Bullets in Akzentfarbe, bündig zur Lesespalte.
   Hängender Custom-Marker mit Premium-typisch ruhigem Bullet→Text-Abstand. */
.article__body ul {
  /* Gleicher Zeilenrhythmus wie Absätze — oben UND unten, nicht am UA-Default hängen */
  margin-block: calc(var(--body-fs) * var(--body-lh));
  padding-left: 0;
  list-style: none;
}
.article__body ul li {
  position: relative;
  padding-left: 1em; /* enge Bindung Bullet↔Text (Premium-Editorial) */
  font-size: var(--body-fs);
  line-height: var(--body-lh);
  color: var(--text-color);
  text-wrap: pretty; /* sauberer Flattersatz, keine Hurenkinder in umbrochenen Items */
}
.article__body ul li + li {
  /* Items näher zusammen als Absätze, aber mit ruhigem Atem */
  margin-top: var(--space-12);
}
/* Impeccable: echter CSS-Kreis statt Font-Glyph „•" → fontunabhängig,
   pixelgenau und exakt auf die optische Mitte der ersten Zeile zentriert.
   Umbrochene Zeilen bleiben durch padding-left bündig (hängender Einzug). */
.article__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--body-fs) * var(--body-lh) / 2);
  transform: translateY(-50%);
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: currentColor; /* farbneutral, erbt die Textfarbe */
}

.article__body a {
  color: var(--accent-color);
  text-decoration: none;
  background-image: linear-gradient(var(--accent-color), var(--accent-color));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  touch-action: manipulation;
  overflow-wrap: anywhere;
  word-break: normal;
  transition: background-size 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .article__body a:hover {
    background-size: 100% 1px;
  }
}

.article-quote {
  max-width: var(--container-980);
  margin-inline: auto;
  padding-block: clamp(var(--space-48), 8vw, var(--space-96));
  /* padding-inline removed to prevent double padding (section already has it) */
  text-align: center;
}

.article-quote--no-spacing {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

.article-quote__body {
  margin: 0;
  text-wrap: balance;
}

.article-quote__text {
  font-family: var(--textfont);
  font-size: var(--h3-fs);
  line-height: 1.08; /* Kompakter, typografisch wertiger (Premium-Stil) */
  font-weight: var(--weight-bold); /* TheSansOffice Bold (700) */
  color: var(--color-ink);
  letter-spacing: -0.022em; /* Engere Laufweite für einen kohärenten Textblock */
  margin-bottom: var(--space-40); /* More breathing room before author */
  margin-inline: auto;
  max-width: none;
  text-wrap: balance;
  position: relative;
}

/* Größerer Text für das Zitat nur auf dem iPhone */
@media (max-width: 767px) {
  .article-quote__text {
    font-size: var(--h2-fs);
  }
}

/* Elegante typografische Anführungszeichen */
.article-quote__text::before {
  content: "„";
}

.article-quote__text::after {
  content: "“";
}

.article-quote__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-24);
}

.article-quote__author {
  font-size: var(--body-fs);
  font-weight: var(--weight-semi);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.article-quote__role {
  font-size: var(--body-small-fs);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

/* ── Partial: BLOCKQUOTE-LONG (Für längere Texte / ausführliche Statements) ── */
.article-quote--long,
.article-quote--extended {
  max-width: var(--container-980); /* Gleiche Breite wie die normale Blockquote */
  margin-inline: auto;
  text-align: left;
}

.article-quote--long .article-quote__body,
.article-quote--extended .article-quote__body {
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

.article-quote--long .article-quote__text,
.article-quote--extended .article-quote__text {
  color: var(--text-color); /* Weichere, warme Textfarbe für längere Lesetexte */
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.5625rem); /* Harmonisch austarierte Lesegröße */
  line-height: 1.45; /* Optimierter, entspannter Zeilenabstand für perfekte Leserlichkeit */
  font-weight: var(--weight-semi, 600);
  letter-spacing: -0.006em; /* Natürlicheres, feineres Kerning */
  margin-bottom: var(--space-28, 1.75rem);
  margin-inline: 0;
  text-align: left;
  text-wrap: pretty;
}

.article-quote--long .article-quote__caption,
.article-quote--extended .article-quote__caption {
  align-items: flex-start;
  text-align: left;
}

.article-quote--long .article-quote__author,
.article-quote--extended .article-quote__author,
.article-quote--long .article-quote__role,
.article-quote--extended .article-quote__role {
  text-align: left;
}

.article-quote--long .article-quote__body p + p,
.article-quote--extended .article-quote__body p + p {
  margin-top: var(--space-16, 1rem);
}

.article-quote--long .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::before,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::before {
  content: none;
}
.article-quote--long .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::after,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) .article-quote__text::after {
  content: none;
}
.article-quote--long .article-quote__body:has(p:nth-of-type(2)) p:first-of-type::before,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) p:first-of-type::before {
  content: "„";
}
.article-quote--long .article-quote__body:has(p:nth-of-type(2)) p:last-of-type::after,
.article-quote--extended .article-quote__body:has(p:nth-of-type(2)) p:last-of-type::after {
  content: "“";
}

@media (max-width: 767px) {
  .article-quote--long .article-quote__text,
  .article-quote--extended .article-quote__text {
    font-size: 1.1875rem !important; /* 19px auf dem Smartphone */
    line-height: 1.45 !important;
    letter-spacing: -0.004em !important;
  }
}

/* ── Emil Kowalski Stagger Reveal for Partial: BLOCKQUOTE ── */
.article-quote.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  filter: blur(4px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
}

.article-quote.reveal .article-quote__text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.article-quote.reveal .article-quote__caption {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Staggered Entrance on .is-visible */
.article-quote.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-quote.reveal.is-visible .article-quote__text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.article-quote.reveal.is-visible .article-quote__caption {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

/* ── Image-Reveal & Fullbleed Bild innerhalb des Artikels (1200px limit) ── */
.article__body .image-reveal-section,
.article .image-reveal-section,
.article__fullbleed-figure {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -2px;
  padding-inline: calc(var(--section-padding-inline, 24px) + env(safe-area-inset-left));
  padding-block: var(--space-24, 1.5rem) var(--section-padding-block);
  background: var(--bg-white, #ffffff);
  box-sizing: border-box;
}

.article__fullbleed-link {
  max-width: 1200px;
  margin-inline: auto;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius, 32px);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.article__fullbleed-link:active {
  transform: scale(0.985);
}

.article__fullbleed-link:focus,
.article__fullbleed-link:focus-visible {
  outline: none !important;
}

.article__fullbleed-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  .article__fullbleed-figure.reveal.is-visible .article__fullbleed-link:hover .article__fullbleed-img,
  .article__fullbleed-link:hover .article__fullbleed-img {
    transform: scale(1.02) !important;
  }
}

/* Apple Liquid Specular Sheen Highlight */
.article__fullbleed-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.05) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  .article__fullbleed-link:hover::after {
    opacity: 1;
  }
}

.article__fullbleed-caption {
  font-size: var(--figcaption-fs, 0.875rem);
  font-weight: var(--figcaption-fw, 400);
  line-height: var(--figcaption-lh, 1.42857);
  letter-spacing: var(--figcaption-ls, 0.012em);
  color: var(--text-color, #1d1d1f);
  text-align: center;
  text-wrap: pretty;
  max-width: 653px; /* Bündig mit der Lesespalte (.article__body) für perfekte visuelle Kanten */
  margin-inline: auto;
  margin-top: var(--space-12, 0.75rem);
}

/* ── Apple Newsroom Signature Fullbleed Image Reveal (Tightened & Snappy) ── */
.article__fullbleed-figure.reveal {
  opacity: 1;
  transform: none;
  isolation: isolate;
}

.article__fullbleed-figure.reveal .article__fullbleed-link {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  box-shadow: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.4s ease-out,
              transform 0.4s ease-out,
              box-shadow 0.4s ease-out;
}

.article__fullbleed-figure.reveal .article__fullbleed-img {
  transform: scale(1.06);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.article__fullbleed-figure.reveal .article__fullbleed-caption {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

/* ── Apple Newsroom Active Visible State ── */
.article__fullbleed-figure.reveal.is-visible .article__fullbleed-link {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: var(--shadow-card);
  transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.article__fullbleed-figure.reveal.is-visible .article__fullbleed-img {
  transform: scale(1);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.article__fullbleed-figure.reveal.is-visible .article__fullbleed-caption {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.12s,
              transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .article__fullbleed-figure.reveal .article__fullbleed-link,
  .article__fullbleed-figure.reveal .article__fullbleed-img,
  .article__fullbleed-figure.reveal .article__fullbleed-caption {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
    transition: none !important;
  }
}

/* ── Utility: visuell versteckt (für Screenreader) ────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Harmonische vertikale Abstände & Transparenz innerhalb der Artikel-Gruppen ── */
.article-group-canvas .article__fullbleed-figure {
  background: transparent;
}

section:has(> .container > .article-quote--no-spacing) {
  padding-block: 0;
}

.article__body > .section-subheadline:first-child {
  margin-top: 0;
}

.article-group-canvas > .article {
  padding-block: var(--section-padding-block);
}

.article-group-canvas > section:first-child:not(.article) {
  padding-top: var(--section-padding-block) !important;
}

.article-group-canvas > .article:has(+ section:not(.article)),
.article-group-canvas > .article:has(+ [data-component]) {
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.article-group-canvas > section:not(.article) + .article,
.article-group-canvas > [data-component] + .article {
  padding-top: clamp(2rem, 3.5vw, 3rem);
}

.article-group-canvas > .article + .image-reveal-section:has(+ .article) {
  padding-block: 0;
}

.article-group-canvas > section:not(.article) + .article:has(.article__body > .article__fullbleed-figure:first-child) {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.article__body > .article__fullbleed-figure {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}

.article__body > .article__fullbleed-figure:first-child {
  padding-top: 0;
}

.article__body > .article__fullbleed-figure:last-child {
  padding-bottom: 0;
}

.article__body > .article__fullbleed-figure + .article__fullbleed-figure {
  padding-top: 0;
}

.article__body > .article__fullbleed-figure + .section-subheadline {
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}

.article__body > .section-subheadline + .article__fullbleed-figure {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ── Variante: Bild auf Lesespaltenbreite (653px) begrenzt ── */
.article__fullbleed-figure--narrow {
  width: 100%;
  margin-left: 0;
  padding-inline: 0;
}

.article__fullbleed-figure--narrow .article__fullbleed-link,
.image-reveal--narrow .image-reveal__content,
.image-reveal--narrow .image-reveal__frame {
  max-width: 653px;
}