/* RSD News & Insights · Staging v1.1 · 02.10.2026 */

.insights-hero {
  background: var(--navy-deep);
  color: var(--white);
  padding: clamp(72px, 9vw, 126px) 0 clamp(64px, 8vw, 108px);
}
.insights-hero .eyebrow { color: #d9a7b1; }
.insights-hero .h-display,
.insights-hero .h-section { color: var(--white); }
.insights-hero .h-display { max-width: 18ch; }
.insights-hero .lead { margin-top: 24px; color: #dce3ec; }

.insights-list { padding: clamp(64px, 8vw, 112px) 0; }
.insights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); }
.insight-card { display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--bordeaux); background: var(--white); box-shadow: 0 12px 32px rgba(11,31,58,.09); }
.insight-card__media { display: block; overflow: hidden; background: var(--navy-deep); aspect-ratio: 16 / 9; }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.insight-card__media:hover img { transform: scale(1.025); }
.insight-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(24px, 3vw, 36px); }
.insight-card__body h2 { margin: 0; font-family: var(--serif); font-size: clamp(25px, 2.5vw, 34px); font-weight: 400; line-height: 1.16; color: var(--navy-deep); }
.insight-card__sub { margin-top: 14px; color: var(--steel); font-weight: 600; }
.insight-card__teaser { margin-top: 20px; color: var(--text); }
.insight-card__link { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 28px; color: var(--bordeaux); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.insight-card__link::after { content: "→"; font-size: 18px; line-height: 1; }
.insight-card__link:hover { color: var(--navy-deep); }

.article-head { padding: clamp(64px, 8vw, 108px) 0 clamp(42px, 6vw, 72px); }
.article-head .h-display { max-width: 20ch; }
.article-head .article-sub { max-width: 62ch; margin-top: 22px; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; color: var(--steel); }
.article-hero { margin: 0 auto; max-width: 1440px; padding: 0 var(--gutter); }
.article-hero picture { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-deep); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-body { padding: clamp(58px, 7vw, 96px) 0; }
.article-copy { max-width: 76ch; }
.article-copy .teaser { margin-bottom: 36px; padding-left: 24px; border-left: 3px solid var(--bordeaux); font-family: var(--serif); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.48; color: var(--navy-deep); }
.article-copy p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.72; }
.article-copy p + p { margin-top: 22px; }
.article-copy h2 { margin: clamp(50px, 6vw, 72px) 0 22px; font-family: var(--serif); font-size: clamp(27px, 3vw, 38px); font-weight: 400; line-height: 1.2; color: var(--navy-deep); }
.article-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.article-copy li { position: relative; padding: 17px 0 17px 28px; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; }
.article-copy li::before { content: "—"; position: absolute; left: 0; color: var(--bordeaux); }

.insight-gallery { padding: clamp(64px, 8vw, 112px) 0; background: var(--grey); }
.insight-gallery .section-head { max-width: 76ch; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.gallery-item { margin: 0; min-width: 0; background: var(--white); border-bottom: 3px solid var(--navy-deep); }
.gallery-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-deep); }
.gallery-media img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item figcaption { padding: 14px 16px 16px; color: var(--steel); font-size: 14px; line-height: 1.45; }

/* Die gelieferten AMB-Dateien 02–04 enthalten technisch angelegte schwarze
   Randflächen. Diese Darstellung blendet ausschließlich diese Randflächen aus;
   die Bilddateien und die redaktionell vorgegebene Reihenfolge bleiben erhalten. */
.gallery-media--amb-02 img { transform: scale(2.05); transform-origin: 0 50%; }
.gallery-media--amb-03 img { transform: scale(2.05); transform-origin: 42% 0; }
.gallery-media--amb-04 img { transform: scale(2.05); transform-origin: 0 38%; }

.article-back { padding: 0 0 clamp(64px, 8vw, 100px); }
.article-back a { color: var(--bordeaux); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.article-back a:hover { color: var(--navy-deep); }

@media (max-width: 1040px) {
  .insights-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .insights-hero { padding-top: 54px; }
  .article-head { padding-top: 50px; }
  .article-hero { padding: 0; }
  .article-hero picture,
  .gallery-media,
  .insight-card__media { aspect-ratio: 4 / 5; }
  .gallery-grid { grid-template-columns: 1fr; }
  .article-copy .teaser { padding-left: 18px; }
  .gallery-media--amb-02 img { transform: scale(3.45); transform-origin: 0 45%; }
  .gallery-media--amb-03 img { transform: scale(2.05); transform-origin: 58% 0; }
  .gallery-media--amb-04 img { transform: scale(2.1); transform-origin: 0 20%; }
  .gallery-media--amb-07 img { transform: scale(1.18); transform-origin: 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .insight-card__media img { transition: none; }
  .insight-card__media:hover img { transform: none; }
}