/* FinNuria editorial illustrations, release 2026-10-06, revision g.
   Loaded only by /, /privatkunden/ and /geschaeftskunden/, after the shared stylesheet
   (finnuria.20261006f.css), whose tokens it uses. One original local SVG per page, shown
   as <img> with intrinsic width/height; the reserved aspect ratio prevents layout shift.
   Nothing here changes the shared components; rules only apply where an .illu exists.
   Filename is versioned because /assets is served with a long immutable cache. */

.illu { margin: 0; }
.illu img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.illu--home img,
.illu--business img { aspect-ratio: 640 / 480; }
.illu--private img { aspect-ratio: 480 / 560; }

/* Home and Geschäftskunden: below the section head on small screens, beside it from
   60rem. The content that follows (audiences, topic index) keeps its full width. */
.illu--wide {
  width: 100%;
  max-width: 34rem;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
}
@media (min-width: 60rem) {
  .wrap:has(> .illu--wide) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 1rem + 3vw, 6rem);
    align-items: center;
  }
  .wrap:has(> .illu--wide) > * { grid-column: 1 / -1; }
  .wrap:has(> .illu--wide) > .section-head { grid-column: 1; grid-row: 1; }
  .wrap:has(> .illu--wide) > .illu--wide { grid-column: 2; grid-row: 1; justify-self: end; max-width: 36rem; }
}

/* Privatkunden: inside the chapter head of "Absicherung", below its short introduction. */
.illu--private {
  width: 100%;
  max-width: 20rem;
  margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
@media (min-width: 60rem) {
  .illu--private { max-width: 24rem; }
}
/* The sticky chapter head stays sticky only where head and illustration fit the screen. */
@media (min-width: 60rem) and (max-height: 51.99rem) {
  .chapter__head:has(> .illu) { position: static; }
}

@media print {
  .illu { display: none; }
}