/* ============================================================
   images-styles.css — Stile für Inhaltsbilder (Quotenkurve)
   Ergänzt die Theme-Variablen aus index.html (:root).
   Geladen nach dem Inline-Style → konsistente Bilddarstellung.
   Ziel: nichts beschnitten, responsiv, ruhige Dark-Theme-Optik.
   ============================================================ */

/* Figure-Container für Inhaltsbilder */
figure{
  margin:2.2rem auto;
  max-width:100%;
  text-align:center;
}

/* Bilder: voll sichtbar, nie beschnitten, responsiv */
figure img,
img.article-image,
img.hero-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;            /* kein Crop — natürliches Seitenverhältnis */
  margin:0 auto;
  border-radius:var(--radius,10px);
}

/* Content-Bilder: dezenter Rahmen + Tiefe, Ladefläche im Theme-Ton */
figure img.article-image{
  border:1px solid var(--border,#2A2F2C);
  background:var(--surface,#1a1c1a);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.75);
  aspect-ratio:1200 / 750;
  object-fit:cover;       /* füllt den Rahmen ohne Verzerrung */
}

/* Hero-Bild: Seitenverhältnis fix, im Theme verankert */
figure img.hero-image{
  border:1px solid var(--border,#2A2F2C);
  aspect-ratio:1200 / 630;
  object-fit:cover;
}

/* Bildunterschrift — mono, gedämpft, zentriert */
figure figcaption{
  margin-top:.8rem;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-muted,#8B9690);
  letter-spacing:.01em;
  text-align:center;
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}

/* Sanftes Erscheinen ohne Layout-Shift (lazy-Bilder) */
img.article-image{
  transition:opacity .4s ease;
}

/* Adaptiv: Abstände auf kleinen Viewports reduzieren */
@media (max-width:768px){
  figure{margin:1.7rem auto}
  figure figcaption{font-size:.78rem}
}
@media (max-width:480px){
  figure{margin:1.4rem auto}
  figure img.article-image,
  figure img.hero-image{border-radius:8px}
}

@media (prefers-reduced-motion:reduce){
  img.article-image{transition:none}
}