/* ============================================================
   images-styles.css — Bild-/Figure-Stile (Rasenquote)
   Ergänzt die Komponentenstile aus index.html, nutzt dieselben
   Design-Tokens (Farben, Radius, Schatten, Schriften).
   ============================================================ */

/* Content-Figure: redaktionelles Bild im Textfluss, innerhalb
   der [data-content]-Sektionen. Bleibt in der Textspalte. */
.content-figure{
  margin:2.2em auto;
  max-width:100%;
}

.content-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0 auto;
  aspect-ratio:1200 / 675;
  object-fit:cover;
  background:var(--bg-muted, #eceeec);
  border:1px solid var(--border, #dde3e0);
  border-radius:var(--radius, 10px);
  box-shadow:var(--shadow-card, 0 1px 2px rgba(20,23,22,.05),0 10px 26px rgba(20,23,22,.07));
}

.content-figure figcaption{
  text-align:center;
  font-family:var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:.8rem;
  line-height:1.5;
  color:var(--text-muted, #5b6360);
  margin-top:.7em;
  padding:0 .5rem;
  letter-spacing:.01em;
}

/* Hero-Figure: randlos in der Hero-Sektion, ohne Bildunterschrift.
   Seitenverhältnis 1200x630 passend zum Hero-Asset. */
.hero .content-figure,
.hero .hero-figure{
  margin-top:clamp(2rem,5vw,3.25rem);
  margin-bottom:0;
}
.hero-figure img,
.hero .hero-image{
  aspect-ratio:1200 / 630;
}

/* Schutz gegen Überlauf / horizontales Scrollen */
.content-figure,
.content-figure img,
.hero-figure img{
  max-width:100%;
}

/* Responsiv: engere Innenabstände auf kleinen Viewports */
@media (max-width:768px){
  .content-figure{margin:1.8em auto}
  .content-figure figcaption{font-size:.78rem}
}

@media (max-width:480px){
  .content-figure img{border-radius:8px}
  .content-figure figcaption{font-size:.76rem}
}

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