/* ==========================================================
Pucklinie — Bilder-Styles
Wird in als
eingebunden. Stile gelten zusätzlich zu den Hero-Regeln in
index.html (figure innerhalb [data-content="hero"]).
========================================================== */
/* Inline-Bilder im Artikeltext: */
.article-figure {
margin: 2.5rem auto;
max-width: 740px;
text-align: left;
}
.article-figure img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(15, 20, 24, 0.06),
0 8px 24px rgba(15, 20, 24, 0.04);
background: #f7f9fb;
}
.article-figure figcaption {
margin-top: 0.85rem;
padding-left: 0.9rem;
border-left: 3px solid #1981cc;
color: #5b6770;
font-family: 'Source Serif 4', Georgia, serif;
font-style: italic;
font-size: 0.95rem;
line-height: 1.55;
}
/* Hero-Bild-Verfeinerung: dezenter Schatten, runde Ecken */
[data-content="hero"] figure img.hero-image {
border-radius: 10px;
box-shadow: 0 4px 10px rgba(15, 20, 24, 0.08),
0 16px 40px rgba(15, 20, 24, 0.06);
}
/* Tablet */
@media (max-width: 900px) {
.article-figure {
margin: 2rem auto;
}
.article-figure figcaption {
font-size: 0.9rem;
}
}
/* Mobile (375px-Breakpoint berücksichtigt) */
@media (max-width: 600px) {
.article-figure {
margin: 1.75rem 0;
max-width: 100%;
}
.article-figure img {
border-radius: 6px;
}
.article-figure figcaption {
padding-left: 0.75rem;
font-size: 0.875rem;
line-height: 1.5;
}
}