/* =========================================================
   images-styles.css — Bild- und Figure-Stile für Quotenparkett
   Abgestimmt auf die Design-Tokens aus index.html
   (Palette §5, Typografie §7 der design-spec.md).
   Greift die CSS-Variablen --border, --muted, --radius,
   --shadow-md, --font-body wieder auf (im :root von index.html
   definiert) und ergänzt sie mit sicheren Fallbacks.
   ========================================================= */

/* --- Article-Figure: zentriert, in der Textspalte, nichts abgeschnitten --- */
[data-content] > figure,
article figure{
  margin: 2em auto;
  max-width: 100%;
  width: 100%;
  text-align: center;
}

/* --- Article-Bild: vollständig sichtbar, weiche Kanten, dezenter Schatten --- */
.article-image{
  display: block;
  width: 100%;
  height: auto;                 /* Seitenverhältnis halten — nichts verzerren */
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;          /* nie beschneiden */
  border: 1px solid var(--border, #e6ddd1);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md, 0 2px 6px rgba(31,27,22,.06), 0 10px 24px rgba(31,27,22,.06));
  background: #fff;
}

/* --- Bildunterschrift: Mono-untertont, gemutet, zentriert --- */
figure > figcaption{
  margin-top: .7em;
  padding: 0 .4rem;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: .85rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted, #6f6456);
  text-align: center;
}

/* --- Hero-Bild: full-width innerhalb des Hero, ohne Border (eigene Optik) --- */
.hero figure{
  margin: 1.6rem auto 0;
}
.hero-image{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md, 0 2px 6px rgba(31,27,22,.06), 0 10px 24px rgba(31,27,22,.06));
}

/* --- Responsive: auf schmalen Viewports volle Breite, kleinere Caption --- */
@media (max-width: 768px){
  [data-content] > figure,
  article figure{
    margin: 1.5em auto;
  }
  figure > figcaption{
    font-size: .8rem;
  }
}

@media (max-width: 480px){
  .article-image{
    border-radius: 8px;
  }
  figure > figcaption{
    font-size: .78rem;
    padding: 0 .2rem;
  }
}