/* artikel.css — Artikel-Detailseite + High-End-Galerie (A1).
   Nutzt ausschliesslich bestehende ASI-Tokens aus style.css (keine neuen Farben/Fonts).
   Geladen NACH style.css → Overrides greifen. */

/* ------------------------------------------------------------------ *
   ARTIKEL-KOPF  (Medium-Rhythmus: Textspalte, prose 680px)
 * ------------------------------------------------------------------ */
.article-head { max-width: 680px; margin: 0 auto; }
.article-head .breadcrumbs { margin-bottom: 32px; }
.article-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.article-head h1 { margin: 24px 0 0; }
.article-head .article-lead { margin-top: 24px; }
.article-author { margin-top: 32px; }

/* Pull-Quote-Stil fuer Lexical-<blockquote> im Fliesstext (aus richtext.ts).
   Hebt Zitate im ASI-Look hervor — Display-Font, luftig, Stahlblau-Akzent. */
.prose blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--blue);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose blockquote p { margin: 0 0 12px; }
.prose blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
   GALERIE  (Masonry via CSS-columns — 2 Spalten mobil, 3 ab 768px)
   Kein Layout-Sprung: jede Kachel reserviert Hoehe via aspect-ratio.
 * ------------------------------------------------------------------ */
.gallery-section .section__inner { max-width: 1184px; }
.gallery-head { margin-bottom: clamp(28px, 4vw, 44px); }

.gal {
  column-count: 2;
  column-gap: 16px;
}
@media (min-width: 768px) {
  .gal { column-count: 3; column-gap: 20px; }
}

.gal__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  text-align: left;
  font: inherit; color: inherit;
  /* Scroll-Reveal Startzustand */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (min-width: 768px) { .gal__item { margin-bottom: 20px; } }
.gal__item.is-in { opacity: 1; transform: none; }

/* Reduced-Motion: sofort sichtbar, keine Bewegung */
@media (prefers-reduced-motion: reduce) {
  .gal__item { opacity: 1; transform: none; transition: none; }
}

.gal__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 3 / 4);
  overflow: hidden;
  border-radius: var(--r-4);
  background: var(--blue-dk); /* Platzhalter-Grund bis Bild geladen ist */
}
.gal__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.gal__item:hover .gal__media img { transform: scale(1.04); }

/* Video-Kacheln: Play-Badge + dezenter Verlauf */
.gal__media--video::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,24,39,0) 40%, rgba(17,24,39,0.45) 100%);
  pointer-events: none;
}
.gal__badge {
  position: absolute; z-index: 2;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(17,24,39,0.28);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.gal__item:hover .gal__badge { transform: translate(-50%, -50%) scale(1.08); }
.gal__badge svg { width: 22px; height: 22px; margin-left: 3px; }

.gal__vpill {
  position: absolute; z-index: 2; left: 12px; top: 12px;
}

/* Fallback-Video-Kachel (Playlist ohne Thumbnail): Titel + Play im Blue-Look */
.gal__media--fallback {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--blue-acct) 0%, var(--blue-dk) 60%, var(--ink) 100%);
}

/* Caption: Desktop dezent beim Hover ueber dem Bild, Mobile darunter */
.gal__cap {
  font-size: 13px; line-height: 1.45;
  color: var(--muted);
  margin-top: 10px;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .gal__cap {
    position: absolute; z-index: 3;
    left: 0; right: 0; bottom: 0;
    margin: 0; padding: 28px 16px 14px;
    color: #fff;
    background: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(17,24,39,0.72) 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    pointer-events: none;
  }
  .gal__item:hover .gal__cap,
  .gal__item:focus-visible .gal__cap { opacity: 1; transform: none; }
  /* Bei Desktop liegt Caption im Media-Container → Kachel = nur Media */
  .gal__item .gal__media { border-radius: var(--r-4); }
}

.gal__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-4); }

/* ------------------------------------------------------------------ *
   LIGHTBOX  (Fullscreen-Modal ueber allem)
 * ------------------------------------------------------------------ */
html.lb-open, html.lb-open body { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.lb.is-open { opacity: 1; visibility: visible; }

.lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(12,17,26,0.94);
  border: 0; padding: 0; margin: 0;
  cursor: zoom-out;
}

.lb__stage {
  position: relative; z-index: 2;
  width: min(94vw, 1200px);
  max-height: 92vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; /* nur Inhalte fangen Klicks */
}
.lb__frame {
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  transform: scale(0.98);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lb.is-open .lb__frame { transform: scale(1); opacity: 1; }
.lb__frame.is-swapping { opacity: 0; transform: scale(0.985); }

.lb__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--r-4);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  object-fit: contain;
}
.lb__video {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
}
.lb__video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: var(--r-4);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.lb__cap {
  pointer-events: auto;
  margin-top: 18px;
  max-width: 760px;
  text-align: center;
  color: rgba(255,255,255,0.82);
  font-size: 15px; line-height: 1.5;
}
.lb__count {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 12px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}

/* Steuer-Buttons */
.lb__btn {
  position: absolute; z-index: 4;
  display: grid; place-items: center;
  min-width: 48px; min-height: 48px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lb__btn:hover { background: rgba(255,255,255,0.22); }
.lb__btn:active { transform: scale(0.94); }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__btn svg { width: 22px; height: 22px; }

.lb__close { top: max(16px, env(safe-area-inset-top)); right: 16px; }
.lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb__prev:active { transform: translateY(-50%) scale(0.94); }
.lb__next:active { transform: translateY(-50%) scale(0.94); }

@media (max-width: 640px) {
  .lb__prev { left: 8px; }
  .lb__next { right: 8px; }
  .lb__stage { width: 100vw; }
  .lb__img { max-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__frame { transition: opacity .01s; }
}