/* ============================================================
   images-styles.css — Bild- und Figure-Stile (Quotenhexagon)
   Abgestimmt auf die Design-Tokens aus index.html.
   ============================================================ */

:root{
  --img-radius:6px;
  --img-border:#2b2f38;
  --img-surface:#15171c;
  --img-caption:#8a92a3;
  --img-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.28);
}

/* Inhalts-Figuren innerhalb der Artikel-Sektionen */
.article-figure{
  margin:2rem auto;
  max-width:100%;
  display:block;
}

.article-figure .article-image,
.article-image{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0 auto;
  border:1px solid var(--img-border);
  border-radius:var(--img-radius);
  background:var(--img-surface);
  box-shadow:var(--img-shadow);
}

.article-figure figcaption{
  text-align:center;
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-style:italic;
  font-size:.85rem;
  line-height:1.5;
  color:var(--img-caption);
  margin-top:.7rem;
  padding:0 .5rem;
}

/* Hero-Bild: randvoll, ohne Caption, bewusst auffälliger Rahmen */
.hero figure{
  margin-top:clamp(2rem,5vw,3.25rem);
  margin-bottom:0;
}
.hero .hero-image{
  border:1px solid var(--img-border);
  border-radius:var(--img-radius);
  box-shadow:var(--img-shadow);
}

/* Keine seitliche Überdehnung, sauberes Seitenverhältnis */
.article-figure img{
  object-fit:cover;
}

@media (max-width:768px){
  .article-figure{margin:1.6rem auto}
  .article-figure figcaption{font-size:.82rem}
}

@media (max-width:480px){
  .article-figure{margin:1.3rem auto}
}